Interagir avec le personnalisateur de thème WordPress

  1. 1. Introduction au personnalisateur de thème WordPress
  2. 2. En train de lire: Interagir avec le personnalisateur de thème WordPress
  3. 3. Plaque chauffante du personnalisateur de thème WordPress
  4. 4. Extension de la chaudière de personnalisation du thème WordPress
  5. 5. Plate-forme de personnalisation de thème – Options conditionnelles, thèmes enfants et plug-ins

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 objet, qui est une instance de WP_Customize_Manager classe. Pour ce faire, vous devez utiliser personnaliser_enregistrement crochet d’action:


add_action ('custom_register', 'my_theme_customize_register');
fonction my_theme_customize_register ($ wp_customize) {

// Interagir avec l'objet $ wp_customize

}

Vous pouvez placer ce code dans le fichier 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 contrôles)

Une fois que vous avez chargé $ wp_customize objet, vous pouvez utiliser n’importe laquelle de ses méthodes pour y 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 vous voulez avoir ou retirer une section, un contrôle ou un paramètre, tout ce dont vous avez besoin est son ID. Cette ligne supprimera la section Couleurs (placez-la dans la fonction my_theme_customize_register du premier extrait de code):

$ wp_customize-> remove_section ('couleurs');

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 les détaillerai pas tous ici pour deux raisons:

  1. Ce n’est pas vraiment le but de cette série, nous allons créer un passe-partout de personnalisation de thème que vous pouvez simplement déposer dans votre thème à la place
  2. Alex Mansfield l’a déjà couvert dans son monstre de 6000 mots 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 encore, voyons comment vous pouvez ajouter votre propre paramètre avec un contrôle dans une nouvelle section Theme Customizer, ainsi que certains des arguments. Puisqu’il est beaucoup plus facile de travailler avec de vrais exemples, voici ce que nous recherchons:

  • Une nouvelle section, intitulée «Disposition»
  • Un nouveau paramètre qui stocke la disposition de votre thème
  • Une nouvelle radiocommande avec deux options – barre latérale à gauche et barre latérale à droite

La première chose à ajouter à Theme Customizer est la section “Mise en page”:

$ wp_customize-> add_section (
// ID
'layout_section',
// Tableau d'arguments
tableau (
'title' => __ ('Layout', 'my_theme'),
'capacity' => 'edit_theme_options',
'description' => __ ('Vous permet de modifier la disposition de votre thème.', 'my_theme')
)
);

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

$ wp_customize-> add_setting (
// ID
'my_theme_settings [layout_setting]',
// Tableau d'arguments
tableau (
'default' => 'barre latérale droite',
'type' => 'option'
)
);
$ wp_customize-> add_control (
// ID
'layout_control',
// Tableau d'arguments
tableau (
'type' => 'radio',
'label' => __ ('Mise en page du thème', 'my_theme'),
'section' => 'layout_section',
'choix' => tableau (
'left-sidebar' => __ ('Left sidebar', 'my_theme'),
'right-sidebar' => __ ('Right sidebar', 'my_theme')
),
// Ce dernier doit correspondre au paramètre ID ci-dessus
'settings' => 'my_theme_settings [layout_setting]'
)
);

En supposant que vous ayez lu le didacticiel 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 deux possibilités ici, «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 que cela vous permet de sérialiser les valeurs des paramètres de votre thème en leur donnant des ID comme my_theme_settings [setting_1], my_theme_settings [setting_2] etc. De cette façon, toutes les valeurs seront stockées en une seule 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_enregistrement 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

Nouvelle section ajoutée au personnalisateur de thème

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

Après avoir donné à vos utilisateurs la possibilité de stocker ce paramètre, vous pouvez saisir sa valeur, body_class filtrez le crochet et ajoutez-le au tableau des classes de corps existantes:

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

/ *
* Puisque nous avons utilisé 'option' dans le tableau d'arguments add_setting
* nous récupérons la valeur en utilisant la fonction get_option
* /
$ my_theme_settings = get_option ('my_theme_settings');

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

return $ classes;

}

Cela ajoutera soit .left-sidebar ou .right-sidebar à un 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 dispositions différentes. Par exemple:

/ * La barre latérale à droite est la disposition par défaut * /
#contenu {
flotteur: gauche;
largeur: 60%;
}
#sidebar {
Flotter à droite;
largeur: 30%;
}

/ * Utilisation de la classe .left-sidebar pour remplacer la disposition par défaut * /
.barre latérale gauche #contenu {
Flotter à droite;
}
.barre latérale gauche # barre latérale {
flotteur: gauche;
}

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 cela, pages de paramètres de thème!

Résumé et lectures complémentaires

La version TL; DR de ce message ressemblerait à ceci: Vous pouvez obtenir l’objet $ wp_customize et ensuite ajouter ou supprimer quelque chose (section, paramètre ou contrôle). Tout le reste se résume aux paramètres de configuration.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me