The multimedia for the future
テーマ内に置いた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 テンプレートで 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> の前に書くのが吉。