プラグイン不要で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チャンネル登録
とあるエクササイズ

\本を出版しました/

Seiji Aihara / 相原 征爾

Seiji Aihara / 相原 征爾

『独立は最強の解決法』という理念のもと、長期的な視野と絶妙なバランス感覚で人生を楽しむことをサポートする、ひとりビジネス専門税理士。ひとり社長。

得意な仕事はクラウド会計の導入・ペーパーレス化・経理業務効率化・各種シミュレーション・独立支援など。
遠方・オンライン・スポット対応可能です。
簿記がわからなくても、一から経理ができるようにお伝えします。
Windows・Mac両対応。

音楽、映画、インターネット、カレー、クラフトビールが大好き。

詳しいプロフィールはこちら
税理士事務所のHP・サービス一覧はこちら

著書 『知識・経験ゼロでも独立して人生を楽しむ方法』