Pour afficher l’arborescence des fichiers, j’utilise sur ce blog un petit plugin de shortcode afin d’obtenir ce rendu : ./index.js

Dans cet article je vous présente comment créer un plugin wordpress de shortcode et inclure son bouton d’intégration dans TinyMCE.

Nouveau plugin WordPress

Commencez par vous rendre dans le dossier des plugins wordpress ./wp-content/plugins. Créez un dossier show-path.

À l’intérieur de ce dossier, vous allez créer deux dossiers et un fichier :

• /css
• /js
• index.php

Shortcode

Dans le fichier index.php, commencez par déclarer votre nouveau plugin :

<?php

/*
Plugin Name: Show Path
Description: Show path
Version: 1.0
Author: jeremiechazelle.dev
Author URI: /
License: /
*/

Le shortcode qui va être utilisé ici est le shortcode show-path.

Quand le plugin va lire ce shortcode show-path, il faut qu’il remplace le shortcode par un autre code que vous lui fournirez et qui utilisera l’attribut path contenu dans le shortcode.

Déclarez l’utilisation du shortcode :

/**
 * Show path shortcode
 */
add_shortcode('show-path', show_path);

function show_path($atts){
    $atts = shortcode_atts(array(
        'path' => ''
    ), $atts);

    extract($atts);

    return '<span class="show-path">'.$path.'</span>';
}

Quand le plugin va intercepter le shortcode show-path, il va lire l’attribut path et l’injecter dans une balise span qui à comme classe .show-path. 👍

Style

Ajoutez un peu de style au rendu. 🎨

Créez un fichier show-path.css dans le dossier /css :

.show-path {
    display: inline-block;
    color: #373B3F;
    background-color: #FBFBFC;
    border: 1px solid #DDDDDE;
    padding: 0 5px;
    font-size: 13px;
    line-height: 20px;
    border-radius: 5px;
}

Puis chargez cette feuille de style dans le fichier index.php :

/**
 * Show path style
 */
add_action( 'wp_enqueue_scripts', 'show_path_enqueue_styles' );

function show_path_enqueue_styles() {
    wp_register_style('show_path', plugins_url( '/css/show-path.css', __FILE__ ));

    wp_enqueue_style( 'show_path', get_stylesheet_uri());
}

Parfait !

TinyMCE

Devoir écrire à chaque fois votre shortcode va vite devenir ennuyeux… c’est pourquoi mettez en place un bouton dans l’éditeur TinyMCE pour que ce dernier insert automatiquement le shortcode pour vous.

Vous aurez seulement à renseigner l’attribut path= » ».

Ci-dessous le bouton que vous allez ajouter :

Créez un fichier plugin-show-path-button.js dans le dossier /js :

(function() {
    tinymce.PluginManager.add('show_path_mce_button_show_path', function( editor, url ) {
        editor.addButton('show_path_mce_button_show_path', {
            text: '🗂',
            tooltip: 'Ajouter un chemin',
            icon: false,
            onclick: function() {
                editor.insertContent(' ');
            }
        });
    });
})();

Déclarez au plugin que vous voulez :

• Charger le fichier plugin-show-path-button.js
• Ajouter un bouton à l’éditeur TinyMCE

Pour cela, rajoutez ce code dans le fichier index.php :

/**
 * Show path register new button in the editor
 */
add_action( 'init', 'show_path_tinymce_shortcode_buttons' );

function show_path_tinymce_shortcode_buttons() {
    add_filter( 'mce_external_plugins', 'add_tinymce_show_path_script' );
    add_filter( 'mce_buttons', 'register_mce_button_show_path' );
}

function add_tinymce_show_path_script( $plugin_array ) {
    $plugin_array['show_path_mce_button_show_path'] = plugins_url( '/js/plugin-show-path-button.js', __FILE__ );

    return $plugin_array;
}

function register_mce_button_show_path( $buttons ) {
    array_push( $buttons, 'show_path_mce_button_show_path' );

    return $buttons;
}

Et… voilà ! Il ne vous reste plus qu’à activer le plugin. 😉

Le code source est dispo sur le github :