スライドショーのショートコードをPCとスマホで変える
投稿日:2017年10月14日 更新日:
今回も引き続き、「Smart Slider 3」を使って条件分岐をやってみました。
なぜ、このようなことをするのかと言うと、
PCでは、横長の長方形(例えば、横幅1900px,高さ600pxくらい)
スマホでは、レスポンシブ対応ですが、このままでは高さまで自動で変わるので、小さい長方形になってしまいます。
できれば、以下のようにスマホでの見え方を変えたいので、
前回の記事で紹介した、WordPress プラグインの「Smart Slider 3」でPC用とスマホ用の2つを作成します。
例えば、「slider-pc」・「slider-mobile」のように。
「header.php」に条件分岐をするなら、
<!-- ヘッダーのスライドショー 条件分岐 --> <div id="gazou-sample"> <?php if ( is_front_page() && !is_mobile() ) { echo do_shortcode('[smartslider3 slider=2]'); } elseif ( is_front_page() && is_mobile() ) { echo do_shortcode('[smartslider3 slider=3]'); } else { // それ以外 } ?> </div><!-- /gazou-sample-->
これでよかったのですが、
やりたかったのは、
・スライドショーのショートコードを条件分岐したい
・cssのmedia Queriesを使って、PCでは表示、スマホでは非表示みたいに 「display:none;」や「display:block;」を使い分ける方法以外で何かないか?
・投稿ページや固定ページで、phpコードが使えないので別の方法はないのか?
・jQueryを使って条件分岐ができないか?
などいろいろ調べてみて、結局たどり着いた方法は、
子テーマの「functions.php」に以下のコードを記述します。
//PCでのみ表示するスライドショー function if_is_pc($atts, $content = null ) { $content = do_shortcode( $content); if(!is_mobile()) { return $content; } } add_shortcode('pc', 'if_is_pc'); //スマートフォンでのみ表示するスライドショー function if_is_mo($atts, $content = null ) { $content = do_shortcode( $content); if(is_mobile()) { return $content; } } add_shortcode('mo', 'if_is_mo');
そして、固定ページの記事内で使いたいところに以下のように記述します。
<!-- 条件分岐 --> <div class="slider1"> [pc][smartslider3 slider=4][/pc] [mo][smartslider3 slider=5][/mo] </div>
これでうまく表示されました。
cssを使った方法だと、ただ見えていないだけで、画像が読み込まれてしまうので、スマホでは重たくなります。
あと、backgroundで動くスライドショーなら別の方法もありますが、
shortcodeを記述して表示されるスライドショーはこの方法が一番簡単でした。
関連記事
-
-
MTS Simple Booking-Cで指定した日の指定した時間だけ受け付けないようにする
この日のこの時間だけ受け付けないようにしたい 無料版の予約システム【MTS Simple Booking-C】はすごく簡単に予約可能なプラグインですが、 ある程度決まったス …
- PREV
- ヘッダーのスライドショーをページ毎に変える方法
- NEXT
- ホームページ作れるならレンタルカートが便利
いつもこちらで勉強させていただいております。
PCでは非表示、SPのみ表示する場合について教えていただけないでしょうか。
どうぞよろしくお願いいたします。
「header.php」に条件分岐をするなら、
以上の【is_mobile()】(mobileなら)にしてあげるとできると思います。
そして、固定ページの記事内で使いたいところに以下のように記述します。
以上で出来ると思いますが、求めていた答えと違っていればごめんなさい。