こんにちは！みう(@miu0512)です。スマホのローディングに時間がかかると、それだけでストレスを感じてしまうものですが、今回、一気に読み込んでタブ表示にさせて「重たさを感じさせないサイト」を意識して制作してみました。

実際にスマホテーマで使ったのはこの「新着記事」「人気記事」部分！

タブを使うことによって、長くなってしまいがちな記事一覧をスッキリ表示する事ができ、見ている人によりわかりやすく「おすすめな記事」を伝える手段になります。特にスマホのような小さな画面では、「見やすさ」が一番のカギとなります。

使用したjQueryプラグインはこちら

http://code.jquery.com/ui/1.10.3/jquery-ui.js

導入の仕方はカンタン３STEP

STEP１：＜head＞の中に以下を追加する

[html]
<!–jQuery読み込み–>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!–「jquery-ui.js」読み込み–>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
[/html]

STEP２：設置したい場所に以下を書き込む

[html]
<div id="tab">
<ul class="tabnavi">
<li><a href="#fragment-1">新着記事</a></li>
<li><a href="#fragment-2">人気記事</a></li>
</ul>

<div id="fragment-1" class="tab_content">
<h2>新着記事一覧</h2>
☆ここに記事一覧用の記述☆
</div>

<div id="fragment-2" class="tab_content">
<h2>人気記事一覧</h2>
☆ここに人気記事一覧用の記述☆
</div>

</div>
[/html]
[js htmlscript=”true”]
<script type="text/javascript">
$( "#tab" ).tabs();
</script>
[/js]

STEP３：CSSを調整する

タブの部分は「display:table;」を使用しました。

[css]
div#tab ul.tabnavi{
display:table;
table-layout: fixed;
width:100%;
}
div#tab ul.tabnavi li{
display:table-cell;
text-align:center;
}

div#tab ul.tabnavi li a {
color:#ffffff;
display:block;
background:#333333;
margin:0% 2% 5% 2%;
padding:3%;
}
[/css]

タブの中身の部分は各自調整が必要です。

[css]
.tab_content{
background:#333333;
padding:10px 0;
}
[/css]

もし、動かなかったら・・・？

人によって設定や構築方法が違うため、正常通り動かない場合があります。そんな時、私はWP標準のjQueryを止めたり、クラスを変えたり、以下の参考サイトを拝見させていただいたりしています。

WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 – かちびと.net

さいごに・・・

タブの実装方法はかなりのバリエーションが有りますが、今回私はテストも含めて「.tabs()」を使ったタブ表示にしてみました。意外とサクサク読み込んで動いてくれるので、結構気に入っています♪

最後までお付き合いいだだきありがとうございます！これからも、みう(@miu0512)を応援していただけたら嬉しいです！