Créer un plugin WordPress

E
ERICSTAMANT
Créer un plugin WordPress

Bienvenue dans ce nouveau petit tutoriel. Je tenterai cette fois d'expliquer comment créer un plugin WordPress. Il est certain qu'il en existe de toutes sortes et que j'élaborerai ici que les bases.

WordPress a conçu un système très complet et complexe qui permet aux développeurs de créer des extensions du CMS avec le plus de flexibilité possible. Nous verrons donc les bases de la création d'un plugin WordPress.

Suite aux différentes explications et exemples de codes, vous serez en mesure d'installer votre plugin, d'ajouter un onglet à l'administration du CMS ainsi que des pages. Libre à vous par la suite de laisser aller votre imagination!

La base d’un plugin WordPress

Commencez d'abord par créer un dossier qui portera le nom de votre extension wordpress. Celui-ci doit être composé de lettres, chiffres et traits d'union, sans caractères spéciaux ou espaces. Nommez votre dossier de façon à identifier clairement votre plugin.

À l'intérieur de ce dossier, créer un fichier avec extension .php, qui portera le même nom de votre dossier. C'est ce fichier qui servira de coeur à votre plugin. Tout comme les thèmes et les modèles de pages, un système de commentaire permettra d'indiquer une description, un nom, l'auteur et autres informations à propos de votre extension. C'est également lui qui s'occupera de gérer les pages de notre extension.

Programmez votre plugin WordPress

Allez, c’est partie!

Créez un dossier :

/monplugin

Créez ensuite un fichier, à l’intérieur du dossier /monplugin.

/monplugin/monplugin.php

Ajoutez ce code à l’intérieur de celui-ci.

<?php
/*
Plugin Name: Mon premier plugin
Plugin URI: https://www.example.org
description: Ceci est la description de mon premier plugin!
Author: Moi-même
*/
?>

Sous forme de commentaires, WordPress permet de définir certaines informations à propos de votre plugin. Dans le cas de cet exemple, nous avons défini le nom du plugin, l'adresse URL du plugin, la description et le nom de l'auteur. Vous trouverez facilement sur le web d'autres champs d'informations à ajouter.

Voilà! Votre extension WordPress est enfin prête à être installée. Déposez votre dossier dans le répertoire /wp-content/plugins de votre installation WP, puis rendez-vous dans l'onglet « Extensions » de votre administration. N'est-ce pas fantastique?

Rassurez-vous, ce n'est pas terminé.

Créer un onglet de menu dans l’administration WordPress

Nous allons maintenant ajouter un nouvel onglet de menu à notre administration WordPress. Celle-ci servira à gérer les optons de notre plugin.

Reprenons notre fichier /monplugin/monplugin.php et suite aux commentaires, ajoutez le code suivant :

// Défini l’action d’apporter une modification au menu de l’administration
add_action( 'admin_menu', 'admin_monplugin_menu' );

// La fonction qui nous permettra d’ajouter l’onglet au menu
function admin_monplugin_menu()
{
  // Tel que son nom l’indique, permet d’ajouter l’onglet au menu
  add_menu_page(
    'Titre de la page', // Le titre de la page ajouté
    'MonPlugin', // Le nom de l’onglet (l’ancre)
    'manage_options', // Les droits d’accès
    'monplugin', // Le paramètre query string qui appelera la page
    'admin_monplugin_render', // La fonction chargé avec le nouvel onglet
    'dashicons-smiley', // L’icône du menu
    2 // L’ordre d’affiche
  );
}

// Ici, la fonction chargé avec le nouvel onglet
function admin_monplugin_render()
{

}

Enregistrez, téléversez sur votre FTP et rafraîchissez votre admin WordPress!

Vous avez maintenant un nouvel onglet « MonPlugin » en dessous de « Tableau de bord » dans le menu de gauche de votre administration.

Création de pages dans l’administration WordPress

Nous allons maintenant voir comment ajouter des pages dans l’administration de notre WordPress, qui seront gérées par notre plugin. Il s’agira ici que de simples exemples.

À l’intérieur de notre fonction « admin_monplugin_render() » nous allons ajouter le code suivant :

// Variable qui reprend le chemin de notre plugin
$file = plugin_dir_path( __FILE__ );
  if($_GET['view'] == 'page_2'){
    $file .= "views/page_2.php";
  } else{
    $file .= "views/page_1.php";
  }

  if ( file_exists( $file ) )
        require $file;

Donc pour résumé ce que nous venons de faire. Nous avons ajouté une fonction qui sera appelée par notre nouvel onglet de menu, qui nous permettra de gérer des pages. La variable « $file » sert à déterminer le chemin vers notre plugin.

Ensuite, un Query String permettra d’accéder aux pages.

La page par défaut sera appelé ainsi : admin.php?page=monplugin

Celle-ci chargera le contenu du fichier /monplugin/views/page_1.php

À l’intérieur de votre page 1, vous pouvez ajouter un lien vers la page 2, comme ceci :

/admin.php?page=monplugin&view=page_2

Petit bonus : Voici un extrait de code à ajouter dans vos fichiers de pages afin de reprendre le wrapper et le titre d’une page WordPress :

<div class="wrap">
	<h1 class="wp-heading-inline">MonPlugin Page 1</h1>
	<hr class="wp-header-end">
</div>

Inclure des fichiers JS et CSS

J’espère que vous apprécié jusqu’à présent ce petit tutoriel. Pour conclure, nous allons ajouter des un fichier .CSS et un fichier .JS pour gérer le style et les interactions avec nos pages.

Dans votre fichier /monplugin/monplugin.php, suite à la dernière fonction ajouté, collez-y ce code :

function load_scripts() {
  wp_enqueue_style('custom-css', '/wp-content/plugins/monplugin/includes/style.css');
  wp_enqueue_script('custom-js', '/wp-content/plugins/monplugin/includes/main.js');
}
add_action('admin_init', 'load_scripts');

Enfin, WordPress intégrant jQuery par défaut, vous pouvez l’utiliser. Par contre, vous devez remplacer l’appel $ par jQuery, exemple :

jQuery(document).on('click', '.element', function(){ … });