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のテーマをカスタマイズしていて、 記事の一覧表示やカスタム投稿の一覧表示を出力する【アーカイブ.php】で、 1ページに表示される件 …

カスタム投稿

【サンプル】プラグインなしでカスタム投稿タイプを複数作る

  あまりWordPressをテクっていない私が、今回はプラグインなしでカスタム投稿タイプを作ってみました。 たぶん、詳しい人からするとかなり簡単にできてしまうんだと思いますが、 詳しい人ほ …

vegasスマホとPC

スマホとPCの条件分岐でVEGASを切り替える方法

  スマホとPCの条件分岐でVEGASを切り替える方法   表示したいところに以下を記述します。 <div class="img-movie"> & …

子テーマ functions.php

WordPress 子テーマのcssを読み込む

  親テーマのスタイルシート【style.css】の上部には、各テーマによって若干違いはあるが、以下のような記述があると思います。 @charset “UTF-8”; /*——— …

予約1

MTS Simple Booking-Cで指定した日の指定した時間だけ受け付けないようにする

  この日のこの時間だけ受け付けないようにしたい   無料版の予約システム【MTS Simple Booking-C】はすごく簡単に予約可能なプラグインですが、 ある程度決まったス …