Dans la partie 1 de la série WordPress Theme Customizer, j’ai mentionné que pour interagir avec Theme Customizer, vous devez charger $ wp_customize object, qui est une instance de WP_Customize_Manager classe. Pour ce faire, vous devez utiliser personnaliser_register crochet d’action:

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

    // Interacting with $wp_customize object

}

Vous pouvez placer ce code dans le functions.php de votre thème ou dans un fichier qui en est inclus.

Ajout ou suppression d’éléments de personnalisation de thème (sections, paramètres et commandes)

Une fois que vous avez chargé $ wp_customize objet, vous pouvez utiliser l’une de ses méthodes pour ajouter, obtenir ou supprimer des paramètres, des contrôles et des sections (add_setting, get_setting, remove_setting, add_control… vous obtenez le point).

Donc, si tu veux avoir ou retirer une section, un contrôle ou un réglage, tout ce dont vous avez besoin est son identifiant. Cette ligne supprimera la section Colors (placez-la dans la fonction my_theme_customize_register du premier extrait de code):

$wp_customize->remove_section( 'colors' );

L’ajout d’une section, d’un contrôle ou d’un paramètre est légèrement différent car il nécessite quelques paramètres supplémentaires. Je ne vais pas les parcourir tous ici pour deux raisons:

  1. Ce n’est pas vraiment le but de cette série, nous allons créer un modèle standard de personnalisateur de thème que vous pouvez simplement insérer dans votre thème à la place.
  2. Alex Mansfield l’a déjà couvert dans son monstre de 6000 mots d’un Tutoriel de personnalisation de thème que chaque développeur de thème WordPress doit lire puis tweeter (sérieusement, si vous ne l’avez pas déjà fait, allez le lire maintenant).

Mais quand même, voyons comment vous pouvez ajouter votre propre paramètre avec un contrôle dans une nouvelle section Personnalisateur de thème, ainsi que certains des arguments. Comme il est beaucoup plus facile de travailler avec de vrais exemples, voici ce que nous recherchons:

  • Une nouvelle section intitulée “Mise en page”
  • Un nouveau paramètre qui stocke la mise en page de votre thème
  • Une nouvelle radiocommande avec deux options – barre latérale à gauche et barre latérale à droite

La première chose à ajouter au personnalisateur de thème est la section «Mise en page»:

$wp_customize->add_section(
    // ID
    'layout_section',
    // Arguments array
    array(
        'title' => __( 'Layout', 'my_theme' ),
        'capability' => 'edit_theme_options',
        'description' => __( 'Allows you to edit your theme's layout.', 'my_theme' )
    )
);

N’essayez pas encore de le voir dans le personnalisateur, une section ne sera pas affichée à moins qu’elle ne comporte un paramètre et un contrôle ajoutés. Alors ajoutons les deux:

$wp_customize->add_setting(
    // ID
    'my_theme_settings[layout_setting]',
    // Arguments array
    array(
        'default' => 'right-sidebar',
        'type' => 'option'
    )
);
$wp_customize->add_control(
    // ID
    'layout_control',
    // Arguments array
    array(
        'type' => 'radio',
        'label' => __( 'Theme layout', 'my_theme' ),
        'section' => 'layout_section',
        'choices' => array(
            'left-sidebar' => __( 'Left sidebar', 'my_theme' ),
            'right-sidebar' => __( 'Right sidebar', 'my_theme' )
        ),
        // This last one must match setting ID from above
        'settings' => 'my_theme_settings[layout_setting]'
    )
);

En supposant que vous lisez le tutoriel d’Alex et / ou les pages Codex, il n’y a qu’un seul paramètre dans le tableau d’arguments add_setting – ‘type’ – sur lequel je voudrais me concentrer. Vous avez ici deux possibilités, ‘option’ et ‘theme_mod’ et vous pouvez les récupérer en utilisant get_option et get_theme_mod, respectivement. J’utilise toujours ‘option’ simplement parce qu’il vous permet de sérialiser les valeurs des paramètres de votre thème en leur donnant des identifiants tels que my_theme_settings[setting_1], my_theme_settings[setting_2] etc. De cette façon, toutes les valeurs seront stockées comme une entrée de base de données dans votre table wp_options.

Et enfin, après avoir ajouté ces deux extraits de code pour fonctionner, vous vous êtes connecté personnaliser_register crochet d’action (premier extrait de code dans cet article), le personnalisateur de thème a été personnalisé:

Nouvelle section ajoutée au personnalisateur de thème

Utilisation des valeurs des paramètres du personnalisateur de thème dans votre thème

Une fois que vous avez donné à vos utilisateurs la possibilité de stocker ce paramètre, vous pouvez saisir sa valeur, vous connecter à body_class filtre hook et ajoutez-le au tableau des classes de corps existantes:

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

    /*
     * Since we used 'option' in add_setting arguments array
     * we retrieve the value by using get_option function
     */
    $my_theme_settings = get_option( 'my_theme_settings' ); 
    
    $classes[] = $my_theme_settings['layout_setting'];
    
    return $classes;

}

Cela ajoutera soit .left-sidebar ou .right-sidebar au tableau de classes de corps dans votre thème. En utilisant ces deux classes dans le fichier style.css de votre thème, vous pourrez créer deux mises en page différentes. Par exemple:

/* Sidebar on the right is default layout */
#content {
    float: left;
    width: 60%;
}
#sidebar {
    float: right;
    width: 30%;
}

/* Using .left-sidebar class to override default layout */
.left-sidebar #content {
    float: right;
}
.left-sidebar #sidebar {
    float: left;
}

Mieux encore, grâce à WordPress Theme Customizer, les utilisateurs peuvent prévisualiser les deux mises en page avant d’enregistrer quoi que ce soit. Prenez ça, pages de paramètres de thème!

Résumé et lectures complémentaires

La version TL; DR de cet article ressemblerait à ceci: Vous pouvez obtenir un objet $ wp_customize, puis ajouter quelque chose (section, paramètre ou contrôle) ou en supprimer. Tout le reste se résume aux paramètres de réglage.

La troisième partie est celle où cette série devient intéressante, car nous commencerons à automatiser l’ensemble du processus et à travailler sur le module de personnalisation du thème Boilerplate que vous pouvez insérer dans votre thème et commencer à utiliser immédiatement. Restez à l’écoute!

Share: