Créer un plugin wordpress

Créer un plugin wordpress

Nous allons voir dans ce tutoriel les bases pour créer une extension wordpress. Notre extension sera toute simple, elle va permettre d’injecter du code (JS, CSS…) dans le header et / ou le footer (Utile entre autre pour mettre en place Google Analytics).

Pourquoi créer un plugin WordPress?

Les plugins sont indispensables pour utiliser tout le potentiel de WordPress, et étendre son fonctionnel de base.

On trouve des plugins pour à peu près tout! Mais parfois on ne trouve pas exactement ce que l’on veut, ou bien la fonctionnalité n’est disponible qu’en mode premium …. du coup il peut être intéressant de créer sur mesure un plugin à ses besoins, voir éventuellement modifier des existants!

La base pour créer un plugin

Un plugin peut se réduire à un simple fichier PHP, avec le header WordPress!

Au minimum, le header doit contenir le nom du plugin:

<?php
/**
 * Plugin Name: Basic Headers And Footers
*/
?>

Et voilà, avec ce simple fichier, vous avez créé un plugin wp!

En pratique, on ajoute quelques champs supplémentaires:

/**
 * Plugin Name: Basic Headers And Footers
 * Plugin URI: https://github.com/cyrilbois/wp-plugin-basic-headers-and-footers
 * Description: Allows you to insert script or CSS in the header or footer.
 * Version: 1.0.0
 * Author: Cyril Bois
 * Author URI: https://github.com/cyrilbois
*/

Voir la documentation pour retrouver la liste exhaustive des champs du header WordPress.

Il suffit ensuite de déposer ce fichier PHP dans le dossier wp-content/plugins de votre installation wordpress, et celui-ci apparaîtra dans les extensions disponibles!

Bon, c’est vrai, pour l’instant notre plugin ne fait pas grand chose … en fait il ne fait rien!

En pratique, on crée un dossier pour créer un plugin, en effet il est rare qu’un plugin se limite à un seul fichier PHP. Nous, nous allons créer un dossier /basic-headers-and-footers/ et y placer notre fichier PHP basic-headers-and-footers.php. Note: Le nom du fichier PHP n’a pas d’importance, c’est le header WordPress qui indique le fichier principal de notre plugin.

Créer une page dans l’administration de WordPress

Nous allons créer une page de configuration dans le tableau de bord de WordPress, afin de pouvoir renseigner les headers et footers à injecter.

Créer un sous-menu

Avant de créer la vue, il faut ajouter une entrée dans le menu pour rendre accessible notre page de configuration. On va ajouter un sous-menu dans le menu « Réglage »:

Pour cela, il faut passer par le système de « Hooks« . Cela permet d’intercepter certaines actions de WordPress. On peut ainsi exécuter du code custom (Hook de type action), ou bien intercepter les valeurs (Hook de type filtre).

Nous allons utiliser la fonction « add_action » afin d’intercepter la création du menu d’administration:

add_action('admin_menu', 'adminMenu');

Le « hook » admin_menu permet de personnaliser le menu du tableau de bord WordPress.

La fonction adminMenu sera exécutée lors de la création du menu d’administration.

function adminMenu() {
	// La fonction "add_submenu_page" permet de créer un sous-menu
	add_submenu_page( 'options-general.php', // On indique où mettre notre sous-menu 
		'Basic headers and footers', // Titre de notre page de configuration
		'Basic headers and footers', // Libellé de notre sous-menu
		'manage_options', // Les droits requis pour afficher notre sous-menu
		'basic-headers-and-footers', // Identifiant unique de notre sous-menu
		'adminPanel' // Fonction exécutée pour générer notre page de configuration
	);
}

Et voilà, nous avons déjà ajouter un sous-menu!

Créer une vue de configuration

Maintenant que nous avons ajouté un sous-menu, nous pouvons créer notre page de configuration. Celle-ci doit permettre de visualiser et de modifier les headers/footers que l’on doit injecter.

Nous allons mettre notre vue dans un fichier PHP dédié /views/panel.php pour faciliter la maintenance de notre plugin. Dans notre fichier PHP principal, il nous suffira de l’inclure pour afficher notre vue:

include_once( plugin_dir_path( __FILE__ ) . '/views/panel.php');

Dans notre page de configuration, on ajoute un titre et on crée deux onglets dans notre page:

<!-- Le titre de notre page -->
<h2>Basic Headers and Footers &gt; Settings</h2>

<!-- Nos deux onglets -->
<div class="tab-menu">
	<ul class="wpcr_nav_tabs">
		<li><a href="#" class="tab-a active-a" data-id="tab-header">Header</a></li>
		<li><a href="#" class="tab-a" data-id="tab-footer">Footer</a></li>
	</ul>
</div>

<div class="tab tab-active" data-id="tab-header">
	<!-- Contenu de l'onglet Header-->					
</div>
<div class="tab" data-id="tab-footer">
	<!-- Contenu de l'onglet Footer -->					
</div>
					

Voici notre rendu au point où nous sommes arrivés:

Nous allons ajouter un formulaire afin de pouvoir mettre à jour nos paramètres de configuration:

<!-- On doit indiquer le plugin cible lors de l'enregistrement-->
<form action="options-general.php?page=basic-headers-and-footers" method="post">
	<!-- Contenu du formulaire --> 

	<!-- Bouton d'nevoi du formulaire --> 
	<input name="submit" type="submit" value="Save" class="button button-primary" />
</form>

Dans le formulaire, nous allons mettre un textarea par option:

<textarea name="bhaf_header" class="widefat" rows="10"></textarea>
...
<textarea name="bhaf_footer" class="widefat" rows="10"></textarea>

Nous allons ajouter un « nonce » pour sécuriser notre formulaire (Cela va juste permettre de vérifier que l’envoi du formulaire vient bien de notre page).

<?php wp_nonce_field('basic-headers-and-footers', 'bhaf_nonce' ); ?>

Maintenant, il nous reste à gérer la sauvegarde de la configuration:

function adminPanel() {
	// On vérifie les droits d'accès
	if ( ! current_user_can( 'manage_options' ) ) {
		return;
	}
	// Si "submit" est définit, c'est que le formulaire vient d'être envoyé, on doit sauvegarder
	if (isset($_REQUEST['submit'])) {
		if (wp_verify_nonce($_REQUEST['bhaf_nonce'], 'basic-headers-and-footers')) {
			// On sauvegarde le code pour le header
			update_option('bhaf_header', stripslashes_deep($_REQUEST['bhaf_header']));
			// On sauvegarde le code pour le footer
			update_option('bhaf_footer', stripslashes_deep('bhaf_footer']));
		}
	}
	// On affiche la vue
	include_once( $this->path . '/views/panel.php');
}
	

Revenons sur nos textarea, en effet, il faut les initialiser avec les codes déjà paramétrés.

<textarea name="bhaf_header" class="widefat" rows="10"><?php echo esc_html(get_option('bhaf_header')); ?></textarea>

La fonction get_option retourne la valeur de notre option.

Voici le rendu final de notre page de configuration:

Les Hooks wp_head et wp_footer 

Maintenant il ne nous reste plus qu’à modifier à la volée l’entête et le footer des pages du site WordPress avec ce qui est configuré.

Pour cela, nous allons utiliser les Hooks wp_head et wp_footer.

// Hook pour le header
add_action('wp_head', 'injectHeader');

// Hook pour le footer
add_action('wp_footer', 'injectFooter');

function injectHeader() {
	inject('bhaf_header');
}

function injectFooter() {
	inject('bhaf_footer');
}

function inject($section) {
	// On n'injecte pas le code sur certaines pages (comme le fichier robots.txt ...)
	if (is_admin() || is_feed() || is_robots() || is_trackback()) {
		return;
	}
	// On récupère le code configuré
	$data = get_option($section);
	if (!empty($data)) {
		// On injecte le code dans le header / footer
		echo $data;
	}
}

Conclusion

Le principe de création de plugin WordPress est simple à appréhender, on peut démarrer assez rapidement, et faire des trucs sympas.

Dans ce tutoriel, nous avons vu qu’une petite partie des possibilités qu’offre WordPress. Je ferai de futurs articles sur d’autres fonctionnalités.

Pour se perfectionner, l’une des techniques est de tout simplement regarder et modifier le code d’extensions existantes. Pour faciliter cela, il vaut mieux s’attaquer à des plugins avec peu de fonctionnel, ce qui permet de consulter le code « utile » assez rapidement et facilement.

Pour aller plus loin:

Laisser un commentaire

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