ajouter banniere blog wordpress

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.

VN:F [1.9.22_1171]
Rating: 3.9/5 (11 votes cast)
Comment rajouter une bannière sur son blog WordPress, 3.9 out of 5 based on 11 ratings