web-dev-qa-db-fra.com

Ajouter un nouveau contrôle au personnaliseur pour modifier les en-têtes (h1, h2, h3 ...)

J'essaie d'ajouter un contrôle personnalisé pour changer toutes les couleurs d'en-têtes sur mon site sans le coder en dur dans mon style.css

Existe-t-il un exemple de code que je peux utiliser comme référence pour implémenter cela à l'aide de mon thème enfant?

customizationtheme-customizer
2
Caracos

pour autant que je sache, il n'existe pas de contrôle standard Wordpress dans le personnaliseur de thème pour un sélecteur de couleurs. Mais vous pouvez en ajouter un avec une nouvelle classe. Paul Underwood a fait un excellent tutoriel pour ajouter des contrôles personnalisés ici ! Et a donné des exemples contenant un sélecteur de couleur sur github . (REMARQUE: veuillez noter l'important commentaire ci-dessous de WestonRuter, il existe désormais un contrôle de sélecteur de couleurs dans WP). Une approche plus simple pourrait consister à créer un champ de texte et à y insérer votre valeur hexadécimale. Threre pour vous devez créer un paramètre et un contrôle dans votre functions.php. Le code dans functions.php pourrait ressembler à ceci:

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');

Vous pouvez utiliser la valeur de Customizer dans vos fichiers de modèle (par exemple, header.php) avec la fonction get_theme_mod (). par exemple.

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

J'espère que cela vous aidera.

1
Friedrich Siever