jQuery UIを使ってタブメニューを実装する

タブメニューを実装するには、jQuery UIのコンポーネントWidgets Tabsを使うと簡単にできます。ただし、WordPressで実装するには少し注意が必要です。WordPressにはjQuery本体とjQuery UIもパッケージングされていますが、独自仕様のjQueryになっています。

【コンテンツ】

  1. jQuery UIをダウンロードする
  2. jQuery本体をダウンロードする
  3. ダウンロードしたファイルをサイトのディレクトリにおく
  4. jsファイルとcssファイルをインクルードする
  5. HTMLコードを記述する
  6. JavaScriptコードを記述する

【記事執筆時の環境】
jQuery UI 1.10.3
jQuery本体 1.9.1
WordPress 3.8.1

jQuery UIをダウンロードする

下記サイトにアクセスします。
http://jqueryui.com/download/

jQuery UI ダウンロードサイト

Versionは、"Stable"のほうにチェックを入れます。

必要なコンポーネントだけダウンロードするため、Componentsの"Toggle All"のチェックを外します。

Widgetsの"Tabs"にチェックを入れます。
そうすると、UI Coreの必要なコンポーネントにも自動でチェックが入りますので、チェックが入っているのは、以下のコンポーネントになっているはずです。

・UI Core - Core
・UI Core - Widget
・Widgets - Tabs

コンポーネントのチェック画面

このままだとデフォルトのテーマでダウンロードされますので、テーマを選択することにします。

下の方にある、「design a custom theme」をクリックします。

テーマ選択

ThemeRollerの画面で、テーマを選択するために、[Gallery]タブをクリックします。

Galleryタブをクリックする画像

テーマが表示されますので、気に入ったテーマの下にある[Download]ボタンをクリックします。

Downloadボタンをクリックする画像

選択したテーマが表示されますので、[Download]ボタンをクリックするとファイルがダウンロードされます。

テーマのダウンロード

補足:テーマをカスタマイズする

選択したテーマはダウンロード前にカスタマイズすることができます。
ThemeRollerの画面で、[Roll Your Own]タブをクリックし、下にある項目メニューの中の数値を変更してください。

CSSの知識がある方なら、ダウンロードした後でも変更は可能です。

テーマのカスタマイズ

jQuery本体をダウンロードする

ダウンロードしたjQuery UIのzipファイルを展開すると、jsフォルダの中にjQuery本体のファイルも含まれています。

このファイルを使って構いませんが、Uncompressed版ですので、ファイル容量の小さなMinified版を使いたい場合は、下記サイトから別にjQuery本体をダウンロードする必要があります。
http://jquery.com/download/

jQueryバージョンは、jQuery UIに含まれていたバージョンなら動作を保証しています。
場合によっては、Past Releasesの中からダウンロードする必要があるかもしれません。

もし、Past Releasesの中に求めるバージョンがない時は、ブラウザのアドレスバーに次のようにファイル名を直接打ち込むことで、指定したバージョンをダウンロードすることができます。

http://code.jquery.com/jquery-<バージョン>.min.js

ダウンロードしたファイルをサイトのディレクトリにおく

実際にタブメニューを実装するために必要なファイルは以下です。
これらを、サイトの適当なディレクトリ内におきます。

(1)jQuery UIのjsファイル(jquery-ui-?.?.?.custom.min.js)
(2)jQuery本体のjsファイル(jquery-?.?.?.min.js)
(3)cssフォルダ以下のcssファイルと画像ファイル

jsファイルとcssファイルをインクルードする

例えば、WordPressサイトの場合は、以下のように記述します。
cssファイルはMinified版もありますが、後で編集しやすいように通常のUncompressed版を指定しています。

注意!

WordPressには内包されているjQueryがあり、必要に応じて読み込んでくれます。
しかし、それでは動作しない可能性がありますので、
<?php wp_deregister_script('jquery'); ?>
によって、WordPress内包のjQueryを読み込ませないようにしています。

ただし、インストールしているプラグインによっては、WordPress内包のjQueryを使用している場合もありますので、影響がないか確認してください。

HTMLコードを記述する

以下のように、タブメニューとそれぞれのタブで表示する内容を記述します。

JavaScriptコードを記述する

タブメニューを実装するページのhead内あるいはbody内に以下のコードを記述します。

ここで、'#jquery-tab-menu'は、タブメニューをラップするdiv要素に指定したIDです。

また、「active: 0」は、ページを読み込んだ時に、1番目のタブをアクティブにする指定です。
2番目のタブをアクティブにするには、「active: 1」とします。
ver1.10からは、従来のselectedが使えなくなったので注意してください。

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ