jQuery-

Hi, I detected your main language is not Japanese. I have an english version of about me, so please try it!

この投稿は5年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2012 年 6 月 19 日 1,863日前)
4,402文字 (読了時間11分)

SPONSORED LINK

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

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

WordPressで使われているJS
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でオリジナルテーマが作れます
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に限らず、色んなページで読み込む必要のあるもの、他のライブラリに依存する可能性があるものは登録しておいた方がメンテナンス性は高いと思います。

おまけ: script-loader.phpを置換してみた

置換して、どれだけのハンドルが登録されているのか見てみました。100個以上ありますね。いまはもう使われていないものもありますが、swfobjectとかの汎用性が高いものもあります。

  1. utils
  2. common
  3. sack
  4. quicktags
  5. colorpicker
  6. editor
  7. wp-fullscreen
  8. prototype
  9. wp-ajax-response
  10. wp-pointer
  11. autosave
  12. wp-lists
  13. scriptaculous-root
  14. scriptaculous-builder
  15. scriptaculous-dragdrop
  16. scriptaculous-effects
  17. scriptaculous-slider
  18. scriptaculous-sound
  19. scriptaculous-controls
  20. scriptaculous
  21. cropper
  22. jquery
  23. jquery-ui-core
  24. jquery-effects-core
  25. jquery-effects-blind
  26. jquery-effects-bounce
  27. jquery-effects-clip
  28. jquery-effects-drop
  29. jquery-effects-explode
  30. jquery-effects-fade
  31. jquery-effects-fold
  32. jquery-effects-highlight
  33. jquery-effects-pulsate
  34. jquery-effects-scale
  35. jquery-effects-shake
  36. jquery-effects-slide
  37. jquery-effects-transfer
  38. jquery-ui-accordion
  39. jquery-ui-autocomplete
  40. jquery-ui-button
  41. jquery-ui-datepicker
  42. jquery-ui-dialog
  43. jquery-ui-draggable
  44. jquery-ui-droppable
  45. jquery-ui-mouse
  46. jquery-ui-position
  47. jquery-ui-progressbar
  48. jquery-ui-resizable
  49. jquery-ui-selectable
  50. jquery-ui-slider
  51. jquery-ui-sortable
  52. jquery-ui-tabs
  53. jquery-ui-widget
  54. jquery-form
  55. jquery-color
  56. suggest
  57. schedule
  58. jquery-query
  59. jquery-serialize-object
  60. jquery-hotkeys
  61. jquery-table-hotkeys
  62. thickbox
  63. jcrop
  64. swfobject
  65. plupload
  66. plupload-html5
  67. plupload-flash
  68. plupload-silverlight
  69. plupload-html4
  70. plupload-all
  71. plupload-handlers
  72. swfupload
  73. swfupload-swfobject
  74. swfupload-queue
  75. swfupload-speed
  76. swfupload-all
  77. swfupload-all
  78. swfupload-handlers
  79. comment-reply
  80. json2
  81. imgareaselect
  82. password-strength-meter
  83. user-profile
  84. admin-bar
  85. wplink
  86. wpdialogs
  87. wpdialogs-popup
  88. word-count
  89. media-upload
  90. hoverIntentajaxcat
  91. admin-categories
  92. admin-tags
  93. admin-custom-fields
  94. admin-comments
  95. xfn
  96. postbox
  97. post
  98. link
  99. comment
  100. admin-gallery
  101. admin-widgets
  102. theme
  103. theme-preview
  104. inline-edit-post
  105. inline-edit-tax
  106. plugin-install
  107. farbtastic
  108. dashboard
  109. list-revisions
  110. media
  111. image-edit
  112. set-post-thumbnail
  113. nav-menu
  114. custom-background
 

SPONSORED LINK

この記事について

この記事はが2012 年 6 月 19 日にプログラミングの記事として公開しました。

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。