テーマカスタマイザー用クラス「Alpha Color Picker」が便利過ぎ！

日付 2016年3月23日

カテゴリーカスタマイズ

タグ Alpha Color Picker,サードパーティ,テーマカスタマイザー

テーマカスタマイザーで、ワードプレスに標準的に備わっている「WP_Customize_Color_Control」クラスという配色設定するためのクラスがあるんですが、調べてみると、これを継承した「Alpha Color Picker」なる無料のサードパーティ製クラスが存在していました。

ええ、アルファ値を所有する色のプロパティ値「RGBA」を設定することが出来るんです。

アルファ値は一番下のスライドバーで設定でき、表示されている整数値は百分率した時の値です。スクリーンショットでは「90」なので、アルファ値は「0.9」となり、「0.95」のように小数点第二位までこのスライドバーで設定可能です。

また、このカラーピッカーには、RGBA対応のパレット（スクリーンショットでは下の３つの色の選択肢）も複数設定できる超の付く優れものです。

実は今テーマカスタマイザーの配色設定をこれに変更してしまおうと、編集してテーマ「ShapeShifter」の次のバージョン更新に努めているんですが、先にこの便利なクラスを紹介しておこうと思いました。

「Alpha」とは？

CSSが非常に苦手な僕でも知っていますので、分からない人はいないと思いますが、アルファ値は色の透明度のプロパティ値です。「透明度」と聞くと「Opacity」というプロパティ値も思い浮かぶかもしれませんが、これは要素の透明度であって色の透明度ではないのが大きな違いです。

この「Alpha」の使いどころは、背景色でレイヤーの下にある背景などを透けさせたい部分です。「Opacity」だと要素全体（テキストや枠線も含む）の透明度が上がってしまい、上にあるはずの要素が見えにくくなってしまいますから、色の「Alpha」は非常に非常に使い勝手が良いんです。

では、何故アルファが必要なのかですが、既存のカラーピッカーにスライドバーを付けることで、アルファ値を設定することはできるのですが、まぁ設定項目が増えますし、いちいち設定するのは非常に面倒なんですよ。

「Alpha Color Picker」の利点

ワードプレスのクラスを継承したクラスで、「WP_Customize_Color_Control」の設定値をそのまま使用できますので、クラス名をテキストエディターで「Customize_Alpha_Color_Control」するだけで書く設定項目のUIを全てアルファ値設定可能にしてしまえるんです。

編集もめちゃくちゃ楽なんです。

使い方

「GIT（components/customizer/alpha-color-picker at master · BraadMartin/components）」でダウンロードし、「Customizer」というフォルダ内の「css」「ｊｓ」「php」「png」ファイルをテーマなどにアップロードします。「CSS」ファイルと「PNG」ファイルは同じディレクトリに配置しておきましょう。

恐らくテーマに実装されることを想定して作成されており、「テーマのルート/admin/」というディレクトリに「customizer」というフォルダをアップロードすることが期待されています。というのは、「php」ファイルに書かれているクラスに、そのディレクトリにある「css」「js」ファイルをエンキューするように書かれているからです。

もしも、他の場所に配置したい場合、もしくはプラグインに導入したい場合は、自分で「CSS」「JS」ファイルをエンキューさせる必要があります。

必要なファイルをインクルード

テーマカスタマイザーに登録するフック「customize_register」で呼び出される関数内で「alpha-color-picker.php」ファイルをインクルードします。

add_action( 'customize_register', 'your_customize_register' );
function your_customize_register( $wp_customize ) {

  require_once( 'Path/To/Your/alpha-color-picker.php' );

  // ここに設定項目を書く。

}

といった感じです。

「テーマ/admin」以外のディレクトリに配置した場合

既に書いたようにプラグインに導入する際などもそうなのですが、確認してみると子テーマの使用までは想定されていないので、僕は自分で「JS」「CSS」ファイルをエンキューする方がベターだと思います。

使用するフックは「customize_controls_print_footer_scripts」です。

add_action( 'customize_controls_print_footer_scripts', 'your_css_js_enqueues' );
function your_css_js_enqueues() {

  // CSSファイルのエンキュー
  wp_enqueue_style(
    'alpha_color_picker_css',
    'Path/To/Your/alpha-color-picker.css',
    array( 'wp-color-picker' )
  );

  // JSファイルのエンキュー
  wp_enqueue_script(
    'alpha_color_picker_js',
    'Path/To/Your/alpha-color-picker.js',
    array( 'jquery', 'wp-color-picker' ),
    '',
    true
  );

}

この場合、コンストラクターで呼ばれる「CSS」「JS」ファイルはエラーになりますので、そうしてもそれが気になる場合は「PHP」ファイルを編集して、エンキューするコード（「wp_enqueue_style(…)」と「wp_enqueue_script(…)」）を削除してしまいましょう。

クラス「Customize_Alpha_Color_Control」の使用

上記の準備が出来たら、あとは任意の設定項目のコントロールに「WP_Customize_Color_Control」ではなく、「Customize_Alpha_Color_Control」を使用するだけです。

add_action( 'customize_register', 'your_customize_register' );
function your_customize_register( $wp_customize ) {

  // どっかの背景色
  $wp_customize->add_setting( 'a_background_color', array( 
    'default' => 'rgba(255,255,255,0.5)', 
    //'transport' => 'postMessage',
    'sanitize_callback' => 'sanitize_text_field',
  ));
  $wp_customize->add_control( new Customize_Alpha_Color_Control( $wp_customize, 'a_background_color', array(
    'label' => __( 'Background Color', 'yourtextdomain' ),
    'section' => 'colors',
    'settings' => 'a_background_color',
    'show_opacity' => true, // オプション値
    'palette' => array( 
      'rgba(255,255,255,0.9)',
    ),
  )));

}

オプション値は透明度の数値を表示しますので、個人的には何も設定せず、標準値の「true」にしておく方が見やすいと思います。

サニタイズの注意点

クラス「WP_Customize_Color_Control」の時は、HEX値（「#FFFFFF」のような値）を使用していましたので「sanitize_hex_color」でサニタイズしていることも多かったのですが、「RGBA」や「RGB」の形でも保存することになりますので、「sanitize_text_field」を使うなど、別のコールバックを指定する必要があります。

特に指定がなければ「sanitize_text_field」で良いと思いますが、RGBAに固定した値を保存する場合などは、サニタイズ関数もそれ用に用意する必要が出てきます。見たところ、サニタイズ関数までは用意されていませんでしたから。

ちゃんと望まない値を避けるようにするなら、以下のように分岐する手もあります。

function sanitize_color_with_alpha( $color ) {

  if( strpos( $color, '#' ) === 0 ) { 

    // HEX用
    return sanitize_hex_color( $color );

  } elseif( strpos( $color, 'rgba' ) === 0 ) {

　　　　// RGBA用
    return sanitize_rgba_color( $color );

  } elseif( strpos( $color, 'rgb' ) === 0 ) {

    // RGB用
    return sanitize_rgb_color( $color );

  } else {

    // 望まれない値の場合
    return '';

  }

}

処理の分岐方法が適当過ぎる気がしますが、意図が分かれば良いと思いました。

実際は値を設定する時は、手打ちで入力できますし、パレットにはいろんな形の値を用意することが出来ますから、サニタイズもそれに応じた関数を用意する必要があるんですよ。