Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. WordPress
  3. La personnalisation des thèmes
Extrait - WordPress Conception et personnalisation des thèmes (4e édition)
Extraits du livre
WordPress Conception et personnalisation des thèmes (4e édition)
3 avis
Revenir à la page d'achat du livre

La personnalisation des thèmes

L’objectif

En tant que concepteur de thèmes, vous avez la possibilité de proposer aux utilisateurs, une personnalisation de vos thèmes. Vous pouvez déterminer quelles sont les options de personnalisation accessibles aux utilisateurs et ce sont les utilisateurs qui choisissent les valeurs de ces options. Cette personnalisation se fait par l’intermédiaire de l’interface de personnalisation standard de WordPress. Cette interface utilise l’API Customizer : https://codex.wordpress.org/Theme_Customization_API

En utilisant cette API, vous êtes sûr que les utilisateurs auront une interface standard, identique et approuvée par les concepteurs de WordPress.

Toute la personnalisation des thèmes se fait dans le fichier functions.php et les paramètres utilisateurs sont envoyés au thème avec la fonction wp_head(). Cette dernière est indispensable et doit donc être présente dans le fichier header.php.

Pour ce chapitre, nous allons utiliser un thème plus que simpliste, puisqu’il n’est constitué que d’un seul template d’affichage : index.php. Ce fichier fait appel aux fichiers header.php, sidebar.php et footer.php. Il contient une feuille de style CSS style.css très simple et minimaliste. Le fichier functions.php initial ne contient que deux fonctions, l’une permet de créer un emplacement pour le menu de navigation...

La personnalisation par défaut

Sachez que cette personnalisation des thèmes a été introduite dans la version 3.4 de WordPress. De plus, tous les thèmes WordPress utilisent déjà a minima cette interface standard.

 Pour afficher l’interface de personnalisation, dans le menu Apparence, choisissez Personnaliser

Voilà l’interface initiale pour un thème ne proposant pas ses propres options de personnalisation. Vous avez, quoi qu’il arrive, cinq volets (nommés sections) :

  • Identité du site.

  • Menus.

  • Widgets.

  • Page d’accueil statique.

  • CSS additionnel.

images/C10-002N.png

Voici cette même interface, avec le thème par défaut Twenty Twenty, qui propose des options de personnalisation plus complètes :

images/C10-003N.png

Créer une personnalisation

Pour mettre en place une personnalisation de certaines options d’un thème, vous devez utiliser des fonctions de l’API Theme Customization : https://developer.wordpress.org/themes/customize-api/

Cela va se faire en plusieurs étapes et à chaque étape vous allez utiliser une fonction précise.

Voici les quatre étapes indispensables :

1. Créer une personnalisation pour le thème avec l’action customize_register().

2. Ajouter une section dans l’interface standard avec la méthode add_section(). Cela va permettre de créer une section (un volet) dans l’interface standard de la personnalisation des thèmes.

3. Ajouter un réglage avec la méthode add_setting(). Cela va permettre de créer un réglage qui sera stocké dans la base de données de votre site.

4. Ajouter un contrôle utilisable par les utilisateurs, avec la méthode add_control(). C’est ce qui va permettre d’afficher la personnalisation du thème dans la section.

Toutes ces étapes se font dans le fichier functions.php du thème.

5. Appliquer l’option de personnalisation au thème. Cette dernière étape va permettre d’utiliser la personnalisation de l’utilisateur et de l’appliquer au thème. En fonction du réglage utilisé, cela pourra se faire dans...

Personnaliser une couleur

1. L’objectif

Pour ce premier exemple, nous proposons aux utilisateurs de choisir eux-mêmes la couleur des liens du thème.

2. Créer la personnalisation

La première étape consiste à créer une personnalisation, avec l’action customize_register.

Cette action WordPress ne nous permet d’utiliser que quatre méthodes :

  • WP_Customize_Manager->add_setting() : pour ajouter de nouveaux réglages enregistrés dans la base de données.

  • WP_Customize_Manager->add_section() : pour ajouter une nouvelle section dans l’interface de personnalisation.

  • WP_Customize_Manager->add_control() : pour ajouter un contrôle personnalisable par les utilisateurs.

  • WP_Customize_Manager->get_setting() : pour utiliser les contrôles par défaut de WordPress.

 Ouvrez le fichier functions.php du thème.

 Saisissez ce code :

function theme_customize_register($wp_customize){ 
    // Tout le code de la personnalisation du thème 
    // se place ici, entre les accolades 
} 
add_action('customize_register', 'theme_customize_register'); 
  • nous créons une fonction personnelle, nommée theme_customize_register.

  • cette fonction utilise comme argument l’objet $wp_customize.

  • entre les deux accolades, { et }, devra être inséré tout le code de cette personnalisation.

  • puis nous ajoutons l’action, add_action(), avec deux arguments : le hook customize_register qui indique sur qui porte cette action et le nom de notre fonction de personnalisation theme_customize_register.

3. Ajouter une section

La première étape consiste à ajouter un volet, nommé section, dans l’interface de personnalisation.

Avec l’objet $wp_customize, nous devons utiliser la méthode $wp_customize-> add_section(). https://developer.wordpress.org/reference/classes/wp_customize_manager/add_section/

Voici la syntaxe de cette méthode :

$wp_customize->add_section($id, $args); 

Les arguments :

  • $id : obligatoire. C’est une chaîne de caractères (type string) qui est l’identifiant unique de cette section. Nous devrons utiliser cet identifiant dans les autres méthodes, dans le paramètre section.

  • $args : facultatif. C’est un tableau (type...

Personnaliser un texte

1. L’objectif

Pour ce deuxième exemple, nous proposons aux utilisateurs de saisir eux-mêmes un texte, pour personnaliser le pied de page.

2. La section

Nous utilisons la même section que pour le premier exemple. Dans le fichier functions.php, nous utilisons la section précédente, nommée ma_section.

function theme_customize_register($wp_customize){ 
  // Ajout de la section 
  $wp_customize->add_section('ma_section', array( 
    'title' => 'Options de Mon thème', 
    'description' => 'Personnalisation du thème <strong>Mon 
thème simpliste</strong>', 
    'priority' => 200, 
  )); 
            ... 
} 
add_action('customize_register', 'theme_customize_register'); 

Nous ajoutons donc le réglage et le contrôle à la suite des éléments concernant le sélecteur de couleur, avant l’accolade de fermeture de function().

3. Ajouter le réglage

Dans un premier temps, nous ajoutons un nouveau réglage avec le minimum de paramètres cette fois.

 Saisissez ce code :

/********* Champ de texte **********/ 
// Ajout du réglage 
$wp_customize->add_setting('texte_pied_de_page'...

Personnaliser l’affichage du texte

1. L’objectif

Nous allons maintenant permettre aux utilisateurs d’afficher ou non le texte personnalisé précédemment. Pour se faire, ils devront cocher une case pour afficher le texte. Si la case n’est pas cochée, le texte ne sera pas affiché.

2. Ajouter le réglage et le contrôle

Dans un premier temps, nous ajoutons un nouveau réglage sans paramètre cette fois.

 Dans le fichier functions.php, dans la fonction de personnalisation, saisissez ce code :

/********* Case à cocher **********/ 
// Ajout du réglage 
$wp_customize->add_setting('affiche_texte_pdp'); 
  • Le réglage est nommé affiche_texte_pdp.

 Maintenant, suite à ce code, ajoutez le code du contrôle :

// Ajout du contrôle 
$wp_customize->add_control('affiche_texte_pdp', array( 
    'type' => 'checkbox', 
    'label' => 'Afficher le texte du pied de page', 
    'section' => 'ma_section', 
)); 
  • Le type du contrôle est checkbox pour une case à cocher.

  • Le label indique l’étiquette dans l’interface.

  • La section est toujours ma_section.

3. L’affichage dans le pied de page

C’est l’utilisateur qui va décider s’il...

Personnaliser l’alignement du titre du site

1. L’objectif

Nous allons maintenant permettre aux utilisateurs de choisir l’alignement du titre dans l’en-tête du site : à gauche, centré ou à droite. Ce choix va se faire par l’intermédiaire d’une liste de boutons radio à choix unique.

2. Ajouter le réglage et le contrôle

Comme toujours, la première étape consiste à ajouter un nouveau réglage avec comme seul paramètre par défaut, un alignement à gauche.

 Dans le fichier functions.php, dans la fonction de personnalisation, saisissez ce code :

/********* Liste déroulante **********/ 
// Ajout du réglage 
$wp_customize->add_setting('alignement_titre', array( 
            'default' => 'left', 
)); 
  • L’identifiant du réglage est nommé alignement_titre.

  • Le tableau des paramètres, ne contient que la valeur par défaut : left, pour un alignement à gauche.

 Maintenant, suite à ce code, ajouter le code du contrôle :

// Ajout du contrôle 
$wp_customize->add_control('alignement_titre', array( 
    'label' => 'Alignement du titre', 
    'section' => 'ma_section', ...

Personnaliser l’image d’arrière-plan de l’en-tête

1. L’objectif

Nous allons maintenant permettre aux utilisateurs de choisir une image pour l’arrière-plan de l’en-tête. Cela va se faire par l’intermédiaire de l’ajout d’image à la bibliothèque des médias de votre site WordPress.

2. Ajouter le réglage et le contrôle

Comme toujours, la première étape consiste à ajouter un nouveau réglage, toujours dans la même section.

/********* Chargement d'une image **********/ 
// Ajout du réglage 
$wp_customize->add_setting('charge_image'); 
  • L’identifiant du réglage est nommé charge_image.

Nous n’appliquons pas d’argument.

 Maintenant, suite à ce code, ajoutez le code du contrôle :

// Ajout du contrôle 
$wp_customize->add_control(new WP_Customize_Image_Control( 
    $wp_customize,'charge_image', array( 
        'label' => 'Image d\'arrière-plan : 960x250 px', 
        'section' => 'ma_section', 
        'settings' => 'charge_image' 
        ) 
)); 

Pour...