WordPressの管理画面にタブをつける

ここんとこ、管理画面にタブ付きの設定画面をつけようと四苦八苦していた。
別に無くてもいいんだけど、設定項目が増えてくると、どうしてもほしい。

WordPressには元々、「jquery-ui-tabs」ってのが同梱されているので、
これを利用すれば簡単にできるっぽぃ。
実際、Welcartなんかのプラグインもこいつを利用してるみたいだし。
と、いろいろと参考にさせていただいたのだが、こいつにてこずった。

実際のソースは、手を出す部分がものすごく少なく、どこに悩んでいいのかわからないくらい。
1.jquery-ui-tabsのjQueryを読み込む

function custom_theme_add_scripts($loader_src) {
  if (is_admin()) {
    wp_enqueue_script('jquery-ui-tabs', array('jquery-ui-core'));
  }
}
add_action('wp_print_scripts', 'custom_theme_add_scripts');

こうする事で、自動的にjquery-ui-tabsに必要なソースを読み込んでくれる。
上記は、管理画面用に「is_admin()」で条件分岐してる。

2.html部分に、実際に動くJavaScriptソースを埋め込む


jQuery(function() {
  jQuery('#customtheme_tabs').tabs({});
});

この「tabs」ってのが、タグを自動的に解析して、表示、非表示やタブのデザイン変更を行ってくれる。
jQueryに「$」が使えないっていうトラップがある事に注意!

3.実際にタブ表示する内容を記述


こんだけ。
ただ、jQueryの知識が乏しく、原因がどこにあるのかわからない。
そうこうしているうちに、jquery-ui-tabsが正しく読み込まれていないことに気づく。
どうも、wp_enqueue_scriptが正しく動いていないっぽぃ。
散々悩んだ挙句、フックする場所が悪かった事が判明。
「ヘッダ内にjquery-ui-tabsを読み込むソースを書けばいいんだろー」っと安直に、
「admin_head」をフックしていたが、
wp_enqueue_scriptを使うには、「wp_print_scripts」をフックしなければいけなかったらしい。
参考にしていたサイトにもちゃんと書いてあった。
反省。。

ま、おかげでjQueryについても色々勉強できたし、よしとしよう。
それにしても、jquery-ui-tabs便利だわ。
JavaScriptで一生懸命ソース書こうとしてたのが馬鹿みたい。
実際、仕事でもこう言うのを実現するためにいろいろやってたけど、けっこー時間とられてたもんね。
プログラマって、本当に必要なくなるんじゃないかと思ってくる今日この頃。


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL