YARPPをカスタマイズして関連記事をサムネイル＋タイトルに変更

01 . 下準備

関連記事を表示するプラグインYARPPを利用しますのでWordPress管理画面からインストールして有効化しておきます。インストールとテンプレートファイルについては以下の記事を参照ください。

WordPressに関連記事を表示する！YARPPの導入と設定のコツ
YARPPのテンプレートを使って表示をチェック有効にする方法

02 . テンプレートファイルの作成手順

ファイル名は「yarpp-template-」で始まる名前とし、ファイル形式UTF-8で作成します。ファイル名はこんな感じです。「yarpp-template-thumbnail-title.php」

この作成したファイルに処理を書くことでオリジナルのテンプレートが作れます。出来上がったテンプレートファイルを使用しているテーマ直下にアップロードします。

サーバ（ホスト側）：/wp-content/themes/使用しているテーマ名/

WordPress管理画面の関連記事（YARPP）を開き、「テンプレートを使って表示」にチェックをいれ、作成したテンプレート名を選択し「変更を保存」をクリックしたら完成です。

03 . テンプレートファイル

こんなイメージです。

オリジナルテンプレートのサムネイル表示「yarpp-template-thumbnail.php」をベースにタイトル取得の処理を追加しました。あとはCSSで調整して完成：）

yarpp-template-thumbnail-title.php

<div id="related-post">
	<h3>関連記事</h3>
	<?php if (have_posts()):?>
	<ul>
	<?php while (have_posts()) : the_post(); ?>
		<?php if (has_post_thumbnail()):?>
		<li>
		<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(array(130,130)); ?><?php the_title(); ?></a>
		</li>
		<?php endif; ?>
	<?php endwhile; ?>
	</ul>
	<?php else: ?>
	<?php endif; ?>
</div>

・アイキャッチ画像を使用している場合のみ表示されます。
・array(130,130)でアイキャッチ画像のサイズを指定しています。
・CSS管理用にid=related-postでくくっています。
・文字コードはUTF-8で保存

CSSはこんな感じです。表示数などによりサイズ幅やアイキャッチ画像のサイズは調整が必要です。floatで並べているので必要に応じてclearしてください。あくまでSampleですのでご自身のサイトに合わせて調整が必要になると思います。

#related-post{
	width: 600px;
	height: 400px;
}
#related-post h3{
	font-size: 110%;
	margin-bottom: 5px;
	padding-left: 10px;
}
#related-post ul li a{
	width: 150px;
	display: block;
	padding: 10px;	
	float: left;
}
#related-post ul li a:hover{
	background-color: #EEEEEE;
}

確認はしておりますが、COPYでのご利用は自己責任でお願いしますm(__)m