Personnaliser quoi ?

Entrons un peu dans les détails.

Deux poids, deux mesures 𐄷

Il existe deux types d'objets personnalisables grâce au customizer : les options, et les modifications du thème.

Pourquoi ?

À cause du territoire des fonctionnalités 🗺, un concept qui doit vous parler si vous utilisez — voire crééz — des thèmes ou extensions régulièrement.

Règle N^o ➊

1. Dans un thème, vous ne devriez jamais déclarer d'option.
2. Dans une extension, vous ne devriez jamais déclarer une modification de thème.

Mode d'emploi

Un objet personnalisable est composé de deux éléments, qu'on définit grâce à l'api du customizer.

$wp_customize->add_setting('boosted_variant',
    array(
        'type'       => 'theme_mod',
        'capability' => 'edit_theme_options',
        'default'    => '',
        'transport' => 'refresh'
    )
);

$wp_customize->add_control('boosted_variant',
    array(
        'label'   => __("Use Boosted's black variant", "boosted"),
        'type'    => 'checkbox',
        'section' => 'title_tagline'
    )
);

Ce dont on ne parlera pas 🕴

Parce que flûte, c'est long et j'ai pas le temps !

Côté ux ⚗

Vous aurez peut-être remarqué un gros problème : l'aperçu n'est rien qu'une grosse iframe (sans vouloir l'offenser).

Ainsi quand vous modifiez ou enregistrez un réglage, la fenêtre se recharge complètement.

De plus, vous pouvez naviguer dans l'aperçu :

• changer de page,
• actionner des choses,
• ouvrir des menus,
• etc.

Autant de raison de se perdre dans cet entrelacs d'options !

Fonction d'appel ✆

Autrement connu sous le sobriquet de active_callback

active_callback permet de définir une condition pour l'affichage d'un réglage ou d'une section. Et chose logico-magique, il mange des fonctions de template.

$wp_customize->add_section('boosted_archives', array(
    'title'           => __("Template for posts list", "boosted"),
    'description'     => __("Define how to display content lists", "boosted"),
    'priority'        => 105,
    'capability'      => 'edit_theme_options',
    'active_callback' => function() {
      return (is_archive() || is_home());
    },
) );

Démo !

Rafraîchissement sélectif 🍨

Qu'on nomme aussi selective refresh

En définissant le transport du réglage sur postMessage, on peut lui attribuer un template partiel, qu'on ciblera ensuite grâce à un sélecteur — jQuery — et sera « rechargé » (via ajax) grâce à une fonction passée à render_callback.

$wp_customize->get_setting('blogname')->transport = 'postMessage';
$wp_customize->selective_refresh->add_partial('blogname',
  array(
    'selector'        => 'strong[itemprop="name"]',
    'render_callback' => function () {
      bloginfo('name');
    },
  )
);

Démo !

Revenons à nos moutons 🐑

Or donc, nous pouvons :

• naviguer sur le site dans le customizer,
• afficher les options et modificateurs disponibles pour la page affichée,
• et mettre à jour l'aperçu sans recharger la page.

Aurais-je omis de préciser que tout ceci fonctionne également avec les sidebars et widgets ?
Lesquels, depuis WordPress 4.8 « Evans » peuvent contenir du texte riche, du son, de la vidéo, etc.

Vous me voyez venir là, ou pas ?

Hommage à Gutenberg 🖶

Laissez moi formuler ça

Pour un template donné, que nous affublerions de moults sidebars — mises en forme comme il se doit — nous pourrions alimenter en contenus riches n'importe quelle zone de la page affichée.

Et la méga classe : on peut permettre à un thème de rafraîchir sélectivement n'importe quel widget  !

add_theme_support('customize-selective-refresh-widgets');

Démo !

Oui je sais, il faudrait affecter les sidebars à une page spécifique et pas simplement à un template…

Conclusion 💥

On peut aller encore plus loins, avec notamment :

1. les starter_content : ils sont conçus spécialement pour ça ;
2. le choix des couleurs et caractères de typographie proprement, en structurant son css intelligement à base de inherit, currentColor et autres --var() ;
3. l'api JavaScript, qui sert par exemple :
   • dans JetPack, à recharger un scroll infini dans un widget affichant un flux asynchrone ;
   • dans TwentyThirteen, à réinitialiser une mise en page Masonry.

Alors, qu'est-ce qu'on attend ?