WordPress

Créer son plugin 1

Il s'agit ici de créer un simple plugin Hello World

L'enveloppe

Pour créer mon superbe plugin HelloWorld, il faut déjà lui créer un répertoire hello-world dans le répertoire des plugins et un fichier hello-world.php avec un entête-commentaire contenant les informations du plugin : le nom du plugin, son auteur, description du plugin, version …etc

|- wp-admin
|- wp-content 
      |- cache
      |- languages
      |- plugins
            |- contact-form-7
            |- hello-world
                  |- hello-world.php

<?php
/*
 * Plugin Name: Hello World
 * Plugin URI: http://uri-plugin/si/existe
 * Description: Un plugin qui écrit Hello World
 * Author: Elisabeth Pointal
 * Author URI: http://elisabeth.pointal.org/
 * Text Domain: hello
 * Domain Path: /languages/
 * Version: 1.0.0
 * License: GPL2
 */

  1. Le nom du fichier n'est pas important, ce sont les commentaires en entête qui sont chargées par Wordpress.
  2. Si le plugin est très léger et constitué d'un unique fichier, il n'est pas nécessaire de lui créer un répertoire, le fichier est suffisant.
  3. Les informations Text Domain et Domain Path sont utilisées pour la traduction du plugin.
  4. Les informations d'url et licence sont utiles pour la publication

Et c'est suffisant, j'ai créé un plugin. Il apparaît bien dans les extensions de mon application Wordpress, il ne me reste qu'à l'activer.Extension Wordpress Mon plugin hello World

Une action minimaliste

Pour que mon plugin fasse un peu quelque chose, je décide qu'il ajoute “hello World !!” devant le titre des posts.

<?php
/*
 * Plugin Name: Hello World
 * Plugin URI: http://uri-plugin/si/existe
 * Description: Un plugin qui écrit Hello World
 * Author: Elisabeth Pointal
 * Author URI: http://elisabeth.pointal.org/
 * Text Domain: hello
 * Domain Path: /languages/
 * Version: 1.0.0
 * License: GPL2
 */
// Ajoute Hello World devant $content
function print_hello_before_title($content){
    return " Hello World !! " . $content;
}

add_filter('the_title','print_hello_before_title');

Shortcode

Si on veut pouvoir insérer notre superbe «Hello World!!» n'importe où dans nos posts, il faut créer un shortcode.


function hello_world_shortcode(){
    echo "<div>Hello World !!</div>";
}

if(!is_admin()){
    //on ajoute un shortcode appelé helloworld, qui appelle la fonction hello_world_shortcode
    add_shortcode('helloworld', 'hello_world_shortcode');
}

Dans l'édition d'un article, il suffit de taper [helloworld], pour qu'il soit remplacer par <div>Hello World !!</div>.
On peut aussi faire passer des arguments à la fonction hello_world_shortcode.


function hello_world_shortcode($options){
    $style = "";
    $textafter = "";
    //couleur du texte
    if(isset($options['color'])){
       $style = ' style="color:'.$options['color'].';"';
    }
    //Texte après hello World
    if(isset($options['textafter'])){
        $textafter = "<br />".$options['textafter'];
    }
    echo "<div".$style.">Hello World !!".$textafter."</div>";
}

if(!is_admin()){
    add_shortcode('helloworld', 'hello_world_shortcode');
}

Dans l'édition de mon article, je tape alors [helloworld color=“red”] ou autre …

Edition d'un article en utilisant mon shortcode helloworld :  Edition d'un article avec des shortcodes
Vue de l'article avec des shortcodes helloworld : Résultats de l'article avec des shortcodes helloworld

css et javascript

Comme pour le thème, on utilise wp_enqueue_script et wp_enqueue_style pour charger respectivement les fichiers javascript et css.

   //url du dossier du plugin
   define('HELLO_DIR_URL', plugin_dir_url(__FILE__));
  //insertion de mon fichier hello.js dépendant de jquery, sans numéro de version,  en bas de page
  wp_enqueue_script('hello-js', HELLO_DIR_URL . 'js/hello.js', array('jquery'), null,true);
  //insertion du fichier hello.css, indépendant, sans numéro de version
  wp_enqueue_style('hello-css', HELLO_DIR_URL . 'css/hello.css',array(), null);
         

On souhaite, bien entendu, ne charger ces fichiers que s'ils sont nécessaires.

Structure du plugin

Si le plugin est un peu plus conséquent, on a intérêt à le découper, au minimum bien séparer le html du reste.
On peut rester en procédural, mais l'utilisation d' objets permet de découper le plugin par fonctionnalité.

Pour mon superbe plugin, ça peut donner quelque chose du genre avec une class “singleton” HelloWorld qui représente mon plugin et une vue hello.phtml.

<?php
/*
 * Plugin Name: Hello World
 * Description: Un plugin qui écrit Hello World
 * Author: Elisabeth Pointal
 */
class HelloWorld {

    /**
     * @var HelloWorld
     * @access private
     * @static
     */
    private static $_instance = null;
    
    /**
     * Détermine si le css a déjà été ajouté
     * @var boolean
     * @access public
     * @static
     */
    public static $_add_css = false;
    
    
    /**
     * Constructeur de la classe
     *
     * @param void
     * @return void
     */
    private function __construct() {
        if(is_admin()){
            //côté éditeur
            add_action("admin_menu", "HelloWorld::admin_menu");
        }else{
            //côté publique
            add_shortcode('helloworld', 'HelloWorld::shortcode');
        }
    }


    /**
     * Méthode qui crée l'unique instance de la classe
     * si elle n'existe pas encore puis la retourne.
     *
     * @param void
     * @return Singleton
     */
    public static function getInstance() {

        if(is_null(self::$_instance)) {
            self::$_instance = new HelloWorld();
        }

        return self::$_instance;
    }
    
    
    /**
     * Méthode qui interprète un shortcode
     * du type [helloworld class="red" textafter="Madame et Monsieur"]
     * @param array $options contient deux éléments maxi class et textafter 
     */
    public static function shortcode($options){
        //Traitement du tableau $options 
        if(isset($options['class'])){
            $class = ' class="'.$options['class'].'"';
        }
        //on récupère le contenu du fichier hello.phtml
        ob_start();
        include('views/hello.phtml');
        $output = ob_get_clean();
        // le css a été ajouté, on le passe à true, pour qu'il ne soit pas ajouté à chaque passage
        self::$_add_css = true;
        return $output;
    }
    
    
    /**
     * Méthode qui ajoute le plugin dans le menu Réglages côté éditeur
     */
    public static function admin_menu(){
       //Voir créer son plugin 2
    }
}


//on initialise le plugin
$hello = HelloWorld::getInstance();
Et le fichier html :
<?php
//on ajoute le css si ce n'est pas déjà fait
if(!HelloWorld::$_add_css):?>
    <style>
        .red{
            color:red;
        }
        .green{
            color:green;
        }
    </style>
<?php endif;?>

<div <?php echo $class;?>>
     Hello World!!
    <?php if(isset($options["textafter"])){
        echo "</br>".$options["textafter"];
    }?>
</div>


Elisabeth Pointal 14/05/2016 15:17 —— Créer son plugin 2