【メモ】WordPress, テーマ内のJavaScriptをwp_enqueue_scriptに追加

テーマ内に置いたJavaScriptファイルをwp_enqueue_scriptで呼び出せるように設定する。

functions.php

function js_enque_method() {
   wp_register_script('example_script',get_bloginfo('template_url').'/js/example.js','jQuery','1.0');
   wp_enqueue_script('example_script');
}
add_action('wp_enqueue_scripts', 'js_enque_method');

テーマ内に[js]フォルダを作り、そのフォルダ内に[example.js]があります。
example.jsのVersionは1.0です。
example.jsはjQueryを必要とします。

WordPress JavaScriptライブラリをテンプレートで使う作法

WordPress テンプレートで prototype.js, jQuery…etc などの JavaScriptライブラリを使いたい時にテンプレートにハードコードしてはいけない。
プラグインを作成し JavaScriptライブラリを使いたい時も同じ。

コンフリクトを起こすかもしれないし、同じライブラリを何度も呼び出してしまうかもしれない。

ちゃんと関数が用意されている。

// wp_head の前で使う!
wp_enqueue_script( 'handle', 'src', 'deps', 'ver');
// wp_head を次に - wp_head でライブラリの<script>コードが書出される
wp_head();

Function Reference/wp enqueue script

handle(string)
ライブラリ名(小文字)

src(string)
ライブラリまでのパス – 通常は指定しなくてよい。
添付されているライブラリが最新版というわけではないので、どうしても最新版でないといけないような時に使うのだろう。

deps(array)
– 通常は指定しなくてよい。

ver (string)
– 通常は指定しなくてよい。

handle を指定すればことたりるはず。

// prototype.js and scriptaculous.js
wp_enqueue_script('prototype');
wp_enqueue_script('scriptaculous-effects');
wp_head();

下記のライブラリは WordPress に添付されている。

Script Name Handle
Scriptaculous Root scriptaculous-root
Scriptaculous Builder scriptaculous-builder
Scriptaculous Drag & Drop scriptaculous-dragdrop
Scriptaculous Effects scriptaculous-effects
Scriptaculous Slider scriptaculous-slider
Scriptaculous Sound scriptaculous-sound
Scriptaculous Controls scriptaculous-controls
Scriptaculous scriptaculous
Image Cropper cropper
SWFUpload swfupload
SWFUpload Degarade swfupload-degrade
SWFUpload Queue swfupload-queue
SWFUpload Handlers swfupload-handlers
jQuery jquery
jQuery Form jquery-form
jQuery Color jquery-color
jQuery UI Core jquery-ui-core
jQuery UI Tabs jquery-ui-tabs
jQuery UI Sortable jquery-ui-sortable
jQuery Interface interface
jQuery Schedule schedule
jQuery Suggest suggest
ThickBox thickbox
Simple AJAX Code-Kit sack
QuickTags quicktags
ColorPicker colorpicker
Tiny MCE tiny_mce
Prototype Framework prototype
Autosave autosave
WordPress AJAX Response wp-ajax-response
List Manipulation wp-lists
WP Common common
WP Editor editor
WP Editor Functions editor-functions
AJAX Cat ajaxcat
Admin Categories admin-categories
Admin Tags admin-tags
Admin custom fields admin-custom-fields
PAssword Strength Meter password-strength-meter
Admin Comments admin-comments
Admin Users admin-users
Admin Forms admin-forms
XFN xfn
Upload upload
PostBox postbox
Slug slug
Post post
Page page
Link link
Comment comment
Admin Gallery admin-gallery
Media Upload media-upload
Admin widgets admin-widgets
Word Count word-count
WP Gears wp-gears
Theme Preview theme-preview

ちなみに wp_head はなるべく </head> の前に書いておく。
プラグインなどの中にも wp_head を使用してコードを吐き出している場合がある。

テンプレートでは wp_footer(); の記述を忘れないように挿入場所は </body> の前に書くのが吉。