WordPressテーマカスタマイザボイラープレート
  1. 1. WordPressテーマカスタマイザーの概要
  2. 2. WordPressテーマカスタマイザーの操作
  3. 3. 現在読んでいる: WordPressテーマカスタマイザボイラープレート
  4. 4. WordPressテーマカスタマイザボイラープレートの拡張
  5. 5. テーマカスタマイザのボイラープレート–条件付きオプション、子テーマおよびプラグイン

更新:この記事は2013年2月19日に編集され、Theme Customizer Boilerplateに加えられた変更を反映しています。.


テーマカスタマイザシリーズの最初の2つの投稿— WordPressテーマカスタマイザの紹介とテーマカスタマイザとの対話を読んで楽しんだことを願っています。次に、メインコースに移動して、テーマで使用できるテーマカスタマイザボイラープレートの組み立てを開始します。この投稿にはコードの長いブロックがいくつか含まれているため、インラインコメントに注意してください.

注意: ボイラープレートをすぐに使用したい場合は、Githubからダウンロードして、「thsp_cbp_options_array」フィルターフックにフックすることにより、$ options配列のフィールドを変更できます。.

私たちが作成しているもの

テーマカスタマイザのボイラープレートのディレクトリ構造

テーマカスタマイザのボイラープレートのディレクトリ構造

  • Customizer.php –これはメインのテーマカスタマイザボイラープレートファイルであり、オプション配列のデータを使用してセクション、設定、およびコントロールを追加します。
  • custom-controls.php –カスタムコントロールクラスと、独自のカスタムコントロールを追加できるアクションフック
  • helpers.php –テーマのオプション、オプションのデフォルトなどを取得するために使用されるヘルパー関数.
  • options.php –サンプルオプションと、オプション配列を編集して独自のフィールドを使用できるようにするフィルターフック
  • Customizer-controls.css –画像置換ラジオカスタムコントロールの基本CSS

全体のアイデアは、テーマディレクトリのサブディレクトリにこれらのファイルをコピーし、functions.phpからCustomizer.phpファイルをインクルードし、テーマカスタマイザボイラープレートフックを使用して、特にオプション配列など、好きなものを変更できるようにすることです(説明パート4). 更新: 以前は、options.phpを編集するだけでしたが、フックを使用すると、よりきれいになります.

次に、実際の例を使用してみましょう。テキストコントロールを新しいテーマカスタマイザセクションに追加します。配列はヘルパー関数に配置され、返されるときにフィルターが適用されます。この方法で、子テーマまたはプラグインからオプションを追加できます。ここにあります:

/ **
*テーマオプションの配列を保持するヘルパー関数.
*
* @return array $ optionsテーマオプションの配列
* @uses thsp_get_theme_customizer_fields()はCustomizer / helpers.phpで定義されています
* /
function thsp_get_theme_customizer_fields(){

/ *
*ヘルパー関数を使用してデフォルトの必要な機能を取得する
* /
$ required_capability = thsp_settings_page_capability();

$ options = array(


//セクションID
'new_customizer_section' => array(

/ *
*これが既存のセクションかどうかを確認しています
*または登録が必要な新しいもの
* /
'existing_section' => false,
/ *
*セクション関連の引数
* Codex-http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => array(
'title' => __( 'New Section Title'、 'my_theme_textdomain'),
'説明' => __( '新しいセクションの説明'、 'my_theme_textdomain'),
「優先度」=> 10
),

/ *
* 'fields'配列には、必要なすべてのフィールドが含まれています
*このセクションに追加
* /
'フィールド' => array(

/ *
* ==========
* ==========
* テキストフィールド
* ==========
* ==========
* /
//フィールドID
'new_text_field' => array(
/ *
*関連する引数の設定
* Codex-http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => array(
'default' => __( 'Default text value'、 'my_theme_textdomain'),
'タイプ' => 'オプション',
'能力' => $ required_capability,
'transport' => 'refresh',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
*関連する引数を制御する
* Codex-http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => array(
'ラベル' => __( '新しいテキストコントロールラベル'、 'my_theme_textdomain'),
'type' => 'text'、//テキストフィールドコントロール
'優先度' => 1
)
)

)

),

);

/ *
* 'thsp_customizer_options'フィルターフックを使用すると、
*これらのオプションのいくつかを子テーマから追加/削除します
* /
return apply_filters( 'thsp_customizer_options'、$ options);

}

更新: 配列は同じままですが、オプション配列をフィルターフックに渡すこともできます。詳細については、パート4を参照してください。.

一見複雑そうに見えますが、説明させてください.

$ options 配列はセクション(この場合は1つだけ-new_customizer_section)で構成され、各セクションには、引数、フィールド、およびブール値(existing_section)があり、新しいセクションであるか、既存のフィールドにフィールドを追加するだけであるかを示します。 1. Arguments配列は、渡したものと同じです $ wp_customize-> add_section 方法. フィールド配列はもう少し複雑です.

更新: コントロール引数の選択肢配列は多次元配列になりました.

各フィールドは、カスタマイザ設定とカスタマイザコントロールで構成されています。これが、setting_argsおよびcontrol_args配列がある理由です。. これらは、渡す引数配列とほぼ同じです。 $ wp_customize-> add_setting そして $ wp_customize-> add_control メソッド. 唯一の違いは、コントロール引数の「choices」配列です。$ wp_customize-> add_controlでは、単純なキー=>値のペア配列である必要があり、代わりに多次元配列を使用しています。.

この方法では、選択肢のそれぞれにさらに多くのデータを渡すことができるため、たとえば、テーマにGoogleフォントを読み込む場合、選択肢配列内に正しいフォントを読み込むことができる文字列を使用できます。 。この例を見ることができます Customizer Boilerplateを使用するテーマ.

したがって、これらの3つの方法にすでに気付いている場合、.

チェックボックスコントロールの追加はほとんど同じです。「control_args」配列の「type」を「checkbox」に変更するだけです。

/ *
* ==============
*チェックボックスフィールド
* ==============
* /
'new_checkbox_field' => array(
'setting_args' => array(
'デフォルト' => true,
'タイプ' => 'オプション',
'能力' => $ required_capability,
'transport' => 'refresh',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => array(
'ラベル' => __( '新しいラジオコントロールラベル'、 'my_theme_textdomain'),
'type' => 'checkbox'、//チェックボックスフィールドコントロール
'優先度' => 2
)
),

ラジオと選択コントロールはほとんど同じです。特定の選択肢を指定するだけです。

/ *
* ===========
* ===========
*ラジオフィールド
* ===========
* ===========
* /
'new_radio_field' => array(
'setting_args' => array(
'デフォルト' => 'オプション-2',
'タイプ' => 'オプション',
'機能' => $ thsp_cbp_capability,
'transport' => 'refresh',
),
'control_args' => array(
'ラベル' => __( '新しいラジオコントロールラベル'、 'my_theme_textdomain'),
'type' => 'radio'、//ラジオコントロール
'選択肢' => array(
'option-1' => array(
'ラベル' => __( 'オプション1'、 'my_theme_textdomain')
),
'option-2' => array(
'ラベル' => __( 'オプション2'、 'my_theme_textdomain')
),
'option-3' => array(
'ラベル' => __( 'オプション3'、 'my_theme_textdomain')
)
),
'優先度' => 3
)
),

/ *
* ============
* ============
*選択フィールド
* ============
* ============
* /
'new_select_field' => array(
'setting_args' => array(
'デフォルト' => 'オプション3',
'タイプ' => 'オプション',
'機能' => $ thsp_cbp_capability,
'transport' => 'refresh',
),
'control_args' => array(
'label' => __( '新しい選択フィールドラベル'、 'my_theme_textdomain'),
'type' => 'select'、//コントロールを選択
'選択肢' => array(
'option-1' => array(
'ラベル' => __( 'オプション1'、 'my_theme_textdomain')
),
'option-2' => array(
'ラベル' => __( 'オプション2'、 'my_theme_textdomain')
),
'option-3' => array(
'ラベル' => __( 'オプション3'、 'my_theme_textdomain')
)
),
'優先度' => 4
)
)

最後に、WordPressに組み込まれている2つの複雑なコントロールタイプ—ファイルアップロードと画像アップロード:

/ *
* ===========
* ===========
*ファイルのアップロード
* ===========
* ===========
* /
'new_file_upload_field' => array(
'setting_args' => array(
'デフォルト' => '',
'タイプ' => 'オプション',
'機能' => $ thsp_cbp_capability,
'transport' => 'refresh',
),
'control_args' => array(
'label' => __( 'File upload'、 'my_theme_textdomain'),
'type' => 'upload'、//ファイルアップロードフィールドコントロール
「優先度」=> 5
)
),

/ *
* ============
* ============
*画像のアップロード
* ============
* ============
* /
'new_image_upload_field' => array(
'setting_args' => array(
'デフォルト' => '',
'タイプ' => 'オプション',
'機能' => $ thsp_cbp_capability,
'transport' => 'refresh',
),
'control_args' => array(
'ラベル' => __( '画像アップロード'、 'my_theme_textdomain'),
'type' => 'image'、//画像アップロードフィールドコントロール
'優先度' => 6
)
)

私が使用したことに注意してください ‘type’ => ‘option’ これらすべてのフィールドの引数を設定します。これにより、すべての値を1つの値としてデータベースに格納できます。代替は ‘type’ => ‘theme_mod’ 今のところは「オプション」に固執しましょう.

オプション配列を使用してカスタマイザセクション、設定、およびコントロールを追加する

WordPressテーマカスタマイザーの操作方法がわからない場合は、確認してください。これは、私たちが今行うことです。唯一の違いは、セクション、設定、コントロールを1つずつ追加する代わりに、作成したシリアル化された配列を使用してプロセスを自動化することです。それに飛び込んでみましょう:

function thsp_cbp_customize_register($ wp_customize){

/ **
*カスタムコントロール
* /
require(dirname(__ FILE__)。 '/custom-controls.php');


/ *
*ヘルパー関数を使用してすべてのフィールドを取得する
* /
$ thsp_sections = thsp_cbp_get_fields();


/ *
*オプションが保存されるDBエントリの名前を取得します
* /
$ thsp_cbp_option = thsp_cbp_option();


/ **
*配列をループしてカスタマイザセクションを追加する
* /
foreach($ thsp_sections as $ thsp_section_key => $ thsp_section_value){

/ **
*必要に応じてカスタマイザセクションを追加
* /
if(!$ thsp_section_value ['existing_section']){

$ thsp_section_args = $ thsp_section_value ['args'];

//セクションを追加
$ wp_customize-> add_section(
$ thsp_section_key,
$ thsp_section_args
);

} // if if

/ *
*各セクションの「フィールド」配列をループ
*設定とコントロールを追加する
* /
$ thsp_section_fields = $ thsp_section_value ['fields'];
foreach($ thsp_section_fields as $ thsp_field_key => $ thsp_field_value){

/ *
* 'option'または 'theme_mod'がオプションの格納に使用されているかどうかを確認します
*
*何も設定されていない場合、$ wp_customize-> add_settingメソッドはデフォルトで 'theme_mod'になります
*「オプション」が設定タイプとして使用されている場合、その値はエントリに格納されます
* {prefix} _optionsテーブル。オプション名はthsp_cbp_option()関数によって定義されます
* /
if(isset($ thsp_field_value ['setting_args'] ['type'])&& 'option' == $ thsp_field_value ['setting_args'] ['type']){
$ setting_control_id = $ thsp_cbp_option。 '['。 $ thsp_field_key。 ']';
} そうしないと {
$ setting_control_id = $ thsp_field_key;
}

/ *
*何も定義されていない場合、デフォルトのコールバック関数を追加します
* /
if(!isset($ thsp_field_value ['setting_args'] ['sanitize_cb'])){
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
*カスタマイザー設定を追加
* /
$ wp_customize-> add_setting(
$ setting_control_id,
$ thsp_field_value ['setting_args']
);

/ **
*カスタマイザーコントロールを追加
*
* 'section'値は 'control_args'配列に追加する必要があります
*コントロールを現在のセクションに追加できます
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* $ wp_customize-> add_controlメソッドでは、 'choices'を単純なキー=>値のペアにする必要があります
* /
if(isset($ thsp_field_value ['control_args'] ['choices'])){
$ thsp_cbp_choices = array();
foreach($ thsp_field_value ['control_args'] ['choices'] as $ thsp_cbp_choice_key => $ thsp_cbp_choice_value){
$ thsp_cbp_choices [$ thsp_cbp_choice_key] = $ thsp_cbp_choice_value ['label'];
}
$ thsp_field_value ['control_args'] ['choices'] = $ thsp_cbp_choices;
}


//コントロールタイプを確認します
if( 'color' == $ thsp_field_value ['control_args'] ['type']){
$ wp_customize-> add_control(
新しいWP_Customize_Color_Control(
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} elseif( 'image' == $ thsp_field_value ['control_args'] ['type']){
$ wp_customize-> add_control(
新しいWP_Customize_Image_Control(
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} elseif( 'upload' == $ thsp_field_value ['control_args'] ['type']){
$ wp_customize-> add_control(
新しいWP_Customize_Upload_Control(
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} そうしないと {
$ wp_customize-> add_control(
$ setting_control_id,
$ thsp_field_value ['control_args']
);
}

} // foreachを終了する

} // foreachを終了する

}
add_action( 'customize_register'、 'thsp_cbp_customize_register');

すべてのセクションを確認し、まだ存在しないセクションを追加してから、各セクションのすべてのフィールドを確認し、それぞれの設定とコントロールを追加します。ここで行われているのはそれだけです.

すべての設定に「type」=>「option」を使用したことを覚えていますか?それが今私たちが持っている理由です 「my_theme_options [$ thsp_field_key]」 設定とセクションの両方。これは、すべての値を1つのシリアル化された配列として格納します。 get_option( ‘my_theme_options’). または、で定義されたヘルパー関数を使用することもできます helpers.php すべてのフィールドの現在の値とデフォルト値の両方を取得するには:

/ **
*オプション値を取得
*
*すべてのオプション値を保持する配列
*ユーザーが値を指定していない場合、オプションのデフォルト値が使用されます
*
* /customizer/options.phpで定義されている@uses thsp_get_theme_customizer_defaults()
* @return配列すべてのオプションの現在の値
* @since Theme_Customizer_Boilerplate 1.0
* /
function thsp_cbp_get_options_values(){

//オプションのデフォルトを取得します
$ option_defaults = thsp_cbp_get_options_defaults();

//保存されたオプションをデフォルトで解析します
$ thsp_cbp_options = wp_parse_args(get_option(thsp_cbp_option()、array())、$ option_defaults);

//解析された配列を返します
$ thsp_cbp_optionsを返します。

}


/ **
*オプションのデフォルトを取得
*
*すべてのオプションのデフォルト値を保持する配列を返します
*
* /customizer/options.phpで定義されている@uses thsp_get_theme_customizer_fields()
* @return配列$ thsp_option_defaultsすべてのオプションのデフォルト値
* @since Theme_Customizer_Boilerplate 1.0
* /
関数thsp_cbp_get_options_defaults(){

//すべてのテーマオプションフィールドを保持する配列を取得します
$ thsp_sections = thsp_cbp_get_fields();

//配列を初期化して、すべてのテーマオプションのデフォルト値を保持します
$ thsp_option_defaults = array();

//オプションパラメータ配列をループします
foreach($ thsp_sections as $ thsp_section){

$ thsp_section_fields = $ thsp_section ['fields'];

foreach($ thsp_section_fields as $ thsp_field_key => $ thsp_field_value){

//パラメータ配列の各オプションのデフォルト配列に連想配列キーを追加します
if(isset($ thsp_field_value ['setting_args'] ['default'])){
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['default'];
} そうしないと {
$ thsp_option_defaults [$ thsp_field_key] = false;
}

}

}

//デフォルトの配列を返します
$ thsp_option_defaultsを返します。

}

もう1つだけ言及する必要があります。「setting_args」配列で指定したサニタイズコールバック関数です。関数は、extend.phpで定義され、単純にデータを実行します wp_kses_post 関数:

/ **
*テーマカスタマイザのサニタイズコールバック関数
* /
function thsp_sanitize_cb($ input){

wp_kses_post($ input);を返す

}

ここからどこへ?

今のところ、このテーマカスタマイザボイラープレートをテーマで使用できます。Githubからダウンロードし、テーマのディレクトリにコピーして、functions.phpのメインファイルをインクルードするだけです。テーマ.

あなたのテーマは「ほとんどのテーマのように」ではないので、来週はフィルターとアクションフックを使用してボイラープレートを拡張する方法を見ていきます。.

このボイラープレートを改善または拡張できると思うので、ぜひコメントをお寄せください。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me