Dernière mise à jour le 5 avril 2018 par LMD

Dans cette partie, je vous propose d’aller plus loin en explorant quelques techniques de personnalisation d’un thème et du contenu.

La personnalisation des thèmes

Cela permet d’inclure des réglages personnalisés pour l’usage du thème, directement dans le Dashboard.
https://codex.wordpress.org/Theme_Customization_API

Comment modifier le menu « Personnaliser » de votre thème WordPress

https://2014.wptech.fr/session/api-customizer/

Il existe déjà par défaut des propositions de personnalisation, à partir de Dashboard > Apparence > Personnaliser, mais il est possible d’en ajouter d’autres. Cela se fait dans le fichier functions.php, en plusieurs étapes :
– créer la personnalisation
– ajouter une section dans l’interface
– ajouter un réglage
– ajouter un contrôle pour l’utilisateur
– et enfin, appliquer l’option de personnalisation au thème

Dans tous les cas, il faut commencer par créer une fonction qui va contenir l’ajout de la section, du réglage et du contrôle. Cette fonction, que nous choisirons d’appeler theme_customize_register est liée à un argument qui est une variable PHP (comme toute variable PHP, son nom commence par le signe $) nommée $wp_customize :
function theme_customize_register($wp_customize){}

Prenons l’exemple de la personnalisation de l’image d’arrière-plan de l’en-tête.

Ajouter la section, le réglage et le contrôle

À l’intérieur des accolades, on commence par déclarer la section dans l’interface (on ajoute littéralement une section à notre variable par la commande add_section). Il faut choisir un identifiant ( ici header_section, à adapter en fonction du contenu de la section), le nom qui sera visible dans l’interface (ici, En-tête de la page) et une description. Ces paramètres sont déclarés dans un tableau (array) :
$wp_customize->add_section('header_section', array(
    'title' => 'En-tête de la page',
    'description' => 'Personnalisation du header',
    'priority' => 200,
));

La valeur de la priorité détermine la place de la section par rapport aux autres, la plus haute ayant le nombre le plus faible.

Puis on ajoute un réglage (add_setting) dont on doit également choisir le nom (charge_image) :
$wp_customize->add_setting('charge_image');

Enfin, on ajoute un contrôle (add_control). C’est un peu plus compliqué. Il faut choisir par une légende (label) le texte de l’interface qui indique quoi faire (Image d\’arrière-plan : 960×250 px). Vous noterez l’anti slash qui permet d’interpréter correctement l’apostrophe comme du texte et non comme du code. Le reste établit le lien avec la section et le réglage :
$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize,'charge_image', array(
    'label' => 'Image d\'arrière-plan : 960x250 px',
    'section' => 'header_section',
    'settings' => 'charge_image'
    )
));

Il reste à faire suivre la fonction de la ligne suivante, ce qui permet à WordPress d’ajouter automatiquement le code nécessaire dans les fichiers php :
add_action('customize_register', 'theme_customize_register');

Ajouter les règles CSS

La dernière phase consiste à générer les règles css nécessaires à l’affichage de l’image (ou à l’application des options) sur les pages. Il faut bien faire attention à reprendre ici les sélecteurs adaptés, à partir de votre code CSS ( ou à voir dans le code PHP des templates concernés).

On crée donc une nouvelle fonction nommée theme_customize_css, dont voici le code complet :
function theme_customize_css() {
  ?>
    <style type="text/css">
      #wrap header{
        background-image: url(<?php echo get_theme_mod('charge_image','none'); ?>);
        height: <?php if(get_theme_mod('charge_image')!=='') { echo '250px' ; } else { echo 'auto' ; } ?>;
      }
    </style>
  <?php
}
add_action( 'wp_head', 'theme_customize_css');