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.プラグインCustom Post Type UIをインストール 左メニューのプラグイン→新規追加→検索窓に「Custom Post Type UI」を入力すると出てきます。 インスト …

子テーマ functions.php

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

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

Google FontがEdgeで表示されない

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

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

リンク先を取得

簡単にリンク先のホームページを取得

  Browser Shots   WordPressのプラグインを利用して、簡単にリンク先のホームページの情報・画像を取得してサムネイルのように表示ができます。   & …

Delete kasutamufi-rudo

カスタムフィールドを削除できるプラグインはこれでOK!

サイトを作り始めの頃、作ってしまったカスタムフィールドだけど、いらなくなったものを消したいのにどうやれば消すことができるんだろうって思っていました。 カスタムフィールドが多くなって訳がわからなくなった …