Comment utiliser les blocs de code dans WordPress
WordPress est un système de gestion de contenu robuste qui alimente plus de la moitié de tous les sites Web sur l’Internet. Le CRM intégré permet de créer facilement un site Web même si vous n’avez jamais écrit de programme informatique auparavant. S’il est si facile d’afficher un bloc de texte normal sur un site WordPress, il n’en va pas de même pour le code informatique. Un morceau de code doit être correctement affiché pour que les téléspectateurs puissent l’analyser et le comprendre. Et c’est là qu’interviennent les blocs de code WordPress.
Si vous voulez savoir comment utiliser les blocs de code dans WordPress, vous êtes au bon endroit. Dans cet article, nous vous guiderons tout au long du processus afin que vous puissiez commencer à partager des extraits de code avec vos lecteurs. Continuez à lire pour en savoir plus.
Comment utiliser les blocs de code dans WordPress
Afficher un programme informatique comme un texte de page Web normal peut être désastreux. De nombreux utilisateurs auront du mal à visualiser et à comprendre. Heureusement, de nombreux éditeurs WordPress ont une fonctionnalité de blocs de code qui vous permet d’afficher un programme informatique dans un format de code.
Heureusement, l’utilisation de blocs de code pour afficher le code informatique est relativement facile. Pour commencer, vous devrez passer à l’éditeur WordPress natif car certains plugins de texte peuvent ne pas avoir la fonctionnalité. Une fois que vous avez fait cela, suivez ces étapes pour ajouter un bloc de code sur une page de site Web :
Ouvrez la page Web à laquelle vous souhaitez ajouter un bloc de code en cliquant sur le bouton”Nouveau”.
Tapez”/code”et appuyez sur”Entrée”.
Tapez ou collez le code que vous souhaitez afficher et appuyez sur la touche”Entrée”.
Vous pouvez également utiliser la barre d’outils du bloc de code pour personnaliser l’apparence du code que vous venez d’écrire. Par exemple, vous pouvez utiliser le bouton”B”pour mettre une ligne en gras ou le bouton”i”pour la mettre en italique.
Une fois que vous avez terminé de créer votre page Web, cliquez sur le bouton”Aperçu”pour voir à quoi ressemblera le bloc de code sur une version en direct.
Si vous êtes satisfait des résultats finaux, appuyez sur le bouton”Mettre à jour”pour que les autres voient également le bloc de code.
Comment changer la typographie de votre bloc de code
La typographie en dit long et peut faire ou défaire l’esthétique non seulement de votre bloc de code, mais aussi de la page Web entière. Pour modifier la typographie de votre bloc de code, procédez comme suit :
Mettez en surbrillance le bloc de code dont vous souhaitez modifier la typographie.
Cliquez sur l’icône”Paramètres”dans le coin supérieur droit de écran.
Sous la section”Typographie”, spécifiez votre typographie préférée.
Cliquez sur le bouton”Mettre à jour”pour enregistrer les modifications.
Vous pouvez personnaliser davantage l’esthétique du bloc en modifiant la couleur, l’arrière-plan, l’espacement des lettres et l’espacement des lignes.
Par exemple, si vous avez un site Web sur le thème sombre, vous pouvez également souhaiter que votre bloc de code ait un arrière-plan différent.
Comment supprimer un bloc de code dans WordPress
Les blocs de code ne sont pas permanents et, comme tout autre élément d’une page Web WordPress, vous pouvez les supprimer. Voici comment procéder :
Ouvrez la page Web ou la publication contenant le bloc de code que vous souhaitez supprimer.
Cliquez sur le bloc de code que vous souhaitez supprimer pour le mettre en surbrillance il.
Sur le widget qui apparaît tout en haut du bloc de code, cliquez sur les trois points.
Dans les options, sélectionnez”Supprimer le code.”
L’action ci-dessus devrait supprimer l’intégralité du bloc de code de la page Web. Alternativement, vous pouvez simplement sélectionner le bloc et appuyer sur le Touche « Supprimer ». Vous pouvez également appuyer simultanément sur les touches”Ctrl”+”Maj”+”Z”et cela devrait donner les mêmes résultats.
Comment modifier un bloc de code déjà publié
De temps en temps, vous êtes obligé de faire des erreurs. Vous pouvez également tomber sur une meilleure façon d’exécuter l’idée via le code. WordPress vous permet de modifier des blocs de code déjà existants en suivant les instructions ci-dessous :
Ouvrez le page contenant le bloc de code que vous souhaitez modifier.Cliquez sur”Modifier”.
Cliquez sur le bloc de code pour activer la modification du code.
Une fois que vous avez terminé d’apporter les modifications, cliquez sur le bouton”Mettre à jour”.
Comment ajouter un bloc de code à votre site Web WordPress à l’aide d’un plugin
Si vous ajoutez souvent des extraits de code à votre site Web, il peut être préférable d’obtenir un plugin plus robuste pour vous aider tu. Le plug-in SyntaxHighlighter Evolved est un bloc de code populaire, puissant et excellent.
Ce plugin a un avantage sur l’éditeur WordPress natif car :
Il met en évidence le nombre de lignes dans un extrait de codeIl prend en charge plusieurs langages de programmationIl permet à vos spectateurs de copier et coller le code affiché
Voici comment utiliser le plug-in pour mieux gérer les extraits de code sur votre site Web :
Installez et activez SyntaxHighlighter Evolved plugin.
Ouvrez la page ou publiez si vous souhaitez ajouter un bloc de code.
Activez l’édition et cliquez sur le bouton plus.
Rechercher”SyntaxeHighLigh ter Evolved”et ouvrez le premier résultat qui apparaît.
Collez ou écrivez le code dans le bloc de code disponible.
Cliquez sur l’icône des paramètres en haut à droite coin de l’écran et accédez à l’onglet”Bloquer”.
Indiquez comment vous souhaitez que votre numérotation apparaisse et quelles lignes de code vous souhaitez mettre en surbrillance.
Vous pouvez également activer”Rendre les URL cliquables”si vous souhaitez rendre votre code cliquable.
Pour modifier la couleur et le schéma de formatage de votre bloc de code, suivez ces étapes :
Allez dans”Paramètres”et accédez à la section”SyntaxeHighlighter”.
Changez le thème de votre bloc.
Appuyez sur”Enregistrer”le”Aperçu”pour prévisualiser à quoi ressembleront les modifications en mode direct. 
Foire aux questions supplémentaires
Comment faire en sorte qu’un code bloque un lien cliquable ?
Pour qu’un code bloque un lien à l’aide de la Éditeur WordPress, suivez ces étapes :
1. Sélectionnez la ligne de code que vous souhaitez utiliser comme lien.
2. Dans le widget contextuel, sélectionnez l’icône de lien. Vous pouvez également appuyer sur les touches”Ctrl”+”K”de votre clavier.
3. Entrez l’URL vers laquelle vous voulez que le code soit lié et appuyez sur la touche”Entrée”.
Puis-je mettre en surbrillance le code à l’aide de l’éditeur de blocs de code fourni par l’éditeur WordPress ?
Non, le Le bloc de code fourni par l’éditeur natif de WordPress ne permet pas aux utilisateurs de copier et coller le code. Pour ce faire, vous aurez besoin de l’aide d’un plugin d’édition de bloc de code avancé comme le plugin”SyntaxHighligher Evolved”.
Elementor a-t-il une fonctionnalité de blocs de code ?
Elementor est un plug-in de glisser-déposer populaire utilisé pour créer des sites Web WordPress. Malheureusement, si vous utilisez le plugin pour créer des sites Web, vous ne trouverez pas de bloc vous permettant de formater des programmes informatiques sur votre site Web. Par conséquent, vous devez passer à l’éditeur WordPress conventionnel pour terminer la tâche.
Mettez votre site Web en service
Que vous gériez un blog de programmation ou que vous aimiez simplement partager des extraits de code sur votre site Web, il est très important de savoir comment utiliser les blocs de code dans WordPress. Les blocs de code donneront à vos lecteurs un temps facile et augmenteront globalement l’expérience utilisateur de votre site Web. Et comme vous pouvez le constater, l’insertion de blocs de code est un processus relativement simple, en particulier avec l’éditeur WordPress natif.
Avez-vous essayé d’utiliser les blocs de code fournis par WordPress ? Qu’en est-il du plugin SyntaxHighlighter Evolved ? Veuillez partager avec nous votre expérience dans la section des commentaires ci-dessous.
Avertissement : certaines pages de ce site peuvent inclure un lien d’affiliation. Cela n’affecte en rien notre rédaction.