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.org

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 :

• wordpress.org
• social.hecube.net
• johnathanandersendesign.com
• makeuseof.com

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)