WordPressテーマTCDのカスタマイズを研究するサイト

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

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 }; ?>
The following two tabs change content below.

tcd

TCD LABO | WordPressテーマTCDのカスタマイズを研究するサイト

関連記事

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。