Blocs WordPress : un guide détaillé

Les blocs WordPress sont le composant principal du système d'édition Gutenberg par glisser-déposer de WordPress pour les sites Web.

La façon la plus simple d'apprendre à utiliser les blocs est de s'entraîner, mais comprendre ce que sont les blocs et ce qu'ils peuvent faire pour vous peut rendre la création de votre page plus efficace et même plus amusante.

Que vous débutiez dans la création de sites WordPress ou que vous cherchiez à développer des compétences avancées, ce guide vous en apprendra davantage sur les blocages, les blocages courants que les gens utilisent, comment les utiliser et d'autres informations qui peuvent améliorer votre site.

En savoir plus : Conception de sites Web WordPress : Comment créer un site Web WordPress à partir de zéro

Que sont les blocs WordPress ?

Les blocs WordPress sont des éléments discrets de texte, de média ou de code personnalisé que vous pouvez ajouter à un article de blog ou à une page de site Web à l'aide du système d'édition Gutenberg de WordPress.

La plupart des gens se concentrent sur son utilisation pour les blogs, mais cela fonctionne bien pour la plupart des autres pages de nombreux sites Web.

Les blocs WordPress existent pour simplifier la création de publications et de pages attrayantes pour les lecteurs en supprimant le besoin de coder chaque élément manuellement. Au lieu de cela, vous pouvez faire glisser et réorganiser chaque bloc pour personnaliser l'apparence de votre page.

Chaque bloc est fonctionnellement un élément autonome sur la page, donc changer un bloc ne modifiera pas les autres.

Ce n'est pas le seul système d'édition de type bloc sur le marché. Certains services concurrents, comme Ghost, disposent également d'éditeurs robustes que vous pouvez utiliser pour créer des sites Web.

Cependant, Ghost est principalement une plate-forme de blogs, et son éditeur se concentre sur cela, tandis que l'éditeur de WordPress est également utile pour créer des pages non-blog sur votre site Web.

Ces blocs sont également différents de Drupal, un autre système de gestion de contenu.

Drupal se concentre sur les blocs qui peuvent apparaître sur plusieurs parties d'un site Web, tandis que WordPress se concentre sur les parties individuelles d'une page.

Vous pouvez dupliquer le contenu assez facilement, mais les blocs eux-mêmes ne sont pas liés et ne changeront pas tous lorsque vous en modifierez un.

En savoir plus : Conception de la page de destination : 10 pages de destination inspirantes et à fort taux de conversion

Histoire de Gutenberg

Gutenberg est l'éditeur actuel de WordPress.

Lancé à l'origine en 2018, il est devenu depuis un système plus mature capable de fournir une édition rapide et puissante des pages Web et des articles de blog.

Ce n'est toujours pas fait parce que les développeurs veulent l'utiliser pour l'édition complète du site, mais il a beaucoup plus de fonctionnalités maintenant qu'il n'en avait au lancement.

Gutenberg existe parce que de nombreux utilisateurs de WordPress voulaient avoir un moyen plus propre et plus simple de bloguer sans éditer le code pour que tout soit beau.

Ici, il est essentiel de comprendre que WordPress attire de nombreux utilisateurs occasionnels, dont beaucoup ont peu de connaissances en codage.

Ceci est une nette différence des premières années de l'Internet où vous auriez même pas un site à moins que vous aviez une connaissance relativement avancée de codage pour le moment. En d'autres termes, WordPress veut soutenir le marché occasionnel, où les processus de cliquer-glisser ont plus de sens.

Une considération secondaire pour Gutenberg est de savoir comment et où les gens bloguent.

Certains propriétaires de sites Web utilisent des systèmes de synthèse vocale au lieu d'écrire des choses manuellement, tandis qu'un système d'édition par glisser-déposer facilite grandement la création de sites Web sur des smartphones, des tablettes et d'autres appareils.

Cependant, certaines personnes préfèrent encore l'ancien système d'édition. Ce n'est pas surprenant car il offre toujours beaucoup plus de contrôle et de support pour les utilisateurs capables de gérer son code.

Gutenberg est un éditeur puissant , mais par nécessité, il limite certaines choses que les utilisateurs peuvent faire. Rien n'est aussi flexible que le codage pur, mais Gutenberg est plus rapide et plus facile pour la plupart des besoins.

En savoir plus : Optimisation du taux de conversion : le guide complet

Basculer entre l'éditeur classique et l'éditeur de blocs

WordPress sait que la flexibilité est généralement meilleure que de forcer tout le monde à utiliser un seul système, et c'est pourquoi vous pouvez basculer entre ses systèmes d'édition classique et par blocs.

Dans la plupart des cas, vous devez être l'administrateur du site pour basculer entre les vues d'édition.

Cependant, une fois connecté avec le bon compte, vous pouvez changer l'éditeur sur chaque page lorsque vous le modifiez en cliquant sur le bouton en haut de l'écran.

C'est tout ce que la plupart des utilisateurs ont besoin de savoir, mais vous pouvez personnaliser davantage les choses.

De nombreux plugins WordPress vous permettent de créer des pages avec une interface glisser-déposer comme Gutenberg mais que vous préférez peut-être. Ils offrent généralement des choix d'édition que Gutenberg n'offre pas non plus.

Des plugins comme le constructeur Divi, SeedProd et le populaire et facile à utiliser Elementor offrent des systèmes d'édition au-delà des blocs fournis par Gutenberg.

Ces plugins contiennent généralement des outils de redimensionnement, des composants en plusieurs parties et des modèles améliorés qui réduisent encore le processus de création de pages.

Les plugins externes sont utiles pour les pages qui ne sont pas des blogs, c'est là que Gutenberg tombe souvent un peu. Il peut faire beaucoup de ces pages, mais pas encore avec la même flexibilité que les autres systèmes.

En savoir plus : Carte du parcours client : meilleures pratiques + modèles prêts

Comment désactiver Gutenberg

Pouvez-vous désactiver Gutenberg pour des utilisateurs spécifiques ? Peut-il être complètement désactivé ?

La réponse aux deux est oui. Il existe plusieurs façons de désactiver Gutenberg si vous ne souhaitez pas l'utiliser sur votre site.

Désactiver Gutenberg en installant un plugin

La première méthode, et la meilleure pour la plupart des utilisateurs, consiste à utiliser le plugin Classic Editor. Il s'agit d'un plugin officiel de l'équipe WordPress, avec littéralement des millions d'installations actives sur les sites.

L'éditeur classique vous permet de définir l'éditeur par défaut pour chaque utilisateur, permet aux utilisateurs de choisir un éditeur et est livré avec plusieurs fonctionnalités supplémentaires pour faciliter les choses.

Cela ne désactive pas techniquement Gutenberg mais le cache, mais le résultat pratique est le même. Ou, dans un autre sens, l'installation de Classic Editor est sage car elle vous permet d'utiliser l'éditeur de votre choix, et c'est tout simplement mieux que d'être coincé avec un seul éditeur tout le temps.

Une alternative basée sur la communauté utilise le plugin Disable Gutenberg, qui n'est pas aussi populaire que Classic Editor mais ne repose pas sur un support officiel.

Il s'agit d'un moyen simple et pratique de désactiver complètement Gutenberg ou de le désactiver pour des pages, des types de publication, des rôles ou des thèmes spécifiques sur un site.

Pour installer l'un ou l'autre plugin, les étapes sont simples :

1. Connectez-vous à votre interface WordPress
2. Sur la gauche, sélectionnez 'Plugins'
3. Sur l'écran étendu des plugins, sélectionnez « Nouveau »
4. Dans le champ de recherche en haut, tapez le nom du plugin que vous voulez
5. Choisissez le plugin que vous voulez parmi les résultats et cliquez sur le bouton 'Installer maintenant'
6. Une fois terminé, cliquez sur « Activer le plugin »

Désactivez Gutenberg en éditant functions.php

Enfin, vous pouvez modifier le fichier functions.php sur votre site pour désactiver les choses directement.

Cependant, cela peut finir par casser votre site si vous ne le faites pas correctement, nous ne le recommandons donc pas aux utilisateurs occasionnels. L'installation de l'un des plugins listés ci-dessus est à la fois plus simple et facilement réversible.

Si vous souhaitez désactiver Gutenberg sans plugin et que vous débutez dans le code WordPress, vous pouvez suivre ces étapes. Cette méthode le désactive pour tous les utilisateurs.

1. Connectez-vous à votre interface WordPress (vous devrez être administrateur)
2. Recherchez « Apparences » dans la barre latérale gauche et survolez-la
3. Sélectionnez « Éditeur de thème »
4. Dans la liste des fichiers à droite, sélectionnez 'functions.php'
5. Faites une copie de votre fichier functions.php auparavant en tant que sauvegarde afin de pouvoir le restaurer si quelque chose ne va pas.
6. Lorsque l'éditeur apparaît, copiez exactement ce qui suit et collez-le dans le fichier : add_filter( 'use_block_editor_for_post', '__return_false' );
7. Cliquez sur le bouton Mettre à jour le fichier ci-dessous

En savoir plus : explication de la carte thermique + Comment créer une carte thermique de site Web

Types courants de blocs WordPress

Voici les types de blocs les plus courants disponibles dans l'éditeur WordPress de base.

Avant Gutenberg, la plupart des gens codaient ces blocs directement, ou avec les outils de formatage de texte et d'image de l'éditeur de texte enrichi, et réorganisaient le code selon les besoins pour ajuster la mise en page sur la page.

Paragraphe

C'est le bloc que la plupart des gens utilisent plus que tout autre. Comme son nom l'indique, il se concentre sur le contenu écrit.

L'éditeur de texte convertit chaque paragraphe en un bloc afin que vous puissiez les déplacer et les réorganiser après les avoir écrits.

Image

Les blocs d'intégration d'images contiennent des graphiques uniques que vous pouvez déplacer sur la page.

Ceux-ci viennent avec diverses options d'alignement, y compris le redimensionnement de l'image ou même la pleine largeur, au-delà de la limite habituelle d'un thème.

Les blocs de paragraphe et d'image réunis sont suffisants pour créer une page Web de base, de sorte que tout le reste est en fin de compte juste là pour itérer et améliorer ces éléments, en suivant les principes de base de la hiérarchie visuelle.

En-têtes

Les blocs d'en-tête contiennent des textes surdimensionnés pour diviser la page en sections et permettre aux utilisateurs de trouver plus facilement du contenu. L'éditeur vous permet d'ajuster la taille des titres, la mise en forme, les liens hypertexte et d'autres éléments selon vos besoins.

WordPress prend en charge jusqu'à 6 niveaux de titre, y compris h1 pour le titre de la page, mais la plupart des gens vont rarement au-delà de h4.

Galerie

Le bloc galerie est une version avancée du bloc image de base et vous permet d'ajouter plusieurs images dans une mise en page prédéterminée.

L'éditeur actuel prend en charge un maximum de huit colonnes pour les images, ainsi que le redimensionnement, la liaison et d'autres options de formatage pour la page.

Lister

Les blocs de liste ont créé des listes numérotées ou à puces.

Il ne s'agit essentiellement que d'une application du bloc de paragraphe, mais la séparation des listes dans leur propre composant permet d'éviter plus facilement de modifier accidentellement la mise en forme.

Devis

Les blocs de citations sont des blocs de paragraphes spécialement formatés qui aident à appeler quelque chose de particulièrement important.

La plupart des gens les utilisent pour une citation d'une personne spécifique, mais vous pouvez également les utiliser pour commenter ou mettre en évidence des informations vitales.

l'audio

Les blocs audio sont relativement rares sur les sites Web, mais WordPress les prend toujours en charge.

Ceux-ci vous permettent d'ajouter tous les fichiers audio dont vous disposez, y compris des fonctionnalités telles que la lecture automatique de l'audio ou sa mise en boucle.

N'oubliez pas que la plupart des utilisateurs n'aiment pas l'audio qui est lu automatiquement à moins qu'ils ne le souhaitent, alors essayez d'éviter de surprendre les visiteurs avec des bruits inattendus.

Couverture

Les blocs de couverture sont un élément de formatage plus avancé. Ce bloc vous permet de sélectionner une image ou une vidéo, et parfois du texte, que vous pouvez superposer sur votre page.

Ce média peut flotter en arrière-plan, se répéter et servir d'autre moyen d'attirer l'attention instantanément.

WordPress prend en charge l'absence de transparence sur la superposition ou une transparence totale, mais recommande une quantité modérée pour garantir que votre texte est facile à lire.

Déposer

Les blocs de fichiers vous permettent de fournir des liens directs vers des fichiers sur votre site Web afin que les visiteurs puissent les télécharger.

Vous pouvez télécharger presque n'importe quel type de fichier sur votre site, mais votre fournisseur d'hébergement peut avoir des questions si vous essayez de télécharger quelque chose de trop volumineux ou d'obtenir trop de téléchargements pour votre plan.

C'est un bon exemple de l'interdépendance du développement Web.

Vous ne rencontrerez probablement pas de limites si vous autorisez uniquement les utilisateurs à télécharger des fichiers texte de base, mais parlez à l'hébergeur de votre site Web avant d'ajouter d'autres fichiers. Ils peuvent vous dire ce qui est autorisé sur votre plan ou suggérer des alternatives au besoin.

Vidéo

Les blocs vidéo vous permettent d'ajouter du contenu multimédia à votre site, en le téléchargeant directement ou en liant du contenu sur un autre site.

Les fichiers vidéo ont tendance à être extrêmement volumineux, vous avez donc généralement besoin d'un bon plan d'hébergement si vous souhaitez avoir les fichiers sur votre site.

L'hébergement en externe, par exemple via YouTube et l'intégration de YouTube, est considérablement plus facile. Gutenberg convertit automatiquement certains liens vidéo en un type de bloc différent, le cas échéant.

Comment utiliser les blocs WordPress

Il existe plusieurs façons d'ajouter un bloc dans l'éditeur Gutenberg. Vous pouvez les ajouter directement à partir de la barre d'icônes supérieure ou en cliquant sur le bouton d'insertion.

Ce bouton ressemble à un cercle avec un plus et vous permet de cliquer sur le type de bloc à ajouter.

Une fois que les blocs sont sur la page, vous pouvez les déplacer de haut en bas en cliquant sur les flèches sur le côté gauche du bloc. Alternativement, vous pouvez cliquer sur la grille de six points et maintenir le bouton de la souris enfoncé, puis faire glisser le bloc là où vous le souhaitez.

Pour éditer les blocs, il suffit de cliquer sur leur espace. Cela ouvrira automatiquement les informations du bloc et vous permettra d'ajuster les composants si nécessaire.

Vous pouvez utiliser les mêmes fonctions pour changer le type de bloc. Les flèches du panneau de configuration peuvent être utilisées pour développer ou fermer des sections de l'éditeur, tandis que le bouton X vous permet de fermer l'éditeur de blocs et de vous concentrer sur d'autres choses.

Différence entre les blocs WordPress et les widgets

Les blocs sont principalement du contenu de page Web, y compris du texte et des médias tels que des images et du son. Alors, qu'est-ce qu'un widget WordPress, et en quoi est-il différent d'un bloc ?

Les widgets WordPress, en revanche, sont du contenu que vous pouvez placer dans des zones spéciales telles que les barres latérales et les pieds de page. L'éditeur Gutenberg évite principalement ces zones, bien que vous puissiez inclure des éléments de type widget dans votre contenu principal en ajoutant des blocs de code.

L'interface de bloc est généralement sur le côté droit de l'écran lorsque l'éditeur de page est ouvert. L'éditeur de widget est disponible via la zone Apparence > Personnalisateur et via le menu administrateur.

Les widgets apparaissent généralement sur chaque page d'un site Web, vous ne pouvez donc pas les modifier à partir du même endroit où vous pouvez modifier les blocs.

Création de modèles de blocs WordPress réutilisables

WordPress vous permet de créer des modèles de blocs réutilisables.

Ceci est utile pour avoir une image de marque et une conception cohérentes sur votre site sans recréer une mise en page exacte à chaque fois. Ceci est particulièrement utile si vous utilisez un logiciel comme Vectornator ou Adobe Illustrator pour créer des graphiques et des mises en page vectoriels avancés.

La création du modèle lui-même est simple. Tout ce que vous avez à faire est de sélectionner le bloc, de cliquer sur les trois points dans la barre d'outils qui apparaît, puis de cliquer sur Ajouter aux blocs réutilisables.

À partir de là, vous pouvez le renommer en quelque chose de facile à retenir et recommencer à travailler sur la page.

Les modèles de blocs simplifient des choses comme les logos, les boutons personnalisés créés dans un logiciel de conception graphique, les éléments de conception et tout ce qui est utilisé dans la marque d'un site Web.

Le modèle permettra d'ajouter facilement l'élément où vous le souhaitez sans avoir à refaire un certain élément de marque ou une mise en page à chaque fois que vous souhaitez l'utiliser.

Réflexions finales sur les blocs WordPress

Bien que les blocs WordPress ne soient pas idéaux pour tout le monde, ils constituent un puissant point de départ pour créer des pages et organiser le contenu de manière intuitive et conviviale.

Cependant, il ne suffit pas de lire sur les blocs pour maîtriser leur utilisation.

Au lieu de cela, allez sur votre site WordPress maintenant et commencez à jouer sur une seule page. En acquérant une certaine pratique, vous serez en mesure de maîtriser leur utilisation et de commencer à créer des mises en page avancées sur votre site.

Tout comme faire du vélo, les blocs WordPress sont difficiles à oublier une fois que vous les avez appris et peuvent vous aider à créer presque n'importe quelle conception de page standard.