PCとスマホでメインビジュアルのスライダーを切り替えたい時があります。理由は簡単で、PCでは大きな画像のスライダー、スマホでは小さな画像のスライダーにした方が表示が速くなるからです。
この記事では、画面サイズの判定によって呼び出すショートコードを変更することで、メインビジュアルのスライダーをPCとスマホで切り替える方法についてまとめておきます。
PCとスマホの2つのスライダーをメディアクエリで切り替えたい
レスポンシブデザインになれている人であれば、2つスライダーを用意して、CSSのメディアクエリで画面サイズによって表示するスライダーを切り替えればいいのではないか？と考えると思います。
この方法を使えば確かに、PC画面ではPC用のスライダー、スマホ画面ではスマホ用のスライダーを表示することができるようになります。しかし、ページ読み込み時に2つともスライダーが読み込まれた後に片方を非表示にしているだけです。スマホでもPC用のスライダーが読み込まれてしまう状態になります。
プラグインのスライダーは1つでも重いので、余程のことがない限り2つ読み込んで一つ消す方法は使用したくないです。
スライダーをwp_is_mobleで出し分ける
2つのスライダーを読み込んでから切り替えるのではなく、読み込む前にそもそも出し分ける方法なら無駄がありません。
通常、スライダーはショートコードで呼び出す形式が多いので、画面サイズによって呼び出すショートコードを切り替えればいいわけです。
画面サイズによってショートコードを実行するショートコード
画面サイズによってショートコードを実行するかどうか判定する囲みショートコードが便利です。
つまり、ショートコードを入れ子にします。
PHPで画面サイズを判定するのは、wp_is_mobileを使います。
ショートコード内部でショートコードを呼び出す時には、do_shortcode出力を変数でうけるのではなく、ob_startとob_get_cleanの組合せでバッファした方が問題が少ないと思います（経験談）。
add_shortcode('pc', 'if_pc');
function if_pc($atts, $content = null ) {
if(!wp_is_mobile()) {
ob_start(); // バッファを有効に
echo do_shortcode( $content );
return ob_get_clean();
}
}
add_shortcode('sp', 'if_sp');
function if_sp($atts, $content = null ) {
if(wp_is_mobile()) {
ob_start(); // バッファを有効に
echo do_shortcode( $content );
return ob_get_clean();
}
}使い方
囲みショートコードで、単独のショートコードでも使えます。
PCだけ表示したい場合
[pc][shortcode_pc][/shortcode_pc][/pc] [pc][shortcode_pc][/pc]
スマホだけ表示したい場合
[sp][shortcode_sp][/shortcode_sp][/sp] [sp][shortcode_sp][/sp]
wp_is_mobile()はキャッシュに注意
wp_is_mobileを使っていると問題になりやすいのがページキャッシュ（プラグイン）の動作です。
ページキャッシュがPCとスマホを区別していない場合、つまり、完全レスポンシブを想定している場合は、PCとスマホでソースが異なるので問題が起きます。
PCとスマホで異なるキャッシュを持つページキャッシュの場合は、この問題は起きません。
ショートコードを入れ子にするときに問題が起きた記述
ショートコードを入れ子にする記述は検索すると直ぐに見つかります。
よくあるのが以下の記述です。ほとんどのケースで問題なく動くと思います。
function fncBox ($atts, $content = null) {
$content = do_shortcode (shortcode_unautop ($content)); //ショートコードの入れ子があっても実行する
return ("<div class=box>" . $content . "</div>");
}
add_shortcode ('box', 'fncBox');当初、上記のようにdo_shortcodeの結果を変数で受ける方法で、Slider revolutionのショートコードの出し分けを記述しましたが、スマホの実機だけフォントアイコンが表示されない問題が起きました。
スマホの実機だけの問題という解析が大変な事象だったので、原因ははっきりしませんでしたが、今回の記事のように、do_shortcodeをechoしてバッファする方法にすることでなんとか問題が解消しました。
問題が出る時と出ない時で、do_shortcode出力を変数に格納するかバッファするかの違いしかないのですが、挙動に違いが出たので、かなり焦りました。
まとめ
wp_is_mobileで実行するショートコードを切り替える方法と、それを更にショートコードで実現する方法についてご説明しました。
この方法を使用すれば、スライダーなどをショートコードで呼び出す時にwp_is_mobileの判定結果で好きなショートコードを実行できるようになります。
wp_is_mobileを使うと完全レスポンシブ対応ではなくなりますので、ページキャッシュの方法を選ぶようになりますが、背に腹は代えられません。
ショートコードの入れ子を実現時に、ショートコード内部でdo_shortcodeを変数受けするのではなく、ob_start()、ob_get_clean()の組合せでバッファする方がトラブルが少ないですよ、というお話でした。
