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

スマホのトップページスライダーを非表示にする

Q.トップページスライダーをPCにだけ設定し、スマホでは表示させないようにしたい

トップページスライダーをスマホでは非表示にして、第2ブロックから表示させたいです。変更方法を教えてください。

A.下記のphpファイルの該当箇所を編集してください

編集するファイル:page-welcome.php
編集する箇所:

<div id="site-cover"></div>
<?php if(!is_mobile()): ?>
<section>
  <div class="slider heightasviewport has-background" data-order='0' data-parallax="scroll" data-image-src="<?php echo $options['slider_image1']; ?>"></div>
  <div class="slider heightasviewport has-background" data-order='1' data-parallax="scroll" data-image-src="<?php echo $options['slider_image2']; ?>"></div>
  <div class="slider heightasviewport has-background" data-order='2' data-parallax="scroll" data-image-src="<?php echo $options['slider_image3']; ?>"></div>

  <div id="topcover" class="topcover heightasviewport">
    <div class="text-center verticalcentersplash amore-welcome-center">
      <?php if($options['first_auto_br']): ?>
      <h2 class="first-h1"><?php echo nl2br($options['h1_text']); ?></h2>
      <?php else: ?>
      <h2 class="first-h1"><?php echo $options['h1_text']; ?></h2>
      <?php endif; ?>
    </div>
  </div>

  <div class="topcover heightasviewport" style="opacity:1;-ms-transform:translate(0px,0px);-webkit-transform:translate(0px,0px);transform:translate(0px,0px);"></div>

  <div id="top" class="heightasviewport" style="opacity:1; background:transparent">
    <a href="#third" class="animate"><div class="down-arrow bounce"><span class="fa fa-angle-down"></span></div></a>
  </div>
</section>
<?php else: ?>
<?php endif; ?>

※ハイライト部分を追加します。

関連記事

TCD LABO ご利用上の注意

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

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

お問合せ・ご要望

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