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)

4 réflexions au sujet de « Créer/publier un plugin wordpress simple : « Adblock invite » »

  1. Excellente initiative !
    Sinon, on dit plutôt « à postériori »…pour exprimer la postériorité de la rédaction de ton billet parapport à ta phase de manip’.

  2. Bon boulot 🙂

    Faudrait trouver un truc bien pour IE car simple adblock ne bloque que les 200 premières requêtes je crois avant de passer en payant.
    Mais bon, quand tu surfes avec IE, tu assumes et tu bouffes de la pub :p

  3. @David : Nickel, je suis tenté depuis un moment à en faire un. Peut-être qu’un jour …
    Content d’apprendre l’existence de la licence Beerware, je pense que je vais passer mon blog dessus 😀

    @haem : on dit « a posteriori », pas d’accent sur le « a », car c’est du Latin ! (C’est la même règle pour le « a priori » )

    @Gilles : Tiens, je ne connaissais pas la version IE de ADBlock, « Simple adblock », merci !
    Effectivement, la version free limite au 200 première requête (c’est bête, ça sera LA raison de sa non-utilisation).
    Free-blocks 200 adrequest per day (30-day trial with no limit)
    Pro-no adblock limit. (29,95$)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.