簡単に切替可能なタブをつくる方法

• Tweet
• 
• 
• Sharebar

• Tweet
• 
• 

やり方

1.「domtabs.js」「domtab.css」をダウンロード

以下より「domtabs.zip」をダウンロード後、解凍→テーマフォルダにアップロードする
→ダウンロード

2.テーマにコード追加

タブを追加したいテーマファイルのheader.php等に以下のコードを追加する

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/domtab.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/domtab.css" media="screen" />

次にタブを表示したい箇所に以下のコードを挿入

<div class="domtab">
<ul class="domtabs">
<li><a href="#t1">Tab 1</a></li>
<li><a href="#t2">Tab 2</a></li>
<li><a href="#t3">Tab 3</a></li>
</ul>
<div>
<a name="t1" id="t1"></a>
<p>表示したい内容1</p>
</div>
<div>
<a name="t2" id="t2"></a>
<p>表示したい内容2</p>
</div>
<div>
<a name="t3" id="t3"></a>
<p>表示したい内容3</p>
</div>
</div>

好みに合わせて「domtab.css」は変更してください。

＜ネタ元＞
→10 WordPress Hacks to Make your Life even Easier | Blog Oh Blog