Comment utiliser le bloc de code WordPress

L'affichage du code dans les pages et les publications WordPress peut être délicat. Le simple fait de publier le code dans le contenu peut avoir des résultats intéressants, surtout si WordPress l'affiche de manière incorrecte ou si votre sécurité vous empêche d'effectuer des activités malveillantes. Heureusement, le bloc de code WordPress facilite l'affichage d'extraits de code. Savoir comment utiliser ce bloc vous aidera à afficher le code dans votre contenu de la meilleure façon pour votre site Web et vos lecteurs.

Dans cet article, nous examinerons le bloc de code WordPress et verrons ce qu'il fait. Nous verrons comment l'ajouter à vos publications et pages et examinerons ses paramètres et ses options. Attendez jusqu'à la fin pour voir des conseils et des bonnes pratiques sur la façon de l'utiliser et voir les questions fréquemment posées.

Abonnez-vous à notre chaîne Youtube

Comment ajouter le bloc de code à votre publication ou page

Pour ajouter le bloc de code à vos pages et publications, sélectionnez l'outil d'insertion de bloc à côté de la zone de contenu où vous souhaitez placer le bloc, ou sélectionnez l'outil d'insertion dans le coin supérieur gauche de la page. Entrez le nom du bloc et sélectionnez-le lorsqu'il apparaît ou faites défiler les blocs pour voir ce qu'il y a.

Si vous préférez, vous pouvez taper /code dans la zone où vous souhaitez que le bloc apparaisse. Ensuite, appuyez simplement sur Entrée ou sélectionnez le bloc parmi les options qui apparaissent.

Vous avez maintenant un bloc de code dans votre contenu où vous pouvez ajouter n'importe quel type de code que vous souhaitez afficher. Le code est automatiquement marqué avec des balises de code, il s'affiche donc correctement en tant que code. Cela aide à fournir des exemples pour les lecteurs à apprendre ou à utiliser dans leurs propres projets. Dans cet exemple, j'utilise le pseudo-code de la page de support WordPress (parce que) lazy.level = advanced.

Paramètres et options du bloc de code

Le bloc de code a deux endroits où vous trouverez des paramètres et des options. Le premier est la barre d'outils de code au-dessus du bloc. La seconde est les options dans la barre latérale droite. Nous regarderons les deux.

Barre d'outils du bloc de code

Cliquez n'importe où dans le bloc pour voir sa barre d'outils. Si vous ne voyez pas tous les outils, placez votre souris sous le bloc dans un nouvel emplacement de bloc, puis cliquez sur le bloc. Tous les paramètres apparaîtront.

Modifier le type ou le style de bloc de code

Le premier paramètre utilise les flèches gauche et droite. Cela change le bloc en un bloc HTML personnalisé, un bloc préformaté, modifie les colonnes et vous permet de créer un groupe afin que vous puissiez ajuster la couleur d'arrière-plan, choisir les bordures et ajuster d'autres options. Survoler eux vous donne un aperçu de l'apparence de chacun. Je survole l'option HTML personnalisé.

Glisser

L'outil glisser comprend six points. Saisissez ces points pour faire glisser le bloc où vous le souhaitez. Une ligne bleue apparaît où elle sera placée à chaque emplacement possible lorsque vous survolez les différentes zones.

Lorsque vous le déposez, le bloc sera placé à son nouvel emplacement.

Se déplacer

Les flèches de déplacement haut et bas déplacent le bloc vers le haut ou vers le bas d'un bloc dans les blocs de contenu à chaque fois que vous cliquez dessus.

Gras et italique

Les paramètres en gras et en italique s'appliquent au code que vous avez mis en surbrillance. Vous pouvez les utiliser ensemble ou individuellement. J'utilise à la fois ensemble et indépendamment dans cet exemple. Le est un bon moyen d'attirer l'attention sur certaines lignes ou commandes dans le code.

Relier

Le lien vous permet de faire de n'importe quel code un lien cliquable. Vous pouvez rechercher ou saisir l'URL de la portion de code que vous avez mise en surbrillance. C'est bien si vous souhaitez créer un lien vers des tutoriels pour chacune des commandes, d'autres exemples, d'où vient le code, etc. Vous pouvez ouvrir le lien dans le même onglet ou dans un nouvel onglet.

Plus de réglages

Les paramètres supplémentaires du bloc de code ouvrent une liste déroulante avec plusieurs options. J'ai appliqué chacune des options de cet exemple.

Code en ligne – affiche le texte formaté en code. Il place le texte sur une ligne par lui-même. Étant donné que tout est formaté en tant que code, la police a la même apparence.

Image en ligne – place une image dans le texte à l'endroit où vous avez placé la souris. Il ouvre la bibliothèque multimédia où vous pouvez sélectionner une image. Si vous cliquez sur l'image, vous verrez une liste déroulante dans laquelle vous pouvez modifier sa largeur.

Saisie clavier – ajoute des balises de clavier au code que vous avez sélectionné. Le code est affiché dans la police monospace par défaut du navigateur.

Barré – ajoute une ligne dans le code que vous avez mis en surbrillance.

Indice – formate le code en indice.

Exposant – formate le code en exposant. Vous pouvez utiliser l'indice et l'exposant ensemble. Cela réduit la taille de la police et centre horizontalement le code.

Couleur du texte – modifie la couleur du code que vous avez mis en surbrillance. Sélectionnez parmi des couleurs prédéfinies, choisissez une couleur dans l'outil de sélection de couleurs ou entrez la valeur sous forme de HEX, RBG ou HSL.

Options

Les options Bloc de code sont placées dans les trois points à l'extrême droite de la barre d'outils. Les options comprennent :

Masquer plus de paramètres – masque la barre latérale droite pour vous offrir un espace de travail propre et large.

Copier - copie le bloc afin que vous puissiez le coller n'importe où dans la zone de contenu.

Dupliquer – dupliquer le bloc et le placer sous l'original.

Insérer avant – ajoute une zone de contenu au-dessus du bloc de code.

Insérer après – ajoute une zone de contenu sous le bloc de code.

Déplacer vers - vous permet de déplacer le bloc en plaçant une ligne bleue que vous pouvez déplacer vers le haut ou vers le bas avec les touches fléchées. Lorsque vous obtenez la ligne à l'emplacement souhaité, appuyez simplement sur Entrée.

Modifier en HTML - modifications apportées à l'éditeur de code pour le bloc où vous pouvez modifier le code en HTML. Sélectionnez Modifier visuellement pour remettre le bloc en mode visuel.

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

Groupe - ajoute le bloc à un groupe afin que vous puissiez y apporter des modifications en tant qu'unité unique.

Supprimer le bloc – supprime le bloc de code.

Paramètres de bloc de code

Les paramètres du bloc de code sont placés dans la barre latérale droite. Ils incluent la typographie et les paramètres avancés. La sélection du bloc affichera les paramètres. Si la barre latérale ne s'affiche pas, cliquez sur l'icône d'engrenage dans le coin supérieur droit.

Typographie

La typographie vous permet de sélectionner la taille de la police pour l'ensemble du bloc. Choisissez la taille de la police dans une liste déroulante avec 7 tailles ou entrez une taille personnalisée dans le champ. Cliquez sur Réinitialiser pour rétablir la taille de police par défaut.

Avancée

Les paramètres avancés incluent une ancre HTML et un champ pour des classes CSS supplémentaires. L'ancre est une URL uniquement pour ce bloc afin que vous puissiez y accéder directement. Le champ Classes CSS supplémentaires vous permet d'ajouter une classe CSS personnalisée pour styliser le bloc.

Conseils et bonnes pratiques pour une utilisation efficace du bloc de code

Utilisez ce bloc chaque fois que vous souhaitez afficher du code dans votre contenu. Le code lui-même n'a aucun effet sur le bloc.

Formatez le code avec des espaces comme vous le feriez lors de la création de code avec un éditeur de texte. Utilisez les paramètres gras et italique pour attirer l'attention sur certains extraits de code.

Comme pour tout code, étiquetez-le bien pour qu'il soit facile à comprendre. Vous pouvez commenter le code ou ajouter des notes dans le bloc, mais assurez-vous qu'elles ne se trouvent pas dans les éléments de code au cas où quelqu'un voudrait copier le code.

Foire aux questions sur le bloc de code

Quel est le but du bloc de code WordPress ?

Pour afficher le code pour que d'autres puissent le voir et l'utiliser. Il affiche le code dans une mise en page propre qui maintient votre espacement.

Le bloc de code exécute-t-il le code ?

Non. Il affiche le code formaté afin que vos lecteurs puissent le voir et l'utiliser. Le code est automatiquement encapsulé avec les balises de code HTML.

Quels types de code peut-il afficher ?

Il affichera n'importe quel code de n'importe quel langage de programmation ou de script. La langue ne fait aucune différence.

Formate-t-il le code ?

Non. Il ne fonctionne pas comme un éditeur de code, il ne modifie donc pas l'espacement, les couleurs, n'ajoute pas de chiffres, etc. Il affiche simplement le code tel que vous le saisissez.

En quoi le bloc de code est-il différent du bloc HTML ?

Le bloc HTML vous permet de créer du HTML sans avoir à passer à l'affichage de l'éditeur de code de votre page. Il exécutera le code HTML sur le front-end. Vous pouvez prévisualiser les résultats depuis le back-end. Vous pouvez utiliser le bloc de code pour afficher du code HTML si vous ne souhaitez pas qu'il s'exécute.

En quoi est-il différent du bloc préformaté ?

Le bloc préformaté affiche le texte avec vos espaces dans une police à espacement fixe. Il ajoute des couleurs de police et d'arrière-plan pour les options de la barre latérale.

Conclusion

C'est notre regard sur le bloc de code WordPress. Le bloc est simple et facile à utiliser. Comme il n'exécute pas le code, la langue elle-même n'a pas d'importance. Ce bloc fournit un bon moyen d'afficher tout type de code pour que vos lecteurs puissent le copier ou en tirer des leçons.

Nous voulons de vos nouvelles. Avez-vous utilisé le bloc de code WordPress ? Dites-nous ce que vous en pensez dans les commentaires.

Image en vedette via Danielala / shutterstock.com