Créer une page WordPress : le guide complet

Si vous lisez cet article, c’est que vous souhaitez vous lancer dans la création de votre nouveau site WordPress, ou alors le modifier.
Vous êtes au bon endroit ici nous allons vous montrer comment créer une page WordPress. Si vous souhaitez tout savoir sur la gestion des articles avec WordPress, nous avons également pensé à vous !

Comment ajouter une page dans WordPress ?

Avant de pouvoir créer une page dans son site WordPress, il faut s’y connecter (jusqu’ici, c’est évident, je vous l’avoue). Une fois connecté, vous pourrez vous rendre dans l’interface qui regroupe vos pages, les modifier, les supprimer ou en créer de nouvelles. Voyons donc comment se connecter à votre interface d’administration WordPress !

Se connecter à son site WordPress

Nous avons donc dit qu’avant toute chose, il faut se connecter à son site WordPress.
À la création de votre site WordPress, vous avez dû recevoir un mail de la part de WordPress. Celui-ci contient deux informations essentielles :

• votre identifiant,
• le lien de connexion à votre interface d’administration WordPress, ou autrement appelé “back office”.

Ce mail est à conserver précieusement.
Une fois le mail retrouvé, cliquez sur le lien de connexion à votre back office WordPress (le dernier lien contenu dans le mail).
Avec ce lien, connectez-vous avec vos identifiants de connexion, c’est-à-dire votre identifiant et votre mot de passe. Pas de panique, si vous ne vous souvenez plus de ce dernier, vous pouvez le réinitialiser directement depuis l’interface de connexion à votre back office WordPress. Pour cela, il vous suffit de cliquer sur “Mot de passe oublié ?”.

Afficher toutes ses pages WordPress

Une fois connecté, vous avez accès à tout votre site WordPress, les réglages, les pages, les articles, l’apparence, les extensions, etc.
Mais ce que nous voulons pour l’instant, c’est voir où sont toutes les pages de notre site WordPress.

Pour cela, regardez à gauche de votre écran. Une colonne latérale contient plusieurs entrées.

Dans ce menu, il faut survoler “Pages” puis cliquer sur “Toutes les pages”.

C’est depuis cette interface que vous pourrez modifier, trier, créer, supprimer les pages de votre site WordPress. Bref, c’est l’unique endroit pour procéder à la gestion intégrale de vos pages !

Configurer une nouvelle page

Si vous voulez créer une toute nouvelle page, cliquez sur le bouton “Ajouter” situé tout en haut de l’interface

La première chose qu’il faut ajouter à votre page, c’est le titre. C’est ce titre qui sera affiché dans le listing de vos pages et c’est ce titre que verront les internautes.

Aussi, tant que votre page n’est pas totalement terminée, vous ne souhaitez probablement pas qu’elle soit visible par vos utilisateurs. Vous ne voulez donc pas encore la publier, alors enregistrez-la en tant que brouillon. Vous aurez ainsi votre page enregistrée, vous pourrez la modifier à votre guise mais elle ne sera pas encore visible par les visiteurs de votre site tant que vous n’aurez pas cliqué sur le bouton “publier”.

Si vous voulez supprimer une page publiée, il faudra penser à la redirection. Pour faire dans la simplicité, vous pouvez ajouter l’extension nommée “Redirection” qui vous aidera à gérer vos redirections d’url si vous modifiez le nom d’une page ou si vous décidez d’en supprimer une.

Une fois votre titre ajouté et votre page enregistrée comme brouillon, vous pouvez intégrer le contenu de votre page (texte, images, boutons, etc) avec les blocs Gutenberg.

Comment utiliser les blocs Gutenberg dans une page WordPress ?

Les blocs Gutenberg sont les blocs intégrés à WordPress vous permettant d’ajouter du contenu comme un titre, du texte, des icônes, des sections, des colonnes, ou encore des boutons, des images, des vidéos et plein d’autres éléments. Vous pouvez placer ces blocs où vous le voulez et les personnaliser facilement pour l’ensemble de vos pages WordPress.
Le fonctionnement est simple et il n’y a aucunement besoin d’être un développeur ou de savoir écrire du code !
Et vous avez de la chance, on va tout vous expliquer dans cet article 

Commençons par les blocs les plus courants. Par exemple, les blocs “titre”, “image”, “paragraphe”, “citation”, “liste à puces”, etc. Il en existe 90 nativement inclus dans WordPress. Il est possible d’en ajouter davantage pour créer des pages répondant parfaitement à vos attentes (et celles de vos clients). Toutefois, les blocs dont vous disposez de base sur votre site WordPress vous permettent déjà d’accomplir beaucoup de choses !

On peut trouver tous les blocs Gutenberg que propose WordPress en cliquant sur la croix bleue située en haut à gauche de votre écran.

Pour ajouter des blocs à votre page, il existe différentes possibilités :

• vous pouvez les rechercher en passant par la croix bleue en haut à gauche de votre écran,
• vous pouvez ajouter des blocs en cliquant sur la petite croix noire au niveau de votre contenu, au centre de votre écran,
• vous pouvez aussi faire une recherche rapide à l’aide de votre clavier ! Il vous suffit de taper “/” puis les premières lettres de ce que vous recherchez. Si je veux un titre, je peux faire “/titre”. Le bloc adéquat me sera proposé.

Si vous souhaitez supprimer un bloc, il suffit de :

• cliquer dessus,
• cliquer ensuite sur les trois petits points au-dessus de votre bloc
• choisir “Retirer …” dans la liste de choix proposés.

Comme vous pouvez le voir, vous pouvez aussi dupliquer le bloc, le copier, le retirer, etc. Pratique pour créer rapidement une page !

L’emplacement de votre bloc ne vous convient plus ? Pas de problèmes !Vous pouvez déplacer votre bloc en réalisant un glisser-déposer vers un meilleur emplacement. Cliquez sur votre bloc, restez appuyé, relâchez à l’endroit désiré.

Également, quand on sélectionne du texte, il est possible de le mettre en gras, en italique, le souligner ou encore y ajouter un lien.  Ces fonctionnalités dites “de texte riche” sont très utiles pour mettre des éléments en exergue ou réaliser des liens entre vos pages en un clin d’œil !

Chaque bloc a ses propres réglages et paramètres de personnalisation. Vous pouvez choisir l’alignement de vos images, leur taille d’affichage, l’apparence de vos listes à puces, d’ajouter des colonnes par deux, trois, quatre et plus encore !

Vous voulez en savoir plus ? Alors voyons cela dans la suite de cet article !

Comment remplir la colonne “bloc” dans la création de page WordPress ?

Voyons ensemble ce que nous propose WordPress pour personnaliser les blocs Gutenberg.

Je vais prendre exemple sur les blocs les plus utilisés : titre, paragraphe, image, bouton.

Mais il ne faut pas s’arrêter que sur ces blocs-là. Je vous rappelle que WordPress propose, nativement, 90 blocs. Beaucoup sont très utiles ! Par exemple, le bloc “galerie” vous permettra d’intégrer un groupe de photos.

Il existe également des blocs vous permettant d’intégrer un tableau, une barre de recherche, un bloc d’icônes de réseaux sociaux, etc. Et tous ces blocs sont personnalisables, profitez-en ! Vous pourrez ainsi proposer des fonctionnalités intéressantes sur vos pages web, tout en assurant un style cohérent avec votre esprit de marque.

Réglages du bloc Titre

Tout d’abord, avant de regarder la colonne “Bloc” du titre, petite parenthèse sur un réglage très important : nous pouvons changer le niveau du titre (ce réglage se fait seulement dans l’espace éditeur, voir l’image ci-dessous).

Les niveaux de titre permettent de structurer le texte. Ils vont de H1, pour le niveau le plus important, à H6, pour le moins important.

C’est un peu comme sur Word ou Google Docs. Vous pouvez mettre en forme votre page en choisissant : Titre 1 (= H1), Titre 2 (= H2), Titre 3 (= H3).
Il faut correctement régler les titres car ils composent le squelette de votre page. Un squelette auquel il manque des os n’est pas optimal… Il en va de même pour vos pages web !

Dans la même logique, il ne faut pas non plus manquer de niveau de titre. En effet, les moteurs de recherche comme Google vont interpréter vos titres pour en comprendre le sens. Une hiérarchie erronée va grandement leur compliquer la tâche ! Cela se répercute sur votre référencement naturel. Mieux vaut donc vérifier ses titres à deux fois !

Les titres sont donc cruciaux pour les moteurs de recherche.
C’est pourquoi il faut bien optimiser vos titres et leur donner les bons niveaux.

Le titre principal de votre page est déjà de niveau H1 par défaut. Par ailleurs, sachez qu’il ne doit y avoir qu’un seul titre H1 dans une page (ou un article ou tout autre type de post) pas besoin de rajouter un titre de niveau H1, passez directement au niveau H2.

Revenons à notre colonne d’options du bloc.

• Nous pouvons d’abord changer la couleur du texte et la couleur de l’arrière-plan du texte.

• Ensuite nous avons des options sur la typographie du titre, avec la taille (en pixels) et l’apparence du texte : titre fin, normal ou gras

• Puis la casse : le titre complètement en majuscule, ou juste la première lettre des mots en majuscule ou encore aucune majuscule.
  On peut aussi laisser le titre tel quel. L’ajustement de la casse est complètement optionnelle.

• Dans l’onglet “Avancé”, qui sera une option présente sur tous les blocs, deux choses vous sont demandées. Là encore, ces réglages sont facultatifs.

• “Ancre HTML” permet de cibler un élément spécifique, qu’il soit sur la même page, ou non, pour créer un lien menant à cet élément.
  Par exemple, si je suis tout en bas de ma page, il peut être pratique de revenir directement au niveau du premier titre de ma page via un bouton.

Voici comment procéder pour mettre cela en place :

1. Ce premier titre est ma destination. C’est ici que je souhaite arriver après avoir cliqué sur mon bouton de retour en haut de page. Pour que mon ancre fonctionne, je dois lui donner une ancre HTML. Une ancre, en HTML (langage web), c’est un morceau de texte. Ici, pour fonctionner, notre ancre ne doit contenir ni espace, ni caractères spéciaux ou accents. Par exemple, “premierTitre” est une très bonne ancre.

2. En bas de la page doit se trouver mon bouton me permettant de retourner en haut de la page, au niveau de mon premier titre. Je dois donc ajouter un bloc “bouton” puis, dans les paramètres du lien, ajouter mon ancre. Dans le cas où mon ancre se situe sur la même page, je dois simplement ajouter le signe dièse “#” suivi de l’ancre définie un peu plus tôt. Dans notre cas, cela donnerait : #premierTitre.

Dans le cas où mon ancre ne se situe pas sur la même page, je dois tout d’abord ajouter le lien de la page vers laquelle je souhaite mener mon utilisateur puis à la fin de celle-ci, je peux ajouter mon ancre, sous le même format dièse + ancre.

• Les classes CSS additionnelles. Tout d’abord, CSS signifie “feuilles de style en cascade” (“Cascading Style Sheets” en anglais), c’est avec ce langage qu’on crée le style d’une page.
  Les classes CSS additionnelles servent si on utilise Bootstrap ou si on a créé son propre thème WordPress avec en l’occurrence ses propres feuilles de style. Bootstrap est une collection d’outils utiles à la création de designs qui aide beaucoup les développeurs pour mettre en forme plus efficacement un site web.

Réglages du bloc Paragraphe

Pour ce qui concerne le bloc paragraphe, les options de modifications possibles sont les mêmes que pour le titre sans l’option “apparence” et celle relative à la casse.

Réglages du bloc Image

• On peut choisir si les bordures de l’image sont pointues (par défaut) ou arrondies.

• Le texte alternatif est modifiable. Pour rappel, le texte alternatif permet de remplacer l’image si elle ne s’affiche pas sur certains navigateurs, ou encore permet aux utilisateurs malvoyants, par le biais de lecteur d’écran, d’avoir une description brève de l’image.

• Après le texte alternatif nous avons le choix de la taille de l’image.

• Puis nous avons la dimension de l’image.
  Pour préserver l’homothétie, c’est-à-dire les proportions de base de l’image, il est conseillé de privilégier les pourcentages plutôt que de modifier “largeur” et “hauteur” directement.

Réglages du bloc Bouton

• Pour le premier réglage du bouton, nous avons le choix d’un bouton avec ou sans bordures visibles. “Plein” affiche un bouton de couleur “pleine”, sans bordure. A l’inverse, “contour” affichera un bouton avec une bordure.
• Nous pouvons régler la largeur du bouton.
• Puis les réglages classiques : la couleur du texte, la couleur de l’arrière-plan, et la taille du texte.
• Et enfin, nous avons un autre réglage des bordures du bouton, en fonction de si l’on préfère que les angles de notre bouton soient droits, ou arrondis. Augmenter le rayon va arrondir les angles du bouton; le diminuer aura l’effet contraire.

Voilà les réglages possibles pour les blocs Gutenberg les plus utilisés. Comme vous avez pu le voir c’est assez intuitif et simple d’utilisation.

Comment remplir la colonne “page” dans la création de page WordPress ?

Après avoir réglé les blocs, voyons ce que nous avons comme réglages pour votre page.

Nous allons voir élément par élément.

• La visibilité indique si votre page est publique (visible pour tout le monde), privée (visible pour les administrateurs·ices et les éditeurs·trices) ou protégée par un mot de passe que vous aurez défini. Vous pouvez passer d’un état à un autre autant de fois que nécessaire. Ceci peut toutefois créer de la frustration pour vos utilisateurs, qui n’auront pas toujours accès à votre page. A réaliser donc avec parcimonie et précaution et si cela est justifié !

• Juste en dessous nous avons “Publier”, cette option vous laisse le choix de publier votre page à une certaine date ou non.

• Si votre page est sous forme de brouillon, vous pouvez voir juste en dessous de “Publier” une case à cocher “En attente de relecture” ce qui permet de signaler à vos collaborateurs·trices (si vous en avez) que votre page est en attente de relecture.

• Ensuite, nous avons l’auteur·trice, vous pouvez choisir qui est l’auteur·trice de la page que vous modifiez.

• Et bien sûr nous avons le bouton “Mettre à la corbeille” qui suit. Je ne pense pas avoir besoin de vous expliquer ce que signifie ce bouton ;). Cependant, n’oubliez pas que si vous supprimez une page il faudra ajouter une redirection pour assurer une bonne expérience utilisateur et ne pas perdre de référencement naturel.

• Si juste en dessous de ce bouton vous voyez “[nombre x] révisions”, sachez qu’il s’agit de l’historique des changements qui ont été faits sur cette page.

• Permalien : c’est le nom que votre page aura dans l’URL. Nous vous conseillons de choisir un slug composé du titre de la page, sans caractères spéciaux comme “&” dedans. Pour séparer vos différents mots, mieux vaut privilégier les tirets “-”.
  Ce réglage peut d’ailleurs être déterminé dans les réglages de WordPress en passant par le menu WordPress. Survoler “Réglages” puis cliquer sur “Permaliens” et choisir le réglage “titre de la publication”.

• L’image de mise en avant, suivant le thème de votre site WordPress, sera l’image principale de votre page. Elle peut s’afficher en bannière si cela est prévu par votre thème.

• L’onglet “commentaires” vous permet de choisir si vous autorisez les visiteurs de votre nouvelle page (si elle est publiée) à laisser des commentaires. Ces derniers seront affichés en bas de la page.

• “Attributs de page” vous demande si votre nouvelle page a une page parente ou pas. 
  Une page parente est une page de premier niveau, sous laquelle sont imbriquées des pages enfants. Par exemple, je crée une page parente que je nomme « Nos services de plomberie », sous laquelle je vais créer ses pages filles que je nommerais “Recherche de fuite”, “Dépannage”, “Création d’installations”, etc.

Blocs Gutenberg et responsive design

Évidemment n’oubliez pas le responsive (les réglages d’apparences en version tablette et mobile) de votre page et de leurs éléments.

Pour ce faire vous avez simplement à cliquer sur le bouton « prévisualiser » en haut à droite de votre écran et choisir la taille d’écran que vous souhaitez prévisualiser et modifier (ordinateur de bureau, tablette ou mobile). Faites ensuite vos réglages de la même manière que précédemment.
Sachez que les réglages mobile et tablette n’ont pas d’incidence sur les réglages de la version ordinateur.
Cependant, à l’inverse, si l’on ne donne pas de réglages aux versions mobile et tablette, leurs réglages par défaut seront ceux de la version ordinateur. Laisser comme cela rend les versions mobile et tablette très désagréables à visiter pour l’utilisateur. Notez qu’un utilisateur mécontent ne revient généralement pas sur un site qui n’offre pas une expérience utilisateur agréable !

Donc, pour satisfaire vos utilisateurs et leur offrir une expérience de navigation agréable, nous vous conseillons de régler les versions mobile et tablette au mieux.

Nous espérons que notre article vous aura aidé. Si vous ressentez que vous avez besoin d’approfondir vos connaissances WordPress, ou si vous faites face à une problématique spécifique, n’hésitez pas à nous contacter. Nous vous répondrons dans les meilleurs délais et planifierons, ensemble, une session de formation pour vous accompagner.
Nous vous souhaitons une bonne navigation !