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

こんばんは!みかです。

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

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

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

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

 

1. YARPPの設定を変更する

YARPPの設定を変更

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

 

2. WPtouchのソースをダウンロードする

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

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

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

 

3. single.phpに関連記事表示用のコードを追加

WPtouchのソースをカスタマイズ

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

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

<?php related_posts(); ?>

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

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

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

WPtouchで日本語が文字化けした場合の対処法

 

4. WPtouchのソースををサーバーにアップロードする

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

お疲れ様でした!

 

PCページで好きな場所に表示したい場合は?

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

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

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