WPtouchをカスタマイズ！スマホページの好きな場所に関連記事表示

2013年9月24日

※本ページはプロモーションが含まれています

WPtouchをカスタマイズ！関連記事表示プラグインYARPPを使って、スマホページの好きな場所に関連記事を表示する方法をご紹介します。

こんばんは！みかです。

WordPressのプラグインとして良く利用されているのが、
スマホ用に表示を最適化してくれるWPtouchと
関連記事表示をしてくれるYARPPプラグインですよね～。

Yet Another Related Posts Plugin(YARPP)は、
自動で記事ページに関連記事一覧を表示してくれるのですが、
デフォルトでは記事の直下に表示されてしまいます。

Googleアドセンス広告やブログランキングのバナーを
記事の直下に配置したい！

本日はそんなお悩みを持った方のために、
スマホページの好きな場所に、
関連記事一覧を表示するための方法をご紹介します（＾＾

1. YARPPの設定を変更する

まずは、YARPPが自動的に関連記事を挿入しないように、
YARPPの表示設定にて、「投稿」のチェックを外します。

WPtouchの記事ページのソース（single.php）を、
FTPソフトを使ってローカルPCにダウンロードしてきます。

single.phpの格納場所は以下の通り。

「wp-content/plugins/wptouch/themes/default/」

YARPPには、好きな場所に関連記事一覧を表示できるように、
専用のコードが用意されています。

記事ページの中で、関連記事一覧を表示したい箇所に、
以下のコードを追加しましょう。

<?php related_posts(); ?>

オススメは、「single-post-meta-bottom」というクラスの上あたりです。

関連記事より上にGoogle Adsense広告やランキングバナーを配置したい場合は
<?php related_posts(); ?>の上に記述します。

なお、日本語表記をする場合は、文字化け防止のために、
文字コードをUTF-8に変更しましょう。

3.で修正したsingle.phpを保存して、
FTPソフトを使ってサーバーにアップロードしたら完了です。

お疲れ様でした！

PCページでも上記のコードを使うことで、
好きな場所に関連記事一覧を表示することが出来ます。

一応、ウィジェットとしてYARPPも用意されていますので、
リファインSNOWのように本文下にウィジェットを配置できるテンプレートを
利用している場合は、こちらを使った方が簡単です。

以上、WPtouchをカスタマイズ！
スマホページの好きな場所に関連記事表示する方法でした（＾＾

よかったらシェアしてね！