ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

TCDテーマPrecious:スマホサイトとパソコンサイトで表示を分ける方法

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

Q.スマホのみバナーを非表示にしたい

PCサイトでは、バナーを表示してスマホサイトではバナーを非表示にする方法はありますか?

A.下記のファイルをご編集ください

非表示する部分をif(!is_mobile()){・・・}で囲むとスマホでは非表示になります。

スライダー下のバナーの場合(下記の赤枠部分)
index_banner
編集するファイル:header.php
編集する箇所:
変更前

<div id="index_banner">
    <ol class="clearfix">
     <?php for($i = 1; $i <= 3; $i++): ?>
     <?php if (!empty($options['index_banner_image'.$i])) { ?> 
     <li class="num<?php echo $i; ?>">
      <a class="image" href="<?php echo ($options['index_banner_url'.$i]); ?>"<?php if ($options['index_banner_target'.$i]){ echo ' target="_blank"'; }; ?>><img src="<?php esc_attr_e( $options['index_banner_image'.$i] ); ?>" alt="" /></a>
     </li>
     <?php }; ?>
     <?php endfor; ?>
    </ol>
   </div><!-- END #index_banner -->


変更後

  <div id="index_banner">
    <ol class="clearfix">
     <?php for($i = 1; $i <= 3; $i++): ?>
<?php if(!is_mobile()){?>
     <?php if (!empty($options['index_banner_image'.$i])) { ?> 
     <li class="num<?php echo $i; ?>">
      <a class="image" href="<?php echo ($options['index_banner_url'.$i]); ?>"<?php if ($options['index_banner_target'.$i]){ echo ' target="_blank"'; }; ?>><img src="<?php esc_attr_e( $options['index_banner_image'.$i] ); ?>" alt="" /></a>
     </li>
     <?php }; ?>
<?php }; ?>
     <?php endfor; ?>
    </ol>
   </div><!-- END #index_banner -->

A.下記のファイルをご編集ください

非表示する部分をif(!is_mobile()){・・・}で囲むとスマホでは非表示になります。

トップページ中央のバナーの場合(下記の赤枠部分)
center-banner
編集するファイル: index.php
編集する箇所:
変更前

<!-- center banner -->
 <?php if (!empty($options['index_center_banner_image'])) { ?>
 <a id="index_center_banner" href="<?php echo $options['index_center_banner_url']; ?>"<?php if ($options['index_center_banner_target']){ echo ' target="_blank"'; }; ?>><img src="<?php esc_attr_e( $options['index_center_banner_image'] ); ?>" alt="" /></a>
 <?php }; ?>


変更後

  <!-- center banner -->
<?php if(!is_mobile()){ ?>
 <?php if (!empty($options['index_center_banner_image'])) { ?>
 <a id="index_center_banner" href="<?php echo $options['index_center_banner_url']; ?>"<?php if ($options['index_center_banner_target']){ echo ' target="_blank"'; }; ?>><img src="<?php esc_attr_e( $options['index_center_banner_image'] ); ?>" alt="" /></a>
 <?php }; ?>
  <?php }; ?>

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事