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

/*
カスタム投稿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);

}

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']);
}

<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>

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

<?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; ?>

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