[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
関連記事
-
-
[Dreamweaver] テンプレートの入れ子
テンプレートは入れ子に出来る! Dreamweaverのテンプレートは、ベースを作り、さらにそのベ
-
-
[jQuery] Block Scrollプラグイン
今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。 Block Scroll
-
-
[CSS] animationを使ってみる!
色の変化をCSSのみで実装できる! CSS3のキーフレームアニメーションでは、JSで出来る、背景色
-
-
[CSS] リンク先やファイルタイプに合わせてアイコンを自動で付くようにする!
柔軟に対応出来るCSS リンク先やリンクしているファイルに合わせて、こういうファイルだよと一目でわ
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]
完全に放置してました、僕です。 別に忘れていた訳じゃないんですが、時間がありませんでした。
-
-
[CSS] CSS3のtransitionを使ってみよう!
CSS3のTransitionは、そんなに難しくない! CSS3では、CSSのマークアップだけでア
-
-
[jQuery]背景画像にぼかしを入れるプラグイン
Blurrプラグインの紹介 BlurrはシンプルなjQueryのプラグインです。 そして、背景画
-
-
[javascript] Google Maps javascript API v3の使い方(基本編)
Google Maps javaScript API v3とは Google Maps API V
-
-
[CSS] CSSで作るリストのアイコン
CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現
-
-
[CSS] 複数のbackground-imageの設定方法
マルチBackground-imageを使ってみる CSS3では、背景画像を指定する際に複数の画像