WP ウィジェットでの jQuery タブの使い方

WordPress のウィジェットで jQuery のタブを使う時のポイントをいくつか紹介します

  1. jQuery の依存関係と読み込み
  2. タブとして動作させるにはCSSをロードする必要あり
  3. div タグの id と class の指定に注意
  4. WordPress のバージョンに注意

jQuery の依存関係と読み込み

ウィジェットプラグインを作るときに、jQuery を使用するには、ウィジェットのコンストラクタで jQuery ライブラリを読みこませる必要があります

例えば、タブを使用する場合に何を読みこませれば良いか調べなければなりません

インターネットで検索するのが一般的かも知れませんが、WordPressの wp-includes/script-loader.php ファイルを調べるのが、手っ取り早いです

Netbeans で script-loader.php ファイルを開き、jquery-ui-tabs を検索します

そこに記述されている array(‘jquery-ui-core’, ‘jquery-ui-widget’) が依存ファイルです

WP-jquery

依存ファイルを調べたらウィジェットのコンストラクタで wp_enqueue_script 関数を用いて順に読み込みます

 wp_enqueue_script( 'jquery' );
 wp_enqueue_script( 'jquery-ui-core' );
 wp_enqueue_script( 'jquery-ui-widget' );
 wp_enqueue_script( 'jquery-ui-tabs' );

参考サイト WordPressで使えるjQuery-UIの調べ方

タブとして動作させるにはCSSをロードする必要あり

次にどのようなコードが必要か調べます

タブについて検索すると沢山ヒットするので、とりあえず下記サイトを参考に実装します

実装したのは、こんな感じのコードです

    <div class="ga-pvc-widget-tabs" >
        <ul>
            <li><a href="#ga-pvc-tab-today">Today</a></li>
            <li><a href="#ga-pvc-tab-7days">7day</a></li>
            <li><a href="#ga-pvc-tab-30days">30day</a></li>
            <li><a href="#ga-pvc-tab-year">Year</a></li>
        </ul>
        <div id="ga-pvc-tab-today">
            <?php echo $ranking[0]; ?>
        </div>
        <div id="ga-pvc-tab-7days">
            <?php echo $ranking[1]; ?>
        </div>
        <div id="ga-pvc-tab-30days">
            <?php echo $ranking[2]; ?>
        </div>
        <div id="ga-pvc-tab-year">
            <?php echo $ranking[3]; ?>
        </div>
    </div>      

jQuery 側で必要なコードは、最低限 こんな感じです

jQuery(document).ready(function(){
    jQuery( '.ga-pvc-widget-tabs' ) . tabs();
});

番号なしリストを用いてjQueryがタブとして機能するように扱ってくれるようです

但し、タブとして表示するにはCSSをロードする必要があります

CSSをロードしないとリストのまま表示されてしまいます

tabs-list

CSSをロードすることでこのように表示することが出来ます

tabs-tab

それでは、そのCSSを用意するにはどうしたらいいかというと、http://jqueryui.com/themeroller/ からカスタマイズしたCSSをダウンロードすることが出来ます

使い方は、jQueryUIのオリジナルテーマをThemeRollerで作成する が参考になります

ここで作成した CSSをウィジェットのコンストラクタで読みこめばタブとして表示されます

 $urlpath = plugins_url('jquery-ui-1.9.2.custom.css', __FILE__);
 wp_register_style('jquery-ui-custom', $urlpath);
 wp_enqueue_style( 'jquery-ui-custom' );

div タグの id と class の指定に注意

ウィジェットでタブ切り替えを使う場合、そのウィジェットは複数配置される可能性があります

最初にサンプルコードを参考に実装した時は、divタグを <div id="ga-pvc-widget-tabs" > のように id 指定していたのですが、これだと複数配置した場合に同じ名前の idタグが複数存在してしまいうまく表示されなくなります

(1つしか配置しないなら問題ありません)

そこで class に変えて見たところうまく表示されるようになりました

全体を囲む div タグ部分だけを class にしています

切り替えられるタグ毎のところは id のままです、ここを class にすると正常に動作しません

あまりこういう使い方はしないのかも知れませんが、ウィジェットで使用する場合は念のため class で指定しておいたほうが良いかも知れません

複数配置

WordPress のバージョンに注意

最後に WordPress のバージョンにより、含まれている jQuery のバージョンが異なるので注意が必要です

jQueryは、バージョン間での変更が結構あります、特に最新の WordPress3.6 で jQuery UI 1.10 となったのでプラグインプログラム等でjQueryを使用していた場合は影響が出る可能性があります

WordPress 3.6 では Jquery UI のバージョンアップによりタブ表示等に影響が出る場合がありますよー

少なくとも WordPress の最新バージョンとその2つ前ぐらいのバージョンでは動作することが望ましいので、注意です

以上

WordPress のウィジェットで jQuery のタブを使う時のポイントを紹介しました (^^)

関連コンテンツ


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss