WordPressプラグイン : Any Mobile Theme Switcherでスマホ対応

作成日: 2015/02/13

更新日: 2016年8月16日

先日、スマートフォン対応の記事を書きましたが、それに関連して今日はAny Mobile Theme SwitcherというWordPressのプラグインの紹介です。
WordPressでは様々な方法でスマートフォン対応をすることができます。レスポンシブデザインのテーマを選択・作成したり、自動でスマホ用テーマにコンテンツを適用させたりと、今後もアプローチがどんどん増えていけばいいなと思っています。
今回のプラグイン「Any Mobile Theme Switcher」は、スマホの場合に別のテーマを適用させることができるプラグインです。つまりスマホ用のテーマとPC用のテーマを作成し、スマホの場合はスマホ用テーマ、PCの場合はPC用テーマに割り振れるのです。どの機種をどうするかも設定画面で選べますが、私はタブレットくらいしか悩まず、すべてスマホ用テーマにしておきました。
この記事ではインストール方法や設定方法はとても簡単に、スマホ対応として可能なことを書きます。
プラグインの詳細：Any Mobile Theme Switcher

インストールと設定

ここでは「Any Mobile Theme Switcher」のインストール方法と、設定方法を説明しますが、とても簡単なので、簡単に説明します。
前提としては既にスマホ用テーマが作成してある段階です。

インストール

「管理画面」＞「プラグイン」＞「新規追加」
「Any Mobile Theme Switcher」で検索
「インストール」、「有効化」

設定

「管理画面」＞「設定」＞「Any Mobile Theme」
各デバイスに対してテーマを選択させます
オプションを設定し、更新

オプション設定はこのようになっています。

Remember forced layout till: ユーザーがPC版を見るボタンをしたときなど、設定を保存しておく期間です。
Switch Mobile Theme Link Text: 「スマホ版を見る」リンクの文章
Switch Desktop Theme Link Text: 「PC版を見る」リンクの文章
Do you want to show Switch Mobile Theme link even the vistor is viewing from desktop ?: PC(ディスクトップ)で見ている人にスマホ版へのリンクを見せますか？

テーマの作成について

ここではテーマの作成についてになります。PC版、スマホ版のテーマをそれぞれ作成しても、データベースが１つなのは忘れてはいけません。できれば画像も最適化したいところです。

切り替えボタンを付ける

以下のコードをテーマ内に記述すると、PC版ならスマホ版へのリンク、スマホ版ならPC版へのリンクが挿入されます。
<?php echo do_shortcode('[show_theme_switch_link]'); ?>
スマホ版ならURLに「?am_force_theme_layout=desktop」が追加されてPC版へのリンクが挿入されます。タグで囲ったり、挿入されるアンカータグのクラス「am-switch-btn gomobile」に対してCSSでスタイリングを行うことができます。

画像用のショートコードを作る：パスをそれぞれに設定する

入力されたコンテンツは１つのため、本文に挿入された画像が大きければスマホの人にとって重くなります。レスポンシブデザインの際にはよくある話ですが、せっかくスマホ用のテーマを作成しているのでこれをショートコードを作成することにより解決します。
テーマフォルダ内にあるfunctions.php内にショートコードを登録する流れとなるのですが、PCとスマホではテーマを変えれるのでそれを利用して読み込む先のURLを変動させるというものです。
また、このショートコードはテスト環境で行っている場合にも利用できます。本番サーバになりURLが変更されても、本文中に入力した画像のパスを変更しなくて済むわけです。
以下をfunctions.phpに追加します。

function my_shortcode_img($atts){
	extract(shortcode_atts(array(
		'src' => '',
		'alt' => ''
	), $atts));
	$img_path = get_option('home').'/images/'.$src; //ここが画像のパス
	//$img_path = get_option('home').'/images/sp/'.$src; スマホの場合
	$img_tag = '<img src="'.$img_path.'" alt="'.$alt.'" />';
	return $img_tag;
}
add_shortcode('img', 'my_shortcode_img');

function my_shortcode_img($atts){

extract(shortcode_atts(array(

'src' => '',

'alt' => ''

), $atts));

$img_path = get_option('home').'/images/'.$src; //ここが画像のパス

//$img_path = get_option('home').'/images/sp/'.$src; スマホの場合

$img_tag = '<img src="'.$img_path.'" alt="'.$alt.'" />';

return $img_tag;

}

add_shortcode('img', 'my_shortcode_img');

これをPCの場合とスマホの場合でパスを分けて保存することにより本文内の画像のを切り分けることができます。
テンプレートフォルダを参照すれば一発ではあるのですが、私の場合大抵はドメインの直下に「images」フォルダを作り、その中にまとめて画像ファイルを入れているので「get_option(‘home’)」を利用しています。
このコードを利用して参照する場合は両方のパスに画像が存在する必要があるため、クライアント側にとっては面倒な作業になるかもしれません。
また、投稿画面から入力した画像を表示するには、また別の操作が必要です。
使い方は、を挿入します。

WordPressプラグイン : Any Mobile Theme Switcherでスマホ対応