関連記事プラグイン：Yet Another Related Posts Plugin（YARPP) カスタマイズ
2013年6月17日
Categories | ブログ（WordPress)
最近記事の下に「関連記事」なる、ブログ内の関連ページを抽出し、
サムネイル等でリンク貼り付けしてるブログを良く見かける。
あれって流行なのかな・・・
ビジュアル的にグットだし、ユーザーがブログ内をクロールし易くする
意図もあるんだろう。こりゃ真似っこしてみよう＾＾
ってことで、ググッてみたら
「LinkWithin」とか「Yet Another Related Posts Plugin」などの
プラグインだったんですね。
当方「Yet Another Related Posts Plugin」略してYARPPを導入しました。
何故にこれを選んだかというと、LinkWithin は登録が必要だから。
ただそれだけです。
では、Yet Another Related Posts Plugin をブログにインストールです。
ＤＬ先がこちら↓
↓
ダウンロードした圧縮ファイルを解凍し、テーマフォルダの「plugins」に
フォルダーごとアップロードします。
それからブログ（ダッシュボード）のプラグインで有効化するだけで、
関連記事らしきものがリストで単一記事のフッターに表示される。
ダッシュボードの「設定」めくると「関連記事 (YARPP) 設定」があるので、
そこで細かな表示設定ができる。
因みに何もいじらなくても、デフォルトはリストで関連記事が表示され
まぁ問題なく動きます。
しまい？
んにゃ、これから本題のカスタマイズします。
YARPPのカスタマイズ！！
「関連記事 (YARPP) 設定」でサムネイル表示をチョイスし
どない表示されるか確認したところ、あれ？なんで？
関連記事にサムネイルが表示されんです。
そう、当方今まで投稿時に「アイキャッチ画像」の設定をしたことありません。
なので当然ノーイメージですぅ。
で、試しにアイキャッチ画像を1記事に設定してみました。
え！どうして？
記事のヘッダー辺りにアイキャッチが表示されちゃいます。
ならばと、”content.php”をいじり非表示になるよう修正しまいた。
<?php the_post_thumbnail(); ?>
↓
<!-- <?php the_post_thumbnail(); ?> -->
非表示にしなくても、この関数を削除するだけでも良かったりします（笑）
問題点を攻略したところで、今度は当方ブログサイズに合うようにデザイン。
で、若干アレンジを加えたファイル「yarpp-template-relative.php」を
新たに作成しテーマフォルダーに追加（アップロード）。中身はこんな感じ
<h4 class='yarpp-related'>関連記事</h4>
<?php if ($related_query->have_posts()):?><?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
<div class="related-entry">
<a href="<?php the_permalink();?>" class="thumbnail">
<!-- アイキャッチ画像 -->
<?php
if (has_post_thumbnail()) {
the_post_thumbnail(array(150,150));
} else {
?>
<!-- アイキャッチが設定されていないときの画像 -->
<img src="wp-content/themes/hcz-blog/images/no-image.jpg">
<?php } ?></a>
<!-- 関連記事のタイトル部分 -->
<a href="<?php the_permalink();?>" title="<?php the_title_attribute(); ?>"><?php
echo mb_strimwidth($post->post_title, 0, 50, "…");
?></a></div>
<?php endwhile; ?>
<?php else: ?>
<p>No related posts.</p>
<?php endif; ?>
それから「style.css」にこう追記
/* 関連記事 */
div.yarpp-related {
overflow:hidden;
}
div.yarpp-related h3 {
margin:40px 15px 20px 15px;
padding-left:10px;
font-size: 0.875em;
border-bottom:dotted 1px #096aa2;
border-top:dotted 1px #096aa2;
border-left:solid 8px #096aa2;
background-color:#E3E7E4;
}
.related-entry {
vertical-align: top;
float: left;
width:115px;
font-size: 12px;
margin-left:15px;
}
.related-entry img{
padding:4px;
margin-bottom:6px;
border: #ccc 1px solid;
width:100px;
height:100px;
}
レイアウトをデザインした結果このようになります。
次に、先に話したようにアイキャッチって今まで設定したことないので
ノーイメージが連発。サムネイル表示にした意味ないので、
今まで投稿した数百の記事に、一括でアイキャッチ画像の設定をします。
使うはプラグイン：Auto Post Thumbnail
ダッシュボードのプラグインで検索してインストの有効化
Auto Post Thumbnailの設定で「Generate Post Thumbnail」ボタンをクリック。
するとジワーっと数分でアイキャッチ画像を作ってくれます。
でぇ、完成がこちら
いい感じになりました。
追記（2021.0813.）
バージョン 5.27.2 にて、当ブログでエラーが発生。
対処方法は下記ページをご覧ください。
プラグイン：Yet Another Related Posts Plugin（YARPP) 「バージョンアップしたらエラー」の対処法
