プラグイン不要でWordPressの記事下に関連記事を表示するカスタマイズ方法です。
タイル状のレスポンシブデザインで、パソコン・タブレットの場合は3列、スマホの場合は2列になります。
当サイトと同じで良ければ2回のコピペで完了します。
目次
single.phpに関連記事を呼び出すための記述をする
まずはテーマファイルのsingle.phpに以下のコードを記述します。
<!-- 関連記事 -->
<aside class="related">
<h4>Related
<em>関連記事</em></h4>
<ul>
<?php if(has_category() ) {
$cats =get_the_category();
$catkwds = array();
foreach($cats as $cat){
$catkwds[] = $cat->term_id;
}
} ?>
<?php $args = array(
'post_type' => 'post',
'posts_per_page' => '6',
'post__not_in' =>array( $post->ID ),
'category__in' => $catkwds,
'orderby' => 'rand'
);
$my_query = new WP_Query( $args );?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<li><a href="<?php the_permalink(); ?>">
<div class="img-box">
<?php if( has_post_thumbnail() ): ?>
<?php the_post_thumbnail('thumbnail'); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.gif" alt="no-img"/>
<?php endif; ?>
<figure class="related-img" style="background-image: url(<?php echo thumb_url( 'thumbnail' ); ?>); width=310px height=203px"></figure>
</div>
<div class="related-text">
<div class="related-title">
<?php the_title(); ?>
</div>
<div>
<time class="update-date">
<?php the_modified_date(); ?>
</time>
</div>
<!--カテゴリ-->
<div class="cat-data">
<?php if( has_category() ): ?>
<?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
<?php endif; ?>
</div>
</div>
</a></li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</ul>
</aside>h4の中のemは、当ブログのように「related」のサブタイトルとして「関連記事」を表示するための記述です。
不要であれば削除してください。
デザインを整える
cssでデザインを整えます。
当サイトのようなデザインにするにはこちらをstyle.cssにコピペしてください。
/* 関連記事 */
.related {
margin: 100px 0 5px 0;
padding: 0 0 10px 0;
}
.related h4 {
font-size: 1.9rem;
font-weight: 400;
letter-spacing: .5px;
text-align: center;
margin-bottom: 1.5em !important;
padding-bottom: 1em !important;
position: relative;
font-family: 'Allura',cursive;
font-style: normal;
color: #565656;
}
.related h4 em {
display: block;
font-size: .7rem;
font-style: normal;
font-weight: 300;
letter-spacing: .3rem;
padding-top: .2rem;
}
.related h4:before {
position: absolute;
bottom: 0;
left: 0;
right: 0;
content: ".";
font-size: 0;
display: block;
margin: auto;
width: 50px;
height: 1px;
background-color: #000;
transform: rotate(0deg);
}
.related ul {
font-size: 0;
margin: 10px 0;
padding: 0;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.related li {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 33.33%;
list-style: none;
vertical-align: top;
height: auto;
padding: 25px;
position: relative;
}
.related li a {
display: block;
text-decoration: none;
color: #000;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.related li a:hover {
color: #000070;
background-color: transparent;
cursor: pointer;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .2);
-moz-transform: translateY(-2px);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
.img-box {
overflow: hidden;
width: 100%;
height: 100%;
margin-bottom: 2rem;
box-sizing: border-box;
}
.related img {
display: block;
width: 100%;
height: 125px;
object-fit: cover;
max-width: 100%;
max-height: 100%;
-moz-transition: -moz-transform 0.5s linear;
-webkit-transition: -webkit-transform 0.5s linear;
-o-transition: -o-transform 0.5s linear;
-ms-transition: -ms-transform 0.5s linear;
transition: transform 0.5s linear;
margin: 0;
}
.related img:hover {
opacity: .85;
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
margin: 0;
background-color: transparent;
display: block;
padding: 0 !important;
max-width: 100%;
max-height: 100%;
min-height: 100%;
height: 125px;
width: 100%;
object-fit: cover;
}
.related-title {
margin-bottom: 1rem;
letter-spacing: .05em;
}
@media screen and (max-width: 599px) {
.related img {
height: 28vw;
object-fit: cover;
}
.related img:hover {
height: 28vw;
min-height: 28vw;
}
.related .img-box {
height: 28vw;
min-height: 28vw;
}
.related li {
width: 50%;
padding: 10px 5px;
}
}
.related .related-text {
font-size: .9rem;
font-weight: 400;
color: #454545;
text-align: left;
margin: 0;
line-height: 1.75;
}
.related-text .update-date {
font-size: .7rem;
font-family: 'Open Sans',"Helvetica Neue", sans-serif;
font-style: italic;
}
.related-text .cat-data {
font-size: .6rem;
font-style: italic;
font-family: 'Open Sans',"Helvetica Neue","Helvetica",'Avenir','Avenir Next Condensed', sans-serif;
letter-spacing: .02em;
}関連記事の1つ1つがタイル状のリンクなっており、マウスホバー時に画像が拡大します。
関連記事のタイトルと日付、カテゴリーはGoogle Fontsを使っています。
サービスメニュー
Postscript執筆後記
今日はブログ執筆と、デザインのカスタマイズを少し。昨日から色々なYouTubeを見ています。
おかげで少し夜更ししがちです…
Something New一日一新
先輩税理士のYouTubeチャンネル登録とあるエクササイズ
＼本を出版しました／
＼セルフマガジン無料送付／
