• 最終更新日:

【WordPress】カスタムフィールドを使って、スライダー画像をPC表示とSP表示で切り替える方法

【WordPress】カスタムフィールドを使って、スライダー画像をPC表示とSP表示で切り替える方法

今回はAdvanced Custom Fields(以下、ACF)を使って、スライダーに使う画像をPC表示とSP表示で切り替える方法を紹介します。

前提条件は以下

  • Advanced Custom FieldsのPro版を使用
  • スライダーはSwiperを使用
  • スライダー画像は背景画像として設置
  • 管理画面上で、PC用画像とSP用画像の指定ができる

説明する環境は以下

  • macOS Catalina v10.15.5
  • Visual Studio Code v1.46.1
この記事の目次

カスタムフィールドを使って、スライダー画像をPC表示とSP表示で切り替える方法

スライダー画像にbackground-imageを使って表示させた場合、PC表示とSP表示で見え方が違ってしまうことが良くあります。

backgroud-positonを使えばある程度調整はできますが、1枚1枚の画像に対して表示位置を変更するのは大変。それならPC表示とSP表示で、使う画像を変えてしまおうというのが今回の主旨です。

スライダー用のカスタム投稿を作成

スライダーの画像を管理画面上で切り替えできるように、カスタム投稿「slider」を作成します。functuions.phpに以下を書きます。

/*
カスタム投稿sliderの実装
*/
add_action('init', 'slider_init');
function slider_init(){
	  $labels = array(
	    'name' => _x('Slider', 'post type general name'),
	    'singular_name' => _x('Slider', 'post type singular name'),
	    'add_new' => _x('新規追加', 'Slider'),
	    'add_new_item' => __('新しくメニューを追加する'),
	    'edit_item' => __('スライダーを編集'),
	    'new_item' => __('新しいスライダー'),
	    'view_item' => __('スライダーを見る'),
	    'search_items' => __('スライダーを探す'),
	    'not_found' =>  __('スライダーがありません'),
	    'not_found_in_trash' => __('ゴミ箱にスライダーはありません'),
	    'parent_item_colon' => ''
	  );
	  $args = array(
	    'labels' => $labels,
	    'public' => true,
	    'publicly_queryable' => true,
	    'show_ui' => true,
	    'query_var' => true,
      'rewrite_withfront'=> true,
	    'rewrite' => true,
	    'capability_type' => 'post',
	    'hierarchical' => false,
			'menu_position' => 5,
			'menu_icon'   => 'dashicons-slides',
      'show_in_rest' => false, 
	    'supports' => array('title','editor','thumbnail','page-attributes'),
	    'has_archive' => false

	  );
	  register_post_type('slider',$args);

}

これでカスタム投稿名「Slider」ができました。管理画面のメニューでは以下のように表示されます。

カスタムフィールドを作成する

左側のメニューにあるカスタムフィールドから「新規追加」をクリックします。

フィールドグループは以下のように設定します。

  • フィールドラベル:スライダー画像
  • フィール名:slider_img_area
  • フィールドタイプ:繰り返しフィールド

次にサブフィールドを設定します。

PC表示用のサブフィールドについては以下です。

  • フィールドラベル:スライダー画像(PC表示用)
  • フィールド名:slider_img_pc
  • フィールドタイプ:画像
  • 返り値のフォーマット:画像 配列
  • ライブラリ:投稿にアップロードされる

SP表示の用のサブフィールドは以下です。

  • フィールドラベル:スライダー画像(SP表示用)
  • フィールド名:slider_img_sp
  • フィールドタイプ:画像
  • 返り値のフォーマット:画像 配列
  • ライブラリ:投稿にアップロードされる

最後にルールを以下のように指定します。

投稿画面で写真を登録する

サイドバーにあるカスタム投稿名「Slider」をクリックして、記事を新規追加します。

以下では記事名をSliderにしています。

「行を追加」をクリックすることで、PC表示用とSP表示用の画像が登録できるようになります。それぞれの表示にあった画像を追加しましょう。

PC表示とSP表示を判定する

WordPressではis_mobile関数を持っていて、PCとスマホの表示を判定することができます。ただ、スマホ判定の中にタブレットも入っているため、スマホだけを判定させるためには以下のコードを追加する必要があります。

functions.phpに以下をコピペします。

function is_mobile() {
    $useragents = array(
        'iPhone',          // iPhone
        'iPod',            // iPod touch
        '^(?=.*Android)(?=.*Mobile)', // 1.5+ Android
        'dream',           // Pre 1.5 Android
        'CUPCAKE',         // 1.5+ Android
        'blackberry9500',  // Storm
        'blackberry9530',  // Storm
        'blackberry9520',  // Storm v2
        'blackberry9550',  // Storm v2
        'blackberry9800',  // Torch
        'webOS',           // Palm Pre Experimental
        'incognito',       // Other iPhone browser
        'webmate'          // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

こちらのコードは以下の記事を参考にさせてもらいました。

スライダーの設定をする

今回はSwiperを使用するので以下のコードをhead内に追加します。IE11でも動くように4系を指定しています。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

次にSwiperを実行するコードを書きます。init.jsという名前のファイルを作り、以下のコードを書きます。

window.addEventListener('load', function(){
  if (document.querySelector(".swiper-container")) {
    var mySwiper = new Swiper(".swiper-container", {
      loop: true, //ループさせる
      effect: "fade", //フェードのエフェクト
      autoplay: {
        delay: 4000, //4秒後に次の画像へ
        disableOnInteraction: false, //ユーザー操作後に自動再生を再開する
      },
      speed: 2000, //2秒かけながら次の画像へ移動
    });
  }
});

コードが書けたら、init.jsもhead内に読み込ませましょう。

スライダーを表示させる

テンプレート内で、スライダーを表示させたいエリアに以下のコードをコピペします。
(例:front-page.php、page.phpなど)

<?php
     global $post;

     $args = array(
      'posts_per_page' => 1, //1記事のみ出力
      'post_status' => 'publish', //公開の記事だけ
      'no_found_rows' => true, //ページャーは使わない
      'post_type' => 'slider', //カスタム投稿slag
      );
      $sliderPost = get_posts( $args );
      if($sliderPost ) : foreach( $sliderPost  as $post ) : setup_postdata($post);
?>

<div class="swiper-container">
      <!-- Additional required wrapper -->
    <div class="swiper-wrapper">

      <?php if( have_rows('slider_img_area') ): ?>
           <?php while( have_rows('slider_img_area') ): the_row();
              $imgPc = get_sub_field('slider_img_pc');
              $imgSp = get_sub_field('slider_img_sp');
		   ?>

        <?php if(is_mobile() && ($imgSp)): ?>
        <div class="swiper-slide" style="background-image: url('<?php echo $imgSp['url']; ?>');">
        </div>
        <?php endif; ?>

        <?php if(!is_mobile() && ($imgPc)): ?>
        <div class="swiper-slide" style="background-image: url('<?php echo $imgPc['url']; ?>');">
        </div>
        <?php endif; ?>

      <?php endwhile; // 繰り返し終了 ?>
      <?php endif; //条件分岐終了 ?>

    </div>
 </div>

  <?php endforeach; //------------繰り返しここまで----------
      ?>
  <?php //-----------get_posts終了----------
             wp_reset_postdata();
      endif; ?>

最後にstyle.cssで表示を整えます。背景画像を全画面として表示させる設定です。

style.cssに以下をコピペします。

.swiper-slide {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh; /* 全画面表示 */
    overflow: hidden;
    -webkit-backface-visibility: hidden; /* フェードを滑らかに */
    backface-visibility: hidden;
  }

これで設定は以上になります。

おわりに

今回はスライダーに使う画像を、PC表示とSP表示で切り替える方法を説明しました。WordPressにあるAdvanced Custom Fieldsを使えば管理画面から柔軟に画像の変更ができるので便利です。

特に背景画像をスライダーに使っていて、PC表示とSP表示の見え方を調整したいときに使える設定です。