すみません、どこに使いたいのかわからないんですけど、記事の投稿ですよか?
そうだとして、ビジュアルモードですかhtmlモードですか?
ビジュアルモードでしたら標準で使えます。
テキストモードでしたらca-colorpickerですとか、そういったプラグインがあります。
分かりづらくて、すみません。
使いたい場所は、テーマの管理画面です。
「外観>背景」と同じように、他のCSSを編集するために、カラーピッカーを利用して色を指定したいと考えています。
色の指定自体は、出来ていますが、WordPressに組み込まれているカラーピッカーを利用する方法が分からず困っています。
あぁ・・・そういうことですか。
管理画面から修正しているんですね。
コアに手を入れることになりそうな気がします。
でも、色を拾えばいいんだったら、フリーのカラーピッカーソフトで選択して、色コードをコピペすればいいような気もしたり
※WordPress 3.0.1 で検証。
1. テーマの functions.php に以下を追加。
add_action('admin_print_styles', 'my_admin_print_styles');
function my_admin_print_styles() {
wp_enqueue_style( 'farbtastic' );
}
add_action('admin_print_scripts', 'my_admin_print_scripts');
function my_admin_print_scripts() {
wp_enqueue_script( 'farbtastic' );
wp_enqueue_script( 'quicktags' );
wp_enqueue_script( 'my-admin-script', get_bloginfo('stylesheet_directory') . '/admin-script.js', array( 'farbtastic', 'quicktags' ), false, true );
}
2. admin-script.js を作って以下をコピペして、テーマフォルダにアップロード。
jQuery( document ).ready( function( $ ) {
var farbtastic;
function pickColor( color ) {
farbtastic.setColor( color );
jQuery( '#pickedcolor' ).val( color );
}
jQuery( 'body.theme-editor-php .fileedit-sub' ).append(
'<div><input type="text" name="pickedcolor" id="pickedcolor" value="" />'
+ '<a class="hide-if-no-js" href="#" id="pickcolor">色を選択</a>'
+ '<div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>'
);
jQuery( '#pickcolor' ).click( function() {
jQuery( '#colorPickerDiv' ).show();
return false;
});
jQuery( '#colorPickerDiv' ).each( function() {
farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) {
pickColor(color);
});
});
jQuery( document ).mousedown( function() {
jQuery( '#colorPickerDiv' ).each(function(){
var display = jQuery( this ).css( 'display' );
if ( display == 'block' ) {
jQuery( this ).fadeOut(2);
var ed = jQuery( '#newcontent' );
ed.focus();
edInsertContent( ed.get( 0 ), jQuery( '#pickedcolor' ).val() );
}
});
});
});
3.「テーマの編集」ページのエディタ欄で色値を入力したいところにポインタを移動。
4.[色を選択]をクリック。カラーピッカーが表示されます。
5.色を選択。※初めは四角いUIのカラーピック値が黒なので #000000 です。移動させてね★
6.カラーピッカー以外をクリック。
7.3.の位置に色値が挿入されます。
おー、ありがとうございます!動きました!
テーマの色を入力する箇所に、以下のコードを貼りつければテーマ専用の設定ページでも利用できました。
<input type="text" name="pickedcolor" id="pickedcolor" value="" /><a class="hide-if-no-js" href="#" id="pickcolor">色を選択</a><div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;">
これで、テーマの文字や見出しの背景色などを管理画面から、気軽に変更出来るようになりました。
kz様、ありがとうございました。