Comment utiliser l'éditeur de blocs WordPress

Dans cet article, je vous apprends à utiliser l'éditeur de blocs WordPress, qui est inclus dans les mises à jour de WordPress depuis 2018 et il est là pour rester. Vous l'entendrez également appelé l'éditeur Gutenberg.

Depuis la sortie de WordPress 5.0, il existe une option dans l'éditeur de texte WordPress pour « CONVERTIR EN BLOCS », trouvée en cliquant sur les trois points verticaux, comme ci-dessous.

Faut-il convertir en blocs ?

Si vous utilisez un éditeur de texte WordPress tiers, des complications peuvent survenir. Je ne les couvre pas dans ce post. Veuillez vous renseigner auprès d'un professionnel sur la conversion et la marche avec précaution.

Pour quiconque – je n'assume aucune responsabilité – sauvegardez toujours un site Web/blog avant de convertir une page en blocs.

Déjà converti ? Sautez cette section.

À ceux d'entre vous qui ont utilisé l'éditeur classique et qui ont une mise en page simple, je peux recommander les blocs WordPress.

Une fois que vous êtes habitué à l'éditeur de blocs WordPress, il est intuitif.

Appuyer sur CONVERTIR EN BLOCS ne convertira pas l'ensemble du site Web/blog en blocs. Juste la page ou la publication sur laquelle vous travaillez.

Que se passe-t-il lorsque je convertis en blocs ?

La conversion de la page valide chaque titre, paragraphe, extrait de code et image dans son propre bloc individuel.

Vous vous y habituerez bientôt, si vous venez tout juste de vous convertir.

Les blocs vous permettent d'ajouter facilement des paragraphes, des colonnes, des tableaux, des images, des widgets, les derniers articles et catégories.

Ainsi que des widgets tels que les derniers messages, calendriers, archives de messages, catégories, icônes sociales et flux RSS.

Les blocs WordPress permettent d'ajouter facilement presque tout ce qu'un propriétaire de site Web pourrait souhaiter. C'est vraiment pratique.

Un bloc représente un élément, il est donc également beaucoup plus facile de modifier l'ordre des pages. Nous couvrirons cela plus tard.

Voir le site WordPress dans un nouvel onglet

Lors de l'édition, la première chose que je fais est d'ouvrir la partie publique du site Web dans un nouvel onglet de navigateur. J'ai ensuite la zone d'administration (back end) visible dans un onglet et la zone publique (front end) visible dans l'autre. De cette façon, je peux basculer entre les deux.

Le moyen le plus simple d'ouvrir le front-end de votre site Web WordPress dans un nouvel onglet est ;

• Dans la zone d'administration, passez la souris sur l'icône de la maison, en haut à gauche de l'écran.
• Dans le menu déroulant, CLIC DROIT sur 'Visiter le site'.
• Cliquez sur « Ouvrir le lien dans un nouvel onglet ».

NB. Il peut y avoir une variation de mots selon le navigateur que vous utilisez.

Deux onglets du navigateur sont maintenant ouverts, ce qui signifie que vous pouvez basculer entre les deux.

Continuez à modifier la page WordPress dans un onglet, en utilisant la zone d'administration.

Dans l'autre, vous verrez le front-end de votre site Web. Voici comment vérifier chaque modification que vous apportez.

Au fur et à mesure que vous apportez des modifications et que vous les enregistrez, vous pouvez accéder au front-end du site. Appuyez sur la touche F5 pour actualiser la page - cela invite le navigateur à afficher la version mise à jour.

En-tête et permalien WordPress h1

Regardons d'abord le titre et le permalien.

L'en-tête h1 est le premier bloc en haut de la page. C'est le seul bloc qui est immeuble et c'est pour une bonne raison.

Toutes les pages et tous les articles doivent avoir un en-tête h1 au tout début afin que les moteurs de recherche et les humains comprennent ce qui est contenu sur la page. C'est un facteur de référencement.

Utilisez votre souris pour cliquer à l'intérieur du bloc de titre. Pour modifier un titre, mettez le texte du titre en surbrillance et commencez à taper. Simple.

Le champ de lien permanent se trouve dans les paramètres du document sur le côté droit, voir l'image ci-dessous. L'étiquette WordPress pour le nom de la page est « URL Slug ».

Soyez prudent lorsque vous modifiez des permaliens – j'ai inclus un avertissement au bas de cet article.

Ajouter un bloc WordPress

Appuyez sur l'icône Plus +, en haut à gauche pour commencer.

Explorez la bibliothèque de blocs - il y a tellement d'options disponibles ici.

Il existe deux autres façons d'ajouter un bloc à une page WordPress.

Si vous êtes dans un flux créatif, ajoutez un bloc en appuyant sur retour.

La troisième façon se fait en survolant un bloc – une icône Plus + apparaît.

Au moment d'écrire ces lignes, c'est délicat - passez la souris sur le centre exact en bas du bloc pour que l'icône apparaisse.

Appuyez sur l'icône et choisissez un style de bloc. Le nouveau bloc apparaîtra sous l'icône plus.

Paragraphes WordPress utilisant des blocs

Les blocs de paragraphes seront souvent les éléments les plus courants d'une page ou d'un article WordPress. Ajoutez un bloc de paragraphe et commencez à taper.

Appuyez sur retour pour créer un nouveau bloc de paragraphe et continuez à taper.

Pour accélérer le flux de travail, les blocs de paragraphe peuvent être transformés en d'autres styles.

Avec le curseur dans un nouveau bloc de paragraphe, tapez un / (barre oblique). Ce raccourci vers une liste de types de blocs possibles.

Vous pouvez également transformer un bloc à l'aide de la barre d'outils. Sur un bloc sélectionné, la barre d'outils apparaît, en haut à gauche.

Dans la barre d'outils d'un paragraphe se trouvent des options permettant de modifier le « type ou le style de bloc » ou de formater le texte :

Transformer le bloc de paragraphe WordPress

Utilisez le bouton « changer le type ou le style de bloc » pour transformer le bloc de paragraphe. La transformation est limitée aux blocs d'un acabit similaire. C'est-à-dire que les paragraphes ne peuvent pas être transformés en tableaux, mais peuvent être transformés en titres.

Transformons un paragraphe en en-tête, par exemple.

La flèche, sur l'image ci-dessous, pointe vers l'icône qui représente un PARAGRAPHE. C'est ainsi que vous savez que le bloc est un paragraphe.

Cliquez sur l'icône pour transformer le paragraphe.

Appuyez sur EN-TÊTE.

L'icône du paragraphe se transforme en H et vous pouvez voir H2 à côté.

H1 ne peut pas être choisi – un H1 ne doit être utilisé que pour le titre de la page.

Le bloc est maintenant un bloc d'en-tête.

Sélectionnez H3 ou un H4 en appuyant sur le bouton H2 en choisissant dans le menu.

Utilisez les en-têtes comme une hiérarchie dans les pages et les articles. Utilisez H2 pour diviser la page en sections faciles à lire. Utilisez H3 pour les subdiviser.

Mettre en forme les paragraphes et les titres

Mettre en forme du texte signifie simplement lui ajouter un style spécifique.

Sur un titre ou un bloc de paragraphe, mettez en surbrillance le texte que vous souhaitez mettre en forme.

La barre d'outils apparaît comme par magie, en haut à gauche du bloc. C'est ici que vous trouverez des options pour mettre du texte en gras , en italique ou ajouter un lien hypertexte.

Il est toujours possible d'utiliser des raccourcis clavier – surlignez le texte et utilisez :

• Contrôle-b pour gras
• Control-i pour les italiques.
• Control-u soulignera le texte.

Utilisateurs Mac - utilisez la touche de commande au lieu de la touche de contrôle.

Visitez les raccourcis clavier WordPress pour une liste utile.

Notez qu'il y a une flèche vers le bas sur la barre d'outils ; un menu déroulant pour « plus de contrôles de texte enrichi ». Deux autres styles se trouvent ici – barré et couleur du texte .

Soyez prudent avec la couleur du texte - le thème régira l'apparence du site Web. Moins de couleurs dans un schéma d'entreprise donnent un aspect professionnel à un site Web. Utilisez la couleur du texte avec parcimonie.

Un « code en ligne » et une « image en ligne » se trouvent également dans ce menu.

Tout « inline » sera positionné dans la ligne de texte que vous tapez. Utile pour les extraits de code et éventuellement les icônes, mais des images plus grandes seraient étranges à mon avis.

Paramètres de paragraphe

Sélectionnez un bloc de paragraphe pour afficher les options sur le côté droit de l'écran WordPress.

Modifiez la taille de votre texte ici.

Vraiment sympa si vous avez un slogan que vous aimeriez vous démarquer.

Il est également possible de changer la couleur de paragraphes entiers. Je mettrais en garde contre devenir trop fou avec ces options.

Plus d'options de transformation pour les paragraphes

Les autres options de transformation pour le bloc de paragraphe sont :

• une liste,
• un bloc pré-formaté,
• une citation,
• un verset
• ou un groupe.

Listes

Les listes sont l'étiquette de WordPress pour les puces - vraiment utiles pour aider les éléments à se démarquer sur une page Web. Il existe deux types de listes disponibles :

• Liste ordonnée (OL) - éventuellement classée par chiffres romains, décimales ou lettres.
• Liste non ordonnée (UL) - puces stylisées.

Tout comme les paragraphes, les listes peuvent être formatées. Il existe également une option pour indenter une liste, de sorte que des sous-listes peuvent être créées dans les listes.

Nous n'avons jamais vu les blocs « préformatés » ou « versets » dans WordPress, alors je vais expliquer un peu ces types de blocs.

Bloc préformaté dans WordPress

Le bloc préformaté permet aux utilisateurs de WordPress de taper du texte exactement comme ils le souhaitent, en préservant les sauts de ligne et les retraits.

Je ne sais pas trop à quoi ça sert pour le moment. Quelqu'un m'éclaire.

Dans un bloc de paragraphe vide, tapez /preformatted puis appuyez sur Entrée pour créer un bloc préformaté.

Ou utilisez la barre d'outils comme indiqué ci-dessus.

Verset

WordPress dit que le bloc verset est idéal pour ajouter de la poésie à votre site, si bien nommé.

Les utilisateurs plus avancés peuvent ajouter du CSS aux blocs de vers, ce qui facilite le style du bloc de vers.

 Les roses sont rouges , 
Les violettes sont bleues.

Boutons dans l'éditeur de blocs WordPress

L'éditeur de blocs WordPress permet à l'éditeur de créer des boutons sur mesure.

Ce sont des boutons simples avec des styles limités, rien de particulièrement ingénieux à leur sujet. À mon avis, WordPress a pris la bonne décision – garder les choses propres est la meilleure option.

Pour ajouter un bouton, utilisez l'icône « Ajouter un bloc » et sélectionnez « Bouton ».

Commencez à taper le texte du bouton tout de suite.

Maintenant, il y a deux parties dans un « bloc de boutons », ce qui peut prêter à confusion.

Un bouton est contenu dans un bloc externe. Cliquez sur le bouton, puis cliquez juste à l'extérieur du bouton, dans l'espace blanc pour voir ce que je veux dire.

Déplacez ou faites glisser le bouton à l'aide du bloc conteneur. Le bouton peut y être aligné.

Cliquez sur le bouton et cela peut être stylisé - couleur, texte, bordure. C'est également là que vous lieriez le bouton.

Avoir du sens ?

Sélectionnez le bouton - plus d'options de style sont disponibles sur le côté droit de WordPress.

Un style peut être ajouté au texte du bouton, tout comme un paragraphe. Soyez prudent en liant le texte.

J'ai découvert que WordPress donne la possibilité de lier le TEXTE du bouton (via la barre d'outils des boutons, tout comme un paragraphe) ou de lier l'ensemble du bouton via les options à droite. Légèrement déroutant.

La meilleure option ici est de lier le bouton entier.

Pour ce faire, sélectionnez le bouton en cliquant dessus, voir les options Bloquer sur le côté droit ? Faites défiler jusqu'en bas et insérez votre lien dans le champ Link rel.

Je déconseille d'activer l'option « Ouvrir un nouvel onglet », car les moteurs de recherche préfèrent que l'utilisateur prenne la décision d'ouvrir de nouveaux onglets.

Dans l'exemple de bouton ci-dessus, j'ai ajouté une icône Font Awesome en copiant le code HTML de Font Awesome :

 <i class="fas fa-arrow-right"></i>

Pour l'inclure sur votre bouton, sélectionnez le bouton, appuyez sur les 3 points verticaux à la fin de la barre d'outils et choisissez « Modifier en HTML ». Collez le code HTML avant la balise de fermeture </a>.

Cette icône n'est disponible que si Font Awesome est installé.

Groupes de blocs

Un bloc de groupe permet à l'éditeur d'ajouter plus d'un bloc à l'intérieur, de sorte que le groupe puisse être déplacé, dupliqué ou réutilisé dans son ensemble.

Utile pour les mises en page. Ou pour garder les titres et les paragraphes ensemble afin que la page ne s'emmêle pas.

Cependant, j'ai trouvé les GROUPES légèrement frustrants, car ils semblent disparaître ! Je pense que c'est un bug de WordPress.

Dupliquer un bloc WordPress

Alternativement, lorsque vous êtes dans un bloc, utilisez le raccourci CONTROL-SHIFT-D (COMMAND-SHIFT-D sur un Mac).

Réutiliser un bloc WordPress

L'option BLOC RÉUTILISABLE est une autre fonctionnalité intéressante des blocs WordPress.

Le style que vous avez créé pour un bloc peut être enregistré et réutilisé. Cela réduit le besoin de recréer chaque élément sur l'ensemble du site.

Cliquez sur n'importe quel bloc pour afficher la barre d'outils, puis cliquez sur les 3 points verticaux à droite. Vous trouverez ici un élément de menu intitulé « Ajouter aux blocs réutilisables ».

Le bloc réutilisable enregistré se trouve dans la bibliothèque de blocs sous l'onglet « Réutilisable ». Trouvez-le et ajoutez-le comme n'importe quel autre bloc. Pratique.

Les blocs réutilisables peuvent être gérés, vous n'avez donc pas trop de surplus dans la collection.

Assurez-vous de sauvegarder votre travail. Ensuite, sur n'importe quel article ou page, regardez en haut de l'écran, vous verrez les boutons APERÇU et MISE À JOUR et une icône de roue dentée.

À la fin de cette barre, vous trouverez 3 points verticaux, cliquez dessus pour voir une liste. En bas se trouve l'option « Gérer tous les blocs réutilisables ».

Gérez les blocs réutilisables de la même manière que les publications – cliquez sur les noms pour les modifier.

La modification d'un bloc réutilisable ne changera PAS le style des blocs déjà présents sur le site.

Comment faire glisser un bloc WordPress

Depuis la mise à jour vers WordPress 5.5 l'option glisser n'est pas évidente.

Vous devez sélectionner le bloc, puis cliquez et maintenez sur les flèches haut-bas.

Lorsque vous faites glisser le bloc, les zones seront surlignées en bleu indiquant où le bloc sera déposé une fois la souris relâchée.

J'espère que cela vous aidera à commencer à éditer WordPress à l'aide de l'éditeur de blocs WordPress. Il y a beaucoup plus à couvrir, alors s'il vous plaît voir mes autres messages sur:

• Comment ajouter des images sur WordPress.
• Lier une image dans WordPress.
• Titres et paragraphes dans WordPress.
• Lien hypertexte dans WordPress.
• Mise en forme dans WordPress.
• Comment ajouter un PDF à WordPress (et créer un lien vers celui-ci).

Beaucoup de choses à faire ! Faites-moi savoir comment vous vous en sortez.