「こんな記事も読まれています」をWordPressに実装する方法（Yarpp）

「こんな記事も読まれています」を出すメリット

PV数が増える
内部リンクが増える

実装イメージはこんな感じです。

実装手順とCSSは下記です。

まずはYarppをインストールします

プラグイン→新規追加

プラグインをインストールすると、サイドバーの「設定」からYarppを選べるようになります。早速設定してみましょう。

ここでさまざまな設定を行います。編集するのは下部の「表示設定」です。表示設定ではサイト上での表示方法を

リスト表示
サムネイル表示
カスタム

の3点から選ぶことができます。

「カスタム」を選ぶと、インストール時に入っているテンプレートファイルをさらに選ぶことが可能です。ここでは、「Standard」のテンプレートを改造して使ってみましょう。

YARPPのテンプレートファイルの編集

それでは、Yarppのテンプレートファイルを編集します。

テンプレートをFTP等でダウンロードしましょう。WordPressフォルダのwp-content配下にテンプレートファイルが入っています。パスは下記です。

/wp-content/plugins/yet-another-related-posts-plugin/yarpp-templates

この中にあるstandardをwp-content/templates/配下に移動します。

そうすると、管理画面の「テーマの編集」から操作が可能になります。

私はstandardを下記のように変更しました。適宜書き換えてご利用くださいね。

<?php 
/*
YARPP Template: Standard
Author: mitcho (Michael Yoshitaka Erlewine)
Description: A Standard YARPP template.
*/
?>
<?php if (have_posts()):?>
<div class="yarpp-standard">
<h2>こんな記事も読まれています</h2>
	<?php while (have_posts()) : the_post(); ?>
		<?php if (has_post_thumbnail()):?>
		<dl><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( array(50,50) ); ?></a>
		<div class="date"><?php the_date(); ?></div><a href="<?php the_permalink() ?>" rel="bookmark" class="title"><?php the_title(); ?></a><!-- (<?php the_score(); ?>)--><small><?php the_excerpt(); ?></small>
</dl>
		<?php endif; ?>
	<?php endwhile; ?>
</div>

<?php else: ?>
<!-- <p>No related photos.</p> -->
<?php endif; ?>

追加したCSSは下記です。こちらもstyle.cssに追加して適宜ご利用ください。

/* YARPP standard*/

.yarpp-standard h2{
	font-weight: 700;
	font-size: 18px;
	font-size: 1.285714286rem;
	color: inherit;
	padding: 5px;
	border: solid 1px #ccc;
	border-radius: 3px;
	margin: 10px 0;
}

.yarpp-standard dl{
	clear:both;
}

.yarpp-standard img{
	float:left;
	margin: 0px 10px 5px 0;
}

.yarpp-standard a.title {
	font-weight: 700;
	text-decoration:none;
	color: #483D8B;
}

.yarpp-standard a.title:hover {
	color: #3366ff;
}

.yarpp-standard small {
	color: #A9A9A9;
}

.yarpp-standard .date {
	font-size: 0.8em;
	color: #66cc99;
}

ここまでできたら、最後にプラグインのYARPPの設定でカスタム→standardを選択します。