Créer un site web responsive avec WordPress et Zerif Lite

Cet article décrit la création d’un site web professionnel basé sur WordPress et le thème Zerif Lite, un thème adaptatif extrêmement populaire. L’avantage d’un tel thème adaptatif (responsive design), c’est qu’il s’affiche correctement sur tous les types de supports : moniteurs d’ordinateur, smartphones, tablettes, etc. Sans oublier le fait que depuis quelque temps, les sites qui ne se conforment pas à ces exigences sont pénalisés par Google.

• Installation de Zerif Lite
• Configurer Zerif Lite
• Identité du site
• Options générales
• Peaufiner le pied de page
• Section de gros titre et image d’arrière-plan
• La section Objectifs
• La section À propos
• La section Témoignages
• La section Nouveautés
• Améliorer l’aspect des pages
• Configurer le menu de navigation
• Remerciements

Installation de Zerif Lite

Au moment de la rédaction de ces lignes, Zerif Lite est banni du catalogue officiel des thèmes WordPress pour une histoire de non-conformité du code. En attendant que les développeurs règlent leurs embrouilles, nous allons télécharger Zerif Lite sur le site ThemeIsle. Le fichier zerif-lite.zip pèse près de 3 Mo.

Avant d’installer le thème, il faudra éventuellement vérifier la valeur de la variable upload_max_filesize dans php.ini. Dans la configuration par défaut de Slackware, les fichiers en upload ne peuvent pas dépasser 2 Mo.

; php.ini
...
; Maximum allowed size for uploaded files.
; http://php.net/upload-max-filesize
upload_max_filesize = 4M

Installer le thème : Apparence > Thèmes > Ajouter > Mettre un thème en ligne > Parcourir > Sélectionner > Installer.

L’activation du thème nécessite l’installation du plug-in Pirate Forms. Cliquer sur Commencer l’installation de l’extension, puis installer et activer le plug-in en question.

Éventuellement, on peut supprimer la panoplie de thèmes installés par défaut en cliquant à chaque fois sur Détails du thème > Supprimer.

Voilà comment se présente la page des Thèmes de notre installation.

Configurer Zerif Lite

La configuration de Zerif Lite passe principalement par l’outil de personnalisation accessible via Apparence > Personnaliser. Alternativement, on peut utiliser le bouton Personnalisez votre site sur la page d’accueil du Tableau de bord. Quand on débute avec ce genre de thème professionnel, on peut facilement éprouver la nausée devant l’abondance des options et se sentir intimidé par le côté “usine à gaz” de l’interface de configuration. Pour ma part, j’ai passé pas moins de trois jours à faire le tour des fonctionnalités et du potentiel de peaufinage de ce thème.

Je ne vais mentionner ici que les points qui me semblent importants. Si vous souhaitez en savoir (beaucoup) plus, allez jeter un oeil sur la documentation officielle du thème.

Le principe d’un site responsive professionnel, c’est que les infos principales de votre entreprise sont toutes concentrées sur une page d’accueil unique subdivisée en une série de sections (Objectifs, À propos, Notre Équipe, Témoignages, Contact, News) accessibles via des ancres prédéfinies (#focus, #aboutus, #team, #testimonials, #contact, #latestnews). Cette page unique fera office de “vitrine” pour un site qui, par ailleurs, pourra être organisé comme n’importe quel CMS, avec des articles de blog, des pages statiques organisées de manière hiérarchique, etc.

Identité du site

Le thème Zerif Lite est livré avec du contenu “bidon” que l’on va remplacer progressivement avec notre contenu à nous. Ouvrir Apparence > Personnaliser > Identité du site et définir le titre, par exemple…

• Titre du site : Microlinux
• Slogan : Solutions informatiques durables

Le logo par défaut a une taille de 109×32 pixels. J’adapte le logo existant de mon entreprise en le découpant et en le redimensionnant, et il s’insère très bien malgré une taille plus importante de 268×32 pixels. Au moment d’insérer le logo – et plus généralement les images dans mon site – je veille à bien renseigner les champs Titre et Texte Alternatif pour bien référencer les images.

L’icône du site doit avoir une taille de 512×512 pixels. Étant donné que mon logo est rectangulaire et pas carré, je modifie l’image avec GIMP en augmentant la taille du canevas afin qu’elle soit parfaitement carrée.

Options générales

Dans les Options Générales > Général, je désactive le défilement doux (smooth scrolling), qui semble poser des problèmes avec certains navigateurs. J’indique également les mentions légales du site.

Dans les Icônes sociaux du pied, j’indique le lien vers les comptes Facebook et Twitter de l’entreprise. À partir du moment où un champ est vide, le lien correspondant ne s’affiche pas.

Enfin, le champ Contenu du pied me permet de renseigner l’adresse, le mail et le téléphone de l’entreprise.

Peaufiner le pied de page

La version gratuite du thème Zerif Lite arbore la mention Zerif Lite Fièrement propulsé par WordPress dans le pied de page juste en-dessous des mentions légales du site. La version professionnelle payante du thème permet de supprimer cette mention. Ou alors on a recours à une astuce de CSS.

Le plug-in Web Developer pour Firefox contient un Inspecteur, qui permet entre autres choses d’identifier les différents éléments CSS d’une page. Ouvrir l’Inspecteur via Outils > Développement web > Inspecteur, afficher la page et cliquer sur l’élément que l’on souhaite identifier. La colonne de droite de l’inspecteur affiche le code CSS de l’élément en question.

Dans le cas présent, c’est la classe CSS zerif-copyright-box qu’il faut modifier. Ouvrir la section CSS additionnel dans l’outil de personnalisation et ajouter le code CSS suivant :

.zerif-copyright-box {
  display: none;
}

Voici comment se présente le pied de page après modification.

Section de gros titre et image d’arrière-plan

La section Gros titre contient le titre principal du site – celui qui s’affiche au milieu de la page – ainsi que deux boutons d’action, un rouge et un vert. Pour mon entreprise, ce sera quelque chose comme ceci.

• Titre : Solutions informatiques durables
• Bouton rouge : Nos prestations
• Bouton vert : Pourquoi Linux ?

Dans la configuration par défaut, le titre s’affiche en majuscules. Je souhaite l’afficher en caractères normaux, je lance donc l’Inspecteur de Firefox, et j’identifie la classe CSS intro-text. Je modifie le CSS comme ceci.

.intro-text {
  text-transform: none;
}

Le bouton rouge Nos prestations est censé renvoyer vers la section Objectifs, grâce à l’ancre #focus. Quant au bouton vert Pourquoi Linux, je vais faire un léger abus de la section À propos et utiliser sa présentation à d’autres fins. Le lien ira donc vers l’ancre #aboutus.

Pour l’image de fond (Apparence > Personnaliser > Image d’arrière-plan) je choisis une image généreusement dimensionnée de 4288×2730 pixels, et qui s’insère bien dans le thème général. Là aussi, je n’oublie pas de fournir un titre et un texte alternatif. Dans les pré-réglages de l’image, j’opte pour Remplir l’écran.

Notons enfin que l’Effet Parallax relève plutôt de la catégorie farces et attrapes. Il est désactivé dans la configuration par défaut, et nous n’allons pas y toucher.

La section Objectifs

Une vue d’ensemble sur les prestations de l’entreprise sera présentée dans la section Notre objectif. Dans la configuration par défaut, cette section comporte un titre et un sous-titre ainsi que quatre widgets prédéfinis. On va adapter tout cela à nos besoins.

• Titre : Nos prestations
• Sous-titre : Tout ce que Microlinux peut faire pour vous

Comme dans la section Gros titre, le titre de cette section est transformé en majuscules. Pour obtenir une typographie normale, il faut ajouter une stance au code CSS.

.section-header h2 {
  text-transform: none;
}

Chaque widget est composé d’un titre, d’un texte bref, d’un lien et d’une image. L’idéal, c’est d’utiliser des icônes d’une taille de 96×96 pixels pour illustrer les widgets. Les liens respectifs pointeront vers une série de pages statiques que nous devrons encore rédiger.

La section À propos

J’utiliserai cette section de manière un peu abusive, pour présenter non pas ma personne, mais les avantages de Linux, le système d’exploitation déployé par mon entreprise. Étant donné que la question revient très souvent, j’ai décidé de la mettre en lumière ici. D’une part, la section À propos est subdivisé en quatre zones de texte.

• Titre
• Sous-titre
• Gros titre à gauche
• Texte

D’autre part, la zone permet de définir des fonctionnalités. Chacune de ces fonctionnalités comporte un titre et une zone de texte, ainsi qu’un champ Pourcentage qui est censé renseigner le visiteur sur le degré de maîtrise de telle ou telle compétence. Il suffit de supprimer le contenu de ce champ (ou de définir une valeur nulle) pour que celui-ci ne s’affiche plus sur le site.

La section Témoignages

Comme son nom l’indique, cette section permet d’afficher des témoignages de clients satisfaits. La section comporte un titre et un sous-titre ainsi qu’une série de widgets personnalisables. On pourra faire l’économie du lien vers l’auteur et de l’image en guise d’avatar pour ne renseigner que les seuls champs Auteur, Détails de l’auteur et Texte. Un détail plaisant, c’est que le nom d’auteur apparaît en écriture “manuscrite” sur le site.

La section Nouveautés

Pas grand-chose à paramétrer dans cette section, hormis le titre et le sous-titre, étant donné qu’elle est censée renvoyer vers les pages de blog (c’est-à-dire les articles) du site. La configuration s’effectuera au niveau des articles.

Une fois qu’on a alimenté le blog d’une série d’articles, voilà comment ça se présente au niveau de la section Nouveautés. Cette présentation peut être considérablement améliorée.

Chaque article offre la possibilité de définir une image à la une. C’est elle qui s’affichera dans la section Nouveautés. Là encore, l’idéal est de trouver une icône d’une taille de 96×96 pixels. Ce n’est pas grave si les dimensions ne correspondent pas tout à fait, on a un peu de marge.

D’autre part, l’extrait de texte affiché par défaut peut être personnalisé. Afficher l’interface de modification des articles, déplier le menu Options de l’écran en haut à droite  et cocher la case Extrait. Dorénavant, un nouveau champ sous l’article permet de définir un extrait personnalisé, qui s’affichera sur la page des Nouveautés.

Améliorer l’aspect des pages

L’aspect des pages et des articles peut être amélioré avec un petit coup de CSS. Dans la configuration par défaut, la police par défaut est un petit peu trop petite, et l’espace entre les paragraphes est trop important, alors que les lignes sont plutôt serrées. Pour arranger ça, on va ajouter la stance CSS suivante.

.site-main p, li, a, em, strong {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 130%;
}

Le champ Commentaires des articles n’est pas très joli à voir. Il peut être amélioré grâce à l’extension Jetpack. Cette extension offre une multitude de fonctionnalités, mais pour l’instant, on n’utilisera que la seule personnalisation de la zone de commentaires. Installer et activer cette extension, en établissant la connexion à un compte WordPress (offre gratuite), et sans activer les fonctionnalités recommandées. Ensuite, activer les commentaires personnalisés via Tableau de bord > Jetpack > Réglages > Engagement > Commentaires.

La barre latérale des pages et des articles est assez chargée dans la configuration. Elle contient un champ de recherche, une liste d’articles et de commentaires récents, une série de liens vers les archives, la liste des catégories, et autres choses encore. On va opter pour une configuration épurée et garder le seul champ de recherche, en supprimant tout le reste.

Ouvrez Tableau de bord > Apparence > Widgets et repérez le widget Colonne latérale. Supprimez les widgets Articles récents, Commentaires récents, Archives, Catégories et Méta en les faisant glisser vers le côté gauche de l’interface. Nous ne conserverons que le seul widget Rechercher.

Configurer le menu de navigation

Dans la configuration par défaut, le menu de navigation en haut à droite de l’écran ne comporte qu’une seule entrée qui pointe vers la page d’exemple. La personnalisation du menu passe par Apparence > Menus.

Choisir un nom pour le menu personnalisé (par exemple Microlinux ou tout simplement Menu) et cliquer sur Créer le menu. Supprimer les widgets Accueil et Page d’exemple en les dépliant successivement et en cliquant sur Retirer. Dans la colonne de gauche, l’option Liens personnalisés nous servira à créer les entrées de menu. Saisir l’URL et le texte du lien et cliquer sur Ajouter au menu.

Une fois qu’on a créé le menu personnalisé, ouvrir l’onglet Gérer les emplacements et sélectionner Menu principal > Microlinux.

La taille par défaut de la police est peut-être un peu trop grande. Pour la réduire un peu, il faut d’abord repérer l’identificateur CSS du menu, en l’occurrence menu-microlinux. Puis, on pourra personnaliser la feuille de style comme ceci.

#menu-microlinux a {
  font-size: 17 px;
}

Remerciements

Merci à Mathieu Gérard pour son précieux coup de main avec les CSS.