[WordPress] 管理画面にカラーピッカー(wp_color_picker)を表示する
カラーピッカー
管理画面でプラグインの設定などでカラーピッカーを表示したい場合、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
関連記事
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]
完全に放置してました、僕です。 別に忘れていた訳じゃないんですが、時間がありませんでした。
-
-
[HTML] 初心者を脱却するためのHTMLの心構え!
デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ
-
-
[Dreamweaver] テンプレート機能を使う!初級〜中級編
まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。
-
-
[jQuery] 実際の案件でよく使っていたプラグイン4選!
1.bxSlider bxSliderは、コンテンツスライダーのプラグインです。 使い勝手が非常
-
-
[CSS] 紙の様にふわっとしたエフェクトが全くつかえない!
寒くなってきて動きが鈍い僕です。こんにちわ。 さて、タイトルの件なのですが、たまに見か
-
-
[jQuery] Block Scrollプラグイン
今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。 Block Scroll
-
-
[CSS] ベンダープレフィックスはどこまで必要か?
各ブラウザが独自に先行実装しているCSS3 CSS3が現在、各ブラウザでも対応状況が進み、だいぶ使
-
-
[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]
jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え
-
-
[CSS] 角丸は便利だけど理解に苦しむ時もある
一般的な角丸の使い方 よく使う角丸は、divを角丸にしたり、画像を角丸にしたりすることでしょう。
-
-
[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint
FocusPoint FocusPointは、レスポンシブにクロップ(切り抜き)するjQueryの