【コピペでOK】WordPressの関連記事を2列以上でタイル状に表示する方法

読者の悩み

今のWordPressのテーマが、関連記事が1列しかない
関連記事を一画面で沢山見せたいんだけどな・・・

こんな悩みに答える記事になっています。

関連記事は、色々な人にクリックして欲しいもの。
それなのに、1列だと非常に見にくい・・・。

そんな方のために、関連記事を2列で表示する方法について解説していきます。

コピペで簡単に変更可能です！

関連記事を2列以上にし、デザインを見やすくきれいにすることで1画面でより多くの記事が目につくので、回遊率も上がります。

この記事の目次

関連記事をタイル化するためのHTML

まずはHTMLからいじっていきます。

関連記事を表示させるための場所（私の場合kanren.php)をいじっていきます。

表示したい記事数の指定が難しく書かれている後の部分を以下のHTMLに変更します。

最初にあるdivタグが関連記事内を囲っている要素になります。

kanren.php

<div class="random">
	<?php
	if ( $st_query->have_posts() ): ?>
	
		<?php
		while ( $st_query->have_posts() ) : $st_query->the_post(); ?>

<ul class="clearfix">
 <li><a href="<?php the_permalink() ?>">
 <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
 <?php the_post_thumbnail( 'medium' ); ?>
 <?php else: // サムネイルを持っていないときの処理 ?>
 <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
 <?php endif; ?>
	 <p><?php the_title(); ?></p>
 </a></li>
</ul>

 <?php endwhile; ?>
<?php else: ?>
 <p>関連記事はありませんでした</p>
	<?php endif; ?>
	<?php wp_reset_postdata(); ?>
</div>

なにをしているかというと、以下の画像のようなhtml構成にしています。

灰色：<div class=”random”>の部分
白色:aタグ（記事へのリンク)
画像:imgタグ(記事のサムネイル)
タイトル:pタグ

これらをulタグとliタグを使って列表示させている感じですね。

maipyon

意味が分からなければ、『HTMLの基本について解説した記事』を参考にしてみて下さい！

関連記事を2列以上でタイル化するためのCSS

つぎにCSSを設定して終わりです。

以下のCSSになります。

CSS

/*-- 関連記事エリア --*/
.random {
  padding: 0px;
  margin: 0px;
  text-align: center;/*記事エリアを中央揃え*/
}

.random a{
  transition: all ease-in-out .3s;
  display: block;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #F1F2F4;
  box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
  width: 230px;/*各自で調節してもOK*/
  height: 210px;/*各自で調節してもOK*/
  padding: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.random a:hover{
  cursor: pointer;
  box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
  -moz-transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}
 
.random ul {
  padding: 0px;
  margin: 0px;
  display: inline-block;/*横並びでブロック配置*/
}
 
.random li {
  float: left;
  position: relative;
  list-style: none;
}
 
.random li:last-child {/*記事の間隔*/
  margin-right: 10px;
  margin-bottom: 5px;
  margin-top: 5px;
}
 
.random li p{/*記事タイトル*/
  width: 90%;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.4em;
  text-align: left;
  padding-bottom: 0;
  margin-top: 0.5em;
  margin-left: 5%;
  color: #494949;
  /*タイトルを3行しか表示させないためのCSS*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.random li img{/*アイキャッチ画像*/
  width: 100%;/*画像幅*/
  height: 130px;/*画像の高さ*/
}

@media only screen and (max-width: 550px) {/*スマホ用*/
.random a{
  width: 130px;
  height: 120px;
}
.random li img{/*アイキャッチ画像*/
  width: 100%;/*画像幅*/
  height: 80px;/*画像の高さ*/
}
.random li p{/*記事タイトル*/
  font-size: 10px;
}
}

これで完成です。

各自で調節したほうがいい場所もあると思いますので、その辺りを説明します。