wordpress

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

投稿日:2017年10月14日 更新日:

Smart Slider 3

今回も引き続き、「Smart Slider 3」を使って条件分岐をやってみました。

なぜ、このようなことをするのかと言うと、

PCでは、横長の長方形(例えば、横幅1900px,高さ600pxくらい)

スマホでは、レスポンシブ対応ですが、このままでは高さまで自動で変わるので、小さい長方形になってしまいます。

PCとスマホで変える

できれば、以下のようにスマホでの見え方を変えたいので、

条件分岐

 

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

 

-wordpress
-, , ,


  1. ゆこ より:

    いつもこちらで勉強させていただいております。
    PCでは非表示、SPのみ表示する場合について教えていただけないでしょうか。
    どうぞよろしくお願いいたします。

    • web より:

      「header.php」に条件分岐をするなら、

      < ?php if ( is_front_page() && is_mobile() ) { echo do_shortcode('[smartslider3 slider=2]'); } else { // それ以外 } ?>

      以上の【is_mobile()】(mobileなら)にしてあげるとできると思います。

      そして、固定ページの記事内で使いたいところに以下のように記述します。

      [mo][smartslider3 slider=2][/mo]

      以上で出来ると思いますが、求めていた答えと違っていればごめんなさい。

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ダウンロード

簡単にファイルをダウンロードできるWordPressプラグイン

  WordPressで作成したwebサイトにファイルをダウンロードする機能を追加するために、プラグインを利用して簡単にやってしまおう!ってことで、「WordPress Download M …

Google FontがEdgeで表示されない

Google FontsがEdgeで表示されない場合

  <link>で読み込んだのにEdgeで正しく表示されない   <link href=”https://fonts.googleapis.com/css2?fa …

スクロールボタン

スクロールボタン コピペでできる

    WordPressでスクロールボタンを設置   php部分 <div class="scroll" href="#first- …

masonry column

MasonryをやめてCSSのcolumnにした

  不具合連続のMasonry   2日間くらい「Masonry」に悩まされ、できたと思ったら不具合が発生の繰り返し、 主な不具合は、 ・画像と画像が重なる ・ブラウザを縮小したり …

レスポンシブWordPressテーマ

プロが選ぶWordPressテーマテンプレート無料有料

レスポンシブWordPressテーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対応レスポンシブWordPressテーマ スマホ/PC表示切替OK! Bootstrap対応! こんな方に …