Après avoir finalement publié mon premier thème sur Themeforest, le « Classy WordPress Business Theme », 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 vais pas vous expliquer chaque étape en expliquant chaque morceau de code car c’est très facile à comprendre, à la place, je vais vous fournir tout ce dont vous avez besoin pour couper/coller les shortcodes dans votre propre thème (encore mieux !)
Le code court de bascule
La création du shortcode Toggle est très simple. Tout ce que nous avons à faire est d’ajouter une fonction shortcode à notre fichier functions.php qui a 2 options : titre et 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 l’en-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 du 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.
Utiliser le 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 découvrir mon thème premium et l’acheter. ??