WPtouchでプラグイン未使用の関連記事一覧を表示させるための小細工1つ

スマホ版での関連記事表示は長いこと宿題だった

Stylish twins by goldberg

スマホ表示のカスタマイズって大変ですね。りく（@Rikuma_）です。

昨年秋に自作テーマのスマホ版表示を大幅改造しました。

この時、カスタマイズしたけどテストで上手くいかず、宿題にしていた機能が「本文の最後に関連記事一覧を表示させる」という機能。

当ブログではプラグインを使わず、オリジナルのPHPコードにより関連記事一覧を表示しています。PC版では問題なく動作しており、ここで使ってるコードをそのままスマホ版の「WPtouch」というプラグイン内に組み込んでみたのですが、全く動作しない。表示もされない。

いろいろ調べたのですが、なぜ動かないのか原因が判らない。

スマホ版に関連記事が表示されないことの明らかなデメリット

今年に入り、スマホからのアクセスが嬉しいことに当ブログでも増えてきています。時にはPCからのアクセスよりもiOSからのアクセスが上回ってる日も出てきました。

ただ、スマホからのアクセスが増えると毎回必ず出てくる現象がありました。アクセス解析を見てると如実にその現象が分かる。

「スマホからのアクセスが多い時は、訪問別ページビューがドスンと減る」という現象。

訪問別ページビューというのは、訪問してくれた読者が何ページ読んでくれるかの数値です。1ページだけ読んで去ったら値は「1.0」。2ページ読んでくれたら「2.0」という理屈になりますね。

一人の読者が関連記事にも興味を持ってくれて、次々といろんな記事を読んで頂けたら、訪問別ページビューも、そしてもちろん全体のアクセス数も上昇します。

スマホで先頭から下にスクロールして本文を読んで頂き、文章が終わった直後に関連記事一覧が表示されていれば、関連した記事を続けて読んでもらえる確率が高まります。

しかし私のスマホ版表示では関連記事一覧がない。すなわち、読み終えるとブログから去ってしまう。訪問別ページビューがPC版よりも明らかに落ちる理由はそれしかない。

先頭に戻ればメニューバーがあって、そこから別のページに移動することは出来ますが、その機能を知らない人が大半だし、よっぽど興味を持ってもらえない限り、そこまでしてくれる読者はいない。

なのでスマホ版での関連記事表示は「絶対にやらなきゃいけないこと」。急務であり、最優先課題でした。しかし何度テストしても失敗ばかり。

先週、ようやく「失敗していた理由のようなもの」が判明し、晴れてスマホ版での関連記事一覧表示に成功しました。

今回紹介するのは関連記事表示に関する解説ですが、もしかすると今回の記事は、私と同じく「PC版では上手く動作しているコードがWPtouchで動かない」とお悩みの方々にも有効かもしれません。「かもしれない」ですよ。断言できませんけど。

今回のキモは、またしても「functions.php」

カスタマイズ経験がある方々ならご存知だと思いますが、アイキャッチ画像の設定や、カスタムメニュー・カスタムヘッダーの設定などなど、いろんな機能をWordPressに付加できる重要なテンプレートファイルで「functions.php」というものがあります。

functions.phpはWordPressの中でも特に大切なファイルの一つで、ここに記述したコードが間違っていたりバグを含んでたりすると、WordPress全体が表示されず真っ白になったり、管理画面すら表示されなくなります。顔面蒼白になります。

バックアップしておいたfunctions.phpを再アップすれば直るんですけどね。それもあって、「functions.php」のカスタマイズには細心の注意が必要だし、カスタマイズ前には必ずそのファイルだけでもバックアップしておくことを勧めます。

で、実はプラグイン「WPtouch」の中にもfunctions.phpというファイルが存在します。WordPress全体を管理するfunctions.phpとは別に、同じ名前のfunctions.phpが「WPtouch」内にあるという意味です。

以前、PC版でカテゴリ別人気記事一覧を、「WordPress Popular Posts」というプラグインのデータを利用してオリジナルコードで作成する解説エントリーを書きました。以下の記事です。

PC版では問題なく動くこのコードも、スマホ版では全く動作しませんでした。それどころかテストしてみて判ったのが、プログラムコード内で「WordPress Popular Postsは存在しない」と判定されてました。存在しないとみなされてたら、そりゃ表示が上手くいくわけがない。

WPtouchではWordPress Popular Postsというプラグインが読み込めてなかったんです。

そして今回、前述した「functions.phpがWPtouch内にも存在する」という事に気付いた時、失敗していた原因がピンと来ました。

2つの「functions.php」を繋げてあげる方法

調べていくうちに、「WordPress全体のfunctions.phpを、WPtouch内のfunctions.phpに読み込ませる」という指定方法が判りました。

WPtouchのフォルダにあるfunctions.phpに、以下の2行を追加するだけでそれが可能になります。

$functions = strstr(TEMPLATEPATH,'/plugins/',true) . '/themes/' . get_option('template') . '/functions.php';
include($functions);

以下の記事を参考にさせて頂きました。ありがとうございました。

いろいろ再テストしてみました

スマホ版のfunctions.phpを改造後、まずは「PC版の本文直後で使ってるカテゴリ別人気記事一覧のPHPコード」を、そのまんまWPtouchの表示させたい箇所にコピーし、再テストしてみました。

そしたら、上手く動いた！　遂に関連記事が表示された瞬間でした。もう嬉しくて嬉しくて、叫んだ。

ところが、ローカル環境のテストでは上手く表示されてたカテゴリ別人気記事が、本番環境（＝ネット上）にアップロードすると表示されなくなった。

これは私のコードが間違ってるのではなく、プラグイン「WordPress Popular Posts」の側に問題があるせいだ、というのが調べて判りました。

解決方法の解説も読んだのですが、私はその方法をやりたくなかった。後々のカスタマイズが複雑になるし、他の表示に悪影響を及ぼす可能性があったから。

なのでカテゴリ別人気記事の表示は断念。もう一つPC版で表示している、「共通するタグを持つ記事を新しい順に表示させる」というオリジナルの関連記事コードをWPtouchに組み込んで再テスト。

作成方法の解説は上の記事に書いています。このコードをベースにして、スマホ用に改良したのを組み込みました。以下の通りです。

<?php
	$original_post = $post;
	$tags = wp_get_post_tags($post->ID);
	$tagIDs = array();
	if ($tags) :
		$tagcount = count($tags);
		for ($i = 0; $i < $tagcount; $i++) {
			$tagIDs[$i] = $tags[$i]->term_id;
		}
		$args=array(
		'tag__in' => $tagIDs,
		'post__not_in' => array($post->ID),
		'showposts'=>7,
		'caller_get_posts'=>1
		);
		$my_query = new WP_Query($args);
		if( $my_query->have_posts() ) :
			$relcnt = 0;
?>
<h3>関連記事もございます</h3>
<ul class="relatedmob">
<?php
			while ($my_query->have_posts()) : 
				$my_query->the_post(); 
				$relcnt++;
?>
	<li><a href="<?php the_permalink();?>" rel="bookmark"><?php the_title(); ?></a></li>
<?php 
			endwhile;
			wp_reset_query();
?>
</ul>
<?php 
		endif;
	endif;
?>

基本的にPC版のコードと、やってる事は同じです。違うのは2箇所だけ。13行目で「読み込み件数を最大7記事」にしてるのと（＝PC版は10記事）、スマホ版ではアイキャッチ画像を取得していないこと。スマホは表示範囲が狭いので画像は必要ないと判断しました。

↑というわけで、ようやく念願の関連記事一覧がスマホ版でも表示できるようになりました。ここまで長かった…。

この関連記事を表示させるようになって以降、訪問別ページビューが見事に改善されてきています。急上昇ってほどではないですが、iOSからのアクセスが増えた日でもガクンと落ち込むことはなく、むしろページビューが高くなる日もあります。大成功。

余談：プラグインを使えば関連記事を簡単に表示できます、が私は使わない

カスタマイズが苦手な方や、WordPressを始めたばかりの方は、無理にオリジナルコードを作成しなくても、関連記事を表示させる便利で有名なプラグインが幾つもリリースされています。

私が知ってる主なものを挙げても、

上の4つは有名だし、使用されてる方々も大勢いらっしゃいます。解説記事もたくさんアップされてるはずです。

4.のLinkWithinがスマホ版で使えるかは調べてないので分かりませんが、それ以外の3つはスマホ版でも表示できるようです。

何度やってもスマホ版での関連記事表示が成功しなかった時、「Zenback入れようかなぁ、どうしようかなぁ」と何度も悩み、導入する寸前まで行きましたが、それでも入れなかった。入れたくなかったので。

私が上記4つのプラグインを使わなかった個人的な理由を簡単に羅列すると、

というような理由がそれぞれにありました。もちろんプラグイン自体を否定も批判もする気は毛頭ないし、使ってる方々をどうこう言うつもりも全くありません。あくまで私個人の感想なり過去の出来事というだけだし、特にZenbackなんてメッチャ多機能だから羨ましい面もあります。私の技量ではアレと同等の機能なんて作れない。

あとは、私のブログが自作テーマを使っていて、WordPressを勉強した直後に作ったものというのもあって、たぶん作り方が下手クソなんですよ。それもあって表示速度が決して速くはない。

プラグインは便利ですが、入れ過ぎると表示速度をドンドン重く遅くしてしまうのは有名な話。なので極力プラグインは減らしたい。だから関連記事もプラグインを使わずオリジナルのPHPコードで作ってみた、という理由が最も大きいですね。

私が作った関連記事のコードは、各記事にタグをセットしておくのが絶対条件です（タグを基に関連性を検索する仕組みなので）。タグを使用していない場合は動きませんのでご注意ください。