Créer un shortcode avec lien

La création d’un shortcode avec un lien

Aujourd’hui on va voir  comment créer simplement un shortcode qui pourrait ressembler à ça

L’idée ici est de donner la possibilité à l’utilisateur de créer un titre, un texte, un lien ainsi que le texte du lien.

Tout se passe dans le fichier functions.php. Voici le code

function create_shortcode( $atts, $content=null) {
   extract(shortcode_atts(array(
    "href" => 'http://',
    "title" =>'',
    "text" =>''
  ), $atts));
   if($title){
    $output ='
<div class="shortcode">
        <h3>
            '. $title .'
        </h3>
    <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
        <p>'. $content .'</p>
    </div>
            <a class="shortcode-bttn" href="'.$href.'" target="_blank">'. $text.'</a>
</div>
';
    return $output;
}else{
 $output ='
<div class="shortcode">
    
    <div class="col-lg-9 col-md-8 col-xs-9">
        <p>'. $content .'</p>
    </div>
   
            <a class="shortcode-bttn" href="'.$href.'" target="_blank">'. $text .'</a>

</div>
';
return $output;

}
   }
add_shortcode('mon_shortcode','create_shortcode');

On crée notre fonction de shortcode.La fonction s’appelle create_shortcode et on donne le nom « mon_shortcode » à notre shortcode..pas très original, mais c’est pour l’exemple..

On utilise ici la fonction extract() pour importer les variables du tableau  d’ attributs via la fonction shortcode_atts, dont vous pouvez obtenir plus d’infos ici .Mes attributs sont ici au nombre de 4, le « titre », le « text » du lien, le « lien », et le « content ».

Des conditions dans mon shortcode

L’exemple ici est particulier et pourra ne pas convenir selon les cas.J’utilise ici bootstrap pour le rendu .
Pour cet exemple, l’element bouton étant mis en position  : absolute, sans le titre la disposition du  shortcode se trouve un peu cassé par l’absence du titre..

J’applique donc ici une condition pour dire,  » s’il y a un titre,  affiche moi le shortcode avec titre et ces classes bootstrap« ..sinon  » affiche le moi sans le titre avec ces autres classes bootstrap.. »

En gros, l’affichage dépendra de la manière dont l’utilisateur va remplir le shortcode, et permet un rendu correct quelque soit le choix de l’utilisateur.On pourrait multiplier les conditions ou ne pas en avoir selon les cas, ca dépend surtout du style css mis en place.

A vous ensuite de trouve le bon compromis pour un rendu optimal quelque soit le cas d’utilisation

L’utilisateur pourra ensuite utiliser le shortcode de la manière suivante:

[mon_shortcode href= »http://monlien.com/ » Title= »voici un titre » text= »voici le lien »]voila le shortcode[/mon_shortcode]

Créer un bouton shortcode dans l’éditeur de texte

L’inconvénient ici est que l’utilisateur devra tout taper à la main, ce qui risque de ne pas convenir dans la plupart des cas.On peut donc aller plus loin en créant un bouton dans la page d’édition d’un article, afin que l’utilisateur puisse générer le shortcode vierge en cliquant sur un bouton

Toujours dans functions.php, à la suite de notre fonction on rajoute donc le code standard pour créer un bouton dans le bloc situé au dessus de l’éditeur de texte

add_action('init', 'add_button');
function add_button() {
    //code par défaut pour introduire notre bouton
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )
   {
     add_filter('mce_external_plugins', 'add_plugin');
     add_filter('mce_buttons', 'register_button');
   }
}

function register_button($buttons) {
   array_push($buttons, "mon_shortcode");
   return $buttons;
}
function add_plugin($plugin_array) {
   $plugin_array['mon_shortcode'] = get_bloginfo('template_url').'/js/shortcode.js';
   return $plugin_array;
}

Ici on a juste à changer le nom du shortcode, mais le reste du code est standard et peut etre repris tel quel.

Dans notre fonction, on fait appel à un fichier js crée pour l’occasion: shortcode.js (à nommer ici aussi comme on veut)

On crée donc notre fichier shortcode.js

/*
fonction js pour le shortcode 
*/

(function() {
    tinymce.create('tinymce.plugins.mon_shortcode', {
          init : function(ed, url) {
            ed.addButton('mon_shortcode', {
                title : 'Mon shortcode',
                image : url+'/logo2.png',
                onclick : function() {
                     ed.selection.setContent('[mon_shortcode]' + ed.selection.getContent() + '[/mon_shortcode]');
 
                }
            });
        },

        createControl : function(n, cm) {
            return null;
        },
       
    });
    tinymce.PluginManager.add( 'mon_shortcode', tinymce.plugins.mon_shortcode );
})();

Pour afficher une image sur le bouton, il faudra donner la bonne arborescence ici:

image : url+’/logo2.png’

Pour l’exemple, j’ai fait comme si l’image se situait dans le meme dossier js, directement avec le fichier shortcode.js

Dans le backoffice, l’utilisateur pourra retrouver un nouveau bouton pour l’aider à créer son shortcode

Au clic sur ce bouton, le shortcode sera automatiquement ajouté dans l’éditeur:

[mon_shortcode][/mon_shortcode]

Il n’aura plus qu’a rajouter les paramètres nécessaires pour obtenir le rendu souhaité.
href= »…. »  pour un lien, Title= »….. »  pour le titre, et text= »….. » pour le texte du lien.

Et dans mes widgets??

Pour ajouter le shortcode également dans les widgets, il suffit de rajoute la fonction suivante dans le meme fichier functions.php

add_filter('widget_text', 'do_shortcode');