2013/10/23 (更新日: 2016/08/13)

【サムネ付き】『YARPP』のカスタマイズ用テンプレート【WordPress】

PROGRAMMING WordPress

関連記事表示用プラグイン『YARPP』のカスタマイズ方法をまとめます。linkwithinも関連記事表示用プラグインとして有名ですが、『YARPP』のほうが精度が高いです。

この記事をみてぜひ乗り換えを検討してみてください( ◜◡‾)

WordPressの関連記事表示用プラグイン『YARPP』のカスタマイズ方法

カスタマイズ後のイメージ図は以下です。

記事のながれ

『YARPP』のダウンロードとインストール
『YARPP』のカスタマイズ用テンプレートの配布
カスタマイズ用CSSの追加

では書いていきます㏄= ㏄=┌( ・_・)┘

１．WordPress用プラグイン『YARPP』のダウンロードとインストール

以下のサイトからYARPPをダウンロードしてください。
» Yet Another Related Posts Plugin (YARPP) — WordPress Plugins

WordPressのプラグイン検索に『YARPP』と入力して、ダウンロードしてもokです。

２．WordPress用プラグイン『YARPP』のカスタマイズ用テンプレート『yarpp-template-relative.php』の作成

以下が『YARPP』カスタマイズ用のテンプレートとなります。
コピペどうぞ。


<?php if(have_posts()):?>
     <p id="post-syokai">関連記事はこちら</p>
     <div class="related-post">
     <?php while(have_posts()) : the_post(); ?>
          <?php if(has_post_thumbnail()):?>
               <div class="related-entry"><a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail("thumbnail"); ?><?php the_title(); ?></a></div>
          <?php endif; ?>
     <?php endwhile; ?>
     </div>
<?php else: ?>

<?php endif; ?>

コピペしたら、テキストエディタに保存してください。

WordPress用プラグイン『YARPP』のカスタマイズ用テンプレートを保存する際の注意点は以下2つ。

名前は必ず『yarpp-template-relative.php』にしてください。
保存場所はテーマフォルダと同じ階層になります。

３．WordPress用プラグイン『YARPP』のカスタマイズ用CSSを『style.css』に追加

以下が『YARPP』カスタマイズ用のCSSとなります。
コピペどうぞ。

.related-post{
	height:100%;
}
.related-post{
	width:100%;
	overflow:hidden;
	margin-top:5px;
}
.related-entry {
	vertical-align: top;
	float: left;
	width:123px;
	font-size: 13px;
	min-height: 210px;
	margin-bottom:0px;
	padding: 0px 10px 0px 10px;
	display: block;
}
.related-entry img{
	padding:4px;
	margin:0px 0px 0px 0px;
	border: #ccc 1px solid;
	width:123px;
	height:123px;
}

#post-syokai{
	border-left: 10px solid #999;
	padding: 1px 9px;
	margin: 5px 0 16px 0;
	font-size: 18px;
	margin-left: 5px;
}

コピペしたCSSを『現在利用しているテーマのstyle.css』に保存してください。
なんとこれだけです( ◜◡‾)

あとは、以下の写真を参考にWordPressの管理画面から、『YARPP』の設定を行ってください。