wordpressにはwp-includeのjsディレクトリにprototypeやjQuery等のライブラリーが色々入っている。
テーマやプラグインでこれらを使用出来るようheadにscriptタグを挿入するにはwp_enqueue_script()を使用します。
独自に作成したjsファイルや、プラグインやテーマに同封したjsファイルにも使えるので便利。
Usage&Parameters
<?php wp_enqueue_script( 'handle', 'src', 'deps', 'ver'); ?>
- handle(string)
- スクリプトの名前（下記参照）
- src(string)(Optional)
- WordPressのルートディレクトリからのパス。wordpressで通常使われてないスクリプトを使用する際に必須。
例ｔ：/wp-includes/js/scriptaculous/scriptaculous.js - deps(array)(Optional)
- handleで設定したスクリプトが依存しているスクリプトを配列で設定する。
（LightBoxとprototypeの関係のように、スクリプトがロードされる前に読み込んでおかなければならないスクリプトのこと）
wordpressで通常使われてないスクリプトを使用する際に必須。デフォルトはfalse。 - ver (string) (Optional)
- スクリプトのバージョンナンバー。デフォルトはfalse。
?ver=1.6のような形式でURIに付属される。キャッシュにかかわらず正しいバージョンがクライアントに送られるのを保証する。
WordPressのデフォルトスクリプトに含まれるものとそのハンドル名
| Script Name | Handle |
|---|---|
| Docking Boxes | dbx |
| Fade Anything Technique | fat |
| Simple AJAX Code-Kit | sack |
| QuickTags | quicktags |
| ColorPicker | colorpicker |
| Tiny MCE | tiny_mce |
| WordPress Tiny MCE | wp_tiny_mce |
| Prototype Framework | prototype |
| Autosave | autosave |
| WordPress AJAX | wp-ajax |
| List Manipulation | listman |
| Scriptaculous Root | scriptaculous-root |
| Scriptaculous Builder | scriptaculous-builder |
| Scriptaculous Drag & Drop | scriptaculous-dragdrop |
| Scriptaculous Effects | scriptaculous-effects |
| Scriptaculous Slider | scriptaculous-slider |
| Scriptaculous Controls | scriptaculous-controls |
| Scriptaculous | scriptaculous |
| Image Cropper | cropper |
| SWFUpload | swfpload |
| jQuery | jquery |
| ThickBox | thickbox |
Usage
scriptaculousの場合
<?php wp_enqueue_script('scriptaculous'); ?>
scriptaculousに依存するスクリプトをプラグインで使用する場合
<?php wp_enqueue_script('newscript',
'/wp-content/plugins/someplugin/js/newscript.js',
array('scriptaculous'),'1.0' ); ?>
デフォルトテーマのヘッダ画像の色設定で使われてるカラーピッカーの場合
wp_enqueue_script('colorpicker');
javascriptでColorPickerのインスタンス作成。
windowを入れない場合はピッカーのDIVかwrite()が必要。
//ヘッダに
var cp = new ColorPicker('window'); //ポップアップウィンドウ
var cp = new ColorPicker(); //DIV
//DIVなら適当な場所に▼を書くとcolorPickerDivが入る
<script type="text/javascrip">cp.writeDiv()</script>
トリガーとピッカーのDIV
<A HREF="#" onClick="cp.show('pick');return false;" NAME="pick" ID="pick">Pick</A>
writeDiv()の代わりに直接書いてもいい
<div id="colorPickerDiv" style="z-index: 100;background:#eee;border:1px solid #ccc;position:absolute;visibility:hidden;"></div>
選択した色コードをテキストエリアに追加したいという場合には以下どちらかの方法を取る
pickColor()でvalueを変更する場所を指定
function pickColor(color) {
field.value = color;
}
fieldはコードを入れたいテキストエリアを適当に。
またはトリガーを次のようにする
<a href="#" onclick="cp.select(document.forms[0].color,'pick');return false;" name="pick" id="pick">Pick</A>
select()は、前の引数が選択したカラーコードの表示先、後の引数がアンカー名。
サンプルの場合だと最初のformにあるname=”color”のinputという意味。
「[WP]wordpress付属のJavascriptを使用する」への4件のフィードバック