page-translate

Création de shortcode dans Wordpress

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

L’utilisation des shortcodes dans Wordpress est un bon moyen pour rendre notre code portable et facile à utiliser. Dans ce post, on va détailler les étapes à suivre pour créer un shortcode et comment intégrer un bouton, permettant d’automatiser l’insertion de ce shortcode, dans l’éditeur TinyMCE.

Pour mieux comprendre ce concept, on va utiliser un exemple concret qui consiste à intégrer une vidéo YouTube grâce au shortcode suivant : [ajoutervideoyoutube url=”url-de-la-video”] dont ‘ajoutervideoyoutube’ est le nom du shortcode et ‘url’ est un attribut de ce dernier. Ensuite on va ajouter un bouton dans l’éditeur TinyMCE, en cliquant sur ce dernier un pop-up s’ouvre nous demandant de rentrer l’url de la vidéo. une fois l’url est renseignée, le shortcode s'insère automatiquement dans l’éditeur de texte.

Étape 1 : Ajouter le shortcode

Dans le fichier functions.php ajouter le code suivant :

//Enregistre le shortcode
add_shortcode( ajoutervideoyoutube, ajoutervideoyoutube_shortcode );

//fonction executée lorsque le shortcode est appelé (ici elle retourne  un iframe contenant la vidéo)
function ajoutervideoyoutube_shortcode($atts){
      extract(shortcode_atts( array(
            'url' => ' ',
      ), $atts));
     $wp_embed = new WP_Embed();
     $video_embed = $wp_embed->run_shortcode('[embed]'.$url.'[/embed]');
     return $video_embed;
}

Étape 2 : Ajouter un bouton à l’éditeur TinyMCE

Toujours dans le fichier functions.php ajouter :

add_action('init', add_buttons );

function add_buttons(){

      if( current_user_can('edit_posts') &&  current_user_can('edit_pages') )

       {

            add_filter( 'mce_external_plugins', 'add_plugins' );

            add_filter( 'mce_buttons','register_buttons');

        }

}

 

function add_plugins( $plugin_array ){

      $plugin_array['ajoutervideoyoutube'] = get_bloginfo('template_url').

      '/js/shortcode-youtube-button.js';

       return $plugin_array;

}


function register_buttons($buttons){

        array_push( $buttons,'ajoutervideoyoutube');

        return $buttons;

}

  

Dans le répertoire js (à créer en cas de besoin) créer un fichier portant le nom shortcode-youtube-button.js et y ajouter le code suivant :

(function() {

   

    tinymce.create('tinymce.plugins.videoyoutube',{

        init: function(ed, url){

            ed.addButton('ajoutervideoyoutube',{

                title: 'You tube',

                image:url+'/icon-youtube.png',

                onclick: function () {

                    var url = prompt('Entrer l\'url de la vidéo)','');

                    ed.selection.setContent('[ajoutervideoyoutube url="'+url+'"]');

                }

            })

        },

        createControl: function(n,m){

            return null;

        }

    })

 

    tinymce.PluginManager.add('ajoutervideoyoutube',tinymce.plugins.videoyoutube);

 

})();

Ajouter un commentaire

CAPTCHA
Êtes-vous un robot ?
Image CAPTCHA
Écrivez le code apparaissant dans l'image.

Derniers articles