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 [30/05/2016 09:19]
elisabeth [css et javascript]
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 113: Ligne 113:
    ​define('​HELLO_DIR_URL',​ plugin_dir_url(__FILE__));​    ​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   //insertion de mon fichier hello.js dépendant de jquery, sans numéro de version, ​ en bas de page
-  ​wp_register_script('​hello-js',​ HELLO_DIR_URL . '​js/​hello.js',​ array('​jquery'​),​ null,true);+  ​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   //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);   wp_enqueue_style('​hello-css',​ HELLO_DIR_URL . '​css/​hello.css',​array(),​ null);
Ligne 121: Ligne 121:
 </​note>​ </​note>​
  
-===== structure ​plugin =====+===== 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]]