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

第5ブロックの「READ MORE」のようなボタンを追加する

Q.リンクボタンを追加したい

AMOREのトップページの設定で第3と第5ブロックのところでリンク先ボタン「READ MORE」のようなボタンを追加したい。

A.下記のphpファイルの該当箇所を編集します

htmlの追加にて可能でございます。「and more」ボタン追加でご説明致します。

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

  
<div id="fifth" class="container">
    <div class="row">
      <div class="col-xs-120 no-padding">

            <div class="row amore-section">
              <?php for ($i=1; $i <=3 ; $i++): ?>
                <?php if($options['fifth_banner_image'.$i]): ?>
              <div class="col-sm-38 <?php if($i > 1) echo "col-sm-offset-3"; ?>">

                <div class="square-80 mb20 fifth-banner-image square-banner">
                  <div class="square-banner-label text-center"><?php echo $options['fifth_banner_headline'.$i]; ?></div>
                  <div class="has-background square-banner-image" style="background-image:url(<?php echo $options['fifth_banner_image'.$i]; ?>)"></div>
                </div>

                <h4 class="text-justify fifth-banner-headline mb20"><?php echo $options['fifth_banner_headline'.$i]; ?></h4>
                <p class="fifth-banner-copy mb20"><?php echo $options['fifth_banner_copy'.$i]; ?></p>
                <div class="button romaji"><a href="<?php echo $options['fifth_banner_url'.$i]; ?>"<?php if($options['fifth_banner_target'.$i]){echo ' target="_blank"';}; ?>>READ MORE</a></div>
                <div class="visible-xs"><br/><br/></div>
              </div>
                <?php endif; ?>
              <?php endfor; ?>
            </div>

      </div>
    </div>
  </div>
</section>

 <div id="fifth" class="container">
    <div class="row">
      <div class="col-xs-120 no-padding">

            <div class="row amore-section">
              <?php for ($i=1; $i <=3 ; $i++): ?>
                <?php if($options['fifth_banner_image'.$i]): ?>
              <div class="col-sm-38 <?php if($i > 1) echo "col-sm-offset-3"; ?>">

                <div class="square-80 mb20 fifth-banner-image square-banner">
                  <div class="square-banner-label text-center"><?php echo $options['fifth_banner_headline'.$i]; ?></div>
                  <div class="has-background square-banner-image" style="background-image:url(<?php echo $options['fifth_banner_image'.$i]; ?>)"></div>
                </div>

                <h4 class="text-justify fifth-banner-headline mb20"><?php echo $options['fifth_banner_headline'.$i]; ?></h4>
                <p class="fifth-banner-copy mb20"><?php echo $options['fifth_banner_copy'.$i]; ?></p>
                <div class="button romaji"><a href="<?php echo $options['fifth_banner_url'.$i]; ?>"<?php if($options['fifth_banner_target'.$i]){echo ' target="_blank"';}; ?>>READ MORE</a></div>
                <div class="visible-xs"><br/><br/></div>
              </div>
                <?php endif; ?>
              <?php endfor; ?>
            </div>

      </div>
    </div>

<div class="button2"><a href="http://motoda-sekizai.com/%E9%9C%8A%E5%9C%92%E3%81%AE%E3%81%94%E6%A1%88%E5%86%85/">AND MORE</a></div>

  </div>
</section>

さらにボタンのCSSファイルを追加します。
ボタンの大きさやサイズなどはお好みで調整ください。

編集するファイル:amore.css

.button2{
text-align:center;
}

.button2 a{
  border:0px solid transparent;
  border-radius:0px;
  position:relative;
  cursor:pointer;
  background:rgb(140,140,140);
  color:white;
  display:inline-block;
  padding:10px 100px 10px 100px;

  -webkit-transition:background 300ms;
  -moz-transition:background 300ms;
  -o-transition:background 300ms;
  transition:background 300ms;
}

「READ MORE」の文言を変更したい場合はこちら
第3、第5ブロックの「READ MORE」を非表示にしたい場合はこちら

関連記事

TCD LABO ご利用上の注意

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

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

お問合せ・ご要望

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