[M]WordPress×jQuery：長い記事一覧を「jquery-ui.js」を使った「タブ表示」でスッキリ快適！

こんにちは！みう(@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>

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>

[JS]

<script type="text/javascript">
  $( "#tab" ).tabs();
</script>

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:#fff;
  display:block;
  background:#333333;
  margin:0% 2% 5% 2%;
  padding:3%;
}

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

[CSS]

.tab_content{
  background:#333;
  padding:10px 0;
}

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

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

さいごに・・・

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

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