<

div class=”entry atype”>Il existe de nombreuses raisons pour lesquelles vous voudriez écrire ou inclure du code supplémentaire dans vos articles WordPress. Vous devrez peut-être afficher de la publicité, appliquer un style unique à certaines sections de votre site Web ou simplement marquer du texte ou du contenu pour attirer l’attention. Néanmoins, vous pouvez ajouter du code pour obtenir divers effets visuels afin d’offrir une meilleure expérience utilisateur.

Tout cela et d’autres sont des raisons valables, mais peu importe ce que vous cherchez à réaliser avec un code personnalisé, le processus d’écriture de code peut être angoissant ou carrément difficile! Dans ce tutoriel, nous couvrirons les domaines suivants:

  • Ajout de code qui ressemble à du code mais ne se comporte pas comme du code (dans le cas où vous cherchez à présenter des lignes de code ou à améliorer l’apparence de votre site Web)
  • Ajout de code destiné à se comporter comme du code, par exemple des annonces scriptées telles que Google Adsense Ads

Sous ces deux catégories, nous approfondirons un peu le code de programmation tel que HTML, CSS, Javascript et aborderons les publicités et la beauté du conteneur

<

div>. Maintenant, sans plus de fanfare, passons aux choses sérieuses et écrivons du code.

Ajout de code qui ressemble à du code mais ne se comporte pas comme du code

Si vous souhaitez présenter du code (peut-être que vous êtes un concepteur ou un développeur Web) que vos utilisateurs peuvent copier et coller, il est important de le faire correctement car même un seul saut de ligne peut gâcher le code, d’où tout votre travail. La façon dont votre code sera interprété par WordPress dépend de l’utilisation de l’éditeur HTML ou Visual Post. Entrer votre code directement dans l’éditeur visuel n’aura pas l’effet que vous souhaitez créer, car l’éditeur visuel considère le code comme du texte normal, ce qui signifie que les navigateurs Web n’interpréteront pas votre code comme du «code», mais comme du texte ordinaire.

D’un autre côté, l’éditeur de publication HTML reconnaîtra tout balisage HTML ou CSS que vous utilisez, ce qui signifie qu’ils seront interprétés par le navigateur Web, ce qui pourrait entraîner des mises en page désordonnées et un contenu d’apparence géniale. Par exemple,

<

div> dans l’éditeur visuel sera interprété comme du texte ordinaire et le résultat sera juste

<

div>. Cependant,

<

div> dans l’éditeur HTML sera interprété comme du balisage HTML et le résultat sera la création d’un conteneur.

Un exercice HTML

C’est vraiment un exercice de futilité, mais vous pouvez l’essayer pour avoir une idée plus claire de ce que je veux dire. Ouvrez simplement votre Éditeur HTML, tapez

<

div> et enregistrez-le comme brouillon. Une fois votre brouillon enregistré, cliquez sur “Aperçu de l’article” pour voir votre site Web mutilé. Ne vous inquiétez pas, ce n’est pas permanent et vous pouvez simplement supprimer le brouillon. Revenons maintenant aux affaires.

En règle générale, vous pouvez utiliser le code de deux manières. Tout d’abord, vous pouvez utiliser du code dans une ligne (ou un paragraphe) pour clarifier un point concernant votre code. Deuxièmement, vous pouvez écrire, mettre en évidence et mettre votre code dans un bloc comme celui-ci:

<html>
<head>
<title>Writing Code in WordPress Posts Tutorial</title>
<link rel="stylesheet" type="text/css" href="somefile.css"/>
</head>
<body>...</body>
</html>

Pour obtenir l’effet ci-dessus, nous utilisons la balise de code écrite comme … Notre code entre ici . Remplacez les flèches (<>) par des crochets ( [ ] ) en fonction de votre site WordPress et de l’éditeur de publication que vous utilisez (visuel ou HTML). Le code que vous souhaitez afficher doit être compris entre la balise d’ouverture, et la balise de fermeture, . Par exemple, pour utiliser du code dans un paragraphe:

La balise de code donne au texte non HTML un aspect de code, mais elle n’indique pas au navigateur Web d’interpréter le balisage HTML ou de le supprimer de la publication. Cela signifie qu’un navigateur peut toujours encoder votre balisage HTML, ce qui rend difficile la présentation Balises HTML dans votre code. Cependant, vous pouvez surmonter ce problème en utilisant des caractères étendus ou des entités de caractères pour représenter les caractères <>, ce qui trompera tous les navigateurs. Par exemple…

Les balises HTML peuvent être interprétées comme du balisage HTML

… Va créer un nouveau conteneur (grâce à

<

div>) et un en-tête (

<

h1>), ce qui gâchera votre page Web. Mais si vous utilisez des entités de caractère pour remplacer les flèches <>, vous éviterez ce comportement et produirez votre code comme vous le souhaitez. Le code ci-dessus ressemblera donc à ceci:

Utilisez plutôt des entités de caractère

Créer un bloc de code en surbrillance

Si je voudrais mettre en évidence un bloc de code (ou même du texte) pour obtenir quelque chose comme;

Bloc de code

Je commence par mettre le code (ou texte) dans un conteneur comme ceci:

Vous devez le faire dans l'éditeur HTML

Ensuite, j’ajoute du style en utilisant CSS soit directement (comme dans l’image ci-dessus) soit via le style.css fichier trouvé dans le dossier principal de votre thème.

Style de vos étiquettes de code

La balise de code utilisera la taille de la police de et mettra le texte dans une police à espacement fixe par défaut. Vous pouvez changer tout cela pour que votre code soit exactement comme vous le souhaitez. Il ne vous reste plus qu’à ajouter…

 code{font-size:1.2em; color:#000; font-weight:normal;} 

… Ou quelque chose de similaire à votre style.css. Il existe des styles illimités et tout dépend de vos préférences personnelles, alors ne vous retenez pas – le style à l’écart.

Ajout de code qui se comporte comme du code

Cette section est particulièrement utile si vous souhaitez afficher des publicités ou d’autres scripts, par exemple des extraits de code Javascript dans vos articles. Bien qu’il existe des plugins, tels que Adsense rapide, qui vous aidera à gérer les publicités dans vos messages, vous pourriez être intéressé par l’installation de scripts autonomes sur lesquels vous avez un contrôle total.

Si votre annonce est une simple image et un lien, vous pouvez ajouter l’annonce dans votre publication via l’utilitaire de téléchargement. Téléchargez simplement l’image et entrez votre lien (et peut-être une légende) et votre travail est terminé. Cette méthode est cependant limitée car vous ne pouvez aligner votre annonce qu’à gauche, à droite ou au centre – tout comme une image typique. Vous pouvez également créer un conteneur dans votre article à l’aide de l’éditeur HTML.

Exemple:

<div id="ad1">
<a href="ad_link"><img src="image_location" height="yy" width="xx" alt="Ad_title"/>
</a>
</div>

Créez ce conteneur exactement à l’endroit où vous voulez votre annonce, ce qui signifie que vous devez préparer la publication avant d’ajouter l’annonce. Une fois que le conteneur est prêt, vous pouvez le styliser comme vous le souhaitez. Vous pouvez le déplacer en utilisant votre style.css en utilisant le position propriété. Si vous souhaitez exécuter un Annonce Google Adsense dans vos messages, vous pouvez toujours utiliser Adsense rapide – le plugin – ou créez un conteneur et placez votre code d’annonce comme ceci:

<div id="ad1">

<script type="text/javascript"><!--
google_ad_client = "ca-pub-1289628145978703";
/* vistamediainc1 */
google_ad_slot = "7102844977";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script> </div>

Note 1: Les publicités Google sont basées sur Javascript et peuvent être interprétées par tous les principaux navigateurs Web à condition que l’utilisateur ait activé Javascript sur ses machines.

Note 2: Vous devez choisir les bonnes dimensions d’annonce pour votre site Web pour éviter de gâcher vos publications ainsi que votre site Web.

Si vous souhaitez ajouter une annonce permanente qui apparaîtra dans tous vos messages (messages actuels et futurs) sans aucun travail supplémentaire, vous devrez modifier le Modèle de message unique (single.php). J’ai placé une annonce de 468 pixels sur 60 pixels en haut de tous mes messages en ajoutant le code suivant au single.php juste après <- - FIN post-entrée-méta - ->.

<div id="ad1"> <script type="text/javascript"><!--
google_ad_client = "ca-pub-1289628145978703";
/* vistamediainc1 */
google_ad_slot = "7102844977";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script> </div>

Bien sûr, vous devez utiliser votre propre Google Ads 🙂 Voici comment l’annonce Google Adsense apparaît sur mon blog:

Écrire du code dans WordPress

Trouver single.php, allez à votre Panneau d’administration – >> Apparence – >> Editeur – >> single.php. Une fois single.php ouvert, utilisez la barre de recherche (Ctrl + F) pour localiser <- - FIN post-entrée-méta - ->.

Vous pouvez laisser le conteneur tel quel ou le styliser en utilisant style.css comme bon vous semble. Et n’oubliez pas de sauvegarder toutes les modifications. Le conteneur

est vraiment utile, et lorsque vous le combinez avec du CSS et une once de créativité, vous pouvez accomplir beaucoup de choses avec votre site WordPress. Cela peut vous aider à placer n’importe quel code (ou quelque chose de vraiment) n’importe où sur votre site Web.

La boîte à outils

Si vous souhaitez en savoir plus sur l’écriture de code personnalisé dans vos articles WordPress, n’hésitez pas à consulter les ressources suivantes:

Eh bien, c’est à peu près tout. Nous avons réussi à couvrir les domaines que nous avons décrits au début. Mais si vous ne comprenez aucun concept dans cet article, ou si vous souhaitez ajouter vos suggestions ou vos opinions, veuillez partager vos réflexions dans la section commentaires ci-dessous!

Share: