L'API Customize

Voir la vidéo

Les bases

Création du thème 10 min Les actions 16 min Les filtres 7 min La boucle WordPress 16 min La hiérarchie des templates 12 min Gérer les menus 18 min Formulaire de recherche 5 min Les permaliens 4 min Pagination 14 min Modèle de page 3 min Les formats d'images 7 min Les métadonnées 34 min Les taxonomies 27 min Les custom post type 11 min Options du thème 17 min CSS et JS dans l'administration 11 min Ajouter des colonnes dans l'administration 13 min L'objet WP_Query 19 min L'action pre_get_posts 15 min Gestion des sidebars 10 min Création d'un widget 17 min Les commentaires 26 min AfterSwitchTheme 7 min L'API Customize 21 min L'internationalisation 14 min Thème enfant 13 min Créer un plugin 10 min Evénements planifiés 11 min L'object wpdb 10 min L'API Rest 16 min Gestion du cache 7 min
Intermédiaire
Télécharger les sources Télécharger la vidéo
Description Sommaire

Nous allons aujourd'hui découvrir l'API Customize de WordPress qui permet de gérer de manière visuelle les options liées à l'apparence de notre thème.

Pour utiliser cette API on va se brancher sur le hook customize_register et utiliser l'objet WP_Customize_Manager pour enregistrer des paramètres et gérer les contrôles associés.

add_action('customize_register', function (WP_Customize_Manager $manager) {

    $manager->add_section('montheme_apparence', [
        'title' => 'Personnalisation de l\'apparence',
    ]);

    $manager->add_setting('header_background', [
        'default' => '#FF0000',
        'sanitize_callback' => 'sanitize_hex_color'
    ]);
    $manager->add_control(new WP_Customize_Color_Control($manager, 'header_background', [
        'section' => 'montheme_apparence',
        'label' => 'Couleur de l\'en tête'
    ]));

});

"Live" preview

Par défaut, à chaque modification de votre paramètre WordPress va actualiser la page pour afficher les modification. Cela peut s'avérer contre productif et peu performant pour certains paramètres. Il est donc possible de changer la méthode d'actualisation au niveau de votre paramètre.

$manager->add_setting('header_background', [
    'default' => '#FF0000',
    'transport' => 'postMessage',
    'sanitize_callback' => 'sanitize_hex_color'
]);

WordPress désactivera la réactualisation et enverra plutôt un message qui pourra être capturé en JavaScript pour refléter le changement en live.

(function ($) {

    wp.customize('header_background', function (value) {
        value.bind(function (newVal) {
            $('.navbar').attr('style', 'background:' + newVal + '!important');
        });
    });

})(jQuery);

Vous pouvez enregistrer ce JavaScript gràce au hook customize_preview_init.

add_action('customize_preview_init', function () {
    wp_enqueue_script('montheme_apparence', get_template_directory_uri() . '/assets/apparence.js', ['jquery', 'customize-preview'], '', true);
});

Vous pouvez aussi vérifier si vous êtes en mode aperçu dans votre thème à l'aide de la fonction is_customize_preview(). Cela peut être utile pour ne pas écraser jquery par exemple lors de l'enregistrement d'assets :

function montheme_register_assets()
{
    if (!is_customize_preview()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'https://code.jquery.com/jquery-3.2.1.slim.min.js', [], false, true);
    }
}
Publié
Technologies utilisées
WordPress
Auteur :
Grafikart
Partager