関連記事 | HCZ BLOG

関連記事プラグイン：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(); ?>

↓

非表示にしなくても、この関数を削除するだけでも良かったりします（笑）

問題点を攻略したところで、今度は当方ブログサイズに合うようにデザイン。

で、若干アレンジを加えたファイル「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;
}

レイアウトをデザインした結果このようになります。