wpColorPicker読み込み手順を間違うと

jQuery(…).wpColorPicker is not a function

はぁ？ってなりますよね？

ネットで調べるとどこもかしこも分断していて、結局どう書けばいいんだ？と

解説は二の次、場合によってはいらない。

結果が欲しい、と思うのはプログラマの性。

つーことで、こう書きます。

—php—
wp_enqueue_style( ‘wp-color-picker’);
wp_enqueue_script( ‘wp-color-picker’);
—/php—

—html—
<input type=”text” id=”fcolor”>
<input type=”text” id=”bcolor”>
—/html—

—script—
// カラーピッカ―
jQuery(document).ready(function(){
jQuery(‘#fcolor’).wpColorPicker(options);
jQuery(‘#bcolor’).wpColorPicker(options);
});
—/script—

—php— から　—/php—　までが php のソース部分。
ここで ワードプレスのカラーピッカーの準備を行います。

—html— から —/html— まででカラーピッカーを設置するフィールドを準備

—script— から —/script— で実際のフィールドとカラーピッカーを結び付けます。

これだけ。

味噌は、

jQuery(document).ready(function(){　}

これで wpColorPicker の呼出しを囲んでしまうこと。

これをつけていないと、この結び付けのスクリプトの位置によっては

jQuery(…).wpColorPicker is not a function

てな、エラーメッセージをもらいます。

この一文は、jQuery の準備ができたら、これやってねって意味。

以下カラーピッカーを使うときの１ページのサンプルです。



あなたの一助になれば幸いです。