お問い合わせはコチラから

PCとスマホでショートコードを出し分けるショートコード

サイト運営

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()の組合せでバッファする方がトラブルが少ないですよ、というお話でした。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました