Comment donner un aspect visuel professionnel à un site/blog WordPress

Code cssDifficile de donner un aspect visuel professionnel à un site Web ou à un blog WordPress sans passer par la modification des feuilles de styles liées à son contenu structurel. Lorsqu’un webmaster construit un site Web de petit budget, ne permettant pas l’intervention d’une équipe complète, il est parfois fastidieux pour lui de travailler sur la structuration du contenu et sur la présentation de chacune des ressources, en partant de zéro. Les professionnels Web se penchent alors sur des solutions Open Source qu’ils se chargent d’adapter. Les plus connues de ces solutions sont les CMS Drupal, Joomla, Spip ou des moteurs de blogs comme WordPress.org. Tous, des logiciels libres.

Prenons le cas d’un site/blog WordPress. Il est nécessaire de manipuler les feuilles de styles du template pour adapter parfaitement son rendu aux recommandations visuelles de son commanditaire.

Le CSS (Cascading Style Sheets) est le langage informatique qui permet de modéliser la présentation d’une page Web dans un navigateur. Il peut regrouper plusieurs feuilles de style associées au contenu HTML de la seule et même page Web, d’où son nom Cascading Style Sheets (feuilles de style en cascade en français).

HTML et CSS sont deux langages informatiques qui constituent, à ce jour, le couple lié permettant de construire un site Web moderne (bien sûr, il faudra y ajouter d’autres langages comme PHP ou Java, etc. pour en faire un site Web dynamique).

L’un, le HTML (HyperText Markup Langage), permet d’écrire et de structurer les informations dans une page Web, en utilisant des balises de titre, des balises de liens, des balises de listes, des balises de paragraphes, etc. C’est un langage de balisage. On dit aussi de lui qu’il est un langage de marquage ou de structuration. Il organise le contenu d’une page Web à l’aide de balises pour permettre aux navigateurs Web de comprendre les informations qu’elle contient, pour les interpréter au mieux, à l’affichage, pour le visiteur.

Si, par exemple, une page Web indique le code suivant :

<strong>Comment écrire une page Web avec HTML</strong>,

les navigateurs Web vont afficher ceci aux visiteurs :

Comment écrire une page Web avec HTML  (en gras).

Dans une page HTML, les balises<strong> et </strong> recommandent aux navigateurs Web d’indiquer que le texte mis entre la balise ouvrante  (<strong>) et la balise fermante (</strong>) est important. La plupart des navigateurs affiche alors le texte en gras pour marquer son importance.

Prenons un second exemple : pour demander aux navigateurs Web d’afficher la dénomination de notre entreprise, WEB & EDITIONS, comme un lien cliquable. Nous allons écrire ce code :

code-a copie

Ici, les balises en paire <a> et </a> recommandent aux navigateurs Web d’afficher le texte mis entre elles, en l’occurrence, WEB & EDITIONS, comme un lien, les attributs href spécifiant la cible du lien, target la fenêtre de destination et title pour info au survol de la souris. Le résultat donnera ceci : WEB & EDITIONS (cliquez pour voir le résultat).

En observant ces deux exemples, on se rend compte qu’en utilisant les codes HTML, le webmaster donne des instructions aux navigateurs pour afficher les informations telles qu’il veut les faire comprendre à l’internaute. HTML permet ainsi de structurer sémantiquement la page Web.

Cependant, si ce langage (HTML) permet de rendre des pages Web complètes contenant des informations structurées, il ne suffit pas pour en faire un site Web, un blog professionnel coloré, de bel aspect. Chaque navigateur pourrait afficher les pages du site selon leurs propres critères, dans des tailles et des polices de caractère différentes… Il faut, de ce fait, leur associer un fichier de présentation pour que le rendu soit (presque) uniforme d’un navigateur à un autre, d’un ordinateur à un autre, etc. C’est là que le webmaster fait intervenir le CSS.

L’autre, le CSS donc, permet de définir la façon dont la page HTML à laquelle il est associé devra se présenter visuellement.

Le CSS va permettre de définir les types de police, les couleurs, les emplacements, les blocs, etc. Grâce à une bonne manipulation des feuilles de styles, le site Web ou le blog professionnel va prendre un aspect visuel plus fun ou plus pro.

Pour le webmaster qui utilise WordPress.org comme solution open source pour construire son site, il trouvera, généralement, dans l’éditeur du template, les feuilles de styles associées aux pages du site pour parfaire, à son goût, la présentation de son blog professionnel.

Comment façonner l’apparence d’un site/blog WordPress

Pour trouver les feuilles de styles dans WordPress, il faut se rendre dans le tableau d’administration du site. Dans le menu Apparence, choisir le sous-menu Éditeur. Généralement, en cliquant sur Éditeur, le fichier qui organise le CSS du site/blog WordPress s’ouvre par défaut. Si ce n’est pas le cas, il faut retrouver les feuilles de styles en bas et à droite du tableau d’administration de l’éditeur du thème. Il se présente comme un lien, en dessous d’une série de liens des fonctions du thème.

 

Feuille de styles de blog WordPress

Feuille de styles de blog WordPress

 

Parfois, certains thèmes ne permettent pas de les modifier directement dans le CSS de l’éditeur. Dans ce cas, un fichier vierge est affecté au CSS du site pour permettre au webmaster d’y inscrire ses propriétés CSS.

La difficulté dans ce dernier cas, c’est que le webmaster doit pouvoir déterminer la class (attribut html) de l’élément avant de lui affecter une valeur. Pour cela, rien de plus utile que l’outil Inspecter l’élément de Google Chrome ou Examiner l’élément de Mozilla Firefox.

A vous de jouer.

Antoine BLAGNON est graphiste et professionnel de la communication. Éditeur de ce blog, il vous propose de partager des trucs et astuces pour communiquer efficacement via le Blog.