Le webdesign
avec le CMS WordPress

WEBDESIGN[.WP3.0] Manipuler le design avec WordPress

Wordpress utilise par défaut ce qu'on appelle un "thème". Le thème est une sorte de parure que vont prendre vos contenus sur la partie Front-Office de votre site web. Il existe des milliers de thèmes dédiés à wordpress. Chaque année, WordPress édite un nouveau thème qui s'installe en même temps que le CMS. Un site wordpress nécéssite un thème pour s'afficher sans quoi la partie front-office n'existe pas.

Que fait un thème WordPress?

  • Il communique avec la base de données pour afficher des contenus
  • Il met en page les différents éléments de son site web
  • Il stylise tous les contenus avec une ou des feuilles des styles (.css)
  • Il propose parfois des outils backoffice pour ajouter des fonctionnalités qui n'existent pas par défaut
Un thème est écrit en langage PHP car il permet de récupérer des informations écrite en base de donnes (MySQL). Le langage PHP génère du code HTML qui permet d'afficher en front-office des contenus compréhensibles par les navigateurs web.

Le design d'un site wordpress

La partie front-office est donc un mélange entre les contenus écris en backoffice et le thème wordpress utlisé. Dès lors, si on veut manipuler l'apparence de son site web, on peut intervenir à plusieurs niveaux selon sa maîtrise des différents langages.

1

Première solution: on laisse le thème faire et on choisit le thème qui se rapproche le plus de l'apparence que l'on veut donner à son site web

2

On peut rajouter des outils (plugins) qui permettent de faire apparaître de nouveaux contenus qui ne sont pas proposés par défaut sous WordPress. Ainsi on enrichit son thème de nouvelles fonctionnalités.

3

En manipulant les fichiers PHP de WordPress lui-même on peut aller jusqu'à écrire soit-même sa ou ses propres feuilles de styles et styliser tout ou partie du thème. Cela demande des compétences supplémentaires notamment la maîtrise du langage CSS: Cascading Style Sheet et d'ajouter quelques fichiers écris en .php dans votre hébergement.
C'est ce que vous cherchez : Oui, je veux écrire moi-même mes styles .CSS

4

Enfin, si on écrit soit-même les fichiers PHP WordPress, on peut créer son propre thème. Ainsi il n'y a plus aucune limite.

Installer un thème WordPress

Pour installer un thème wordpres, rendez-vous dnas la section Apparence > Thèmes, puis cliquer sur Ajouter. Il existe des milliers de thèmes WordPress. Le choix pour vous va plutôt être esthétique d'abord et technique ensuite. Certians thème vont porposer beaucoup d'options, d'autres très peu. Il s'agit donc de se renseigner avant sur les capacités et compétences du thème. Le bouton Prévisualiser peut déjà aider à faire un choix.

Désinstaller un thème WordPress

Pour désinstaller un thème que vous n'utilisez pas, Rendez-vous dans le menu Apparence > Thèmes et cliquer sur le bouton Détail du thème qui apparaît lorsque vous survolez un thème installé. Une fenêtre surgissante vous décrit le thème. En bas à droite de la fenêtre, vous pouvez Supprimer ce thème. Notez que vous ne pouvez pas supprimer le thème actif. Il vous faudra d'abord activer un autre thème.

WEBDESIGN[.WP3.1] Personnaliser l'apparence de son site WordPress - Gutenberg

Comme nous venons de le voir, rien ne peut exister sans un thème wordpress. Cependant, l'écriture des contenus offre une grande souplesse de mise en page grâce à Gutenberg. Évidement, je ne parle pas de l'imprimeur du XVe siècle, mais du nom donné par Automattic à son éditeur de contenus.

La boîte à outils de Gutenberg

Gutenberg le bien nommé est l'éditeur de contenu qui remplace Classic Editor depuis 2020. Avant on pouvait remplir une zone de texte et ajouter une image mais la limite était atteinte. Il fallait manipuler le code en HTML pour mettre en page et styliser ses éléments. Aujourhd'hui, Gutenberg propose de multiples éléments pré-fabriqués pour mettre en forme textes / images et bien plus encore…

la boite à outil Gutenberg

Gutenberg propose de multiples outils d'ajout de contenus par défaut. Il suffit de cliquer sur le petit "+" noir et blanc dans le bloc de test et aussitôt on accède à un boîte qui propose quelques outils de base. On les apelle des blocs Gutenberg.

  • Les Paragraphes
  • Les titres
  • Les images
  • Une galerie
  • Une liste
  • Une citation
  • Tout parcourir

Le bouton "Tout parcourir" nous permet d'accéder à toutes les autres boîtes de contenus prévus par Gutenberg.

Le bloc colonnes

Parmi les blocs disponibles par défaut dans WordPress, on trouve un outil "Colonnes" qui a trop longtemps fait défaut à WordPress. Auparavant, les intégrateurs de contenus préfèraient carrément installer un Page-Builder, avec tout les défauts que cela engendraient (poids de chargement, manipulation parfois complexes), que d'écrire du contenus en HTML.C'est désormais oublié avec cet outil très performant qui montre dès le backofice, la mise en page des contenus sous forme de colonnes pré-éditées.

La mise en page utilise le mode Flexbox css pour fonctionner (display:flex en .css). C'est pourquoi on trouve par défaut également dans cet outil les réglages de position horizontales et verticales. On peut même donner une largeur à une colonne ne particulier en exprimée en "%", en "px", en "em", etc…

ouitl colonne de Gutenberg

Le bloc Groupe

Le bloc groupe est la seule solution pour rassembler les éléments de diverses natures au sein d'un élément commun.

outil colonne de Gutenberg

Le groupe permet aussi et surtout de prévoir une structure HTML sémantique correcte. Une structure bien faite permet aux navigateurs web de se repérer au sein de la page et lui donne des indications sur les contenus. Rappellez-vous que ce sont les moteurs de recherches qui en scrollant votre site font le référencement de votre site web !

Si aucune balise structurante n'est précisé, WordPress génère des balises "<div>" par défaut. Ces balises n'ont aucun sens, elles deviennent donc comme transparentes aux yeux des navigateurs. Vous perdez alors en strcuture et donc en référencement. C'est comme si vous écriviez un paragraphe qui n'aurait aucune ponctuation.

Lire plus d'information sur ce site de référence.

Une fois le bloc créé, il suffit de se rendre dans "Avancé" dans la colonne d'outils de BLOC à droite de la page. Ici on pourra y modifier / ajouter les éléments HTML suivants:

  • Élément HTML: le choix de la structure: div par défaut, section, aside, article…
  • Ancre HTML: à savoir l'ajout d'un ID (-entifiant)
  • Classe(s) CSS additionnelle(s)

WEBDESIGN[.WP3.2] Styliser son site WordPress avec Gutenberg

Lédition de contenus était très limité. L'arrivée de Gutenberg permet aujourd'hui de modifier son contenu directement dans le backoffice. Le design est prit en compte dès le backoffice. On va retoruver des outils qui manquaient terriblement au CMS comme le colonnage, les manipulation de HTML et la stylisationd de beaucoup d'éléments.

Modifier les largeurs avec Gutenberg

Gutenberg nous porpose également de modifier la largeur de nos contenus de manière très simple. On se retrouve avec 3 choix par défaut:

  • Aucun: le réglage par défaut
  • Grande largeur / alignwide: passe la largeur du contenu ciblé à 80vw centré dans la page
  • Pleine largeur / alignfull: passe la largeur du contenu ciblé à 100vw
réglage de la largeur avec gutenberg

Éditer le style grâce à Gutenberg

La boîte à outils de Gutenberg propose même d'enrichir les styles du thème sans aucune ligne de code. Et il ne s'arrête pas à la couleur de fond ou de texte, il va aussi proposer

réglages des styles avec gutenberg