yarpp カスタマイズ

前回、以下の記事でYARPPでのサムネイルあり関連記事表示を紹介しました。
当ブログでは、YARPPを利用しさらに独自カスタマイズして関連記事表示しています。
その方法をご紹介します、もちろん賢威用にレスポンシブデザイン対応です。

まだ、YARPPのインストールができていない方はこちらから先にご覧ください。
WordPressで関連記事をサムネイルありで表示する方法（YARPP） | 前回の記事

オリジナルPHPでYARPPをカスタマイズ

それでは、オリジナルカスタマイズの方法を説明します。
完成したphpをアップしています、よろしければダウンロードしてお使いください。（PHPファイルのみです）

YARPPサムネイルのオリジナル表示用PHPをダウンロードする

もし、バグなどありましたらコメント頂けると嬉しいです。

独自PHPファイルを作成

まずは、独自PHPのファイルを作成します。
ファイル名は「yarpp-template-xxxxx.php」としてください。（xxxxxは好きな英数字）
ちなみに、ダウンロードファイルは「yarpp-template-keni-customize.php」となっています。

ファイル名の先頭に「yarpp-template-」を付けないと、YARPP用のカスタムファイルと認識されません。

<?php if(have_posts()): ?>
	<div class="related-box">
	<h3 class="related-h">この記事を読んでいる人はこちらの記事も読んでいます</h3>
	<div class="related-post">
	<ul class="related-list">
<?php 
	global $previousday;
	$cnt = 1;
	$class = "";

	while(have_posts()) : the_post();
		$previousday = '';
		if(($cnt % 2) == 0) {
			$class="related-rightlist";
		} else {
			$class="related-leftlist";
		}
		
		$cnt++;
?>

		<li class="<?php echo $class ?>"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
		<?php if(has_post_thumbnail()) { ?>
				<?php the_post_thumbnail(array(70,70)); ?>
		<?php } else { ?>
				<img src="<?php echo site_url(); ?>/wp-content/plugins/yet-another-related-posts-plugin/images/default.png" width="70" height="70" />
		<?php } ?>
			</a>
			<div class="meta">
				<p class="date"><?php the_date(); ?></p>
				<a href="<?php the_permalink(); ?>" rel=\"bookmark" title="<?php the_title_attribute(); ?>" class="title"><?php the_title(); ?></a>
			</div>
		</li>
		
	<?php endwhile; ?>
	</ul>
	</div>
	</div>
<?php else: ?>
	<h3 class="related-none-h">関連記事はありません</h3>
<?php endif; ?>

ダウンロードファイルと同じ内容です。
サムネイルと記事タイトル、そして投稿日を表示します。
記事トップの画像のような表示を目指しています。

ファイルをサーバーにアップロードする

次に、作成したPHPファイルをサーバーにアップロードします。
格納先は、各テーマファイルのルートディレクトリです。

当ブログであれば、「/wp-content/themes/keni61_wp_cool_131113」に
「yarpp-template-keni-customize.php」が格納されています。

作成したPHPを反映させる

「設定 > YARPP」を開き、「表示設定 ウェブサイト用」の「PHPカスタム」を選択します。
すると、テンプレートファイルというプルダウン（ドロップダウン）が表示されます。
既に、開発者が作成したPHPがいくつかありますが、今回は使わずオリジナルで作成します。

ファイルのアップロードが正しく行われていれば、ドロップダウンの中に
アップロードしたファイルの「yarpp-template-」と拡張子を除いた名前が表示されています。
ダウンロードファイルを使用する方は「keni-customize」が表示されていると思います。

それを選択して保存してください。
これで、PHPの追加は完了です。

CSSでスタイルを調整する

次に、CSSでスタイルを調整します。
「外観 > テーマ編集」からCSSを開き、以下のスタイルを1番下に追加してください。

賢威の場合は、「design.css」に追加します。

.yarpp-related{
	overflow : hidden;
	background-color: #fff;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	margin-bottom: 1.0em;
	padding: 0.3em;
}

.related-h,
.related-none-h{
	margin-top: 1.0em;
}

.related-post{
	width: 95%;
	margin: 0 auto;
}

.related-post ul{
	display: block;
	margin:0;
	list-style: none;
}

.related-post ul li{
	display: block;
	min-height: 8.0em;
	margin: 0 0 0.3em 0;
	width: 45%;
}

.related-post ul .related-leftlist{
	margin-right: 0.5em;
	float: left;
}

.related-post ul .related-rightlist{
	margin-left: 0.5em;
	float: right;
}

.related-post ul li img{
	display: block;
	float: left;
}

.related-post ul li .meta{
	width: 65%;
	float: left;
	display: inline;
	margin: 0 0 0 10px;
}

.related-post ul li .date{
	font-size: 0.8em;
	margin: 0 0 5px 0;
	font-weight: bold;
}

.related-post ul li .title{
	width: 100%;
	font-size: 0.9em;
	margin:0; 
	padding:0;
}

.related-post ul li .title a{
	color:#333;
	display:block;
	margin:0 0 10px 0;
}

これで、記事トップと同様の関連記事が表示されます。
当ブログでは、関連記事表示数を8件としていますが件数を変えても問題ありません。

レスポンシブデザインスタイルの追加

レスポンシブデザインでは、横並びだと小さくなってしまうので
1件ずつ縦に表示されるデザインを採用しました。

賢威の場合は以下のスタイルを、「mobile.css」に追加してください。

.related-post ul li{
	float: none;
	width: 100%;
}

.related-post ul li img{
	width: 20%;
}

.related-post ul li .meta{
	width: 70%;
}

これで、レスポンシブデザインを適用していてもうまく表示されます。