プログラミング

WordPressで使えるjQuery-UIの調べ方

高橋文樹

2012 年 6 月 19 日
最終更新： 2012 年 11 月 17 日
読了5分（3,397文字）
Javascript WordPress

この投稿は 12年前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

最近プラグインカスタマイズやテーマカスタマイズを請け負うことが多いのですが、その過程で気づいたことをば共有します。

WordPressはjQueryを中心にして、たくさんのJavascriptライブラリを採用しています。主に管理画面で使っているもの中心ですが、けっこう沢山あります。

WordPressで使われているJS

WordPressでJavascriptを読み込む時はwp_enqueue_scriptを使うと色々よしなにしてもらえるのですが、このリストはCodexのwp_enqueue_scriptの項目に挙がっています。ただ、実際にはもっとたくさんのライブラリが入っていることがわかりました。

これらのスクリプトにはそれぞれ名前が割り当てられていて、依存関係（ex. jQueryのDatepickerならjQuery UI Coreが必要とか）も登録されています。この名前さえわかってしまえばいちいち自分のテーマやプラグインにjQueryを同梱しなくても済みますし、不要なバッティングや二重読み込みも防げます。

では、どこを見ればいいのかというと、wp-includes/script-loader.phpです。ここに読み込まれるスクリプトが書いてあります。同じファイルには読み込まれるCSSも書いてありますね。

$scripts->add( 'jquery-ui-datepicker', '/wp-includes/js/jquery/ui/jquery.ui.datepicker.min.js', array('jquery-ui-core'), '1.8.16', 1 );

上の場合はjquery-ui-datepickerでDatePickerが登録されているということになりますね。

使い方

Datepickerを使いたいという場合を想像してみましょう。公開画面のprofileというページでだけDatepickerを使うとします。生年月日を入力させるとかのケースを考えましょう。

functions.phpにmy-script.jsを読み込む関数を書きます。

function _my_datepicker_loader(){
     if(is_page('profile'){
          wp_enqueue_script(
               'my-datepicker', //ハンドル名
               get_template_directory_uri().'/js/my-script.js', //JSへのURL
               array('jquery-ui-datepicker'), //依存するライブラリの名前
               '1.1', //バージョン名。キャッシュ対策で記載した方が吉
               true //フッターに読み込むか否か
          );
     }
}
add_action('wp_enqueue_scripts', '_my_datepicker_loader');

これでmy-script.jsの前にDate Pickerが読み込まれています。あとはJS側で普通に使えます。

jQuery(document).ready(function($){
     //my-datepickerというinputタグにDatepicker
     $('.my-datepicker').datepicker();
});

こんな感じです。Datepickerに限らず、自分が作ろうとしている機能でWordPressにすでに含まれているものはあるかなーとチェックしてみることで、無駄が減らせますね。

スタイルも登録する

さて、jQuery UIがたくさん登録されているのはよいとして、なぜかテーマが見当たりません。これも読み込まないとdialogとかは機能しないので、ぜひ登録しておきましょう。

jQuery UIのTheme Rollerでオリジナルテーマが作れます

なお、管理画面に読み込む場合はデザインテイストが似ているSmoothnessかOvercastが良いと思います。ちょっと色を変えるとベターですね。

公開画面で使う場合は、Theme Rollerでオリジナルテーマを作るとか、そういう努力をしたいですね。Theme Rollerからダウンロードするときは、全部入りにしておくと問題ないかと思います。

//initフックで登録する
add_action('init', '_register_jquery_ui_style');
function _register_my_jquery_ui_style(){
     wp_register_style(
          'jquery-ui-theme', //スタイルのハンドル名
          get_template_directory_uri().'css/jquery-ui.css, //jQuery UIのテーマCSS
          array(), //依存するCSSのハンドル名
          '1.8.12', バージョン名
          'screen'
     );
}
//使うときに呼び出す
add_action('wp_print_styles', '_my_'style);
function _my_style(){
     if(is_page('profile')){
          wp_enqueue_style('jquery-ui-theme');
     }
}

わざわざwp_register_styleで登録するのは面倒ですが、CSSに限らず、色んなページで読み込む必要のあるもの、他のライブラリに依存する可能性があるものは登録しておいた方がメンテナンス性は高いと思います。