… pour un cerveau en bonne santé et un web plus propre, nous vous conseillons d’en installer un.
Étant un peu fatigué de me faire traiter de voleur quand je navigue sur le web, j’avais envie de faire passer le message inverse aux (rares) personnes qui s’aventureraient sur mon site sans bloqueur la publicité.
La publicité est un fléau qui perturbe notre esprit et manipule l’information soit disant «indépendante» des supports qui l’utilisent. De plus, elle impose une «taxe privée» sur tous les produits que l’on achètent (la pub n’est pas du tout gratuite, c’est bien le consommateur qui paye).
L’idée est donc d’afficher un message en encart à gauche sur mon site qui se fasse bloquer si la personne bloque la pub. Comme c’est un wordpress mon but est aussi de faire le moins de code php/javascript/html possible en utilisant les outils intégrés.
Ajout de l’encart
Pour ajouter cet encart il suffit simplement de se rendre dans l’interface d’administration de son wordpress et d’ouvrir le menu «apparence->widget». Dans la liste des widgets disponibles par défaut se trouve normalement un widget «texte». Il suffit de le faire glisser dans la zone où l’on souhaite voir apparaitre le texte.
Pour que le texte se fasse bloquer par votre bloqueur de publicité l’astuce est de l’encadrer par une balise div nommé «blogads» tout simplement.
Et voila ! Si vous bloquez la publicité vous ne verrez pas l’encart en haut à droite de ce site. Sinon vous aurez le message.
Par contre je doit avoir un peu trop de bloqueurs de publicités d’installés sur mon firefox car même si je désactive ublock origin et ghostery je ne vois pas l’encart. Je suis obligé de tester avec Konqueror pour le voir 😉
Merci à Jehan pour le tuyau.
[EDIT du 19/01/2017]
J’ai ajouté un peu de code CSS histoire que l’encart soit un peu plus visible :
.blogads {
font-size: 130%;
padding: 7px;
font-weight: bold;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border: 1px solid #DDD;
background: orange;
}
Pour ajouter du code CSS dans wordpress il suffit de se rendre dans la rubrique
apparence -> personnaliser -> CSS additionnelle
