Comment utiliser l'éditeur WordPress

WordPress en tant que CMS possède un ensemble de fonctionnalités incroyablement robuste. Les plugins et les widgets attirent les gens vers la plate-forme, mais une fois à l'intérieur, le vrai pouvoir vient de l'éditeur WordPress lui-même. Quel que soit votre objectif avec la plate-forme, vous utiliserez l'éditeur de publication/page dans une capacité majeure. Nous voulons donc vous montrer comment utiliser au maximum l'éditeur WordPress pour que votre contenu brille et que votre site s'épanouisse.

Abonnez-vous à notre chaîne Youtube

Qu'est-ce que l'éditeur WordPress ?

Techniquement, vous pouvez choisir parmi trois éditeurs WordPress. Avec la sortie de WordPress 5.0, l'éditeur est passé de TinyMCE par défaut à l'éditeur de blocs que nous avons aujourd'hui. Au milieu de ce changement, le plugin de l'éditeur Gutenberg a été publié en tant que pont pour tester en version bêta de nouvelles fonctionnalités pour l'éditeur de blocs avant de l'intégrer dans WordPress Core.

Bien que l'éditeur de blocs soit par défaut dans WP à partir de la version 5.0, vous pouvez choisir d'utiliser l'un des trois que vous souhaitez. Vous pouvez installer le plugin Classic Editor pour conserver l'ancien TinyMCE, le plugin Gutenberg pour conserver les fonctionnalités les plus récentes (bien que potentiellement instables) dans votre éditeur, ou vous pouvez conserver l'éditeur de blocs par défaut.

Compte tenu des étapes supplémentaires impliquées dans l'utilisation de tout sauf de l'éditeur par défaut (et de l'instabilité inhérente et de la nature changeante du plugin Gutenberg), nous allons nous concentrer uniquement sur l'éditeur de blocs par défaut dans cet article. Cependant, vous devez noter que les principes fondamentaux sont les mêmes avec Gutenberg, et le TinyMCE contenu dans le plugin Classic Editor a la parité des fonctionnalités de base avec n'importe quel éditeur de texte riche ou logiciel de traitement de texte - sans parler des fonctionnalités spécifiques à WP dont nous discutons. plus, ne différant généralement que par l'esthétique, pas par la fonction.

Cela dit, apprenons à utiliser l'éditeur WordPress.

Les bases de l'éditeur WordPress

Chaque fois que vous créez une page ou une publication (ou un type de publication personnalisé), vous utiliserez l'éditeur de blocs. Un tutoriel modal vous est présenté pour l'ouvrir et vous pouvez apprendre les bases en le suivant à travers les 4 diapositives qu'il propose. Fermez-le et vous pouvez voir l'éditeur de base.

L'éditeur de blocs WordPress de base se compose de 5 éléments. Plusieurs plugins peuvent être ajoutés, mais ceux-ci fournissent la fonctionnalité de base avec laquelle vous travaillerez jour après jour.

1. Bloc de titre – Tout ce que vous entrez ici sera affiché en tant que balise H1 principale de la publication/page.
2. Zone de bloc/contenu – C'est la zone dans laquelle vous ajouterez les différents blocs qui composent le contenu de votre article ou page.
3. Bouton Ajouter un bloc – Chaque fois que vous voyez un + dans un cercle, vous pouvez cliquer dessus pour ajouter un nouveau bloc. Une liste déroulante apparaîtra, à partir de laquelle vous choisissez le type que vous souhaitez insérer. Ils fonctionnent tous exactement de la même manière, donc que vous cliquiez sur un à droite d'un bloc, sous un bloc ou dans le coin de l'écran, vous obtenez les mêmes options.
4. Onglet Options du document - Sous cet onglet, vous trouverez tout, des catégories, des balises, des liens permanents, des commentaires activés/désactivés, etc. Les plugins peuvent ajouter des options ici, mais ils s'appliquent toujours à la page globale ou à la publication elle-même.
5. Onglet Options de bloc – Cet onglet gère les options du bloc que vous mettez en surbrillance. Si vous cliquez dans un bloc de paragraphe, vous modifiez les options de ce bloc uniquement . Aucun autre bloc, ni le document lui-même ne changent.

Ci-dessous, nous vous expliquerons les spécificités de ces domaines et comment vous pouvez les utiliser pour créer le meilleur contenu possible.

Que sont les blocs ?

Vous nous avez déjà vu mentionner les blocs dans cet article, mais quels sont-ils au juste ? Un bloc est un élément unique et personnalisable d'une page ou d'un article. Il peut s'agir d'un seul paragraphe, d'une liste, d'une image ou d'une galerie. Ces blocs peuvent être déplacés et ajustés à votre guise, personnalisés individuellement et vous donnent un contrôle granulaire sur votre contenu d'une manière qu'un éditeur WYSIWYG ne peut tout simplement pas. (Si vous êtes un utilisateur de Divi, vous connaissez déjà le concept car nos Modules fonctionnent de la même manière.)

Comme vous pouvez le voir ci-dessus, chaque élément de la page est contenu dans son propre bloc. Vous pouvez voir une liste complète des blocs WordPress dans la documentation de support WordPress.

Comment créer un groupe de blocs

Un groupe de blocs est un ensemble de blocs que vous définissez pour fonctionner comme un seul bloc. Vous les déplacez et les stylisez comme s'il s'agissait d'une seule unité, mais le groupe est composé de plusieurs éléments.

Créer un groupe est facile. Vous cliquez simplement sur un bloc, puis maintenez la touche Maj ou CTRL enfoncée et cliquez sur un autre. Si vous souhaitez regrouper tous les blocs de la publication, vous pouvez appuyer sur CTRL/CMD – A pour tout sélectionner. Ensuite, lorsque vous voyez l'icône en haut à gauche se transformer en un carré composé de petits blocs, vous pouvez cliquer dessus et sélectionner Transformer en groupe .

Si vous devez les dissocier, cliquez simplement sur le bouton déroulant à trois points et sélectionnez Dissocier.

Les blocs fonctionneront à nouveau en tant qu'individus.

Que sont les blocs réutilisables ?

Vous pouvez transformer n'importe quel bloc d'un bloc unique en un bloc réutilisable à partir du menu des paramètres. Un bloc réutilisable n'est pas un modèle, mais plutôt un bloc global pour votre site. Vous créez un bloc ou un groupe de blocs, puis vous cliquez sur Ajouter aux blocs réutilisables .

Toutes les modifications ou modifications apportées à ce bloc réutilisable sont ensuite répercutées sur l'ensemble du site, modifiant chaque instance du bloc au lieu de celle que vous avez modifiée. Nous avons un guide complet des blocs réutilisables que vous pouvez consulter pour plus d'informations sur le sujet.

Le bloc de titre

Le bloc de titre comme indiqué ci-dessus est la balise H1 principale de votre article ou page. Il générera également le slug de permalink pour la publication, mais cela pourra être modifié une fois que vous aurez enregistré la publication au moins une fois. Ce sera également ce que les sélecteurs CSS tels que .post-title et .entry-title extraient . (Cependant, vos plugins SEO vous permettent de définir ce qui s'affiche dans les moteurs de recherche.)

C'est le seul bloc de l'éditeur WordPress que vous ne pouvez pas supprimer ou repositionner. Vous devez utiliser CSS ou les paramètres de création de pages externes pour ajuster davantage.

Zone de bloc/contenu

Fondamentalement, vous pouvez considérer la zone de contenu comme l'endroit où vous tapez. Si vous le souhaitez, vous pouvez commencer à taper, écrire un article entier sans même jamais considérer les blocs. À tous les égards, cela remplace la simple zone WYSIWYG du TinyMCE et constitue le plus grand changement apporté à l'éditeur WordPress depuis… eh bien… jamais.

Cependant, avec l'éditeur de blocs, vous pouvez faire bien plus que cela. Chaque fois que vous appuyez sur « entrée » ou « retour », vous ajouterez un nouveau bloc de paragraphe. Pour ajouter un autre type de bloc (de n'importe quel type), cliquez sur le + dans un cercle et vous obtiendrez une liste déroulante de chaque bloc disponible. Assurez-vous de faire défiler car ils sont également configurés dans différentes catégories. Vous pouvez également rechercher un bloc spécifique si vous savez quel type vous voulez.

Vous pouvez ajouter des blocs vidéo YouTube, des images, des galeries, des lecteurs audio, des listes, des citations et bien plus encore. Chacun d'eux a ses propres paramètres et options de style. De plus, plus vous utilisez un bloc, l'éditeur WordPress le reconnaîtra comme un bloc couramment utilisé et le répertoriera sous Les plus utilisés afin que vous n'ayez plus à le faire défiler ou à le rechercher. Les blocs réutilisables et les groupes de blocs peuvent également apparaître sous Les plus utilisés.

Si vous regardez les images de cette section, le (1) pointe vers les boutons de réorganisation que vous obtenez pour chaque bloc lorsqu'il est sélectionné (cliquez simplement dessus pour sélectionner). Le (2) pointe vers la liste déroulante qui vous permet de supprimer le bloc ainsi que de modifier son contenu au format HTML, de le cloner ou d'ajouter de nouveaux blocs autour de lui.

Ces options et paramètres, cependant, sont différents de l' onglet Options de blocage dans le coin supérieur droit de l'écran que nous avons mentionné ci-dessus et discuté dans la section suivante ci-dessous.

Plan du document, nombre de mots et autres informations

Dans la barre d'outils supérieure de la page, vous avez un i dans un cercle. Cliquez dessus et vous obtenez un aperçu complet de la composition de votre document.

Tant que vous avez utilisé des blocs d'en-tête, vous verrez apparaître un plan de document en plus du nombre de mots, du numéro de paragraphe et du nombre de blocs. Si vous n'avez pas de blocs de titre, cette section ne sera pas là. Vous pouvez cliquer sur l'un des éléments du plan du document pour accéder directement à ce bloc. Cette fonctionnalité est inestimable dans les documents plus longs.

Si vous cliquez sur l'icône de liste imbriquée à côté de celle-ci, vous voyez également une liste ordonnée de tous les blocs de la publication, plutôt que uniquement les en-têtes d'un plan.

Encore une fois, vous pouvez cliquer sur n'importe quoi dans la liste pour accéder directement à ce bloc et le sélectionner.

Onglet Options de bloc

Dans le coin supérieur droit de l'éditeur WordPress, vous verrez un onglet qui dit Bloquer . Tant que vous avez sélectionné un bloc, vous obtiendrez un ensemble contextuel d'options pour ce type de bloc. Cependant, toutes les modifications que vous apportez n'affecteront que le seul bloc que vous avez sélectionné.

Vous pouvez modifier la taille de la vignette d'une image dans cet onglet, ajouter un arrière-plan de couleur à un paragraphe pour créer une alerte ou ajuster la taille de la police dans un titre, par exemple. Si vous avez ouvert l'onglet Bloc , les options changent pour le bloc spécifique que vous sélectionnez. Si vous avez mis le bloc de paragraphe en surbrillance, vous le verrez.

La sélection d'un bloc d'image changera l'onglet Bloc en celui-ci.

Chaque bloc aura des options spécifiques que vous pouvez ajuster en son sein et qui ne s'appliquent qu'à ce type de bloc (et ne seront rendues que dans ce bloc spécifique). Chaque bloc, cependant, a une section Avancé dans l'onglet qui vous permet d'appliquer des classes CSS à ce bloc. Vous pouvez ensuite les styliser comme bon vous semble en utilisant des feuilles de style et du code externes.

Onglet Options du document

À gauche de l'onglet Options de bloc se trouve l' onglet Options de document . Si vous avez utilisé WordPress dans le passé, ceux-ci vous seront familiers. Ici, vous pourrez ajuster les catégories de votre article, les balises, ajouter une image en vedette, ajuster le slug du permalien, ajouter un extrait pour l'utilisation du thème/SEO et activer ou désactiver les commentaires.

Chacune de ces sections est à peu près identique à l'endroit et à ce qu'elles étaient dans l'éditeur TinyMCE WYSIWYG. Ils s'appliquent à l'ensemble de la publication ou de la page et non à un seul bloc ou à l'ensemble du site. De plus, comme vous pouvez le voir dans l'image ci-dessus, il y a une boîte d'options WP Rocket. Certains plugins appliqueront des cases à cette zone, mais elles se rapporteront toujours directement au document lui-même, pas tellement au contenu ou aux blocs.

Boîtes de méta-poste supplémentaires

Les métaboîtes pour la publication sont l'endroit où les plugins ajouteront de nouvelles options et capacités pour le contenu lui-même. Ils apparaissent à la toute fin de la zone de contenu, sous les blocs.

Ce qui apparaît dans cette section (le cas échéant) dépendra des plugins que vous avez installés (ou de toute fonctionnalité de thème pouvant utiliser la zone). Les plugins SEO profitent beaucoup de ce domaine, et de tout ce qui vous permettra d'interagir d'une manière ou d'une autre avec le contenu de la page, plutôt que les détails du document.

Liste déroulante des options de l'éditeur WordPress

Si vous cliquez sur l'icône déroulante à trois points en haut à droite de l'écran, une grande liste déroulante verticale apparaîtra. Vous pouvez ajuster un certain nombre de paramètres ici, qui s'appliquent tous à l'éditeur lui-même, plutôt qu'au document, aux blocs ou au contenu.

Pour la plupart, ce sont des options assez simples, telles que la gestion de vos blocs réutilisables ou la fourniture d'une liste de raccourcis clavier ou la réouverture du guide de bienvenue que nous avons mentionné au début.

Cependant, certaines des options les plus fréquemment utilisées se situent tout en haut. Plus précisément, les bascules pour la barre d'outils supérieure , le mode plein écran et les modes visuel/éditeur de code .

La bascule de la barre d'outils supérieure signifie que plutôt que les options d'un bloc sélectionné apparaissant sous la forme d'un menu contextuel près du coin supérieur gauche du bloc, comme nous l'avons mentionné ci-dessus, ce sera dans une zone fixe en haut de l'écran.

Le mode plein écran active ou désactive le tableau de bord d'administration WordPress. Si vous désactivez le mode plein écran, vous verrez la barre latérale de gauche qui comprend les options de tableau de bord typiques telles que les publications, les pages, l'apparence, les paramètres, les outils, etc.

Et les bascules Visual/Code Editor fonctionnent exactement comme dans l'éditeur TinyMCE. Les exemples de cet article ont été jusqu'à présent avec l'éditeur visuel. C'est-à-dire que vous voyez une représentation visuelle du message au fur et à mesure que vous l'écrivez. Vous obtenez des boutons à appuyer, des menus contextuels et un rendu en temps réel des paramètres lorsque vous les modifiez. Cependant, l'éditeur de code n'est que cela : du code. Vous aurez une simple zone de texte dans laquelle vous écrirez en texte brut et en HTML.

Cela est généralement fait pour résoudre les problèmes avec l'éditeur ou pour affiner une seule zone ou un seul bloc. Ou peut-être pour coller du contenu écrit dans un éditeur externe qui ne formaterait pas correctement sur plusieurs blocs.

L'éditeur de blocs utilise des balises HTML spécifiques pour indiquer à WordPress le type de blocs à afficher, alors assurez-vous de conserver intact tout code qui ressemble à <!– wp:paragraph –> . Sinon, les choses peuvent devenir assez compliquées.

Raccourcis globaux de l'éditeur de blocs WordPress

L'éditeur de blocs est également livré avec son propre ensemble de raccourcis astucieux. Ils ne sont pas tous les mêmes que le TinyMCE, mais ils sont tout aussi utiles et tout aussi importants à apprendre. Mémoriser les plus utiles vous fera économiser beaucoup de temps et d'ennuis, en parlant d'expérience. Vous pouvez appuyer sur Shift+Alt+H pour afficher la liste de raccourcis suivante dans l'éditeur WordPress lui-même.

Raccourcis de documents

• Basculer entre l'éditeur visuel et l'éditeur de code – Ctrl+Maj+Alt+M
• Ouvrir le menu de navigation de bloc – Shift+Alt+O
• Afficher ou masquer la barre latérale des paramètres – Ctrl+Maj+,
• Accédez à la partie suivante de l'éditeur - Ctrl+` ou Shift+Alt+N
• Accédez à la partie précédente de l'éditeur – Ctrl+Shift+` ou Shift+Alt+P
• Aller à la barre d'outils la plus proche – Alt+F10
• Enregistrez vos modifications – Ctrl+S
• Annuler vos dernières modifications – Ctrl+Z
• Refaire votre dernière annulation – Ctrl+Maj+Z

Raccourcis de sélection

• Sélectionnez tout le texte lors de la saisie. Appuyez à nouveau pour sélectionner tous les blocs – Ctrl+A
• Effacer la sélection – ESC

Raccourcis de bloc

• Dupliquer le(s) bloc(s) sélectionné(s) – Ctrl+Maj+D
• Supprimer le(s) bloc(s) sélectionné(s) – Shift+Alt+Z
• Insérer un nouveau bloc avant le(s) bloc(s) sélectionné(s) – Ctrl+Alt+T
• Insérer un nouveau bloc après le(s) bloc(s) sélectionné(s) – Ctrl+Alt+Y
• Supprimer plusieurs blocs sélectionnés - del ou backspace
• Changer le type de bloc après avoir ajouté un nouveau paragraphe – /

Raccourcis de texte

• Mettre le texte sélectionné en gras – Ctrl+B
• Mettre le texte sélectionné en italique – Ctrl+I
• Convertir le texte sélectionné en lien – Ctrl+K
• Supprimer un lien – Ctrl+Maj+K
• Souligner le texte sélectionné – Ctrl+U

Emballer

L'éditeur WordPress a parcouru un long chemin au cours de la dernière décennie, et l'éditeur de blocs actuel est certainement assez puissant pour nous permettre de passer à travers la prochaine. Grâce à la puissance du contrôle granulaire de chaque élément de la page, vous pouvez créer du contenu plus rapidement, plus facilement et bien plus efficacement qu'auparavant. Cependant, si l'éditeur de blocs actuel n'est pas pour vous, le plugin Classic Editor existe, et si vous êtes à la pointe de la technologie, le plugin Gutenberg reste quelques versions en avance sur l'éditeur par défaut dans le noyau WordPress. Donc, peu importe la façon dont vous préférez créer, WordPress vous couvre.

Vous avez des trucs et astuces que vous aimeriez partager sur l'éditeur WordPress ? Faites le nous savoir dans les commentaires!