web-dev-qa-db-ja.com

見出し（h1、h2、h3 ...）を変更するためにカスタマイザに新しいコントロールを追加する

自分のstyle.cssにハードコーディングせずに自分のサイトのすべての見出しの色を変更するカスタムコントロールを追加しようとしています

私の子テーマを使用してこれを実装するための参照として使用できるサンプルコードはありますか？

customizationtheme-customizer
2
Caracos

私の知る限りでは、カラーピッカーのテーマカスタマイザにはWordpressの標準コントロールはありません。しかし、新しいクラスでそれを追加することができます。 Paul underwoodがここにカスタムコントロール を追加するための素晴らしいチュートリアルを作成しました 。そして、 github にカラーピッカーを含む例を挙げました。 （注：WestonRuterからの下記の重要なコメントに注意してください。WPにはカラーピッカーコントロールがあります）。もっと簡単な方法は、テキストフィールドを作成してそれに16進値を入れることです。あなたはあなたのfunctions.phpで設定とコントロールを作成しなければならないために投げます。 functions.phpのコードは次のようになります。

function yourtheme_customize_register($wp_customize) {
//Add new Section for Theme
    $wp_customize->add_section('yourtheme_theme_section', array(
        'title' => __('yourtheme Settings', 'yourtheme'),
       'priority' => 30,
    ));


//  Add new Setting
    $wp_customize->add_setting('headings_color', array(
        'default' => __('Please enter a Quote in Customizer', 'yourtheme'),
    ));

// Add new Control
    $wp_customize->add_control('headings_color_control', array(
        'label' => __('hex color', 'yourtheme'),
        'section' => 'your_theme_section',
        'settings' => 'headings_color',
        'type' => 'text',
    ));
add_action('customize_register', 'yourtheme_customize_register');

Get_theme_mod（）関数を使用して、テンプレートファイル（例：header.php）でカスタマイザからの値を使用できます。例えば.

 <style> h1, h2, h3 {color: <?php echo get_theme_mod('headings_color')  ;?>;}</style>

お役に立てば幸いです。

1
Friedrich Siever