賢威7には、元々関連記事表示させるような仕組みがあります。

ですが、記事ごとに設定しないといけないので面倒です(ソースファイルを変更することで可能だが面倒)。また、サムネイル付きではありません。

というわけで、『Wordpress Related Posts』というプラグインを利用してサムネイル付きの関連記事表示をさせます。

Wordpress Related Posts

手順

手順はこちらです。

1、Wordpress Related Postsを検索してインストールし有効化する
2、Wordpress Related Postsの管理画面で、Basic settingsで、関連記事タイトルと関連記事表示数を入力
3、さらに、Advanced settingsのThemesで、Enable Themesをチェック、 Plain (your own css)をチェック
4、Advanced settingsのThemesで、CustomizeでDisplay Thumbnails For Related PostsとEnable custom CSSの2つをチェック
5、Enable custom CSS用として独自のCSSを入力する
6、Other SettingsでDisplay Related Posts in Feedにチェック

以上です

Enable custom CSS用のCSSについて

ここが賢威7でサムネイル付きの関連記事表示させる一番のポイントとなります。

『Wordpress Related Posts』では、関連記事表示のデザインをいろいろ選べるようになってますが、デフォルトのものを選んでもサムネイルが表示されません。

そのためカスタムCSSを選んで自分でCSSを設定する必要があります。

私の場合、Vertical (Medium)のスタイルにしたいのでこれをひな形にして改造をします。

このCSSは、プラグインの中のstaticというフォルダーの中のthemesの中にあるvertical-m.cssです。

中身はこちら。

.wp_rp_wrap .related_post_title {
clear: both;
padding: 0 !important;
margin: 0 !important;
}
div.wp_rp_content {
display: inline-block !important;
}

div.wp_rp_footer {
text-align: right !important;
overflow: hidden !important;
}
div.wp_rp_footer a {
display: inline-block !important;
color: #999 !important;
font-size: 11px !important;
text-decoration: none !important;
}
div.wp_rp_footer a.wp_rp_edit {
color: #fff !important;
font-size: 12px !important;
text-decoration: underline !important;
font-weight: bold !important;
background: #f79124 !important;
border-radius: 2px !important;
padding: 3px 6px;
}
ul.related_post {
display: inline-block !important;
position: relative !important;
margin: 0 !important;
padding: 0 !important;
}
ul.related_post li {
position: relative !important;
display: inline-block !important;
vertical-align: top !important;
zoom: 1 !important;
*display: inline !important;
width: 100px !important;
margin: 10px 10px 10px 0px !important;
padding: 0 !important;
background: none !important;
}
ul.related_post li a {
position: relative !important;
display: block !important;
font-size: 12px !important;
line-height: 1.5em !important;
text-decoration: none !important;
margin-bottom: 5px !important;
text-indent: 0 !important;
}
ul.related_post li img {
display: block !important;
width: 100px !important;
height: 100px !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;

border-radius: 3px !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

ul.related_post li a img.wp_rp_santa_hat {
display: none !important;
}

ul.related_post li small {
font-size: 80%;
}

@media screen and (max-width: 480px) {
ul.related_post li {
display: inline-block !important;
width: 100px !important;
clear: both !important;
}
ul.related_post li a:nth-child(1) {
float: left !important;
}
ul.related_post li a:nth-child(2) {
font-size: 14px !important;
}
ul.related_post li img {
width: 100px !important;
height: 100px !important;
}
}

ul.related_post li .wp_rp_category a {
display: inline !important;
}

この中の画像を表示させる部分を変更します。

<変更前>
ul.related_post li img {
display: block !important;
width: 100px !important;
height: 100px !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;

border-radius: 3px !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

<変更後>
ul.related_post li img {
display: block !important;
width: 100px !important;
height: 100px !important;
max-width: 100% !important;
}

実際に上記を行うことで下図のように表示されます。

まとめ

こちらを実現するのに、いろいろ試行錯誤しましたがなんとかできました。

あと、関連記事表示させる位置がデフォルトだとソーシャルボタンの上に表示されるのでこれを変えるために賢威のテーマのsingle.phpを編集しました。

関連記事表示を追加することで、アクセスが増えたり滞在時間が増えてサイトの評価が上がるといいなって思っています。さてどうなるでしょうかw。

関連記事表示させる位置を変更した時の参考サイト(感謝)
http://affili-me.com/wordpress-related-posts