カスタムフィールドとwp_is_mobile関数を使って、記事内でパソコン用とスマホ用で内容を切り替える方法

2014-04-01［WordPress］

当サイトではアフィリエイト広告を利用しています。

土曜日に開催された「第13回アフィリエイトカンファレンス」でコミュニティコムの星野さんにWordPressでヘッダー情報を読み込んで条件分岐するタグ「wp_is_mobile関数」を教えていただきました。
a0002_001949_m

これを聞いて自分の中では「こう使うといいな」というのは思い浮かんだのですが、懇親会で話を聞くと現実的な使い方がわからない人が多かったので、ここで簡単に方法をまとめて見たいと思います。

＜前提条件＞
１、WordPressで構築しているサイトであること（当然か）
２、WordPressのバージョンが3.4以上であること（wp_is_mobile関数は3.4から対応）
３、プラグインにCustom Field Templateを導入していること

※Custom Field Templateはマストではないですが、設定を簡単にするために使用しています。

wp_is_mobile関数とは

設定を始める前に「wp_is_mobile関数」について簡単に確認しておきます（不要な人は飛ばしてください）。

wp_is_mobile関数は訪問者の端末のヘッダー情報を確認して、パソコンでの閲覧か、スマホでの閲覧かを見極める、WordPressの条件分岐タグになります。これを使うことでパソコン用とスマホ用で表示させる内容（＝コンテンツ）を切り替えることが可能になります。

実際に使うソースコードはこんな形
[php]<?php if (wp_is_mobile()) :?>
スマホ用コンテンツを書く。
<?php else: ?>
パソコン用コンテンツを書く。
<?php endif; ?>[/php]

このままだとWordPress3.4より古いバージョンではエラーになってしまうため、それを回避するためにはwp_is_mobile関数の有無を確認して条件分岐するような記述にする必要があるそうです。具体的な書き方はこちら

[php]<?php if ( function_exists(‘wp_is_mobile’) && wp_is_mobile() ) :?>
スマホ用コンテンツを書く。
<?php else: ?>
パソコン用コンテンツを書く。
<?php endif; ?>[/php]

テンプレートの配布を行う場合は後者のほうが汎用性が高いですが、実際問題として「wp_is_mobile関数」を使用したい人はWordPressの3.4以上をインストールしないと意味がないため、前者の記述で問題が起こることはないと思います。

ちなみに、wp_is_mobile関数が参照しているのはWordPressのコアファイル郡の「wp-includes」フォルダに入っているvars.phpファイルです。具体的な記述はこちら。

[php]function wp_is_mobile() {
static $is_mobile;

if ( isset($is_mobile) )
return $is_mobile;

if ( empty($_SERVER[‘HTTP_USER_AGENT’]) ) {
$is_mobile = false;
} elseif ( strpos($_SERVER[‘HTTP_USER_AGENT’], ‘Mobile’) !== false // many mobile devices (all iPhone, iPad, etc.)
|| strpos($_SERVER[‘HTTP_USER_AGENT’], ‘Android’) !== false
|| strpos($_SERVER[‘HTTP_USER_AGENT’], ‘Silk/’) !== false
|| strpos($_SERVER[‘HTTP_USER_AGENT’], ‘Kindle’) !== false
|| strpos($_SERVER[‘HTTP_USER_AGENT’], ‘BlackBerry’) !== false
|| strpos($_SERVER[‘HTTP_USER_AGENT’], ‘Opera Mini’) !== false
|| strpos($_SERVER[‘HTTP_USER_AGENT’], ‘Opera Mobi’) !== false ) {
$is_mobile = true;
} else {
$is_mobile = false;
}

return $is_mobile;
}[/php]

要は、WordPress本体が端末のヘッダー情報（ユーザーエージェント）を確認していて、それに合わせて「wp_is_mobile関数」を使えば条件分岐できるということになります。

今回はサイトの一部の表示のために「wp_is_mobile関数」を活用しますが、テーマの作成方法を工夫すればプラグインをまったく使わないでパソコン用とスマホ用で最適化されたデザインを作ることも可能になるということですね。スマホの需要が伸びているので、これから活用するシーンが増えそうな気はします。

↓↓↓↓ここから具体的な設定方法に入ります↓↓↓↓

Custom Field Templateでカスタムフィールドを追加

まずは、Custom Field Templateを使って「パソコン用のコンテンツ入力欄」と「スマホ用のコンテンツ入力欄」を作ります。

カスタムフィールドテンプレートの設定ページに移動し「テンプレートコンテンツ:」内に以下の2つを記述

[php][Smartphone]
type = textarea
cols = 60
rows = 6
label = スマホ用のコンテンツを入力

[Pc]
type = textarea
cols = 60
rows = 6
label = パソコン用のコンテンツを入力[/php]

れで新規投稿画面に「パソコン用のコンテンツ入力欄」と「スマホ用のコンテンツ入力欄」が表示されます。この中には実際にそれぞれの端末で表示させたい内容を記述すればOK。入力欄の幅と行数はお好みで大丈夫ですけど、狭いと内容がわからないことがあるので、それなりの大きさはあったほうがいいと思います。

※パソコン用とスマホ用で内容を切り替えるのは主に「広告」の切り替えが多いと思いますが、画像などサイズを小さくしたい場合でも活用できるかと思います。

wp_is_mobile関数を使いテーマファイルの修正

カスタムフィールドの設定が終わったら次に、テーマファイルの修正に入ります。

記事内での切り替えなので、修正するテンプレートは「single.php」もしくは「loop-single.php」になります。ここは実際に使っているテンプレートを確認してください。

また、記述する場所は表示させたい場所によって変わってくるとは思いますが、一般的には記事が終わった後に表示させたほうが効果が高い（←広告の場合ね）と言われているので、書くのは「<?php the_content(); ?>」の下がいいと思います。

したがって具体的にはこんな感じになります。

[php]<?php the_content(); ?>

<div class="adbox">
<?php if (wp_is_mobile()) :?>
<?php echo post_custom("Smartphone")?>
<?php else: ?>
<?php echo post_custom("Pc")?>
<?php endif; ?>
</div>[/php]

「<div class=”adbox”>～</div>」はデザインを変える時のためのものなのでなくてもいいですし、class名を変更して使用しても問題はないです。

また個人的には上記のままだとカスタムフィールドに何も記述しないとき（＝広告等がなくパソコンとスマホで切り替える必要がない内容）にデザインが崩れるのが嫌なので次のように書くようにしています。
↑空白でも「<div class=”adbox”>～</div>」に適用するCSSは消せないので

[php]<?php if ( get_post_meta($post->ID,’Pc’,TRUE) ): ?>
<div class="adbox">
<?php if (wp_is_mobile()) :?>
<?php echo post_custom("Smartphone")?>
<?php else: ?>
<?php echo post_custom("Pc")?>
<?php endif; ?>
</div>
<?php endif;?>[/php]

この書き方だとパソコン用のコンテンツがあった時だけ、wp_is_mobile関数が発動するようになります。フックになるのは、パソコン用でもスマホ用でもいいんですけど、スマホ用の広告がないケースもあるので、その場合はスマホ用が空欄でもパソコンでは表示されるようにしています。

スマホ用の広告がない場合はパソコン用の広告と同じものを入れておけばいいんですけどね。

＜要注意＞
スマホ表示用に「WPtouch」などのプラグインを使用している場合、プラグイン側にもwp_is_mobile関数を記述しないとスマホ用の広告が表示されないので注意が必要です。

もっとも、プラグインを使用している場合はあえて条件分岐を使わないで、上記で作ったカスタムフィールドの値をそのまま入れるだけでパソコン用とスマホ用のコンテンツを切り替えることができますよ。

作業としては若干複雑ではありますが、一つ一つ確認しながらやっていけば問題はないと思いますので、パソコン用とスマホ用でコンテンツを切り替える必要性を感じている人は是非チャレンジしてください。

＜参考記事＞
→wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ