WordPressテーマカスタマイザーのカスタムコントロールを作成する方法
公開: 2015-06-17WordPressテーマカスタマイザー（「カスタマイザー」とも呼ばれます）機能により、開発者はテーマの外観をカスタマイズでき、テーマに加えられた変更をリアルタイムでプレビューすることもできます。 ウェブサイトに顧客を引き付ける競争が激化している今日の時代では、あなたはしばしばあなたのウェブサイトのデザインをカスタマイズする必要性を感じるでしょう。 また、テーマカスタマイザーのおかげで、WordPressデザインに加えられた変更をライブプレビューすることで、貴重な時間を大幅に節約できます。
WordPressテーマカスタマイザーはテーマカスタマイズAPIの一部として導入されました（WordPressバージョン3.4で導入されました。テーマ設定を変更する場合は、テーマに付属のカスタムコントロールを使用する必要がありますチェックボックス、テキストフィールド、ラジオなどのカスタマイザーですが、WordPressテーマに独自のカスタムコントロールを追加したい場合はどうでしょうか。
特定のニーズに合わせて調整されたコントロールを作成および追加する方法を理解しやすくするために、テーマのフッターにいくつかの変更を加えるための3つのカスタムコントロールの作成について説明します。 ただし、プロセスを開始するには、最初にWP_Customizer_Controlクラスに精通する必要があります。
「WP_Customizer_Control」クラスについて知る
カスタムコントロールを生成するには、新しいクラスを作成し、WP_Customizer_Controlクラスを使用してそれを拡張する必要があります。 このクラスは、「$ wp_customize-> add_control（）」メソッドを使用して、WordPressサイトのテーマのカスタマイズ画面に独自のカスタムコントロールを追加します。 さらに、このメソッドにアクセスするには、アクションフックで使用可能な$ wp_customizeオブジェクトcustomize_registerを使用する必要があります。
次のように、既存のカスタムコントロールをテーマセクション（「customize_register」アクションフック内）に追加する方法を示す例を考えてみましょう。
$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );
上記の例では、ユーザーが新しいヘッダー画像を選択できるようにするコントロールを作成しています。
デモンストレーションの例：より多くのカスタムコントロールを作成する方法は？
このセクションは3つの異なるステップに分かれており、各ステップには、テーマカスタマイザーのテキスト領域のカスタムコントロールを生成するコードが含まれています。 新しいテキストエリアコントロールを介してフッターに変更を加えるために、WordPressテーマのfooter.phpファイルにコードを追加します。
ステップ1：単純なテキストエリアコントロールを作成する
上で説明したように、新しいカスタムコントロールを作成するには、WP_Customize_Controlクラスを拡張するために使用されるクラスを定義する必要があります。 基本的に、このクラスは、テーマのカスタマイズ画面に入力コントロール（つまりカスタムコントロール）を追加するために、WordPressテーマカスタマイズAPIと一緒に使用されます。 このタスクを実装するためのコードを見てみましょう。
/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));
このコードでは、customer_registerアクションフックを使用して、theme_footer_customizerという名前で作成したカスタム関数についてWordPressに通知します。 ご存知かもしれませんが、WP_Customize_ManagerクラスはWordPressテーマカスタマイザーの制御に役立つため、カスタムコントロールはこのクラスの一部になります。 ただし、コントロールにアクセスするには、customize_registerフックのインスタンスである「wp_customize」オブジェクトを使用する必要があります。
この場合、wp_customizeオブジェクトを使用して、テキスト領域に含まれる新しいフッターセクションを定義します。 したがって、フッターセクションの「テキスト領域」に入力するものはすべて、以下のスクリーンショットに示すように、テーマのフッターに表示されます。
このスクリーンショットでは、新しい「フッターテキストセクション」がテーマに追加されていることがわかります。 このセクションに書かれたテキストは、テーマのフッターに表示されます。
ステップ2：背景色を変更するためのカスタムコントロールの追加
これで、テキスト領域コントロールを作成したので、さまざまなカスタムコントロールを追加できます。 この例では、フッターの背景色を変更するのに役立つカスタムコントロールを新しいフッターテキストセクションに追加します。 これを行うには、テーマのfooter.phpファイルに次のコードスニペットを追加するだけです。
//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));
上のスクリーンショットのように、「フッターの色設定」から適切な色を選択すると、フッターの背景色が灰色に変わります。
ステップ3：ロゴを追加するためのカスタムコントロールの追加
フッターテキストセクションに追加するもう1つのコントロールは、「フッターロゴ」です。 名前が示すように、「フッターロゴ」コントロールはフッターにロゴを追加するのに役立ちます。 このコントロールを追加するには、以下のコードスニペットをfooter.phpファイルに含める必要があります。
//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }
まとめましょう！
カスタムコントロールを作成するプロセスには少し時間がかかる場合があります。 ただし、Webサイトのテーマのカスタマイズ画面に追加するコントロールが優れているほど、ユーザーの時間を節約できるため、ユーザーエクスペリエンスが向上するという事実を無視することはできません。 したがって、WordPressテーマカスタマイザーに追加するために独自にいくつかのカスタムコントロールを構築することを計画している場合、この投稿はあなたのための有益なガイドを証明します。
