サポート » テーマ » カラーピッカーによる色選択を行ないたい

  • 解決済 ligar

    (@ligar)


    みなさん、いつもお世話になります。

    カラーピッカーについて質問させて頂きます。

    管理画面の「外観>背景」にて色を指定するのと同じように、特定の文字の色をカラーピッカーを使って指定したいです。
    「外観>背景」では、「Farbtastic」というカラーピッカーが使われているようですね。

    WordPressに組み込まれている「colorpicker」か「Farbtastic」を簡単に利用する方法を御存知の方はいらっしゃいませんでしょうか?

    現在は、色を指定するテキスト入力欄を設け、「#333333」と打ち込むことによって色を変えています。これを、カラーピッカーで簡単に行ないたいです。

    <?php wp_enqueue_style('farbtastic'); ?>

    を使い、WordPress組み込みのライブラリを読み込み、
    更に、テキスト入力欄(input)にidを指定し、
    カラーピッカーとの間で情報をやり取りし、
    カラーピッカーを立ち上げるためのjavascriptと
    カラーピッカーのデザインを定義するCSSを、
    管理画面のhead内に記述する。
    という流れでしょうか。

    これらの流れを、WordPressのテンプレートタグを利用し、簡単に実現する方法はありますか?
    根本的に勘違いしている部分もあるかもしれませんが、どうぞ宜しくお願いします。

    以下に、手探りながら、閲覧したページを羅列しておきます。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • すみません、どこに使いたいのかわからないんですけど、記事の投稿ですよか?
    そうだとして、ビジュアルモードですか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様、ありがとうございました。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「カラーピッカーによる色選択を行ないたい」には新たに返信することはできません。