Chargement…
Ajouter Des Onglets Sur Wordpress

Ajouter Des Onglets Sur WordPress



Vous avez déjà vue des blogs utiliser des onglets à la barre latérale (Sidebar) ou ils affichent les articles populaires, commentaires récents et tags. Dans ce tutoriel je vais vous montrez comment ajouter des onglets sur WordPress sous forme de Widget en utilisant Jquery. Ce WordPress tutoriel demande une connaissance approfondie en CSS/HTML et Jquery.

Pourquoi Ajouter Des Onglets Sur WordPress Avec Une Widget ?

Quand on commence a utiliser WordPress et a le développer, en ajoutant des articles et des éléments sur la barre latérale (Sidebar) on risque de manquer de place sur le blog pour afficher des contenus susceptible d’intéresser les visiteurs de notre site. Les onglets nous permettent d’ajouter différents contenus dans la même place, alors le visiteur cliqueras sur ce qui l’intéresse. Par exemple dans des blogs populaires on trouve des Onglets : Articles Populaires Par Jour / Semaine / Mois. Dans cette article je vais vous montrez comment créer des onglets sous une Widget Jquery, mais notez que vous pouvez ajouter ce que vous voulez comme contenu.

onglets widget wordpress

Création de la Widget des onglets avec Jquery

Avant de commencer, créez un dossier sur votre ordinateur, nommez le : Blueseodesign-tabber-widget. Puis créez 3 fichiers avec votre éditeur de texte comme Notepad++ par exemple.
Le premier fichier est : bsd-tabber-widget.php qui contiendras les codes HTML et PHP pour créer une Widget personnaliser sur WordPress. Le deuxième fichier est bsd-tabber-style.css qui va nous permettre d’ajouter les Onglets. Le troisième fichier est bsd-tabber.js qui contiendras notre code Jquery pour l’animation des onglets.

Ajouter le Contenu des Fichiers Pour Créer Notre Widget

Le fichier bsd-tabber-widget.php est celui charger de créer et d’enregistrer notre Widget sur WordPress :

Avec ce fichier on a créer un Plugin (une extension) dont on a ajouter une Widget qui contient les Onglets. Maintenant il faut ajouter le code Jquery Script qui va insérer les Onglets, pour cela copiez ce code dans bsd-tabber.js :

En fin, on va ajouter notre feuille de style, copiez ce code dans bsd-tabber-style.css :

Pour ajouter cette Widget sur votre WordPress, Archivez en format ZIP le dossier Blueseodesign-tabber-widget, Depuis votre Tableau de Bord => Extension => Ajouter => Envoyer.
Installez le Plugin et Activer, Puis Cliquez sur : Apparence => Widgets. Il faut juste glissez la Widget sur votre barre latérale (Sidebar).

Voila, vous avez créer votre widget des onglets sur WordPress, si vous avez des questions n’hésitez pas!



Laisser un commentaire