Introduction
Les bases
Les plugins incontournables
Travaux pratiques
Installation et configuration du projetRéservé aux membres premiums
16 min
En tête et pied de pageRéservé aux membres premiums
42 min
La page actualitésRéservé aux membres premiums
36 min
La single actualitéRéservé aux membres premiums
56 min
Gestion des biensRéservé aux membres premiums
25 min
Single d'un bienRéservé aux membres premiums
26 min
Listing des biensRéservé aux membres premiums
26 min
Correction du menuRéservé aux membres premiums
10 min
Recherche des biensRéservé aux membres premiums
24 min
Page d'accueilRéservé aux membres premiums
55 min
Formulaire de contactRéservé aux membres premiums
19 min

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