Comment utiliser le bloc HTML personnalisé de WordPress

Le bloc HTML personnalisé vous permet d'ajouter du contenu HTML et de le modifier sans avoir à afficher la page ou à publier au format HTML. Vous pouvez intégrer du HTML et même l'utiliser pour baliser votre texte, puis le convertir en un bloc de paragraphe avec du texte stylisé si vous le souhaitez. Ce bloc est idéal pour ceux qui préfèrent travailler en HTML et c'est l'un des meilleurs moyens d'intégrer certains types de code, tels que Google Maps.

Dans cet article, nous examinerons de près le bloc HTML personnalisé. Nous verrons comment l'ajouter à vos articles et pages, examiner ses paramètres et ses options, voir des conseils sur son utilisation et voir les questions fréquemment posées.

Abonnez-vous à notre chaîne Youtube

Comment ajouter le bloc HTML personnalisé à votre article ou page

Pour ajouter le bloc HTML personnalisé à votre contenu, placez votre curseur à l'endroit où vous souhaitez que le bloc apparaisse et sélectionnez l'outil Insertion. Une zone de recherche s'ouvrira où vous pourrez entrer un terme de recherche ou faire défiler vos options. Recherchez html et sélectionnez le bloc lorsqu'il s'affiche dans les résultats.

Alternativement, vous pouvez taper /html à l' endroit où vous souhaitez que le bloc apparaisse et appuyer sur Entrée ou le sélectionner parmi les options au-dessus de la zone de bloc.

Vous avez maintenant un bloc HTML personnalisé dans votre contenu où vous pouvez ajouter du HTML. Nous verrons quelques exemples avec du code au fur et à mesure que nous parcourons les paramètres.

Paramètres et options de bloc HTML personnalisé

Contrairement à la plupart des blocs, le bloc HTML personnalisé n'inclut pas d'options dans la barre latérale de l'éditeur. Vous trouverez toutes les options dont vous avez besoin dans la barre d'outils.

Barre d'outils de bloc HTML personnalisé

Cliquez n'importe où dans le bloc pour voir ses outils. Si vous ne les voyez pas tous, cliquez sous le bloc dans une nouvelle zone, puis le reste des outils s'affichera lorsque vous sélectionnerez à nouveau le bloc.

Chaque bloc a ses propres contrôles spécifiques où vous pouvez sélectionner des options pour le bloc. Un petit ensemble d'options de bloc au-dessus de la barre d'outils vous permet de modifier le type de bloc, de le convertir en blocs et d'ouvrir les options.

Regardons chaque paramètre en détail.

Bloc ou style de modification HTML personnalisé

La sélection de HTML dans les options ouvre une liste déroulante dans laquelle vous pouvez transformer le bloc en d'autres types de blocs. Les options incluent Code, Colonnes ou Groupe.

Code – transforme le bloc HTML personnalisé en un bloc de code afin que vous puissiez afficher différents types de code.

Colonnes – place le bloc dans les colonnes.

Groupe – ajoute le bloc à un groupe afin que vous puissiez les ajuster comme un seul bloc.

Outil de glissement de bloc HTML personnalisé

L'outil glisser comprend six points que vous pouvez saisir avec votre souris pour le déplacer.

Ensuite, faites simplement glisser le bloc où vous le souhaitez dans votre contenu et déposez-le. Une ligne bleue apparaîtra pour indiquer où le bloc sera déposé lorsque vous faites glisser le bloc.

Une fois que vous voyez la ligne bleue apparaître à l'endroit où vous voulez le bloc, relâchez le bouton de la souris et votre bloc sera placé à son nouvel emplacement.

Déplacement de bloc HTML personnalisé

Les flèches haut et bas déplacent le bloc d'une section de contenu à chaque fois que vous cliquez dessus. L'écran défilera au fur et à mesure que le bloc se déplacera automatiquement vers son nouvel emplacement. C'est un moyen facile de déplacer le bloc d'une section ou deux.

Bloc HTML personnalisé HTML et aperçu

Les boutons HTML et Aperçu vous permettent de sélectionner le fonctionnement du bloc avec HTML dans l'éditeur. Le bouton HTML est sélectionné par défaut. Cela montre le HTML sous sa forme de code plutôt que de l'exécuter. Cet exemple montre le HTML d'une carte Google.

La sélection d'Aperçu montre à quoi ressemblera le code HTML sur le frontend lorsqu'il est exécuté dans le navigateur. Il est facile de basculer entre les vues pour modifier le code HTML et voir à quoi il ressemblerait pour l'utilisateur final. C'est un excellent moyen d'apporter des modifications et d'afficher rapidement les résultats. Cet exemple montre une carte Google intégrée telle qu'elle apparaîtrait dans le contenu.

Comme autre exemple, voici du code HTML pour ajouter un style à une ligne de texte. C'est la vue HTML, où je peux créer et éditer le HTML.

Voici le mode Aperçu qui montre à quoi il ressemblera sur le front-end.

Options de bloc HTML personnalisé

À l'extrême droite de la barre d'outils se trouvent trois points dans une pile verticale. Ces trois points ouvrent un ensemble de 10 options en trois divisions qui vous permettent de masquer les paramètres, convertir en blocs, copier, dupliquer, insérer avant ou après, déplacer vers, ajouter à des blocs réutilisables, grouper ou supprimer le bloc.

Voici ce que les options Bloc HTML personnalisé peuvent faire :

Masquer plus de paramètres - cela masque la barre latérale droite, élargissant votre espace de travail.

Convertir en blocs - cela convertit le contenu dans les autres blocs appropriés. Le texte sera converti en blocs de paragraphe, les images en blocs d'image, etc. Le code intégré, tel que le code Google Map que j'ai utilisé dans mon exemple, restera en tant que bloc HTML personnalisé. Si d'autres éléments HTML du bloc peuvent être convertis, ils seront supprimés du bloc et placés dans un autre bloc.

Copier - cela copie le bloc dans votre presse-papiers afin que vous puissiez le coller n'importe où dans l'éditeur.

Dupliquer - cela place un duplicata du bloc sous l'original.

Insérer avant - cela ajoute une zone de bloc avant le bloc HTML personnalisé afin que vous puissiez placer un autre bloc.

Insérer après – cela ajoute une zone après le bloc où vous pouvez placer un autre bloc.

Déplacer vers - cela vous permet de déplacer le bloc vers le haut ou vers le bas avec les touches fléchées. Vous déplacerez une ligne bleue. Lorsqu'il atteint l'emplacement souhaité, appuyez sur Entrée et le bloc est déplacé instantanément.

Ajouter aux blocs réutilisables - ajoute le bloc HTML personnalisé à vos blocs réutilisables afin que vous puissiez l'utiliser à nouveau sur n'importe quelle page ou publication.

Groupe - cela ajoute le bloc à un groupe afin que vous puissiez ajuster les blocs comme une seule unité.

Supprimer le bloc - cela supprime le bloc.

Conseils et bonnes pratiques pour utiliser efficacement le bloc HTML personnalisé

Utilisez ce bloc pour styliser votre texte et modifier d'abord le code HTML, puis utilisez l'outil Convertir en blocs pour créer des paragraphes ou d'autres types de contenu. Cela vous donne plus de contrôle sur le contenu et est particulièrement utile si vous n'avez pas besoin de conserver la version HTML. Vous pouvez voir l'aperçu au fur et à mesure. Cela vous évite d'avoir à changer entre les éditeurs visuels et de code dans les paramètres WordPress de la barre latérale.

Utilisez ce bloc pour les cartes intégrées, les publicités, les vidéos, etc. Cela vous évite d'avoir à passer à la vue Éditeur de code et d'ajouter le code dans d'autres types de blocs, tels que le bloc de paragraphe.

L'utilisation de ce bloc plutôt que la version de l'éditeur de code de vos pages et publications vous évite d'avoir à travailler avec les balises de page et de publication. Cela crée un environnement de travail plus propre et plus facile à utiliser.

Que vous ajoutiez votre propre code HTML ou que vous intégriez le code d'une autre source, utilisez souvent la fonction Aperçu pour vous assurer que votre code HTML s'exécutera comme vous le souhaitez.

N'utilisez pas la balise de script dans le bloc. Il pourrait être supprimé et votre code ne fonctionnerait pas.

Foire aux questions sur le bloc HTML personnalisé

À quoi sert le bloc HTML personnalisé ?

Il vous permet d'entrer du code HTML dans un champ afin que vous puissiez travailler avec tout en conservant la page ou la publication dans l'éditeur visuel.

Comment utiliser le bloc HTML personnalisé ?

Tout HTML avec les balises prises en charge peut être ajouté. Vous pouvez utiliser le bloc pour les publicités, les cartes, les vidéos, tout ce qui contient des iframes, des tableaux, etc. C'est également un moyen simple de baliser votre texte, puis de le convertir en bloc de paragraphe.

Est-ce que le code couleur du balisage sera-t-il appliqué ?

Non, le balisage dans le bloc ressemble à n'importe quel éditeur de texte.

Le bloc HTML personnalisé exécute-t-il le code HTML ?

Il exécute le code HTML comme d'habitude sur le front-end. Dans l'éditeur, il peut exécuter le HTML ou vous montrer le code. C'est à vous de voir ce que vous visualisez et vous pouvez choisir entre les deux options à tout moment d'un simple clic.

Toutes les balises HTML sont-elles prises en charge ?

Non. Vous pouvez voir une liste des balises HTML prises en charge sur la page de code pris en charge par WordPress.

Conclusion

C'est notre regard sur le bloc HTML personnalisé. Ce bloc n'est pas réservé aux développeurs. Le principal avantage de l'utilisation de ce bloc est que vous n'avez pas à basculer entre l'éditeur visuel et l'éditeur de code pour travailler avec HTML. Cela signifie que vous pouvez travailler avec le reste de votre contenu affiché normalement. Vous pouvez ensuite travailler avec du HTML dans le bloc et le prévisualiser à tout moment. Le bloc HTML personnalisé permet de travailler facilement avec du HTML dans l'éditeur de blocs.

Nous voulons de vos nouvelles. Utilisez-vous le bloc HTML personnalisé ? Faites-nous part de votre expérience dans les commentaires.

Image en vedette via enterlinedesign / shutterstock.com