関連記事をサムネイルつきで表示！similar postsをカスタマイズ

ウェブシュフでは、創設以来、similar postsプラグインを使って、投稿の後ろに関連記事リストを表示してきました。先日ふと思い立って、これをサムネイルつきリストにカスタマイズしたのでメモ。

なぜsimilar postsか

WordPressの関連記事表示プラグインは、similar postsとYARPPが有名です。

それぞれこのような特徴があります。

でも、ウェブシュフは、YARPPの「記事が少ないうちやカテゴリ、タグが整理されていないうちは関連記事が表示されにくい」という点が気に入りません。

それで、この点を忠実に実行してくれる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見たいな表示にも楽勝で変えられます。

投稿日

2012年12月12日

カテゴリー:

未分類

投稿者:

webshufu

　最終更新日:

2024年3月2日

タグ:

FPウェブシュフ