Il existe de nombreuses raisons pour lesquelles vous voudriez écrire ou inclure du code supplémentaire dans vos publications 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 du code personnalisé, le processus d’écriture de code peut être éprouvant pour les nerfs 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 (au cas où vous chercheriez à 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 publicités scriptées telles que les publicités Google Adsense
Dans 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
Ajouter du code qui ressemble à du code mais qui ne se comporte pas comme du code
Si vous souhaitez présenter du code (vous êtes peut-être 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 si vous utilisez l’éditeur HTML ou Visual Post. La saisie de 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 peut entraîner des mises en page gâchées et un contenu d’apparence géniale. Par exemple,
Un exercice HTML
C’est vraiment un exercice futile, mais vous pouvez l’essayer pour avoir une idée plus claire de ce que je veux dire. Ouvrez simplement votre Éditeur HTML, tapez
Généralement, 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 va 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 se situer entre la balise d’ouverture,
et la balise de fermeture,
. Par exemple, pour utiliser du code dans un paragraphe:
La balise de code fait ressembler le texte non HTML à du 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 ton 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…
… va créer un nouveau conteneur (grâce à
), ce qui va chambouler votre page web. Mais si vous utilisez des entités de caractères pour remplacer les flèches < >, vous éviterez ce comportement et afficherez votre code comme vous le souhaitez. Le code ci-dessus ressemblera donc à ceci :
Créer un bloc de code en surbrillance
Si je souhaite mettre en surbrillance un bloc de code (ou même du texte) pour obtenir quelque chose comme ;
Je commence par mettre le code (ou le texte) dans un conteneur comme ceci :
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.
Stylisez vos balises de code
La balise de code utilisera la taille de police du
et mettra le texte dans une police à espacement fixe par défaut. Vous pouvez changer tout cela pour que votre code ressemble exactement à ce que vous voulez. 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 un nombre illimité de styles et tout dépend de vos préférences personnelles, alors ne vous retenez pas – éloignez-vous du style.
Ajouter du 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 Javascript dans vos messages. Bien qu’il existe des plugins, tels que Adsense rapide, qui vous aidera à gérer les publicités dans vos publications, 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 message 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, comme une image typique. Alternativement, vous pouvez 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à où vous voulez votre annonce, ce qui signifie que vous devez avoir la publication prête avant d’ajouter l’annonce. Une fois que le conteneur est prêt, vous pouvez le coiffer comme vous le souhaitez. Vous pouvez le déplacer en utilisant votre style.css en utilisant le position biens. 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’annonces pour votre site Web afin d’éviter de gâcher vos publications ainsi que le site Web.
Si vous souhaitez ajouter une annonce permanente qui apparaîtra sur tous vos articles (articles actuels et futurs) sans aucun travail supplémentaire, vous devrez modifier le Modèle de publication unique (single.php). J’ai placé une annonce de 468px par 60px en haut de tous mes messages en ajoutant le code suivant au unique.php juste après < – – END post-entry-meta – ->.
<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 vos propres annonces Google 🙂 Voici comment l’annonce Google Adsense apparaît sur mon blog :
Trouver unique.php, allez dans votre Panneau d’administration ->> Apparence ->> Éditeur ->> single.php. Une fois single.php ouvert, utilisez la barre de recherche (Ctrl + F) pour localiser < – – END post-entry-meta – ->.
Vous pouvez laisser le conteneur tel quel ou le styler en utilisant style.css comme bon vous semble. Et n’oubliez pas d’enregistrer toutes les modifications. Le conteneur
La boîte à outils
Si vous souhaitez en savoir plus sur l’écriture de code personnalisé dans vos publications WordPress, n’hésitez pas à consulter les ressources suivantes :
- Écrire du code dans vos messages
- Entités de personnage amusantes
- Utiliser Javascript dans les articles
- Utiliser HTML dans les articles WordPress
- Rédaction de code WordPress sécurisé (Diaporama)
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 points de vue, veuillez partager vos réflexions dans la section commentaires ci-dessous !