スライドショーのショートコードをPCとスマホで変える

今回も引き続き、「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を記述して表示されるスライドショーはこの方法が一番簡単でした。