ウェブシュフでは、創設以来、similar postsプラグインを使って、投稿の後ろに関連記事リストを表示してきました。先日ふと思い立って、これをサムネイルつきリストにカスタマイズしたのでメモ。
なぜsimilar postsか
WordPressの関連記事表示プラグインは、similar postsとYARPPが有名です。
それぞれこのような特徴があります。
でも、ウェブシュフは、YARPPの「記事が少ないうちやカテゴリ、タグが整理されていないうちは関連記事が表示されにくい」という点が気に入りません。
それで、この点を忠実に実行してくれるsimilar postsがウェブシュフ愛用の関連記事表示プラグインとなりました。
similar postsの導入
まず、「post-plugin library」をインストールします。
WordPress管理画面の「プラグイン」→「新規追加」で検索窓に「post-plugin library」と入力すると、一番最初に「post-plugin library」がヒットするので、ワンタッチインストールして有効化します。
次に、「similar posts」のインストールです。
WordPress管理画面の「プラグイン」→「新規追加」で検索窓に「similar posts」と入力すると、一番最初に「similar posts」がヒットするので、ワンタッチインストールして有効化します。
有効化後「設定」のところに現れた「Similar Posts」をクリックすると上のような画面になります。
右上方の赤枠内のリンクをクリックして様々カスタマイズしていきます。
サムネイル付きリストにするための諸設定
ウェブシュフでは、各記事の末尾に、関連記事リストとして、同じカテゴリーに属する記事のうちで関連度の強いものを10個表示しています。
そのための設定は以下の通りです。ご参考にしていただければ幸いです。
General Settings
Output Settings
Output templateは
<li class="entry-header">
<a href="{url}">
<img class="entry-thumb" src="{imagesrc:0::?t}" alt="{title}" />
</a>
<div class="entry-title-thumb-right">
<a href="{url}">{title}</a> <time>{date:Y/m/d}</time>
</div>
</li>
その他は
Filter Settings
すべて空欄
Placement Settings
Acvtivate欄はすべてNo、他はすべて空欄
Other Settings
Manage index
英語の説明文の下にある設定エリアを以下のようにしています。
single.phpへの書き込み
記事の末尾など、関連記事を表示したい場所に以下を記入
<h2 class="similar-title">関連記事</h2>
<?php
similar_posts();
?>
style.cssへの書き込み
style.cssに以下の書き込みを行って、サムネイルリストにスタイルをあてる。
.entry-header .entry-thumb {
width:84px;
width:6rem;
float: left;
margin: 0 7px 7px 0;
margin: 0 0.5rem 0.5rem 0;
border: 1px solid #ededed ;
border: 0.07142857rem solid #ededed ;
box-shadow: 4.2px 4.2px 2.8px gray;
box-shadow: 0.3rem 0.3rem 0.2rem gray;
}
.entry-header .entry-thumb:hover {
opacity: 0.5;
}
.entry-header .entry-thumb:active {
box-shadow: 4.2px 4.2px 2.8px gray inset;
box-shadow: 0.3rem 0.3rem 0.2rem gray inset;
}
.entry-header .entry-title-thumb-right {
font-size: 14px;
font-size: 1rem;
line-height: 1.4;
font-weight: normal;
border:none;
}
.entry-header .entry-title-thumb-right time{
font-size: 9.8px;
font-size: 0.7rem;
display:inline-block;
}
.entry-header .entry-title-thumb-right a {
font-weight: normal;
padding: 0;
text-decoration: none;
display:inline;
}
.entry-header .entry-title-thumb-right a:hover {
font-weight: bold;
}
.similar-title {
font-size: 17.5px;
font-size: 1.25rem;
line-height: 1.2;
font-weight: bold;
border-color:#00a48c;
border-style:solid;
border-width:0 0 3.5px 21px;
border-width:0 0 0.25rem 1.5rem;
overflow: hidden;
height: auto;
margin:14px 0;
margin:1rem 0;
}
linkdinみたいな表示も十分可能
おつかれさまでした。ここまで来れば完成です。linkdin見たいな表示にも楽勝で変えられます。