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 テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた⑤

  1.選手一覧、メンバー一覧表示   選手登録を、とりあえず5名登録したら、今度は一覧表示で見てみたいです。 そこで、前回説明した「archive-member.php」を使って …

Google FontがEdgeで表示されない

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

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

真っ白

WordPressで画面が真っ白になってしまった時の対処方法

    突然画面が真っ白になって、何度試してもページが表示されなくて気分がブルーになってしまった時に試した方法   今回は、テーマの中にあるfunction.phpを編集 …

予約1

簡単にワードプレスで予約システムを作る

  シンプル予約システム MTS Simple Bookingを使う   WordPressでお店のホームページを作って、しかも予約システムも導入できたらいいのにと思って探していた …

アイキャッチ画像をPCとスマホ

アイキャッチ画像をPCとスマホで見え方を変える

  WordPressを使っていて、固定ページにもアイキャッチ画像を設定するところがあります。 そのアイキャッチ画像をページのヘッダーあたりに表示させたいと思いました。 PCでは、希望通りの …