ここんとこ、管理画面にタブ付きの設定画面をつけようと四苦八苦していた。
別に無くてもいいんだけど、設定項目が増えてくると、どうしてもほしい。
WordPressには元々、「jquery-ui-tabs」ってのが同梱されているので、
これを利用すれば簡単にできるっぽぃ。
実際、Welcartなんかのプラグインもこいつを利用してるみたいだし。
と、いろいろと参考にさせていただいたのだが、こいつにてこずった。
実際のソースは、手を出す部分がものすごく少なく、どこに悩んでいいのかわからないくらい。
１．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()」で条件分岐してる。
２．html部分に、実際に動くJavaScriptソースを埋め込む
jQuery(function() {
jQuery('#customtheme_tabs').tabs({});
});
この「tabs」ってのが、タグを自動的に解析して、表示、非表示やタブのデザイン変更を行ってくれる。
jQueryに「$」が使えないっていうトラップがある事に注意！
３．実際にタブ表示する内容を記述
こんだけ。
ただ、jQueryの知識が乏しく、原因がどこにあるのかわからない。
そうこうしているうちに、jquery-ui-tabsが正しく読み込まれていないことに気づく。
どうも、wp_enqueue_scriptが正しく動いていないっぽぃ。
散々悩んだ挙句、フックする場所が悪かった事が判明。
「ヘッダ内にjquery-ui-tabsを読み込むソースを書けばいいんだろー」っと安直に、
「admin_head」をフックしていたが、
wp_enqueue_scriptを使うには、「wp_print_scripts」をフックしなければいけなかったらしい。
参考にしていたサイトにもちゃんと書いてあった。
反省。。
ま、おかげでjQueryについても色々勉強できたし、よしとしよう。
それにしても、jquery-ui-tabs便利だわ。
JavaScriptで一生懸命ソース書こうとしてたのが馬鹿みたい。
実際、仕事でもこう言うのを実現するためにいろいろやってたけど、けっこー時間とられてたもんね。
プログラマって、本当に必要なくなるんじゃないかと思ってくる今日この頃。
コメント