[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
カラーピッカー
管理画面でプラグインの設定などでカラーピッカーを表示したい場合、wp_color_pickerを使用します。
色をクリックするとテキストフィールドにカラーコードが入力されます。便利。
実装
まずは外部jsファイルを作成し、そのなかでwp_color_pickerの処理を記述します。
階層は [wp-content/plugins/プラグインの名前/js] の配下に。
ファイル名は[color-picker.js]としました。(プラグインで使用の場合)
color-picker.js
(function( $ ) { var options = { defaultColor: false, change: function(event, ui){}, clear: function() {}, hide: true, palettes: true }; $('.color-picker').wpColorPicker(options); })( jQuery );
オプションの設定は
- defaultColor — デフォルトのカラーです。デフォルト色を設定したい場合はカラーコードの文字列を記述します。
- change — カラー変更時のイベントです。
- clear — カラークリア時のイベントです。
- hide — 画面ロード時にカラーピッカーを隠すか否か。
- paletters — カラーパレットの表示方法です。
外部jsファイルの読み込み
add_action('admin_enqueue_scripts', 'admin_scripts'); function admin_scripts($hook) { wp_enqueue_script('colorpicker-script', plugins_url('js/color-picker.js', __FILE__), array( 'wp-color-picker' ), false, true); }
wp_enqueue_scriptでjsファイルを読み込みます。
テキストフィールドの記述
<input type="text" name="color" class="color-picker" value="" >
外部jsファイルに記述したクラス名を合わせます。
value値には入力済みのカラーコードを記述したりします。
まとめ
表示方法はとても簡単でした。
また、WordPress3.5からIris-Color-Pickerというプラグインが出たようですね。
(違いがよくわかりません…)
ad
関連記事
-
[CSS] 複数のbackground-imageの設定方法
マルチBackground-imageを使ってみる CSS3では、背景画像を指定する際に複数の画像
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第1回]
現在、このブログはENJIさんが作られたSTINGER3という無料のテーマを利用させて頂いて
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第2回]
忙しくて忘れてました。僕です。 さて、今回はもうちょっと見栄えもよくしたいなーなんて考
-
[jQuery] 360°回転させたり、マウスでシーンを移動するプラグイン
rollerblade-js Rollerbladeを使えば、Webサイトに360°回転させてプロ
-
[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!
寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か
-
[Dreamweaver] 不要な_notesを作成させない方法
みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると
-
[Dreamweaver] オプション領域を極める!テンプレート上級編
オプション領域は、難しい! これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹
-
[Dreamweaver] コーディングを早くする5つの方法
コーディングは、早くなる! 普段、Dreamweaverを使っている人で、SassやZenコーディ
-
[jQuery] 背景画像を画面いっぱいにするプラグイン
背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため
-
[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!
柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ