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

スライダー下のバナーを増やしたい

Q.スライダー下のバナーを増やしたい

LUXE (TCD022) のトップページスライダー下のバナーを増やしたいと考えております。管理画面には3つ分の操作フレームしかございませんが、増やす方法を教えてください。

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

テンプレートファイルに直接コード(HTML)をご記入頂く形となりますので、管理画面に入力フレームは表示されません。
ご了承ください。内容変更時も直接、ファイルを編集してください。

編集するファイル:top.php
編集する箇所:
変更前

	<?php if ($options['index_banner_image1']) { ?>
		<div id="index-menu" class="clearfix mb20">
			<ul id="index-menu-ul" class="clearfix">
				<?php for($i = 1; $i <= 3; $i++): ?>
                (中略)
				<?php endfor; ?>
		</ul>
		</div>
		<?php }; ?>


変更後

    
		<?php if ($options['index_banner_image1']) { ?>
		<div id="index-menu" class="clearfix mb20">
			<ul id="index-menu-ul" class="clearfix">
				<?php for($i = 1; $i <= 3; $i++): ?>
                 (中略)
				<?php endfor; ?>
<!-- ここから追加する内容 -->
				<li class="index-meun-li mt10">
					<p class="index-menu-thumb"><a href="リンク先URL"><img src="画像のパス" alt="" /></a></p>
					<h2 class="index-menu-title"><a href="リンク先URL">任意の文字列(見出し)</a></h2>
					<p class="index-menu-desc"><a href="リンク先URL">任意の文字列(本文)</a></p>
				</li>
				<li class="index-meun-li mt10">
					<p class="index-menu-thumb"><a href="リンク先URL"><img src="画像のパス" alt="" /></a></p>
					<h2 class="index-menu-title"><a href="リンク先URL">任意の文字列(見出し)</a></h2>
					<p class="index-menu-desc"><a href="リンク先URL">任意の文字列(本文)</a></p>
				</li>
				<li class="index-meun-li-last mt10">
					<p class="index-menu-thumb"><a href="リンク先URL"><img src="画像のパス" alt="" /></a></p>
					<h2 class="index-menu-title"><a href="リンク先URL">任意の文字列(見出し)</a></h2>
					<p class="index-menu-desc"><a href="リンク先URL">任意の文字列(本文)</a></p>
				</li>
<!-- ここまで追加する内容 -->
			</ul>
		</div>
		<?php }; ?>

上記のようにコードを追加してください。(上記はバナーを3つ追加する例)
ご注意頂きたい点としては、3の倍数の場合だけ、<li>のクラスが異なることです。
「index-meun-li-last」と、「-last」が付いていることにお気を付けください。
また、バナーが上下2段となるため、天地のマージンが必要になるかと思われます。
上記例では「mt10」というクラスを指定することで、上マージンに10pxをつけています。
style.cssに同様のクラスを5px刻みで定義しておりますので、必要に応じてご利用ください。

関連記事

TCD LABO ご利用上の注意

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

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

お問合せ・ご要望

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