HoBoFoTo

Hobo everyday foto.

「外観」「カスタマイズ」に独自の項目を追加する方法(前編)

自分で作ってみて、一番手間取ったWordPressの[外観][カスタマイズ]に独自の項目を追加する方法を紹介します。

[外観][カスタマイズ]に項目を表示するにはテーマカスタマイズ画面(テーマカスタマイザー)を設定しないといけません。

WordPressCodexにものっているのですがもう少し詳しく説明します。

テーマカスタマイザー初期設定

テーマカスタマイザーを設定するためにテーマフォルダにあるfunction.phpの中に以下の関数を用意します。

Four-leaf cloverのテーマでは、

function four_leaf_clover_customize_register( $wp_customize ) {
//この間に設定していきます。

}
add_action( 'customize_register', 'four_leaf_clover_customize_register' );

と書いています。functionの後とadd_action()の中にあるfour_leaf_cloverの所は自分のテーマ名を設定してください。

add_actionで自分で作った関数 ‘four_leaf_clover_customize_register’ を ‘customize_register‘に設定します。

項目の追加

新しく項目を追加するときは、add_setting()add_control()を使います。たとえばFour-leaf cloverのテーマでは、テキストカラ―を変更するのに、以下のように書きます。

$wp_customize->add_setting(
    'four_leaf_clover_text_color_value',
     array(
        'default'           =>  '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
        'transport'         =>'refresh',
    )
);
$wp_customize->add_control(
    new WP_Customize_Color_Control( 
        $wp_customize, 
        'four_leaf_clover_text_color_value_c', 
        array(
            'label'      => __( 'Font Color','four-leaf-clover' ),
            'section'    => 'four_leaf_clover_body_colors',
            'settings'   => 'four_leaf_clover_text_color_value',
            'priority'   => 1,
        )
    ) 
);

ここで必要なのはadd_settingのidと’default’です。

idには、コントロールのID名を決めて入れます。ここではfour_leaf_clover_text_color_valueとしています。

‘default’に初期値を記入します。今回はテキストカラ―を変更するので#000000(いわゆる黒色)としています。

‘sanitize_callback’は入力された値がちゃんと今回のものにあっているのか調べる関数を指定するのですが、公式テーマに登録しなで、自分だけで使うならなくても大丈夫です。

‘transport’は、’refresh’なので変更時は再読み込みします。

‘add_control’では、Control_classをまず設定します。これでどのようなコントロールを配置するかを決めます。今回は’カラーを選択するのでnew WP_Customize_Color_Control’としています。(他はadd_control()参照)

‘label’は必ず指定してください。ラベルの欄に__(‘Font Color’,’four-leaf-clover’)と書いてありますが、これは後から翻訳を付けるために__()を書いています。個人で使うならそのまま「’フォントカラー’」とかいても構いません。

‘section’の欄は追加したいセクションID名を書きます。(後記参照)

‘settings’はadd_settingで作った設定を登録するので、add_settingのidを設定します。

‘priority’で表示する順番を設定しています。今回は1つだけなので1を指定しています。

これで項目を一つ追加できました。今度はこれをセクションに設定しましょう。

セクションの追加

新しくセクションを作って項目を追加するときにはadd_section()を使って作成します。Four-leaf cloverではのテーマでは、本体の色のセクションを追加するのに、以下のように書きます。

$wp_customize->add_section( 'four_leaf_clover_body_colors', array(
    'title'          => __( 'Body Color','four-leaf-clover' ),
    'panel'  => 'four_leaf_clover_colors_panel',
    'priority'       => 1,
) );

ここではid,’title’と’priority’が必要になります。idにはセクションのID名を入れます。ここでは、four_leaf_clover_body_colorsとしています。

‘title’はセクションの名前を書きます。add_controlの’label’と同様ここでは__(‘Body Color’,’four-leaf-clover’)と翻訳が使える形で書いていますが、直接「’ボディーの色’」としても構いません。

‘priority’には表示される順番を指定します。ここでは1を指定しているので一番上に表示されることになります。

‘panel’はセクションが表示されるパネルがあるときにそのパネルのIDを書きます。

パネルの追加

必要ならばパネルを追加することができます。追加するにはadd_panel()を使います。Four-leaf cloverでは

$wp_customize->add_panel( 'four_leaf_clover_colors_panel', array(
    'priority'       => 35,
    'title'          => __( 'Colors','four-leaf-clover' ),
) );

としています。

idは’four_leaf_clover_colors_panel’としていますが自分でパネルのID名を決めてください。

‘priority’は表示する順番を選びます。ここでは’35’なのでサイト基本情報とヘッダー画像の間に表示されます。(詳しくはadd_panel()参照)

‘title’には表示されるタイトルを入れてください。

今までのまとめ

今までの分をまとめるとこのようになります。

function four_leaf_clover_customize_register( $wp_customize ) {
//この間に設定していきます。

    //パネルの追加
    $wp_customize->add_panel( 'four_leaf_clover_colors_panel', array(
        'priority'       => 35,
        'title'          => __( 'Colors','four-leaf-clover' ),
    ) );
        //セクションの追加
        $wp_customize->add_section( 'four_leaf_clover_body_colors', array(
            'title'          => __( 'Body Color','four-leaf-clover' ),
            'panel'  => 'four_leaf_clover_colors_panel',
            'priority'       => 1,
        ) );
            //項目の追加
            $wp_customize->add_setting(
                'four_leaf_clover_text_color_value',
                 array(
                    'default'           =>  '#000000',
                    'sanitize_callback' => 'sanitize_hex_color',
                    'transport'         =>'refresh',
                )
            );
            $wp_customize->add_control(
                new WP_Customize_Color_Control( 
                    $wp_customize, 
                    'four_leaf_clover_text_color_value_c', 
                    array(
                        'label'      => __( 'Font Color','four-leaf-clover' ),
                        'section'    => 'four_leaf_clover_body_colors',
                        'settings'   => 'four_leaf_clover_text_color_value',
                        'priority'   => 1,
                    )
                ) 
            );
}
add_action( 'customize_register', 'four_leaf_clover_customize_register' );

 

長くなったので今回はここまでにします。次回は項目で追加した値を使ってWordPressを変化させる方法を書きます。

 

よかったらクリックしてください。
にほんブログ村 IT技術ブログ WordPressへ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です