Si vous souhaitez apprendre à utiliser WordPress et plus particulièrement comment créer un article WordPress, en supprimer ou simplement en modifier un, vous êtes au bon endroit.
Mais avant de se lancer, si c’est une page WordPress que vous souhaitez créer ou modifier, ce n’est pas dans cet article que vous trouverez votre bonheur mais plutôt dans notre article sous forme de guide complet, expliquant comment créer une page WordPress. En effet, il y a quelques différences entre les pages et les articles WordPress et la plus importante est qu’un article peut être classé par catégorie, contrairement à une page, les pages, elles, peuvent être hiérarchisées. Il existe d’autres différences bien évidemment, nous en avons fait un article dédié à la différence entre les articles et les pages sur WordPress.
Comment ajouter un article dans WordPress ?
En premier lieu, avant de pouvoir faire quoi que ce soit sur son site WordPress, il faut s’y connecter (jusqu’ici c’était évident je l’avoue). Une fois connecté, vous pourrez vous rendre directement sur l’interface qui regroupe tous vos articles WordPress, et ainsi créer de nouveaux articles, en modifier et en supprimer. Voyons donc comment se connecter à votre interface d’administration WordPress.
Se connecter à son site WordPress
Avant de créer un article dans son site WordPress, il faut s’y connecter (jusqu’ici rien de bien étonnant). A la seconde où vous êtes connecté, vous pourrez vous rendre dans l’interface qui regroupe vos articles. Dans cette interface, vos articles peuvent être modifiés, supprimés, ou au contraire être créés.
À l’initialisation de votre site WordPress, vous avez dû recevoir un mail de la part de ce dernier. Ce mail contient :
- votre identifiant
- le lien de connexion à votre interface d’administration WordPress, autrement nommé “Back Office” ou “BO”.
Ce mail est à conserver précieusement !
Une fois avoir trouvé ce mail, cliquez sur le dernier lien du mail, c’est votre lien de connexion à votre back office WordPress.
Connectez-vous avec vos identifiants de connexion, donc avec votre identifiant et votre mot de passe. Pas de panique, si vous ne vous souvenez plus de votre mot de passe vous pouvez le réinitialiser directement depuis l’interface de connexion à votre back office WordPress. Il vous suffira simplement de cliquer sur “Mot de passe oublié ?”
Comment afficher tous ses articles WordPress ?
Une fois connecté, vous avez accès à tout votre site WordPress avec les réglages, les pages, l’apparence, les articles, les extensions, etc. Mais pour l’instant, ce qui nous intéresse c’est où se situent tous vos articles WordPress.
Pour cela, vous avez à gauche de votre écran le menu principal WordPress listant tout ce à quoi vous avez accès.
Voici le menu latéral qui apparaît sur mon site WordPress. Si votre menu diffère légèrement du mien, c’est normal. Nous avons cependant tous l’entrée « Articles« .
Dans ce menu, il faut survoler “Articles” puis cliquer sur “Tous les articles”.
Et c’est uniquement depuis cette page que vous pourrez modifier, trier, créer, supprimer les articles de votre site WordPress.
Comment configurer un nouvel article dans WordPress ?
Si vous voulez créer un tout nouvel article, cliquez sur le bouton “Ajouter” tout en haut de l’interface.
La première chose qu’il faut ajouter à votre article, c’est le titre. C’est ce titre qui sera affiché dans le listing de vos articles et c’est aussi ce titre que verront les visiteurs de votre site.
Notez aussi, tant que votre article n’est pas encore terminé et que vous ne voulez pas encore le publier, enregistrez-le en tant que brouillon. Vous aurez votre article sauvegardé, vous pourrez le modifier à volonté, il ne sera pas visible par les internautes tant que vous n’avez pas cliqué sur le bouton “publier”.
Si vous voulez supprimer un article publié, il faudra penser à mettre en place une redirection. Pour faire simple, vous pouvez ajouter l’extension WordPress nommée “Redirection”, elle vous aidera à gérer vos redirections d’URL si vous modifiez le nom d’un article ou si vous décidez d’en supprimer un.
Une fois votre titre ajouté et votre article enregistré en brouillon, vous pouvez continuer avec l’intégration du contenu de votre article (titres, textes, images, boutons, etc) avec les blocs Gutenberg.
Comment utiliser les blocs Gutenberg dans un article WordPress ?
Les blocs Gutenberg sont les blocs intégrés à WordPress vous permettant d’ajouter du contenu comme une image, un texte, des sections, des colonnes, ou encore des vidéos, des titres, et plein d’autres éléments encore.
Et vous pouvez placer ces blocs où vous voulez dans votre article et les personnaliser très facilement.
Il existe 90 blocs natifs inclus dans WordPress. Les blocs Gutenberg les plus utilisés sont les blocs “titre”, “image”, “paragraphe”, “liste à puces”, “citation”, etc. Le choix de blocs est assez large pour créer des articles répondant à vos attentes et celles de vos clients. Vous pouvez bien évidemment en ajouter davantage si vous le souhaitez, par le biais de plugins. Cependant, les blocs dont vous disposez de base sur WordPress vous permettent déjà d’accomplir beaucoup de choses !
On peut trouver la liste de tous les blocs que propose WordPress en cliquant sur la croix bleue qui se situe en haut à gauche de votre écran.
Pour ajouter des blocs à votre article, il existe différentes possibilités, vous pouvez :
- rechercher les blocs en passant par la croix bleue en haut à gauche de votre écran
- ajouter des blocs en cliquant sur la petite croix noire au centre de votre écran, au niveau de votre contenu
- faire une recherche rapide à l’aide de votre clavier !
Pour cela, 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 vous suffit tout simplement 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. Très pratique pour créer ou modifier rapidement un article !
L’emplacement d’un des blocs ne vous convient plus ? Aucun problème !Vous pouvez déplacer votre bloc en réalisant un glisser-déposer vers un meilleur endroit où le placer. Cliquez sur votre bloc, restez appuyé et relâchez-le au nouvel endroit désiré.
Vous remarquerez aussi que, quand on sélectionne du texte, il est possible de le mettre en italique, en gras, le souligner, le barrer ou encore y poser un lien. Ces fonctionnalités dites “de texte riche” sont très utiles pour mettre des mots ou des phrases en valeur ou créer des liens entre vos pages, articles ou autre en un claquement de doigts !
Chaque bloc a ses propres personnalisations et réglages. Vous pouvez choisir qu’une image soit centrée ou non, choisir sa taille d’affichage, vous pouvez choisir l’apparence des puces de vos listes à puces, ajouter des colonnes par deux, trois, voire quatre !
Vous en saurez plus à propos des réglages des blocs dans les titres suivants 😉
Comment remplir la colonne “bloc” dans la création d’article WordPress ?
Voyons ensemble ce que nous propose WordPress pour personnaliser les blocs Gutenberg.
Je vais prendre exemple sur des blocs que l’on utilise souvent dans un article :
- le bloc “citation”
- le bloc “colonnes”
- le bloc “derniers articles”
- le bloc “image de mise en avant de la publication”
Mais il ne faut pas, encore une fois, s’arrêter que sur ces blocs-là. Je vous rappelle que WordPress propose, nativement, 90 blocs. Tous sont très utiles ! Il existe des blocs vous permettant d’intégrer un tableau, une barre de recherche, un bloc d’icônes de réseaux sociaux, une galerie pour vous permettre d’intégrer un groupe de photos, etc. Et tous ces blocs sont personnalisables, profitez-en ! Sur vos articles web, vous pourrez ainsi proposer des fonctionnalités intéressantes, et assurer un design cohérent.
Réglages du bloc Citation
Le bloc “Citation” permet, comme son nom l’indique d’ajouter une citation, ou de façon plus générale, il permet d’ajouter un texte avec juste en dessous un sous-texte.
- Pour commencer, le bloc “citation” propose différents styles.
Le style par défaut utilise les styles de votre thème pour les citations,
puis le style uni ou autrement appelé le style brut. Les styles de bloc peuvent être ajoutés ou modifiés par votre thème.
- Ensuite nous avons des options sur la couleur :
la couleur du texte puis la couleur de l’arrière-plan
- Vient en-dessous la typographie du texte :
la taille (en pixels) puis l’apparence du texte : titre fin, normal ou gras
- Dans l’onglet présent sur tous les blocs nommé “Avancé” il vous est demandé deux choses facultatives mais parfois bien utiles.
- “L’ancre HTML” permet de cibler un élément spécifique d’une page pour créer un lien menant à cet élément. Peu importe si l’élément ciblé est sur la même page ou non.
Prenons l’exemple :
Je suis arrivée tout en bas d’une page, et j’aimerais revenir au tout début de cette dernière. Je pourrais créer un bouton en fin de page qui me permettrait, au clic, de remonter au niveau du premier titre.
L’exemple cité ci-dessus a été expliqué et démontré en vidéo sur un autre article. Pour vous représenter une ancre HTML en situation réelle, j’ai créé une ancre menant directement à notre tutoriel vidéo pour créer une ancre HTML !
- Les classes CSS additionnelles.
Dans un premier temps, CSS signifie “feuilles de style en cascade” (“Cascading Style Sheets” en anglais), le style d’une page web est créé avec ce langage.
Si vous utilisez Bootstrap (librairie d’outils utiles à la création de designs) ou si vous avez créé votre propre thème WordPress avec ses propres feuilles de style, les classes CSS additionnelles peuvent très bien servir.
Comment créer des colonnes avec Gutenberg ?
Le bloc colonnes, comme son nom l’indique, permet de créer des colonnes dans lesquelles on y intègre du contenu. Le contenu peut être n’importe quoi : du texte, des titres, des images, des citations, toutes ces propositions à la fois, etc.
Et quand on sélectionne ce bloc, on nous propose d’abord de faire un choix.
Pour la troisième configuration, par exemple, la colonne de gauche prend 30% de largeur, tandis que celle de droite prend 70% de largeur par rapport à la largeur de la page.
D’ailleurs, prenons-là, cette troisième configuration (30/70).
Vides, les colonnes se présentent de la manière suivante :
Pour l’exemple, j’ai ajouté à la colonne de gauche une image, et à celle de droite un titre, un texte simple suivi d’une liste.
Quand des colonnes contiennent des éléments il est plus difficile de sélectionner les colonnes pour les modifier car la souris mettra en surbrillance les éléments contenus en priorité.
Mais WordPress est bien fait et un petit bouton est prévu à cet usage.
En cliquant sur l’image contenue dans la colonne de gauche, le fameux bouton apparaît accompagné d’autres paramètres. Et ce dernier, dans cet exemple, permet de sélectionner le conteneur de l’image, donc la colonne dans laquelle elle est. Cela fonctionne pour tout bloc étant contenu dans un conteneur (div, colonne, section, etc).
Pour en venir à l’onglet “Bloc” du bloc Gutenberg “colonne”, voyons ce qu’il nous propose.
On nous propose trois personnalisations :
- Le choix du nombre de colonnes peut aussi se faire via cette option. On peut donc supprimer ou rajouter des colonnes si on le souhaite.
- “Empiler sous mobile” est une option qui permet de faire en sorte qu’en version mobile, les colonnes se suivent verticalement au lieu de horizontalement comme sur la version ordinateur
- Enfin il reste les couleurs. Le choix de la couleur du texte et/ou de la couleur de l’arrière-plan.
Comment afficher les derniers articles avec Gutenberg ?
Voyons les options qu’il propose :
- “Réglage du contenu de la publication” permet d’afficher sous le titre des articles proposés.
Et bien sûr, juste en dessous, nous pouvons décider du nombre maximum de mots affichés.
- “Réglages des métas de la publication” donne le choix de l’affichage, ou non, du nom de l’auteur et/ou de la date de publication de l’article
- “Réglages de l’image de mise en avant” permet elle aussi d’afficher l’image de mise en avant de l’article proposé ou non
- Et enfin “Tri et filtrage” nous laisse choisir l’ordre d’affichage des articles, on peut aussi afficher des articles par catégories et/ou par auteur/trice
Et choisir le nombre d’articles à afficher.
Comment ajouter une image de mise en avant dans son article WordPress ?
L’image mise en avant choisie dans l’onglet “Article” de l’article s’affiche dans ce bloc car son rôle est d’afficher cette image.
Le réglage que l’on retrouvera sur le bloc (hors onglet “Bloc”) est tout simplement l’alignement horizontal de l’image.
L’onglet Bloc contient que très peu de paramètres :
- l’ajout d’un lien vers l’article sur l’image
- les dimensions de l’image en pixels
- quand on change les dimensions de l’image, un nouveau paramètre apparaît
- “Recouvrir” va recadrer et mettre à l’échelle l’image pour qu’elle puisse remplir l’espace sans être déformée
- “Contenir” va simplement mettre à l’échelle l’image sans la recadrer
- Et avec “Remplir” l’image sera étirée et déformée pour pouvoir entièrement remplir l’espace.
Comment effectuer les réglages d’un article WordPress ?
Avant de régler les blocs, voyons ce qu’il y a comme réglages pour l’article.
Voyons ça élément par élément :
- La visibilité vous indique si votre article est publique (visible pour tout le monde), privé (visible pour les administrateurs/trices et les éditeurs/trices) ou protégé par un mot de passe que vous aurez défini.
Passer d’un état à l’autre autant de fois que vous voulez est bien évidemment possible. Cependant, cela peut créer de la frustration pour vos utilisateurs, qui n’auront pas toujours accès à votre article. Il est donc préférable de réaliser cette manœuvre avec parcimonie et si cela est justifié ! - Juste en dessous nous avons “Publier”, cette option vous laisse le choix de publier votre article à une certaine date, ou par défaut dès que vous appuierez sur le bouton “publier”.
- Après “Publier”, nous avons deux cases à cocher. La première demande si vous voulez placer votre article en haut du blog, c’est-à-dire qu’il soit l’un des premiers articles présentés sur la page de présentation de vos articles.
- Pour ce qui concerne la seconde case à cocher, si votre article est sous forme de brouillon, la case à cocher “En attente de relecture” permet de signaler à vos collaborateurs/trices (si vous en avez, bien évidemment) que votre article est en attente.
- Ensuite, nous avons l’auteur/trice, vous pouvez choisir qui est l’auteur/trice de l’article sur laquelle vous êtes.
- Et bien sûr, l’option qui suit est le bouton “Mettre à la corbeille ». Je ne pense pas avoir besoin de vous expliquer ce que signifie ce bouton ;).
Cependant, si vous supprimez un article, n’oubliez pas les redirections pour assurer une bonne expérience utilisateur. - Si juste en dessous de ce bouton vous voyez “[nombre x] révisions”, c’est l’historique des modifications qui ont été faites sur cet article.
- Permalien : c’est le nom que votre article aura dans l’URL, par conséquent nous vous conseillons de choisir un slug seulement composé du titre de l’article, sans caractères spéciaux à l’intérieur comme “&”, maximum des tirets “-” ou “_”.
- 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”.
- Le choix de la catégorie. Si vous avez créé des catégories vous les verrez apparaître dans cet onglet, vous pourrez alors cocher la ou les catégories auxquelles votre article appartient. Il est bien sûr possible de ne rien cocher et de n’attribuer votre article à aucune catégorie.
- Le choix des étiquettes (“tags” en anglais). Contrairement aux catégories, les étiquettes sont des mots-clés qui permettent de regrouper beaucoup plus finement plusieurs articles. Avec cet onglet, vous pouvez rattacher un ou plusieurs mots-clés concernant votre article. Attention, le choix de mots-clé doit se faire soigneusement, n’écrivez un mot-clé que si vous êtes sûr d’avoir d’autres articles qui auront ce même mot-clé sinon l’utilité du mot-clé sera quasi-nulle.
- L’image de mise en avant, suivant le thème de votre site WordPress, sera l’image principale de votre article, celle qui s’affichera en bannière si votre article comporte une bannière.
Ce réglage est facultatif.
- L’onglet “extrait”. L’extrait est un bout de texte résumant le sujet de l’article.
Si l’extrait est vide, les 55 premiers mots de l’article seront automatiquement pris par WordPress pour être utilisés comme extrait.
Comme il est dit dans l’image ci-dessous, cet onglet est facultatif.
- L’onglet “commentaires” vous demande si vous autorisez les visiteurs de votre nouvel article (si il est publié) à laisser des commentaires. Ces derniers seront affichés en bas de l’article.
Article WordPress et Responsive Design
N’oubliez évidemment pas le responsive : les réglages d’apparences de la page et de ses éléments en version tablette et mobile.
Pour ce faire, cliquez simplement sur le bouton « prévisualiser » en haut à droite de votre écran et choisissez la taille d’écran que vous souhaitez prévisualiser et/ou modifier (ordinateur de bureau, tablette ou mobile).
Ensuite, vous pouvez faire vos réglages de la même manière que pour la version ordinateur.
Sachez que les réglages mobile et tablette n’ont pas d’incidence sur les réglages de la version ordinateur.
Attention, à 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 et laisser comme cela rendra les versions mobile et tablette très désagréables à visiter pour l’internaute. Notez qu’un utilisateur mécontent ne revient généralement pas sur un site désagréable à visiter !
Donc, pour satisfaire au maximum vos utilisateurs et leur offrir une expérience de navigation des plus agréable, nous vous conseillons de régler au mieux les versions mobile et tablette.
J’espère que notre article vous aura aidé. Si vous ressentez un quelconque besoin d’approfondir vos connaissances ou compétences 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, ensemble, nous planifierons une session de formation pour vous accompagner.
Nous vous souhaitons une bonne navigation !
