ワードプレスのプラグイン、カスタマイズの制作過程とソースを公開。PHP,CSS,HTML,Javascript を無料で覚える。数十年の実務経験のプログラマのサイト。

wpColorPicker読み込み手順 jQuery(…).wpColorPicker is not a functionはぁ?

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 の準備ができたら、これやってねって意味。

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

<?php
wp_enqueue_style( ‘wp-color-picker’);
wp_enqueue_script( ‘wp-color-picker’);
?>
<input type=”text” id=”fcolor”>
<input type=”text” id=”bcolor”>
<script>
jQuery(document).ready(function(){
jQuery(‘#fcolor’).wpColorPicker(options);
jQuery(‘#bcolor’).wpColorPicker(options);
});
</script>


あなたの一助になれば幸いです。
スポンサードリンク

関連記事

関連サイト