Quelques exemples de Shortcodes

Des shortcodes simples pour créer des blocs dans sa page

Voici deux simples exemples de shortcodes :

Les fonctions sont à insérer dans le fichier functions.php

Dans cet exemple, le shortcode comporte principalement une icone et du texte. La classe, l’ID sont évidemment optionnels.

function shortcode_main_text($atts, $content){
    extract(shortcode_atts(
        array(
            'title' => '',
            'text' =>'',
            'icon' =>'',
            "href" => 'https://',
            "class"=>'',
            "id"=>''
    ), $atts));
    return '<div class="main_text wow slideInLeft" id="' . $id . '"><div class="main-text_header '. $class .'">
    <img src="'. get_stylesheet_directory_uri() . '/img/' . $icon . '" alt=""><h3><a href="'.$href.'">'. $title .'</h3></a></div><div class="main-text_text">'. $content .'</div></div>';
}
add_shortcode('main-text','shortcode_main_text');

et un rendu possible

En voici un autre

function shortcode_disease_text($atts, $content){
    extract(shortcode_atts(
        array(  
            'text' =>'',
            'image' =>''
    ), $atts));
    return '<div class="disease-bloc wow slideInLeft" ><div class="disease-bloc_img">
    <img src="'. get_stylesheet_directory_uri() . '/img/' . $image . '" alt=""></div><div class="disease-bloc_text">'. $content .'</div></div>';
}
add_shortcode('disease-text','shortcode_disease_text');

Et le rendu

Un petit dernier pour la route !


function shortcode_list_text($atts, $content){
    extract(shortcode_atts(
        array(  
            'text' =>'',
            'img' =>''
    ), $atts));
    return '<div class="list-bloc wow slideInLeft" ><div class="list-bloc_img">
    <img src="'. get_stylesheet_directory_uri() . '/img/' . $img . '" alt=""></div><div class="fleche"><img src="'. get_stylesheet_directory_uri() . '/img/fleche.png"></div><div class="list-bloc_text">'. $content .'</div></div>';
}
add_shortcode('list-text','shortcode_list_text');

Avec le rendu : ici on multiplie le shortcode pour avoir l’effet d’une liste. On peut evidemment faire plus simple pour dynamiser le tout.

D’autres utilisations de shortcodes

Je vous renvoie à d’autres articles sur les shortcodes pour avoir d’autres exemples

Autoriser les shortcodes dans les widgets

Afficher tous les shortcodes disponibles dans l’éditeur

Autoriser les shortcodes dans les widgets

Ajouter un shortcode pour styliser ses titres dans wordpress

Créer des colonnes dans vos articles avec un shortcode

23/12/2019 Mis à jour le 19/12/2019 Par Copier coller | Dans wordpress