関連記事を表示する「WordPress Related Posts」を少しカスタマイズしてtopページにも表示してみました。

WordPressの投稿に関連記事を表示するプラグインはいろいろありますが、私が最初に導入したのは「Yet Another Related Posts Plugin」でした。
「Yet Another Related Posts Plugin」は日本語対応。投稿と関連性の高い記事を自動選択して、トップページとシングルページに表示してくれます。
これまで関連する投稿のタイトルだけを表示していたのですが、急に画像表示もしてみたくなり設定を変えてサムネイル表示してみたところ、下図のような見た目になりました。

無理やり画像を縮小しているため、縦横比が合わなくてちょっと歪な画像になっています。
「Yet Another Related Posts Plugin」の仕様なのか、プラグインのせいではないのか確認はしていないのですが、この際他のプラグインを試してみることに。

「関連記事プラグイン WordPress Related Posts の初期設定の方法と使い方」を参照させていただき「WordPress Related Posts」をインストールしてみました。

下図が「WordPress Related Posts」の設定画面。機能が少ないので設定が簡単です。

8種類のレイアウトから表示タイプを選ぶことができます。
どのタイプもビジュアルがきれいです。

Momma

Modern

Vertical (Large)

Vertical (Medium)

Vertical (Small)
Pinterest Inspired

Two Columns
Plain (your own css)

今回は”Momma”を選択して関連投稿を10個表示してみました。
無理やり正方形に縮小することなく画像を切り取るので、すっきりした表示になります。

ログインしている状態なら、投稿ページに「Edit Related Posts」ボタンが表示されます。
ボタンをクリックすると、関連記事を入れ替えることができます。
親切な機能と言っていいのか？面倒と言えば面倒のような。楽しいオマケ機能です。

Auto Insert Related Posts(or add<?php wp_related_posts()?>to your single post template) にチェックを入れると、シングルページ（投稿個別記事）のみに関連投稿が表示されます。

チェックを外してテンプレートに直接下記コードを追加すれば、任意の場所に表示させることができる、ということなのでトップページとシングルページの両方に表示できるようにちょっとだけカスタマイズしてみました。

<?php wp_related_posts()?>

WordPressのテーマで使用しているcontent.phpの任意の場所にコードを挿入しました。
備忘録として下記にメモしておきます。

<br>
～省略～<br>
&lt;div class="entry-summary"&gt;<br>
	&lt;?php the_excerpt(); ?&gt;<br>
		&lt;/div&gt;<br>
&lt;!-- .entry-summary --&gt;<br>
		&lt;?php else : ?&gt;<br>
&lt;div class="entry-content"&gt;<br>
			&lt;?php the_content( __( 'Continue reading &lt;span class="meta-nav"&gt;&amp;rarr;&lt;/span&gt;', 'twentytwelve' ) ); ?&gt;<br>
			&lt;?php wp_link_pages( array( 'before' =&gt; '</p>
<p>&lt;div class="page-links"&gt;' . __( 'Pages:', 'twentytwelve' ), 'after' =&gt; '&lt;/div&gt;<br>
' ) ); ?&gt;<br>
		&lt;/div&gt;<br>
&lt;!-- .entry-content --&gt;<br>
		&lt;?php endif; ?&gt;<br>
         &lt;!--関連する投稿ここから --&gt;<br>
        &lt;?php wp_related_posts()?&gt;<br>
        &lt;!--関連する投稿ここまで --&gt;<br>
&lt;footer class="entry-meta"&gt;<br>
			&lt;?php twentytwelve_entry_meta(); ?&gt;<br>
～省略～<br>

追記：

2017年に「WordPress Related Posts」の使用をやめて、プラグイン無しで関連記事を表示させるようにしました。
⇒「プラグインを使わないで、関連する投稿記事を表示する」