Après avoir finalement publié mon premier thème sur Themeforest, le “Thème WordPress Classy Business”, j’ai décidé de partager quelques tutoriels et le code expliquant comment j’ai créé certaines des fonctionnalités impressionnantes du thème.

Je ne vous guiderai pas à travers chaque étape expliquant chaque morceau de code car c’est très facile à comprendre, à la place, je vous fournirai tout ce dont vous avez besoin pour couper / coller les codes courts dans votre propre thème (encore mieux!)

Le code court Toggle

La création du shortcode Toggle est très simple. Tout ce que nous devons faire est d’ajouter une fonction de shortcode à notre fichier functions.php qui a 2 options: le titre et la couleur. De cette façon, lorsque vous ajoutez le shortcode, vous pouvez choisir le titre sur lequel vous pouvez cliquer pour l’effet de bascule et la couleur afin que vous puissiez ajouter diverses options de couleur à votre bascule, comme vous pouvez le voir dans mon lien de démonstration ci-dessus où j’ai ajouté un blanc et le style gris pour que les gens puissent créer cet effet de couleur alternée.

Copiez et collez simplement le shortcode dans votre fichier functions.php:

// Register the toggle shortcode
function toggle_shortcode( $atts, $content = null ) {
    
    extract( shortcode_atts( array(
        'title' => 'Click To Open',
        'color' => ''
    ), $atts ) );

    return '<h3 class="toggle-trigger"><a href="#">' . esc_html( $title  ) . '</a></h3><div class="toggle_container">' . do_shortcode( wp_kses_post( $content ) ) . '</div>';

}
add_shortcode( 'toggle', 'toggle_shortcode' );

Le Toggle Javascript, CSS & Images

Vous trouverez ci-dessous tout le code que j’ai utilisé pour créer les bascules sur mon thème WordPress Premium si vous souhaitez obtenir le même look.

Javascript

Voici le Javascript. Vous pouvez le mettre dans votre fichier custom.js ou dans la tête de votre thème.

Important: assurez-vous que vous incluez déjà la bibliothèque jQuery car elle est nécessaire pour que le reste des js fonctionne 😉

jQuery( function( $ ) {
    $( document ).ready(function() {
        $( ".toggle_container" ).hide();
        $( ".toggle-trigger" ).click( function() {
            $(this).toggleClass( "active" ).next().slideToggle( "normal" );
            return false;
        } );
    } );
} );

CSS

Voici le CSS. Placez simplement dans votre fichier style.css

/*toggle*/
.toggle-trigger {
    margin: 0px !important;
    font-size: 18px;
    padding: 10px;
    padding-left: 30px;
    background-color: #F5F5F5;
    background-image: url('images/shortcodes/toggle-plus.png');
    background-position: 10px center;
    background-repeat: no-repeat;
}

.toggle-trigger a {
    color: #333;
    text-decoration: none;
    display: block;
}

.toggle-trigger a:hover {
    color: #0489B7;
    text-decoration: underline;
}

.toggle-trigger.active{
    background-image: url('images/shortcodes/toggle-minus.png') !important;
    background-position: 10px center;
    background-repeat: no-repeat;
}

.toggle_container {
    overflow: hidden;
    padding: 20px 10px;
}

Images

Vous trouverez ci-dessous les deux images du shortcode. Cliquez simplement avec le bouton droit de la souris et appuyez sur «Enregistrer l’image sous» pour enregistrer les images dans le dossier d’images de votre thème.

WordPress Toggle Minus

Utilisation du shortcode

Maintenant que vous avez ajouté tout le code requis pour le shortcode, vous pouvez facilement insérer vos bascules sur votre site, comme ceci:

[toggle title="Your Toggle Title" color="white"]Toggle Content[/toggle]

Trop paresseux? Obtenez le thème!

Cliquez sur l’image ci-dessous pour vérifier mon thème premium et l’acheter. 🙂

Thème WordPress élégant

Share: