Dans cet article, vous allez découvrir :
- Comment créer une nouvelle zone à widgets dans WordPress et
- Comment afficher un Widget que vous aurez glissé dans cette nouvelle zone, directement dans le contenu d’une page ou d’un article de votre blog
…sans avoir à écrire une seule ligne de code, juste en quelques clics de souris !
Cette astuce est basée sur l’utilisation conjointe de 2 extensions ou plugins WordPress gratuits et ne nécessite aucune manipulation de code ou de fichiers.
Extensions WordPress nécessaires
Vous devez commencer par installer et activer les 2 extensions WordPress suivantes:
Custom sidebars sera utilisé pour créer et activer une nouvelle sidebar (zone à widgets) dans WordPress. Vous pourrez ensuite y glisser tous les Widgets que vous souhaiterez utiliser dans le contenu de vos articles ou pages WordPress.
Widget Instance vous permettra d’insérer, directement dans un article ou une page, un des widgets qui aura été glissé dans cette sidebar.
Installation des extensions WordPress
Dans le tableau de bord de votre site WordPress, dans le menu ‘Extensions’ => cliquez sur ‘Ajouter’
Entrez le nom de l’extension ‘Custom sidebars’ dans la case => ‘Mot Clé’ et cliquez ensuite sur le bouton ‘Chercher parmi les extensions’
Vous devez ensuite cliquer sur => ‘Installer maintenant’
Cliquer ensuite sur ‘Activer l’extension’ Custom sidebars
Pour installer ‘Widget Instance’, vous recommencez et vous cliquez à nouveau sur ‘Ajouter’ dans le menu ‘Extensions’ de WordPress et entrez ensuite ‘Widget Instance’ comme ‘mot clé’ pour la recherche
Vous devez aussi cliquer sur => ‘Installer maintenant’,
et pour terminer, dans la page qui s’affichera => cliquer sur ‘Activer l’extension’ Widget Instance
Création d’une nouvelle zone à Widgets avec ‘Custom sidebar’
Pour créer votre nouvelle zone à Widgets ou sidebar, vous pouvez soit cliquer sur => ‘Apparence’ => ‘Sidebars Personnalisées’ qui ouvrira la page d’options de ‘Custom Sidebars’ ou alors cliquez de suite sur => ‘Widgets’.
Dans les 2 cas, vous pouvez créer une nouvelle sidebar.
Dans la page d’options de ‘Custom sidebar’ , sous ‘Nouvelle Sidebar’ entrez un nom et une description puis cliquez, pour valider, sur le bouton ‘Créer une Sidebar’.
Comme c’est indiqué, dans cette page d’options, la nouvelle sidebar sera immédiatement visible dans la page ‘Widgets’ de WordPress. D’ailleurs, dans cette page ‘Widgets’ de WordPress, vous découvrirez que vous pouvez aussi y créer, maintenant, de nouvelles sidebars.
Quoiqu’il en soit, après la création de cette nouvelle sidebar, vous pouvez y glisser des Widgets, et autant de widgets que vous le souhaitez.
Et contrairement aux autres zones à widgets que pourrait comporter votre thème, les widgets WordPress présents dans cette nouvelle sidebar ne s’afficheront pas immédiatement sur votre site.
Mais par contre ces widgets seront considérés comme actifs par WordPress et vous allez pouvoir utiliser l’extension ‘Widget Instance’ pour les disposer ou vous le souhaitez dans les articles ou pages de votre site WordPress.
D’autre part, je tiens à préciser que si vous cherchez à afficher des widgets toujours au même endroit dans votre site, il est préférable d’envisager une modification de votre thème via un thème enfant. Pour faire cela vous pouvez consulter ces 2 pages du Codex WordPress : Function Reference/register sidebar et Customizing Your Sidebar
Insertion d’un Widget avec ‘Widget Instance’
L’extension ‘Widget Instance’ vous permet grâce à son bouton wysiwyg en forme de puzzle d’insérer et d’afficher des widgets en dehors des zones à widgets où ils ont été assignés
Vous devez donc maintenant éditer l’article ou la page ou vous souhaitez insérer un widget qui se trouve dans votre nouvelle sidebar. Et après avoir positionner votre curseur à l’endroit ou vous souhaitez ajouter votre widget, cliquer sur le bouton en forme de puzzle qui se trouve à la fin de la première rangée des boutons de l’éditeur de WordPress.
Une fenêtre s’ouvre en lightbox et vous pouvez alors sélectionner un des widgets inscrit sous le nom de votre ‘Custom Sidebar’.
Vous n’avez plus, alors, qu’à cliquer sur le bouton ‘Insérer’ pour qu’un shortcode s’ajoute dans le texte de votre article. Ce shortcode sera ensuite remplacer par le widget dans la page web de votre site,
comme le widget ‘Magic Text Widget’ affiché ci-dessous : [widget_instance id= »magictextwidget-15″ format= »0″]
Bien évidemment, si votre objectif est d’afficher un widget qui est déjà présent dans une zone à widgets de votre site, vous n’avez pas besoin de passer par la création d’une nouvelle sidebar avec l’extension ‘Custom sidebar’. Avec ‘Widget Instance’, vous pouvez sélectionner un widget qui se trouve déjà utilisé dans une sidebar de votre thème.
Mais cet article avait aussi pour but de montrer aux utilisateurs du plugin Crealist-SG, qu’il est aussi possible d’insérer des formulaires de capture SG-Autorépondeur composés avec le widget Crealist-SG ou ils le souhaitent dans les pages ou les articles de leurs sites WordPress.
C’est d’ailleurs ce que j’ai fais avec le formulaire affiché ci-dessous et que vous pouvez compléter si vous souhaitez recevoir les prochains articles de ce blog ainsi que le plugin ‘Magic Text Widget’ en cadeau.
[widget_instance id= »crealist-3″ format= »0″]
Pour terminer, si vous souhaitez ajouter des colonnes dans vos pages et créer des mises en page uniques avec des Widgets, vous pouvez le faire sans avoir à écrire ou modifier du code avec le plugin WordPress : Sidebar & Widget Manager for WordPress.
denis a écrit
10 février 2014 à 15:36Malheureusement Widget instance ne fonctionne pas du moins avec ma version installée, la 3.6. Connaissez-vous un widget qui pourrait palier à ce problème ?
José Kost a écrit
12 février 2014 à 01:01Bonjour Denis,
Merci pour votre commentaire.
Mais attention : Chercher un autre plugin pour insérer vos widgets dans les pages et articles de votre site ne changera rien au fait que votre version de WordPress présente de nombreuses failles de sécurité ! Vous devriez commencer par mettre à jour votre installation 3.6…en danger.
La version 3.6.1 de WP était d’ailleurs sorti très rapidement pour en corriger quelques unes.
D’autre part, la plupart des plugins sont en cours ou déjà mis à jour pour la version 3.8.1. de WordPress. Commencer par mettre à jour votre installation est selon moi la meilleure solution.
Cordialement,
José Kost
deleplanque a écrit
12 février 2014 à 20:13bonjour,
excellent !
Y a t’il une astuce pour placer 2 widgets l’un à côté de l’autre ?
José Kost a écrit
12 février 2014 à 21:41Bonjour,
Merci pour votre commmentaire.
En fait, pour que les widgets s’affichent l’un à coté de l’autre, il vous faudra créer une sidebar horizontal. Cela demande pas mal de modifications ou ajouts de code php, html et css, et selon le thème utilisé dans votre site.
Si vous cherchez une solution plus simple et plus rapide, vous pouvez opter pour Sidebar & Widget Manager for WordPress.
J’en parle dans l’article Comment utiliser et gérer différemment les Widgets dans WordPress
Bien cordialement,
José Kost
Renaud a écrit
14 février 2014 à 13:14Bonjour José
J’ai suivi vos instructions pour l’affichage d’un widget sur la page d’accueil par le biais d’une custom sidebar. J’ai donc créé une sidebar appelée ‘actus’ avec le widget ‘articles récents’.
Toutefois lorsque je clique sur la pièce de puzzle pour ajouter le widget à la page, dans le menu déroulant ‘select widget’, rien n’apparait : il est vide. (que je coche ou non sur ‘include…’)
Vous avez une explication ?
Je suis sur WP 3.8.1
José Kost a écrit
14 février 2014 à 14:40Bonjour,
Merci pour votre commentaire.
Dans la fenêtre de sélection de Widget Instance, qui s’affiche lorsque vous cliquez sur le ‘puzzle’, vous devez voir la liste de tous les widgets qui se trouvent sur votre site ? Avez-vous d’autres widgets et d’autres sidebars ?
Si oui et que la lite est vide : c’est certainement un problème de conflit avec un autre plugin ou peut-être avec le thème wordpress activé sur votre site.
Cette question est soulevée ici et je vous encourage aussi à faire appel au support développeur du plugin.
Vous pouvez aussi tenter de trouver le conflit en désactivant une à une vos extensions et en réessayant chaque fois d’insérer votre widget via le puzzle.
Essayez aussi avec un thème WordPress différent.
Vous pouvez aussi essayer de coller directement le code
[widget_instance id="recent-posts-1"]dans votre page et vérifié si le widget apparaît.(en fait, le id du widget du code ci-dessus est peut-être pas le bon, vous devez vérifié dans le code ou tester en remplaçant 1 par 2 ou 3, selon si vous utilisez déjà le widget articles récents dans une autre sidebars). C’est peut-être un conflit uniquement au niveau de l’éditeur!Si vous me communiquer la liste de vos plugins actifs, je pourrais aussi vous soumettre une solution.
Cordialement,
José
Renaud a écrit
15 février 2014 à 16:39Merci pour votre réponse.
J’ai bien d’autres widgets et la liste reste vide, donc il y a sans doute un conflit.
Ceci dit, insérer le shortcode marche. Je n’ai donc peut-être pas besoin du plugin ‘custom sidebars’ puisque l’id suffit.
Merci encore pour votre aide détaillée.
Renaud
José Kost a écrit
15 février 2014 à 17:05Bonjour Renaud,
Si en insérant le shortcode cela fonctionne, c’est un conflit c’est certain et surement au niveau du code de l’éditeur WordPress. Testez en désactivant un à un vos autres plugins ou avec un autre thème.
Par contre, pour ce qui est du plugin ‘Custom Sidebars’, le plugin vous permet de créer une sidebar ‘virtuelle’ ou vous pouvez glisser des widgets, pour les rendre ‘actifs’, et ces widgets ne seront visibles nulle part ailleurs sur votre site; en fait, juste à l’endroit ou vous aurez inscrit un shortcode ‘Widget Instance’.
En résumé si dans votre shortcode vous ajouter le nom et l’id d’un widget inactif (qui n’est glissé dans aucune sidebar) celui-ci ne s’affichera pas. Donc créer une sidebar ‘virtuelle’ reste une obligation si vous souhaitez faire s’afficher un widget qui ne se trouve pas ailleurs dans votre site.
En fait un widget est actif si vous l’utilisez dans une autre sidebar, et donc dans ce cas en effet vous n’avez plus besoin de cette sidebar virtuelle.
Cordialement,
José Kost
Renaud a écrit
17 février 2014 à 12:36Bonjour José
Merci pour votre réponse détaillée, j’apprécie beaucoup 🙂
J’ai bien compris l’utilité de Custom Sidebars, c’est très clair. Par contre je ne suis pas certain de comment récupérer l’id d’un widget. Evidemment la question ne se poserait si Widget Instance fonctionnait comme prévu (affichage des widgets dans ‘select widget’).
Si je désactive mes plugins ou change de thème est-ce que je ne risque pas de perdre toutes les options de configuration de ces plugins/thème telles qu’elles sont actuellement ? En gros pourais-je revenir à l’identique si je les réactive ensuite ?
Dans le doute voici une liste de mes plugins actifs :
BackWPup, Custom sidebars, Easy Captcha, GRAND Flash Album Gallery, Image Zoom, Nav Menu Roles, SB Welcome Email Editor, Ultimate TinyMCE, Extension « User Role Editor », Widget Instance, WP Super Cache.
Et mon thème : Brunelleschi modifié.
Cordialement,
Renaud
I-Marketing Pro a écrit
27 octobre 2014 à 16:37Salut,
Merci pour ces extensions et les descriptions que tu en as faites. Je vais de ce pas voir comment tout cela fonctionne, parce que j’aimerais bien installer un carousel des derniers articles sur ma page d’accueil (histoire de rendre le design de mon site un peu plus attrayant au regard), il me faut donc créer un nouvelle place de widget pour pouvoir utiliser l’extension que je viens d’installer et qui me permet de le faire.
Enfin bref, merci pour cet article ! Sincèrement.
A bientôt,
Hugo.
José Kost a écrit
27 octobre 2014 à 19:43Salut,
Merci pour ce commentaire.
Bien cordialement,
José
Flo34 a écrit
5 mars 2015 à 21:29Bonjour et merci pour se tuto qui ma beaucoup aidez et qui a résolut un dés problèmes que j’essayez de résoudre depuis un petit moment mais j’ai un dernier soucis….
c’est que le widget que j’ai mis sur la page dont je voulait est complètement a gauche est que je le veut au milieu mais je ne trouve pas de solution car même en modifiant le code css du widget sa ne marche pas donc j’espère que vous pourriez m’aidez et merci d’avance pour les réponse qu’il y aura.
ps: et encore merci très bon tuto bien expliquez sa aide vraiment continuez comme sa.
Flo34