WordPress en tant que CMS possède un ensemble de fonctionnalités incroyablement robustes. Les plugins et widgets attirent les gens sur la plate-forme, mais une fois à l’intérieur, le véritable 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 à titre majeur. Nous voulons donc vous montrer comment utiliser l’éditeur WordPress au maximum pour que votre contenu brille et que votre site prospère.

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é du 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 vers les nouvelles fonctionnalités de test bêta de l’éditeur de blocs avant de devenir WordPress Core.

Bien que l’éditeur de blocs soit par défaut dans WP à partir de 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 ce billet. 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 enrichi ou logiciel de traitement de texte donné – 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. Vous êtes présenté avec un tutoriel modal sur son ouverture, et vous pouvez apprendre les bases en le suivant à travers les 4 diapositives qu’il propose. Fermez-le et vous pourrez voir l’éditeur de base.

L’éditeur de blocs WordPress de base se compose de 5 éléments. D’autres 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 – Il s’agit de la zone dans laquelle vous allez ajouter les différents blocs qui composent le contenu de votre publication 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ît, à partir de laquelle vous choisissez le type que vous souhaitez insérer. Ils fonctionnent tous exactement de la même manière, donc si vous cliquez sur l’un à droite d’un bloc, sous un bloc ou dans le coin de l’écran, vous obtenez les mêmes options.
4. Onglet Options de document – Sous cet onglet, vous trouverez tout, des catégories, des balises, du permalien, des bascules d’activation / désactivation des commentaires, etc. Les plugins peuvent ajouter des options ici, mais ils s’appliquent toujours à la page globale ou se publient.
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 seul . Aucun autre bloc, ni le document lui-même ne change.

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 des blocs dans cet article, mais quels sont-ils exactement? Un bloc est un élément unique et personnalisable d’une page ou d’une publication. 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 comme vous le souhaitez, 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.

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 une collection de blocs que vous définissez pour fonctionner comme un seul bloc. Vous les déplacez et les stylisez comme s’ils étaient une seule unité, mais le groupe est composé de plusieurs éléments.

Créer un groupe est simple. Vous cliquez simplement sur un bloc, puis maintenez Shift ou CTRL 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 dans le coin supérieur 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 comme des individus.

Que sont les blocs réutilisables?

Vous pouvez transformer n’importe quel bloc d’un bloc unique en un bloc réutilisable dans le 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.

Le bloc de titre

Le bloc de titre, comme illustré ci-dessus, est la balise H1 principale de votre article ou de votre page. Il générera également le slug de permalien pour la publication, mais qui peut être modifié une fois que vous avez enregistré la publication au moins une fois. Ce sera également ce que les sélecteurs CSS tels que .post-title et .entry-title tirent. (Vos plugins SEO vous permettent toutefois de définir ce qui s’affiche dans les moteurs de recherche.)

Il s’agit du 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 page externe pour ajuster davantage.

Zone de bloc / contenu

Fondamentalement, vous pouvez considérer que la zone de contenu est l’endroit où vous tapez. Si vous le souhaitez, vous pouvez commencer à taper, écrire un article entier sans même considérer les blocs du tout. À tous égards, cela remplace la simple zone WYSIWYG de TinyMCE et est le plus grand changement de 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 ajoutez un nouveau bloc Paragraphe. Pour ajouter un autre type de bloc (de tout 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 souhaitez.

Vous pouvez ajouter des blocs vidéo YouTube, des images, des galeries, des lecteurs audio, des listes, des devis 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 étant couramment utilisé et le répertoriera sous Le plus utilisé 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 le 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.

Aperçu 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, un aperçu du document apparaît 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 de l’aperçu 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 dans le message, plutôt que seulement les en-têtes d’un plan.

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

Onglet Options de blocage

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 des vignettes 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 l’ onglet Bloc est ouvert, les options changent pour le bloc spécifique que vous sélectionnez. Si le bloc de paragraphe est en surbrillance, vous le verrez.

La sélection d’un bloc d’image modifiera l’onglet Bloc.

Chaque bloc aura des options spécifiques que vous pouvez ajuster à l’intérieur, qui ne s’appliquent qu’à ce type de bloc (et ne s’afficheront que dans ce bloc spécifique). Cependant, chaque bloc possède 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 blocage se trouve l’ onglet Options du 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 de permalien, ajouter un extrait pour le 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 du message 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 concerneront toujours directement le document lui-même, pas tant le contenu ou les blocs.

Post-métaboxes supplémentaires

Les métaboxes de la publication sont celles 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 des fonctionnalités de thème qui peuvent utiliser la zone). Les plugins SEO profitent beaucoup de cette zone, 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 qu’avec les détails du document.

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

Si vous cliquez sur l’ icône de liste déroulante à trois points dans le coin supérieur droit de l’écran, une grande liste déroulante verticale apparaît. 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 sont proches du sommet. Plus précisément, les bascules pour les modes Barre d’outils supérieure , Mode plein écran et Éditeur visuel / éditeur de code .

La bascule de la barre d’outils supérieure signifie que plutôt que les options pour un bloc sélectionné apparaissant comme un menu contextuel près du coin supérieur gauche du bloc, comme nous l’avons mentionné ci-dessus, il se trouvera 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 gauche qui inclut 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. Jusqu’à présent, les exemples de cet article concernent l’éditeur visuel. Autrement dit, vous voyez une représentation visuelle de l’article lorsque 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.

Cette opération est généralement effectuée pour résoudre les problèmes liés à l’éditeur ou pour affiner une zone ou un bloc unique. Ou peut-être pour coller du contenu écrit dans un éditeur externe qui ne se formaterait pas correctement sur plusieurs blocs.

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

Raccourcis de l’éditeur de blocs WordPress mondial

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. Enregistrer les plus utiles dans la mémoire vous fera économiser beaucoup de temps et d’ennuis, parlant d’expérience. Vous pouvez appuyer sur Maj + Alt + H pour afficher la liste suivante de raccourcis dans l’éditeur WordPress lui-même.

Raccourcis de document

• Basculer entre l’éditeur visuel et l’éditeur de code – Ctrl + Maj + Alt + M
• Ouvrez le menu de navigation par bloc – Maj + Alt + O
• Afficher ou masquer la barre latérale des paramètres – Ctrl + Maj +,
• Accédez à la partie suivante de l’éditeur – Ctrl + ` ou Maj + Alt + N
• Accédez à la partie précédente de l’éditeur – Ctrl + Maj + ` ou Maj + Alt + P
• Accédez à 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 frappe. 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) – Maj + Alt + Z
• Insérer un nouveau bloc avant le ou les blocs sélectionnés – Ctrl + Alt + T
• Insérer un nouveau bloc après le ou les blocs 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 texte

• Rendre le texte sélectionné en gras – Ctrl + B
• Rendre le texte sélectionné en italique – Ctrl + I
• Convertissez le texte sélectionné en lien – Ctrl + K
• Supprimer un lien – Ctrl + Maj + K
• Soulignez le texte sélectionné – Ctrl + U

Conclusion

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 mener à travers la prochaine. Grâce à la puissance de contrôle granulaire de chaque élément de la page, vous pouvez créer du contenu plus rapidement, plus facilement et beaucoup 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, le plugin Gutenberg reste quelques versions en avance sur l’éditeur par défaut dans WordPress core. Donc, peu importe la façon dont vous préférez créer, WordPress vous a couvert.