Différences

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

Lien vers cette vue comparative

code:wordpress:plugin1 [30/05/2016 09:19]
elisabeth [css et javascript]
code:wordpress:plugin1 [15/06/2018 22:20]
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)}} 
-{{:​code:​wordpress:​wordpress300.jpg|WordPress}} 
  
-====== Créer son plugin 1 ====== 
-<​note>​ Il s'agit ici de créer un simple plugin ​ Hello World</​note> ​ 
-===== 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 
-<​code>​ 
-|- wp-admin 
-|- wp-content ​ 
-      |- cache 
-      |- languages 
-      |- plugins 
-            |- contact-form-7 
-            |- hello-world 
-                  |- hello-world.php 
-</​code>​ 
-      ​ 
-<sxh php; first-line:​1;​title:​ wp-content/​plugins/​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 
- */ 
-</​sxh>​ 
-<​note>​ 
-  - Le nom du fichier n'est pas important, ce sont les commentaires en entête qui sont chargées par Wordpress. 
-  - 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. 
-  - Les informations Text Domain et Domain Path sont utilisées pour la traduction du plugin. 
-  - Les informations d'url et licence sont utiles pour la publication 
-</​note>​ 
-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.{{ :​code:​wordpress:​plugin-hello.png |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. 
-<sxh php; first-line:​1;​ wp-content/​plugins/​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 
- */ 
-// Ajoute Hello World devant $content 
-function print_hello_before_title($content){ 
-    return " Hello World !! " . $content; 
-} 
- 
-add_filter('​the_title','​print_hello_before_title'​);​ 
-</​sxh>​ 
- 
-===== Shortcode ===== 
-Si on veut pouvoir insérer notre superbe «**Hello World!!**» n'​importe où dans nos posts, il faut créer un ''​shortcode''​. 
-<sxh php; first-line:​13;​title:​wp-content/​plugins/​hello-world/​hello-world.php>​ 
- 
-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'​);​ 
-} 
-</​sxh>​ 
- 
-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''​. 
-<sxh php; first-line:​13;​title:​wp-content/​plugins/​hello-world/​hello-world.php>​ 
- 
-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'​);​ 
-} 
-</​sxh>​ 
- 
-Dans l'​édition de mon article, je tape alors ''​[helloworld color="​red"​]''​ ou autre ...\\ 
-\\ 
-__Edition d'un article en utilisant mon shortcode ''​helloworld''​ : __ 
-{{ :​code:​wordpress:​wp-shortcode.png?​600 | Edition d'un article avec des shortcodes}} ​ 
-\\ 
-__Vue 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_register_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 plugin ===== 
- 
- 
----- 
- --- //​[[elisabeth.pointal@free.fr|Elisabeth Pointal]] 14/05/2016 15:17// ------ ​ [[:​code:​wordpress:​plugin2|Créer son plugin 2]]