Ajouter une bannière sur WordPress
Lorsque l’on décide de monétiser son site, on peut penser à placer des bannières. Certains thèmes WordPress intègrent par défaut une ou plusieurs positions pour en insérer. Pour les autres, sans quelques connaissances en HTML et CSS, il peut parfois être compliqué de se lancer dans l’ajout d’une position supplémentaire.
Voici un tutoriel pas-à-pas pour rajouter une bannière à son site WordPress.
Important : avant de vous lancer, pensez à faire une sauvegarde des fichiers que vous allez modifier !
1. Ajouter la position de la bannière dans le CSS
Pour définir la position de la bannière sur vos pages, il faut la déterminer dans le CSS. Le CSS (aussi appelé feuille de styles) et un fichier qui gère la présentation des fichiers HTML.
Rendez-vous donc dans Apparence/Editeur et sélectionnez style.css (normalement sélectionné par défaut). Pour mon exemple, je veux insérer une bannière dans le côté de droit de mon header en laissant un léger espace entre le haut de la page et la bannière, disons 20 pixels. Le code à rajouter dans votre CSS est :
#header-mabanniere { float:right; padding-top:20px; }
Le # correspond à une div que nous créons pour ajouter la bannière. Le nom de cette div sera « header-mabanniere », elle sera alignée à droite (float:right) et sera espacée de 20 pixels avec le haut de la page (padding-top:20px).
2. Ajouter la bannière dans le fichier header.php
Pour que la bannière apparaisse sur votre site, il faut ajouter la div créée avec le CSS dans le fichier header.php. Rendez-vous donc dans Apparence/Editeur et ouvrez le fichier header.php.
Localisez le code qui gère votre logo en faisant Ctrl+F « logo ». Vous devriez trouver une ligne qui ressemble à
<div id="logo">...code de votre logo...</div>
Sous cette ligne rajoutez le code suivant :
<div id="header-mabanniere">...</div>
Vous venez d’insérer la div qui va gérer votre bannière, reste maintenant à remplacer « … » par le code qui va afficher votre bannière.
3. Insérer le code d’affichage de la bannière
Pour afficher votre bannière, vous avez plusieurs options, je vous propose ici d’en voir deux : l’upload sur son serveur ou la mise en place d’un adserver.
1. L’upload sur son serveur
Avec cette méthode, vous allez héberger votre bannière sur votre serveur. Rendez-vous donc dans Médias/Ajouter et envoyez votre bannière. Récupérez ensuite l’adresse de votre bannière qui va ressembler à ça :
http://www.votresite.com/wp-content/uploads/année/mois/nomdevotreimage.extension
Il vous suffit alors de vous rendre dans header.php et de remplacer les « … » par :
<a href="http://www.site-de-destination.com"><img alt="Texte alternatif de la bannière" src="http://www.votresite.com/wp-content/uploads/année/mois/nomdevotreimage.extension"></a>
Site-de-destination.com est l’adresse vers laquelle les internautes seront redirigés quand ils cliqueront sur la bannière. Si vous ne voulez pas que votre bannière soit cliquable, rajoutez simplement ce code :
<img alt="Texte alternatif de la bannière" src="http://www.votresite.com/wp-content/uploads/année/mois/nomdevotreimage.extension">
2. L’utilisation d’un adverser (DFP)
Sur PubContact, j’utilise un adserver. Mes publicités sont donc gérées par un outil externe : DFP. J’ai publié un tutoriel pour installer DFP, je vous laisse le consulter si ça vous intéresse.
Une fois DFP installé, il ne vous restera plus qu’à ajouter les tags fournis à la place des « … ».
Lorsque l’ajout de la bannière terminé, videz le cache de votre navigateur et allez voir si tout fonctionne sur votre site. Si vous avez un soucis, vous pouvez le poster dans les commentaires ou me contacter.
Les autres articles liés à WordPress et au blogging peuvent aussi vous intéresser ,tout comme ce tutoriel WordPress.
Comment rajouter une bannière sur son blog WordPress,
Encore faut-il avoir une publicité correcte, car certains blogs ont des bannières sur leur header qui rendent leur page d’accueil assez brouillon.
Après cela donne pas vraiment envie de visiter le blog aux visiteurs.
Salut François,
Complètement d’accord, il y a des règles d’érgonomie à respecter. J’en parle d’ailleurs dans un article comment placer ses publicités.
Salut Robin,
Encore un article intéressant ma foi. Moi qui était très sceptique en découvrant ton site (tu es sur un secteur assez actif et concurrentiel -> webmarketing et co), je suis ravi.
Bonne continuation.
Salut Bruno,
Merci pour ton commentaire. C’est vrai qu’il y a pas mal de blogs qui traitent de webmarketing et pour me différencier j’essaye de proposer des infos qu’on ne trouve pas ailleurs 🙂
Bonjour Robin,
Merci pour ce tutoriel très intéressant. J’ai beaucoup aimé l’article « placer ses publicités » qui relève de l’ergonomie et de la conversion Web.
amicalement
Salut Robin,
Alors là, ça tombe vraiment à pic pour ma part, puisque pas plus tard qu’hier, je cherchais comment insérer une bannière à droite dans le header.
Bon reste maintenant à mettre en pratique et c’est là que ton aide va m’être extrêmement précieuse puisque je suis loin d’être un pro des codes ^^
dans la feuille CSS, il faut insérer seulement : #header-mabanniere { float:right; padding-top:20px; } ??
Et y’a-t-il un emplacement précis où l’insérer??
Pour l’insertion dans le fichier header, ça devrait être gérable!!
Merci par avance.
Léa
Salut Léa,
Il te suffit en effet d’insérer le code dans la feuille de style là où tu veux. En général je définis une zone spéciale où j’aurai tous mes ajouts.
Si tu as un soucis ou des questions, n’hésite pas à m’envoyer un email.
Merci pour l’article
Connais tu un plugin qui permet d’ajouter des pubs sans avoir a coder?
Il y en a un qui est expliqué ici : http://www.pubcontact.com/plugin-code-wordpress par contre tu ne peux pas l’utiliser pour le header de ton blog.
Bonjour,
C’est très intéressant pour ceux qui acceptent de toucher au code.
Par contre, je pense qu’il faut éviter de mettre de la pub en header, car ce n’est pas 1 endroit payant (de ma propre expérience).
L’endroit qui paie le mieux reste en tête d’article et pour cela, j’utilise le plugin Header and Footer.
Le header n’est en effet pas le meilleur endroit pour mettre une pub (voir d’ailleurs cet article http://www.pubcontact.com/avoir-blog-parfait-2) mais c’est intéressant pour ajouter un message autour de son blog. Avec une bannière ça devient plus facile à afficher que du code pure puisqu’il s’agit d’une simple image.
Bonjour,
Vraiment bien fait votre tuto ! Toutefois je rencontre un petit problème (je suis débutant…) : je ne trouve pas l’emplacement dans le fichier Header (même en faisant CTRL+F « logo ». Je précise que j’utilise le template Graphène.
Je voudrais rajouter une bannière publicitaire dans mon header enhaut à droite…
Auriez-vous une petite idée ?
En vous remerciant,
Anthony
Bonjour Anthony,
A l’heure actuelle, tout ton header est une seule image (ton logo + le texte « chasseur de design en tout genre »). Tu ne pourras donc pas insérer une bannière dans cette zone-là, il faudrait voir comment tu as inséré cette image.
Merci pour ta réactivité ! Tu as raison mon header est une seule image. Par contre je peux bel et bien insérer une bannière publicitaire PAR-DESSUS grâce à une boucle de mon template. Le problème est que cette boucle est alignée à gauche, je souhaiterais l’aligner à droite.
Une idée ? 🙂
Quel type de code gère ta boucle?
Désolé pour le retard, le problème est résolu ! Il y avait un emplacement « header droit » aussi… chui nul… 🙂
Merci d’avoir pris le temps de réfléchir à mon problème.
Anthony
Un bon début pour ceux qui souhaitent apprendre le CSS et le PHP ! D’ailleurs, cela marche partout dans le footer, dans la sidebar, etc. ! Je suis assez d’accord sur le fait que la pub en header, c’est assez moche en revanche 🙂
Merci pour le tuyau… il faut que je m’y colle mais je patauge un peu… faut dire que je suis assez nouveau sur WordPress !
Bonne continuation
Claude