Comment customiser l’apparence de son site WordPress

WordPress est le CMS (Content Management System) le plus utilisé pour créer des sites web. Optimisé pour le référencement naturel, il est facile d’utilisation et propose des mises à jour et des améliorations fréquentes.

Pour apprendre à créer son site sur WordPress, vous pouvez suivre la formation suivante : Créer un site internet en 5 jours avec le CMS WordPress

Sur WordPress, l’apparence du site est déterminé par le thème. Nous allons voir, dans cet article, différentes manière de personnaliser votre site. Il existe 3 méthodes pour personnaliser votre site :

• Utiliser la personnalisation proposé par le thème
• Installer des plugins ou constructeurs de pages
• Modifier le code (en créant un thème enfant)

Utiliser la personnalisation du thème

Pour accéder à la personnalisation du thème, vous pouvez cliquer sur Apparence->Personnaliser dans le menu d’administration de WordPress. La page d’accueil de votre site sera alors ouverte, avec une barre latérale permettant de modifier certains éléments du thème. Par exemple, vous trouverez ci-dessous une image de certains éléments que je peux customiser avec mon thème.

En cliquant sur ces éléments, vous pourrez modifier la police, la couleur, la disposition de l’élément concerné. Il se peut que vous n’ayez pas les mêmes options de personnalisation. Cela est normal, car ces options dépendent du thème utilisé.

Il faut aussi savoir que certains plugins ont des éléments personnalisables qui peuvent apparaître dans cette barre. C’est le cas du plugin WooCommerce qui est présent dans l’image au-dessus. Enfin, vous pouvez ajouter votre propre CSS, en cliquant sur CSS additionnel.

Pour apprendre les bases du CSS, vous pouvez suivre la formation suivante : Créer son site web en HTML et CSS

Installer des plugins ou constructeurs de pages

Les plugins ajoutent des fonctionnalités à votre site, mais il participent aussi à la personnalisation de l’apparence du site. Par exemple, le plugin Max Mega Menu permet de gérer ses menus WordPress. Il propose d’insérer des icônes devant vos boutons de menu, de changer la couleur de fond du menu ou encore d’ajouter des effets au clic ou au survol des boutons.

Les constructeurs de pages sont des extensions qui permettent d’éditer vos pages et articles en utilisant une interface où l’on peut faire glisser et déposer des éléments. Ils sont pratiques pour modifier des pages, car on peut directement voir le résultat que l’on va obtenir. Il faut tout de même vérifier si le thème est compatible avec un constructeur de pages donné, avant de l’installer. Elementor est l’un des constructeurs de pages les plus connus.

Modifier le code (en créant un thème enfant)

Si vous avez des connaissances en HTML, CSS et PHP, vous pouvez modifier le code de votre site. Pour cela, vous pouvez passer par Apparence->Éditeur de thème mais cela est déconseillé. En effet, toute modification serait immédiatement annulée si le développeur du thème sort une mise à jour. Pour éviter cela, on peut créer un thème enfant. Un thème enfant est un thème qui utilise le code d’un autre thème (appelé thème parent) et qui rajoute ou remplace certaines parties à ce code. Ainsi, en cas de mise à jour du thème parent, les modifications du code subsistent.

Dans la suite de cette partie, nous conseillons de travailler en premier lieu sur un site de test.

Pour mettre en place un thème enfant, vous devez utiliser un FTP (File Transfer Protocol) comme FileZilla.

Allez dans le FTP, placez vous dans wp-content/themes/ et créez un dossier qui porte le nom de votre thème enfant.
Dans ce dossier, ajoutez deux fichiers :

• style.css : une feuille de style commentée qui indique à WordPress qu’il s’agit d’un thème enfant et le nom du thème parent.
• functions.php : le fichier de fonction.

Dans style.css, ajoutez le commentaire suivant :

/*
Theme Name: Nom du thème enfant
Description: Description du thème enfant
Author: Auteur
Author URI: https://www.le-site.com/
Template: Nom du thème parent (Utiliser le nom du dossier affiché dans wp-content/themes/ et non celui affiché dans WordPress)
Version: 0.1.0
*/

Ci-dessous, une description des lignes que vous pouvez rajouter si besoin (ne pas mettre d’espace après les deux points pour que cela fonctionne) :

• Theme URI : Lien pour accéder au code ou à la documentation du thème.
• TextDomain : Utilisé pour l’internationalisation. Il doit être le deuxième paramètre dans toutes les fonctions d’internationalisation.
• License : La licence, qui doit être GNU.
• License URI : Le lien vers l’information sur la licence.

Dans functions.php, ajoutez le code suivant :

<?php
/**
** activation theme
**/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
?>

Ce code permet d’utiliser le thème parent pour interroger notre feuille de style : style.css.

Vous avez maintenant la possibilité de copier des pages du thème parent, puis de les coller et de les modifier dans votre dossier du thème enfant pour personnaliser votre site. Par exemple, vous pouvez modifier les pages header.php ou footer.php. Vous pouvez retourner dans l’administration de WordPress, aller dans Apparence->Thèmes et activer votre thème enfant pour observer les modifications.

Résumé

Pour personnaliser votre site, vous pouvez utiliser la personnalisation du thème, installer des plugins ou constructeurs de pages. Si vous êtes à l’aise avec CSS et PHP, vous pouvez aussi modifier le code grâce à un thème enfant qui conservera les modifications apportées au code, en cas de mise à jour du thème parent.