Créer/publier un plugin wordpress simple : « Adblock invite »

Suite à mon article « Incitateur anti-pub« , des demandes ont émergé concernant un plugin WordPress. Très enthousiaste, je l’ai réalisé. Il s’appelle adblock-invite et il est sous licence Beerware. C’est le premier plugin wordpress que je réalise, il est relativement simple et me semble un bon moyen concret de commencer avec WordPress (plus sympa que le « hello world »).

Note : pour ceux qui souhaitent un anti-pub standalone réferez-vous à cet article.

Le but du plugin est simple ; il s’agit d’un Widget avec un champs « titre » (pour le titre du bloc) et un champs « message ». Ce widget ne s’affichera que lorsque le visiteur n’aura pas d’anti-pub.

Créer, tester votre code

Dans le répertoire wp-content/plugins/ nous allons créer arborescence suivante :

$ cd wp-content/plugins/
$ mkdir adblock-invite
$ tree
.
+--- screenshot-1.png
+--- screenshot-2.png
+--- testads
|   +--- banners.js
+--- widget.php
+--- style.css
+--- readme.txt

Détail de l’arborescence :

  • screenshot-*.(png|jpg|jpeg|gif) : Les captures d’écrans du résultat final
  • testads/banners.js : Présent pour simuler une publicité
  • widget.php : Le code PHP d »exécution du script (Détaillé ci-après)
  • style.css : une mini feuille de style simplement destiné à mettre un « display: none » à l’initialisation du widget
  • readme.txt : Très important, pour construire le vôtre, référez vous au readme.txt standard & au readme validator de wordpress

Le fichier widget.php est le cœur du plugin, voici son contenu (A l’heure ou j’écris il est en  0.1)

<?php
/*
Plugin Name: Adblock invite (Yes Adblock)
Plugin URI: http://adblock-invite.zici.fr
Description: Detects if the visitor have AdBlock (or another) plugin/extension installed and if not, gives URL to download it.
Author: David Mercereau
Author URI: http://david.mercereau.info
Version: 0.1
License: Beerware
License URI: http://en.wikipedia.org/wiki/Beerware
*/

// Ajout de code dans le pied de page du thème :

function adblockInviteScriptFooter(){ 
	?>
	<script language="JavaScript" type="text/javascript" src="<?php echo plugins_url('testads/banners.js', __FILE__); ?>"></script>
	<script language="JavaScript" type="text/javascript">
		function widgetAdlblockInviteID(tag) {
                        var regexpParam=/adblock_invite_widget-*/;
                        var tagParam=tag;
                        tagParam = (tagParam === undefined) ? '*' : tagParam;
                        var elementsTable = new Array();
                        for(var i=0 ; i<document.getElementsByTagName(tagParam).length ; i++) {
                                if(document.getElementsByTagName(tagParam)[i].id && document.getElementsByTagName(tagParam)[i].id.match(regexpParam)) {
                                        document.getElementsByTagName(tagParam)[i].style.display='block';
                                }
                        }
		}
		var divAds = document.getElementById("adstest");
		if(divAds) {
			widgetAdlblockInviteID('div');
			widgetAdlblockInviteID('aside');
		}
	</script>
	<?php
} 
add_action('wp_footer', 'adblockInviteScriptFooter'); 

// Ajout d'une feuille de style dans le head (la feuille contenu dans wp-content/plugins/adblock-invite/style.css :

add_action('wp_print_styles', 'addstyle');
function addstyle() {
        wp_enqueue_style('adblock-invite-styles', plugins_url('style.css', __FILE__));
}

// Le code du widget (front et back) :

add_action( 'widgets_init', create_function('', 'return register_widget("adblockInviteWidget");') );
class adblockInviteWidget extends WP_Widget {

	function adblockInviteWidget() {
		$widget_ops = array( 
							'classname' => 'adblock_invite_widget_class', 
							'description' => 'Detects if the visitor have AdBlock (or another) plugin/extension installed and if not, gives URL to download it.' 
							); 
		$this->WP_Widget('adblock_invite_widget', 'Adblock invite', $widget_ops);
	}

	// Formulaire d'administration

	function form($instance) {
		$instance = wp_parse_args( (array) $instance, array( 'title' => 'You do not block ads?', 'message' => '<p>It seems that you don\'t have AdBlock (or another) installed in your browser. I encourage you to install it for free</p> <p><a href="http://adblockplus.org" target="_blank">Download AdBlock</a></p>' ) );
		$title = $instance['title'];
		$message = $instance['message'];
		?>
			<p>
				<label for="<?php echo $this->get_field_id('title'); ?>">Title: </label>
				<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" />
			</p>
			<p>
				<label for="<?php echo $this->get_field_id('message'); ?>">Message: </label>
				<textarea class="widefat" id="<?php echo $this->get_field_id('message'); ?>" name="<?php echo $this->get_field_name('message'); ?>" cols="30" rows="4"><?php echo attribute_escape($message); ?></textarea>
			</p>
		<?php
	}

	// Enregistrement du contenu

	function update($new_instance, $old_instance) {
		$instance = $old_instance;
		$instance['title'] = $new_instance['title'];
		$instance['message'] = $new_instance['message'];
		return $instance;
	}

	// Affichage du widget en front

	function widget($args, $instance) {
		extract($args);

		echo $before_widget;

		$title = apply_filters( 'widget_title', $instance['title'] );
		$message = empty( $instance['message'] ) ? '&nbsp;' : $instance['message'];

		if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };

		echo $message;

		echo $after_widget;
	}
}

Vous pouvez tester votre plugin en l’activant dans le panel d’administration (Extensions / Extensions installées)

Publier sur WordPress.orgadblock-invite-search

Le saint graal pour un plugin WordPress étant d’être dans l’annuaire afin que l’utilisateur final n’est qu’à faire une recherche via son blog pour pouvoir installer d’un seul clic le dit plugin.

Pour ce faire il faut d’abord créer un compte sur wordpress.org puis proposer votre plugin. Une étape de modération est nécessaire.

Vous allez ensuite recevoir un email avec l’URL de votre plugin dont vous serez administrateur. (pour moi c’est http://wordpress.org/extend/plugins/adblock-invite/) Il vous faut ensuite faire le premier commit afin de rendre la page public. Voici la démarche :

$ # Création d'un répertoire de travail
$ cd ~/Projets
$ mkdir adblock-invite
$ cd adblock-invite/
$ # Récupération de arborescence svn
$ svn co http://plugins.svn.wordpress.org/adblock-invite/ .
$ # Copie et ajout du code
$ cp /var/www/wp-content/plugins/adblock-invite/* trunk/
$ svn add trunk/*
$ # Copie des screenshots pour le site de wordpress
$ cp trunk/screenshot-* assets/
$ svn add assets/*
$ # Commit et envoi 
$ svn ci -m 'Adding first version of my plugin'

Pour en savoir plus sur svn rapporté à WordPress vous pouvez vous rendre sur wordpress.org/extend/plugins/about/svn.
Et voilà c’est terminé vous devriez avoir votre page administrable sur wordpress.org & votre plugin doit être disponible dans l’annuaire.

Les ressources

Les liens qui’ m’ont bien aidé dans ma démarche :

N’hésitez pas à me faire part de point à améliorer dans ce plugin ou dans ce tuto (je l’ai fait à posteriori il est donc possible qu’il manque des étapes)

Incitateur anti-pub… Pourquoi faire ?

J’ai décidé sur mon blog d’inciter les gens à installer un anti-pub je vais vous expliquer pourquoi.

Les pieds dans le plats

Imaginons que votre prestataire de mail n’active pas l’anti-spam par défaut.  Pas sympa pour Madame Michu qui ne sait pas forcément installer un  anti-spam, tant pis elle subira… (ironie) Et les pauvres gens qui veulent vivre du spam, quelqu’un y pense ? Mais un anti-spam n’empêchera pas Monsieur Michu, s’il le souhaite, d’aller voir les promotions sur le viagra dans son dossier spam  !

Mettre un anti-spam pour ses emails c’est comme mettre un stop-pub sur sa boîte aux lettres (papier) et, par prolongement, installer un  anti-pub sur son navigateur.

Dans mon idéal les anti-pub seraient installés par défaut sur tous les navigateurs… Mais comme les principaux navigateurs sont InternetExplorer, Firefox et Chrome je doute que cela arrive un jour :

  • Mozilla Firefox est largement financé par Google. Google étant le principal annonceur sur Internet avec la régie Adsense
  • Google Chrome.. hum même problème…
  • Microsoft Internet Explorer : pas vraiment d’arguments solides mais  pas convaincu non plus… (oui c’est un procès d’intention)

Le financement du web

Pour les sites à petit revenu, blog, ect.. Aujourd’hui le coût d’un hébergement web est relativement négligeable  par rapport à beaucoup d’autres dépenses du quotidien. Pour 1€, 2€/mois et  vous avez une plateforme personnelle sans publicité. Sans compter les  hébergeurs associatifs gratuits, le RHIEN, l’auto-hébergement

Pour les sites à fort trafic des modèles économiques sont à trouver mais ils en existent déjà, en voici déjà une liste non exhaustive qui fonctionnent sans pub :

Si tout le monde bloque la pub Internet ne sera plus gratuit

Publicité != Gratuité

La publicité à un coût,  un coût non négligeable. Nous payons ce coût quand nous achetons des  produits d’entreprise qui font de la publicité. Donc de mon point de vue : « argument rejeté »

La neutralité du net

La neutralité du réseau n’a rien à voir là dedans, tant que c’est désactivable et que c’est sur le FreeBox.

Par rapport à Free, Benjamin Bayart semble être du même avis et vous l’expliquera bien mieux que mois sur le blog de FDN

Quand  à l’argument qui consiste à dire qu’avec la publicité les sites sont indépendants financièrement et donc libres. A ceux-là je répondrai en leur  demandant de regarder une très bonne émission d’arrêtsurimages traitant du sujet. Pour faire court, si vous voulez parler d’une marque/entreprise et qu’elle vous finance à travers la publicité, allez vous le faire ? La réponse est évidemment « non » c’est votre source de revenu… Est-ce que c’est ça la liberté ?

Pour toutes ces raisons : multiplions/facilitons les installations d’anti-pub sur nos ordinateurs !

Installer l’incitateur de pub WordPress

J’ai développer un plugin wordpress : adblock invit

Installer l’incitateur de pub sur mon site

Je partage avec vous le bout de script (certainement à améliorer, je ne suis pas développeur) pour que vous puissiez faire la même chose si le cœur vous en dit.

Créer un répertoire ‘testads’ accessible en http qui contiendra le fichier banners.js :

document.write("<div id='adstest'></div>");

Puis copiez ce bout de code juste avant la fin de votre </body> sur toutes les pages :

<script language="JavaScript" type="text/javascript" src="http://www.mercereau.info/testads/banners.js"></script>
<script language="JavaScript" type="text/javascript">
/*
* Script sous licence Beerware (http://fr.wikipedia.org/wiki/Beerware)
*/
var divAds = document.getElementById("adstest");
if(divAds) {
    document.write("<p>Vous n'avez pas d'anti-pub ?</p>");
}
</script>

3, 2, 1… Inciter !!!!

Edit : Renommage du fichier ads.js en banners.js pour coller avec la liste Fanboy’s d’adblock (merci @mart-e)

Edit2: Ajout de la licence au script (très important !) :-p

Cet article, à l’époque fessait suite à la polémique de Free avec son anti-pub installé par défaut sur la Freebox  et aux nombreuses discussions qui en ont découlé (ça aura surtout eu ce mérite.

En continuant à utiliser le site, vous acceptez l’utilisation des cookies (au chocolat) Plus d’informations

Les cookies sont utilisés à des fin de statistique de visite du blog sur une plateforme indépendante que j'héberge moi même. Les statistiques sot faites avec un logiciel libre. Aucune information n'est redistribué à google ou autre. Je suis seul autorisé à lire ces informations

Fermer