• 10 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Mis à jour le 20/12/2018

Personnalisez le fonctionnement interne d’un thème WordPress

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Malgré toutes les options offertes par le personnaliseur de thèmes, vous n’en avez peut-être pas encore assez. Rassurez-vous, vous pouvez encore personnaliser votre site à l’infini en utilisant l’éditeur WordPress. Tandis que le personnaliseur vous permettait de manipuler des images, d’ajuster l’organisation et les réglages de couleur, l’éditeur vous donne accès au CSS pour vous permettre de changer les espaces, redimensionner les éléments, et bien plus encore. Pour accéder à l’éditeur, rendez-vous dans le menu à gauche de la page, comme d’habitude : Apparence > Éditeur.

L’éditeur de thème (styles.css)
L’éditeur de thème (styles.css)

Par défaut, c’est la feuille de style du thème qui s’ouvre : elle s’intitule styles.css. Vous pouvez également voir tous les fichiers éditables sur le côté droit. Si le code côté serveur n’est pas trop votre truc, ne vous occupez pas des fichiers PHP que vous verrez ; vous pouvez déjà faire beaucoup  de choses rien qu’en bidouillant le CSS de ce premier fichier !

En tout premier lieu, je vous invite à copier-coller le contenu de styles.css  dans un éditeur de texte. J’utilise Sublime Text, mais vous pouvez évidemment utiliser Atom ou n’importe quel éditeur de votre choix. Sauvegardez ce fichier sous le nom sydney_default_styles.css  quelque part sur votre ordinateur. Ainsi, vous aurez une copie des valeurs par défaut de ce thème, et donc la possibilité de revenir sur tous les changements que vous ferez.

Pour vous exercer, je vous propose d’agrandir la taille du texte dans le grand diaporama. Cela va vous aider à comprendre comment localiser une règle de style particulière pour modifier la bonne ligne de CSS !

Identifier les éléments

Voici quelques trucs pour vous aider à trouver certains éléments de CSS au sein d’une feuille de style de thème.

Les commentaires CSS

Les développeurs de thèmes laissent souvent des commentaires dans leur code afin que les utilisateurs puissent comprendre comment ça fonctionne. Un commentaire de code, quel que soit langage, est un texte qui n’a pas d’autre fonctionnalité que celle d’une note lisible par un être humain. En CSS, les commentaires commencent par /*  et se terminent par */ . Par exemple, dans le thème Sydney, on peut voir le commentaire suivant :

/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/

 Les développeurs du thème ont laissé ce commentaire pour indiquer que les règles de style à suivre sont celles de l’entête du thème. Si certains commentaires vous paraissent inutiles, vous pouvez tout à fait les enlever, ou bien ajouter vos propres commentaires et les modifier !

Inspecter les éléments

La plupart des éléments HTML d’un thème sont identifiés par une classe ou un identifiant. Les règles CSS ciblent ensuite ces classes et identifiants afin d’appliquer les bonnes règles aux bons éléments !

Vous aurez besoin de savoir trouver la classe, l’identifiant ou le type général d’un élément de votre page, pour pouvoir ensuite rechercher les règles de style qui s’y appliquent. Dans la plupart des navigateurs, il suffit d’effectuer un clic droit sur un élément et de sélectionner “Inspecter” ou “Inspecter l’élément” dans le menu qui apparaît.

L’élément inspecté
L’élément inspecté

Dans ces outils de développeur, vous pourrez voir tout le HTML associé à un élément en particulier. Vous pouvez donc effectuer une recherche de entry-title  dans la feuille de style, afin de trouver les styles associés à cet élément.

La classe identifiée dans la feuille de style
La classe identifiée dans la feuille de style

Augmenter la taille de police du diaporama

Le diaporama par défaut
Le diaporama par défaut

Si ce texte n’est pas aussi grand que nous le souhaiterions, nous pouvons chercher les lignes de CSS qui définissent la taille de police. La première étape consiste à identifier l’élément, afin de le retrouver dans la feuille de style. En inspectant cet élément, vous pourrez voir qu’il s’agit d’un h2 de classe maintitle. Vous n’avez plus qu’à utiliser la commande “rechercher” (cmd-F sur mac, ctrl-F sur Windows) dans l’éditeur de thème, et vous voilà au niveau des règles associées à cette classe !

Les deux règles qui nous serviront à ajuster la taille de police seront ces deux lignes :

font-size: 57px;
line-height: 67px;

Ne choisissons pas nos nouvelles tailles de police complètement au pif. Assurons-nous plutôt que nous gardons un ratio approprié. Personnellement, j’adore le ratio 3:4 (technique de design qui consiste à se limiter aux tailles de polices 5, 7, 9, 12, 16, 21, 28, 37, 50, 67 et 83 pour garder un rapport de 3:4 entre deux tailles consécutives et une lisibilité optimale), donc nous allons choisir 67px pour la propriété font-size, et 83px pour line-height. Bien sûr, vous pouvez choisir vos propres valeurs selon vos préférences ou vos besoins ! Mon CSS est donc passé de ça :

.text-slider .maintitle {
    position: relative;
    display: inline-block;
    font-size: 50px;
    line-height: 67px;
    font-weight: 700;
    padding-bottom: 10px;
}

à ça :

.text-slider .maintitle {
    position: relative;
    display: inline-block;
    font-size: 67px;
    line-height: 83px;
    font-weight: 700;
    padding-bottom: 10px;
}

Cliquez sur “Mettre à jour” pour sauvegarder vos changements. Voici la différence d’aspect entre avant et après le changement de taille dans l’éditeur. le titre ressort beaucoup mieux à présent !

La taille de police du diaporama augmentée
La taille de police du diaporama augmentée

En utilisant la même méthode :

  1. Identifiez un élément de la page,

  2. Modifiez le CSS associé à cet élément dans la feuille de style,

Vous pouvez modifier les styles (font-sizecolor...), les espaces (paddingmargin...), la disposition (floatposition), et bien plus encore.

Installer un plugin

À présent, vous avez personnalisé l’apparence votre site à plusieurs niveaux. Sachez que vous pouvez également étendre les fonctionnalités de votre site en vous plongeant dans l’univers des plugins que d’autres développeurs WordPress ont mis à votre disposition. Par exemple, mon groupe voudrait avoir un formulaire de contact sur leur page Contact, grâce auquel les utilisateurs pourraient leur envoyer des e-mails.

Cette fonctionnalité étant très répandue, il y a fort à parier que quelqu’un en a déjà fait un plugin ! Cliquez sur Plugins sur la gauche du tableau de bord, puis Ajouter. À partir de là, vous pouvez chercher “contact”, ou toute autre fonctionnalité que vous désirez.

Les plugins liés à “contact”
Les plugins liés à “contact”

Je choisis "Contact Form Clean and Simple," qui correspond exactement à la fonctionnalité que je cherche ! Pour installer le plugin, cliquez simplement sur “Installer”. Ensuite, vous n’aurez plus qu’à cliquer sur Activer.

Et voilà, ce nouveau plugin apparaît désormais dans ma liste de plugins, et je peux le personnaliser en cliquant sur Réglages afin de l’adapter à mes besoins. Je peux choisir d’imposer aux utilisateurs de faire une vérification par CAPTCHA avant d’envoyer leur message, régler l’adresse e-mail à laquelle les messages sont envoyés, et bien plus encore.

Les réglages du formulaire de contact
Les réglages du formulaire de contact

Peut-être avez vous remarqué la ligne "Pour ajouter le formulaire de contact, veuillez insérer le texte [cscf-contact-form] à votre article ou votre page." C’est de cette manière que vous pourrez faire s’afficher le formulaires sur une de vos pages ! Je vais donc aller dans Pages > Contact, ce qui correspond à la page de contact que j’ai mise en place précédemment.

L’intégration du plugin dans la page de contact
L’intégration du plugin dans la page de contact

Je peux maintenant aller voir ma page de contact pour admirer mon joli formulaire de contact !

Le formulaire de contact du plugin
Le formulaire de contact du plugin

Il y a tellement de façons de personnaliser WordPress, des pages aux plugins en passant par des thèmes magnifiques et personnalisables ! Quel que soit votre besoin, faites confiance à WordPress pour construire exactement le site qu’il vous faut !

Exemple de certificat de réussite
Exemple de certificat de réussite