DE NOUVELLES FONCTIONNALITÉS POUR LE CUSTOMIZER DE WORDPRESS

UNE EXPÉRIENCE UTILISATEUR AMÉLIORÉE ET PLUS AGRÉABLE

Le "customizer" de WordPress est l'interface de personnalisation avancée proposée au sein de l'administration du CMS (système de gestion de contenu).

Avant le customizer, le principe de "pages d'options" peu uniformes en fonction des thèmes était la règle. Le "customizer" propose de ce fait d'unifier cette approche avec une API ("interface de programmation").

Le "customizer" a pour intérêt de permettre de visualiser sa page web en même temps qu'elle est modifiée.

On y accède depuis le menu "Apparence -> Personnaliser", il est possible de piloter la forme et le fond du site web en fonction des champs de formulaires ("custom controls") définis et configurés par le thème activé.

Ses "contrôles personnalisés" sont organisés en "panels" (qui sont les grands ensembles de personnalisation), des "sections" divisent ces "panels" en sous-ensembles pour rendre plus lisibles les actions proposées par ces custom controls".

En fonction du thème choisi, la personnalisation peut être très avancée ou quasi inexistante si les développeurs de thèmes n'ont pas fait le choix du "customizer".

Le principe de base de l'API du customizer est de permettre la création de classes php qui héritent de classes natives aussi bien pour les panels, les sections que pour les "custom controls". Ainsi des contrôles personnalisés totalement nouveaux peuvent être créés sur la base d'un code uniforme proposé par cette API.

Un exemple de "custom control" non natif créé par un développeur est présenté ci-dessous, et propose spécifiquement les typographie de Google les plus populaires pour personnaliser les textes d'un site web :

<?php
 
if ( ! class_exists( 'WP_Customize_Control' ) )
    return NULL;
 
/**
 * A class to create a dropdown for all google fonts
 */
 class Google_Font_Dropdown_Custom_Control extends WP_Customize_Control
 {
    private $fonts = false;
 
    public function __construct($manager, $id, $args = array(), $options = array())
    {
        $this->fonts = $this->get_fonts();
        parent::__construct( $manager, $id, $args );
    }
 
    /**
     * Render the content of the category dropdown
     *
     * @return HTML
     */
    public function render_content()
    {
        if(!empty($this->fonts))
        {
            ?>
                <label>
                    <span class="customize-category-select-control"><?php echo esc_html( $this->label ); ?></span>
                    <select <?php $this->link(); ?>>
                        <?php
                            foreach ( $this->fonts as $k => $v )
                            {
                                printf('<option value="%s" %s>%s</option>', $k, selected($this->value(), $k, false), $v->family);
                            }
                        ?>
                    </select>
                </label>
            <?php
        }
    }
 
    /**
     * Get the google fonts from the API or in the cache
     *
     * @param  integer $amount
     *
     * @return String
     */
    public function get_fonts( $amount = 30 )
    {
        $fontFile = '/cache/google-web-fonts.txt';
 
        //Total time the file will be cached in seconds, set to a week
        $cachetime = 86400 * 7;
 
        if(file_exists($fontFile) && $cachetime < filemtime($fontFile))
        {
            $content = json_decode(file_get_contents($fontFile));
        } else {
 
            $googleApi = 'https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key={API_KEY}';
 
            $fontContent = wp_remote_get( $googleApi, array('sslverify'   => false) );
 
            $fp = fopen($fontFile, 'w');
            fwrite($fp, $fontContent['body']);
            fclose($fp);
 
            $content = json_decode($fontContent['body']);
        }
 
        if($amount == 'all')
        {
            return $content->items;
        } else {
            return array_slice($content->items, 0, $amount);
        }
    }
 }

Plus d'exemples sur le site des développeurs sont accessibles par ce lien.

Quelques développeurs web ou sociétés concevant des thèmes WordPress premium enrichissent, petit à petit par leur travail, la connaissance du "customizer" et contribuent à accroître les ressources sur le sujet.

Il existe peu de ressources de manière générale (même si un certain nombre de sites web anglophones s'y mettent) bien que le customizer existe depuis la version WordPress 3.4. A ce jour, on peut considérer qu'il a déjà bien évolué même s'il n'est pas un outil mature.

Il faut remarquer qu'il existe également une API JavaScript en parallèle mise à disposition par le "customizer" avec de bons tutoriels ici ou là, ce qui le rend très efficace.

En addition de cette API JavaScript, les créateurs de sites web ont aussi la possibilité de réaliser des "custom controls" avec des templates Underscore JS.

On peut aussi noter que la documentation proposée à la communauté par WordPress est assez succincte à ce jour, les développeurs web ont donc la nécessité d'étudier le code en détail !

Quelques types de champs efficaces sont proposés nativement, la documentation de l'API les présente brièvement, cependant ils limitent les possibilités de personnalisations avancées que l'on peut trouver ailleurs sur de nombreux formulaires servant à de la configuration.

Heureusement l'API du "customizer" est étudiée pour que les codeurs puissent s'exprimer et adapter celui-ci à leurs besoins et objectifs.

C'est à ce niveau qu'intervient Kirki en proposant des composants d'interface variés visible sur cette page, dit "user friendly" (facilitant l'expérience utilisateur), et très pratiques pour contrôler l'apparence et le contenu de son site web. Le "customizer" de WordPress, est de fait, véritablement amélioré et ses capacités sont accrues.

La librairie proposée par Kirki a pour but de rendre plus aisée l'utilisation des "custom controls" tout en respectant au maximum les bases de l'API.

Kirki est disponible sous forme de plugin et peut aussi être intégré directement à un thème pour les besoins des développeurs et intégrateurs web.

Avec Kirki, il est davantage question de l'API PHP du "customizer", adaptée par ce dernier pour accélérer le déploiement de l'interface.
Bien sûr, étant donné l'apparence des contrôles de la librairie, du JavaScript et des CSS3 rendent le rendu très soigné !

Le plugin WordPress Kirki est disponible sur wordpress.org.

Des ressources plus générales sur le "customizer" sont présentes ici.

Cet article Kirki, la boîte à outils pour le « customizer » de WordPress est apparu en premier sur DOTPROGS.