【サムネ付き】『YARPP』のカスタマイズ用テンプレート【WordPress】
関連記事表示用プラグイン『YARPP』のカスタマイズ方法をまとめます。linkwithinも関連記事表示用プラグインとして有名ですが、『YARPP』のほうが精度が高いです。
この記事をみてぜひ乗り換えを検討してみてください( ◜◡‾)
WordPressの関連記事表示用プラグイン『YARPP』のカスタマイズ方法
記事のながれ
- 『YARPP』のダウンロードとインストール
- 『YARPP』のカスタマイズ用テンプレートの配布
- カスタマイズ用CSSの追加
では書いていきます㏄= ㏄=┌( ・_・)┘
1.WordPress用プラグイン『YARPP』のダウンロードとインストール
以下のサイトからYARPPをダウンロードしてください。
» Yet Another Related Posts Plugin (YARPP) — WordPress Plugins
WordPressのプラグイン検索に『YARPP』と入力して、ダウンロードしてもokです。
2.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』にしてください。
- 保存場所はテーマフォルダと同じ階層になります。
3.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』の設定を行ってください。
とても簡単ですね。以上となります。
バグとかあればお問い合わせフォームからどうぞ。
※P.S:無料メルマガで発信中:過去の僕は「ブログ発信で5億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら1秒で解約できます。無料登録は「こちら」です。