Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
code:wordpress:plugin1 [16/05/2016 09:41]
elisabeth
code:wordpress:plugin1 [15/06/2018 22:20] (Version actuelle)
Ligne 1: Ligne 1:
-{{htmlmetatags>​metatag-robots:(index,​follow) metatag-author:(Elisabeth Pointal) metatag-keywords:(Plugin, shortcode, Wordpress ) metatag-description:(Création d'un plugin WordPress minimaliste)}}+{{htmlmetatags>​metatag-robots=(index,​follow) metatag-author=(Elisabeth Pointal) metatag-keywords=(Plugin, shortcode, Wordpress ) metatag-description=(Création d'un plugin WordPress minimaliste)}}
 {{:​code:​wordpress:​wordpress300.jpg|WordPress}} {{:​code:​wordpress:​wordpress300.jpg|WordPress}}
  
Ligne 102: Ligne 102:
 \\ \\
 __Edition d'un article en utilisant mon shortcode ''​helloworld''​ : __ __Edition d'un article en utilisant mon shortcode ''​helloworld''​ : __
-{{ :​code:​wordpress:​wp-shortcode.png?​ | Edition d'un article avec des shortcodes}} ​+{{ :​code:​wordpress:​wp-shortcode.png?​600 | Edition d'un article avec des shortcodes}} ​
 \\ \\
 __Vue de l'​article avec des shortcodes ''​helloworld''​ :__ __Vue de l'​article avec des shortcodes ''​helloworld''​ :__
-{{ :​code:​wordpress:​wp-shortcode-resultats.png?​ |Résultats de l'​article avec des shortcodes helloworld}}+{{ :​code:​wordpress:​wp-shortcode-resultats.png?​600 |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.
 +<sxh php; first-line:​52;​ title:​wp-content/​plugins/​hello-worl/​hello-world.php>​
 +   //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);
 +         
 +</​sxh>​
 +<note warning>​On souhaite, bien entendu, ne  charger ces fichiers que s'ils sont nécessaires.
 +</​note>​
  
 +===== Structure du plugin =====
 +<​note>​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é.</​note>​
 +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.
 +<sxh php; first-line:​1;​ title:/​wp-content/​plugins/​hello-world/​hello-world.php>​
 +<?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();​
 +</​sxh>​
 +Et le fichier html :
 +<sxh php; first-line:​1;​ title:/​wp-content/​plugins/​hello-world/​views/​hello.phtml>​
 +<?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>​
 +</​sxh>​
 ---- ----
  --- //​[[elisabeth.pointal@free.fr|Elisabeth Pointal]] 14/05/2016 15:17// ------ ​ [[:​code:​wordpress:​plugin2|Créer son plugin 2]]  --- //​[[elisabeth.pointal@free.fr|Elisabeth Pointal]] 14/05/2016 15:17// ------ ​ [[:​code:​wordpress:​plugin2|Créer son plugin 2]]