Vous êtes ici : Site Vitrine Facile » Bienvenue sur Site Vitrine Facile, » Installer WordPress : le guide complet » Les thèmes WordPress » Comment modifier un theme WordPress

Comment modifier un theme WordPress

Vous avez installé et commencé à configurer votre thème WordPress, mais vous aimeriez le personnaliser d’avantage ?

Vous trouverez dans ce tutoriel l’essentiel à savoir pour apprendre à modifier un theme WordPress.

 

Découverte

 

PPH, CSS, HTML… kézaco ?

Dans le domaine de la création Web, vous entendrez souvent parler de ces termes. Il est donc important de les comprendre avant de vouloir modifier un theme WordPress. Pour faire simple :

PHP = correspond aux fonctionnalités de votre site (barre de recherche, zone de texte, disposition des éléments etc.).

Exemple de code PHP

 

HTML = correspond au contenu de votre site (texte, image, video etc).

Exemple de code HTML

 

CSS = correspond à l’apparence de votre site Web (la taille de la police, la couleur de la police, la mise en page etc.).

Exemple de code CSS

 

Petite analogie pour simplifier la compréhension

 

Les éléments qui structurent un thème

Afin de voir les fichiers qui constituent votre thème, rendez-vous sur le code source de ce dernier en cliquant sur « Apparence » puis « Editeur » :

 

Vous avez ensuite accès aux différents fichiers qui composent votre thème :

Chacun de ces fichiers modèles apportent son lot de fonctionnalités. Dans l’absolu, WordPress n’a besoin que de deux fichiers pour fonctionner :

index.php : permettant d’afficher le site ;

style.css : agissant sur l’apparence du site.

 

Mais d’autres fichiers sont disponibles, soit pour avoir un affichage différent pour les pages (page d’accueil, catégories, articles etc), soit pour ajouter de nouvelles fonctions (recherche, commentaires).

Voici les principaux :

  • style CSS : permet de modifier le design du thème ;
  • single.php : le modèle d’article seul ;
  • sidebar.php : le modèle des barres latérales et des widgets (élément graphique permettant d’accéder à une fonction) ;
  • page.php : le modèle des pages du site ;
  • archives.php : le modèle des archives du site ;
  • header.php : le modèle de l’en-tête du site ;
  • home.php : le modèle de la page d’accueil ;
  • footer.php : le modèle du pied de page ;
  • search.php : le modèle de la barre de recherche ;
  • comments.php : le modèle pour les commentaires.

 

Il en existe évidemment d’autres que vous pouvez retrouver dans ce synoptique :

Cliquez pour agrandir

 

Les extensions à installer pour débuter

Le problème lorsque l’on modifie le code d’un thème, c’est que nos modifications sont susceptibles d’être écrasées lors d’une mise à jour.

Voici deux extensions qui vont vous permettre de contourner ce problème et de ne pas voir vos modifications disparaître.

 

Créer un thème enfant avec Child theme configurator

Un thème enfant est une copie de votre thème principale. Il en reprend toutes les fonctionnalités.

L’intérêt est que les modifications faites sur le thème enfant ne seront pas effacé après les mises à jour du thème principal.

 

Nous allons maintenant créer et configurer un thème enfant avec l’extension gratuite Child Theme Configurator.

 

  • Avant de démarrer, voici un aperçu du thème d’origine (le thème Suits), que nous appellerons thème parent. Vous retrouvez sur la droite l’ensemble des modèles de page PHP et de la page CSS.

 

  • Rendez-vous dans Extensions et cliquez sur Ajouter ;

 

  • Recherchez, installez et activez Child Theme Configurator ;

 

  • Cliquez sur Outils puis Child Themes ;

 

  • Sélectionnez le thème parent souhaité (celui que vous voulez mmodifier) et lancez une analyse ;

 

Vous pouvez ensuite créer le thème enfant ;

  • Rendez-vous ensuite dans Apparence puis Thèmes ;

 

  • Le thème enfant (Suits Child) est créé et activé ;

 

  • Cliquez sur Apparence puis Éditeur pour accéder aux fichiers du thème enfant ;

 

  • Le fichier functions.php et style.css sont créés par défaut :

 

Pour ajouter et modifier d’autres fichiers php (page.php, archives.php, header.php etc.),vous pouvez les créer facilement avec l’extension Child Theme Configurator :

 

  • Rendez-vous sur la page de configuration de l’extension ;

 

  • Cliquez sur l’onglet Files ;

 

  • Sélectionnez les fichiers que vous souhaitez dupliquer (Pour l’exemple ce sera le header.php et le page.php). Cliquez ensuite sur Copy Selected to Child Theme ;

 

  • Allez sur Apparence puis Editeur ;

 

  • Les deux fichiers sont maintenant créés.

 

Modifier le CSS de votre site avec Custom CSS

Si vous ne souhaitez modifier que le code CSS de votre site, je vous recommande d’installer l’extension Custom CSS.

Son avantage réside dans le fait que vous n’ayez pas besoin de créer un thème enfant, les modifications sont enregistrés dans les fichiers de l’extension.

 

  • Recherchez, installez et activez Custom CSS ;

 

  • Apparence puis Custom Code ;

 

  • Cliquez sur Add New ;

 

  • Vous pouvez maintenant ajouter vos lignes CSS dans cette fenêtre.

 

Nous allons voir maintenant comment utiliser ces différents outils pour modifier votre thème WordPress.

 

Modifier les éléments d’un thème

 

Identifier un élément d’un thème

L’une des premières difficultés est de savoir sur quel élément agir pour modifier votre thème.

Admettons que nous voulions modifier la description du site :

 

Les navigateurs (Internet Explorer, Google Chrome et autres) ont intégré une fonction très utile : « Inspecter ».

Revenons sur notre bannière. Sélectionnez l’élément, faite un clic droit dessus et cliquez sur « Inspecter » :

 

Vous verrez ensuite apparaître une fenêtre pleins de lignes de code. Elle correspond au code de votre page.

 

A gauche, vous retrouvez les languages PHP / HTML :

 

A droite, vous retrouvez le CSS :

 

Quelques exemples

Avant d’aller plus loin, je vous invite à vous rendre sur le site OpenClassrooms pour accéder à une liste complète des fonctions CSS ( Mémento des propriétés CSS) et des fonctions HTML (Mémento des propriétés HTML).

 

Modification du CSS

Pour cet exemple, nous allons reprendre la description du site et modifier :

  • La police (font) ;
  • La marge intérieur haute (padding-top);
  • La couleur (color).

 

Rendez-vous sur Custom CSS. Nous allons ajouter ces ligne de code :

#site-description {
font: normal 18px « Lucida Grande », »Lucida Sans Unicode », »Lucida Sans »,Geneva,Verdana,sans-serif;
padding-top: 1.3rem;
color: #289dcc;
}

 

N’oubliez pas de mettre à jour :

 

Voilà le résultat :

 

En inspectant la page, vous retrouvez la ligne de code ici :

 

Il n’est pas toujours évident de trouver la bonne bonne fonction ou la bonne ligne de code. Aussi ne vous inquiétez si vous devez réaliser plusieurs essais pour obtenir le résultat désiré.

 

Modification du php

Le PHP est un langage de programmation qui, comme tout langage, demande de l’entrainement et de la pratique pour être maîtrisé.

Vous souhaitez vous lancer dans des modifications en php sur votre site WordPress ?

Je vous propose ces quelques ressources et fonctions qui pourrait vous intéresser :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

un × 2 =

 
Vous souhaitez apprendre à créer votre site Internet ? Suivez le guide ! Cliquez-ici !
+