WordPressテーマカスタマイザーの操作

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

WordPressテーマカスタマイザーシリーズのパート1で、テーマカスタマイザーを操作するには、ロードする必要があると述べました $ wp_customize のインスタンスであるオブジェクト WP_Customize_Manager クラス。これを行うには、使用する必要があります Customize_register アクションフック:


add_action( 'customize_register'、 'my_theme_customize_register');
function my_theme_customize_register($ wp_customize){

// $ wp_customizeオブジェクトを操作します

}

このコードは、テーマのfunctions.phpまたはそこからインクルードされるファイルに配置できます.

テーマカスタマイザー要素(セクション、設定、コントロール)の追加または削除

ロードしたら $ wp_customize そのメソッドのいずれかを使用して、設定、コントロール、セクションを追加、取得、または削除できるオブジェクト(add_setting、get_setting、remove_setting、add_control…ポイントを取得).

だから、あなたがしたい場合 取得する または 削除する セクション、コントロール、設定など、必要なのはそのIDだけです。この行は、Colorsセクションを削除します(最初のコードスニペットからmy_theme_customize_register関数内に配置します):

$ wp_customize-> remove_section( 'colors');

セクション、コントロール、または設定の追加は、さらにいくつかのパラメーターが必要になるため、少し異なります。ここでは、次の2つの理由ですべてを説明しません。

  1. それがこのシリーズの目的ではありません。テーマにドロップすることができるテーマカスタマイザのボイラープレートを作成します
  2. アレックス・マンスフィールドはすでに彼の6000ワードのモンスターでそれをカバーしました テーマカスタマイザのチュートリアル すべてのWordPressテーマ開発者が読んでからつぶやく必要があること(まじめに、まだ読んでいない場合は、今すぐ読んでください).

それでも、新しいテーマカスタマイザセクションのコントロールを使用して独自の設定を追加する方法と、いくつかの引数を見てみましょう。実際の例を使用する方がはるかに簡単なので、以下にその目的を示します。

  • 「レイアウト」という新しいセクション
  • テーマのレイアウトを保存する新しい設定
  • 2つのオプションを備えた新しいラジオコントロール–左側のサイドバーと右側のサイドバー

テーマカスタマイザーに最初に追加するのは、「レイアウト」セクションです。

$ wp_customize-> add_section(
// ID
「layout_section」,
// Arguments配列
アレイ(
'title' => __( 'Layout'、 'my_theme'),
「機能」=>「edit_theme_options」,
'description' => __( 'テーマのレイアウトを編集できます。'、 'my_theme')
)
);

まだカスタマイザで表示しないでください。設定とコントロールが追加されていないセクションは表示されません。両方を追加しましょう:

$ wp_customize-> add_setting(
// ID
「my_theme_settings [layout_setting]」,
// Arguments配列
アレイ(
'default' => 'right-sidebar',
'タイプ' => 'オプション'
)
);
$ wp_customize-> add_control(
// ID
「layout_control」,
// Arguments配列
アレイ(
'タイプ' => 'ラジオ',
'ラベル' => __( 'テーマレイアウト'、 'my_theme'),
'セクション' => 'レイアウト_セクション',
'選択肢' => array(
'左サイドバー' => __( '左サイドバー'、 'my_theme'),
'right-sidebar' => __( 'Right sidebar'、 'my_theme')
),
//最後の1つは、上記の設定IDと一致する必要があります
'設定' => 'my_theme_settings [layout_setting]'
)
);

AlexのチュートリアルやCodexのページを読んだとすると、add_settingの引数の配列には「type」という1つのパラメータしかありません。ここには「オプション」と「theme_mod」の2つの可能性があり、これらを使用して取得できます。 get_option そして get_theme_mod, それぞれ。私は常に「オプション」を使用しています。これは、テーマ設定値に次のようなIDを与えることでシリアル化できるためです my_theme_settings [setting_1], my_theme_settings [setting_2] など。すべての値が1つのデータベースエントリとしてwp_optionsテーブルに格納されます。.

そして最後に、これらの2つのコードスニペットを関数に追加した後、 Customize_register アクションフック(この投稿の最初のコードスニペット)、テーマカスタマイザーがカスタマイズされました。

テーマカスタマイザーに新しいセクションを追加

テーマカスタマイザーに新しいセクションを追加

テーマでのテーマカスタマイザー設定値の使用

ユーザーにこの設定を保存する機能を与えたら、その値を取得してフックすることができます body_class フィルターフックを既存のボディクラスの配列に追加します。

add_filter( 'body_class'、 'my_theme_body_classes');
function my_theme_body_classes($ classes){

/ *
* add_setting引数配列で 'option'を使用したため
* get_option関数を使用して値を取得します
* /
$ my_theme_settings = get_option( 'my_theme_settings');

$ classes [] = $ my_theme_settings ['layout_setting'];

$ classesを返します。

}

これにより、テーマのボディクラスの配列に.left-sidebarまたは.right-sidebarが追加されます。テーマのstyle.cssファイルでこれら2つのクラスを使用することで、2つの異なるレイアウトを作成できます。例えば:

/ *右側のサイドバーはデフォルトのレイアウトです* /
#content {
float:左;
幅:60%;
}
#sidebar {
float:右;
幅:30%;
}

/ * .left-sidebarクラスを使用してデフォルトのレイアウトをオーバーライドする* /
.左サイドバー#content {
float:右;
}
.左サイドバー#sidebar {
float:左;
}

何よりも、WordPressテーマカスタマイザーのおかげで、ユーザーは何も保存する前に両方のレイアウトをプレビューできます。それを取り、テーマ設定ページ!

まとめと参考文献

この投稿のTL; DRバージョンは次のようになります。 $ wp_customizeオブジェクトを取得してから、何か(セクション、設定、コントロール)を追加するか、オブジェクトから削除できます。. 他のすべては設定パラメータに要約されます.

パート3では、プロセス全体を自動化し、テーマにドロップしてすぐに使用を開始できるテーマカスタマイザボイラープレートの作業を開始するため、このシリーズが面白くなります。乞うご期待!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map