D'après notre expérience, l'une des choses fondamentales que vous devriez apprendre dans WordPress est comment utiliser les shortcodes dans vos widgets de barre latérale.
C'est parce que de nombreux plugins utilisent des shortcodes pour afficher leur contenu au lieu d'avoir leurs propres widgets. Savoir comment utiliser les shortcodes dans les barres latérales vous permet de faire plus avec votre site et de tirer le meilleur parti de différents plugins.
Cet article vous montrera comment utiliser les shortcodes dans vos widgets de barre latérale WordPress. Nous couvrirons les méthodes pour les thèmes classiques et les thèmes de blocs.
Pourquoi utiliser des shortcodes dans vos widgets de barre latérale WordPress ?
Les shortcodes vous permettent d'ajouter du contenu et des fonctionnalités avancés à votre site Web, y compris des formulaires de contact, des tableaux, les meilleurs commentateurs, et bien plus encore. WordPress est livré avec plusieurs shortcodes intégrés, mais certains plugins ajoutent également leurs propres shortcodes.
Par exemple, vous pouvez afficher des photos Instagram dans la barre latérale WordPress en utilisant un shortcode fourni par Smash Balloon Instagram Feed.
Ce contenu apparaîtra alors sur l'ensemble de votre site Web WordPress, vous n'avez donc pas besoin de l'ajouter manuellement à chaque page et article. Cela peut vous faire gagner beaucoup de temps et d'efforts et contribue à maintenir la cohérence du design de votre site.
Dans cette optique, examinons quelques façons différentes d'ajouter et d'utiliser des shortcodes dans les widgets de la barre latérale de WordPress. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser.
- Méthode 1 : Ajouter un shortcode à l'éditeur de widgets de blocs WordPress (thèmes classiques)
- Méthode 2 : Ajouter un shortcode à l'éditeur de site complet (thèmes de blocs)
- Method 3: Using the Custom HTML Widget (More Customizable)
Méthode 1 : Ajouter un shortcode à l'éditeur de widgets de blocs WordPress (thèmes classiques)
La plupart des thèmes WordPress classiques gratuits et payants sont dotés de barres latérales prêtes pour les widgets. Dans cette optique, vous pouvez souvent simplement ajouter un widget Shortcode à la barre latérale de votre site Web.
Tout d'abord, allez dans Apparence » Widgets dans votre tableau de bord. Ici, vous verrez tous les différents emplacements où vous pouvez ajouter des widgets dans WordPress, y compris la barre latérale.
Cliquez simplement sur le bouton « + Ajouter un bloc » et commencez à taper « Shortcode ».
Lorsque le bon bloc apparaît, faites-le glisser sur la barre latérale de WordPress.
Vous pouvez maintenant ajouter votre shortcode au bloc.
Lorsque vous avez terminé, n'oubliez pas de cliquer sur « Mettre à jour » pour rendre les modifications publiques.
Vous pouvez maintenant visiter votre blog WordPress ou votre site Web pour voir le shortcode en action.
Méthode 2 : Ajouter un shortcode à l'éditeur de site complet (thèmes de blocs)
Si vous utilisez un thème de blocs, vous pouvez ajouter un shortcode à la barre latérale en utilisant l'éditeur de site complet. Dans votre tableau de bord WordPress, allez dans Thèmes » Éditeur.
Vous verrez maintenant certains paramètres pour modifier votre thème de blocs.
Pour modifier la barre latérale de votre thème, vous devez généralement cliquer sur le menu « Modèles ».
Faites maintenant défiler jusqu'à « Parties de modèle ».
C'est là que vous trouverez les parties de modèle par défaut de votre thème de blocs, telles que les en-têtes, les pieds de page et les barres latérales. Les thèmes classiques classent généralement ces éléments comme des zones de widgets.
Tout comme les thèmes classiques, votre thème de blocs peut ou non avoir une partie de modèle de barre latérale. Dans ce cas, vous devrez peut-être en créer une vous-même. Vous pouvez lire notre guide pour débutants sur l'édition complète du site WordPress pour savoir comment faire.
Une fois que vous avez localisé votre barre latérale, cliquez simplement dessus.
Ensuite, cliquez simplement sur le bouton « Modifier » en forme de crayon.
Cela vous amènera à l'éditeur de blocs pour modifier la barre latérale.
Maintenant, tout comme avec l'éditeur de blocs, vous pouvez cliquer sur le bouton « + Ajouter un bloc » n'importe où.
Après cela, sélectionnez le bloc « Shortcode ».
Une fois terminé, ajoutez simplement le shortcode comme vous le feriez normalement.
Ensuite, cliquez sur « Enregistrer » pour officialiser vos modifications.
Astuce de pro : Si vous êtes récemment passé d'un thème classique à un thème de blocs et que vous souhaitez utiliser votre ancien widget de barre latérale comme bloc, consultez notre guide sur comment convertir un widget WordPress en bloc.
Méthode 3 : Utilisation du widget HTML personnalisé (plus personnalisable)
Parfois, vous voudrez peut-être afficher d'autres contenus en plus du shortcode. Par exemple, RafflePress peut ajouter un concours ou un cadeau à votre barre latérale à l'aide d'un shortcode. Pour attirer encore plus l'attention sur le concours, vous pourriez vouloir afficher un titre au-dessus de la compétition.
Au lieu de créer des blocs Shortcode et Titre séparés, vous pouvez simplement ajouter le shortcode et le texte à un bloc HTML personnalisé.
Cela vous aide à organiser les différents contenus dans une belle mise en page. Vous pouvez également styliser le bloc à l'aide de HTML, de sorte que vous pouvez contrôler exactement son apparence dans la barre latérale.
Pour plus de détails, consultez notre avis complet sur RafflePress.
Le bloc HTML personnalisé ne prend pas en charge les shortcodes par défaut, mais vous pouvez facilement changer cela en ajoutant du code personnalisé à WordPress. Après avoir ajouté ce code, vous pouvez utiliser des shortcodes dans n’importe quel bloc HTML personnalisé sur l’ensemble de votre site Web WordPress.
Souvent, vous trouverez des guides avec des instructions pour ajouter du code personnalisé au fichier functions.php de votre site. Cependant, cela n’est pas recommandé car toute erreur dans le code peut causer des erreurs WordPress courantes, voire casser complètement votre site.
C’est là que WPCode intervient.
Ce plugin gratuit permet d’ajouter facilement du CSS, du PHP, du HTML personnalisé, et plus encore à WordPress, sans mettre votre site en danger. Mieux encore, il est livré avec une bibliothèque de snippets prêts à l’emploi, y compris du code qui vous permet d’utiliser des shortcodes dans les widgets de texte.
Pour commencer, vous devrez installer et activer WPCode. Pour plus d’informations, vous pouvez consulter notre guide étape par étape sur comment installer un plugin WordPress.
Après cela, allez dans Snippets de code » Ajouter un snippet dans le tableau de bord WordPress. Vous pouvez maintenant commencer à taper « shortcode ».
Lorsqu’il apparaît, survolez le snippet suivant avec votre souris : « Activer l’exécution des shortcodes dans les widgets de texte ».
Vous pouvez ensuite cliquer sur « Utiliser le snippet ».
Cela ouvrira le snippet dans l’éditeur WPCode. WPCode configure les paramètres du snippet pour vous, vous pouvez donc simplement cliquer sur le commutateur « Inactif » pour qu’il devienne bleu.
Une fois cela fait, cliquez sur « Mettre à jour » pour rendre le snippet actif.
Maintenant, vous pouvez ajouter un shortcode à n’importe quel widget de texte.
Allez simplement dans Apparence » Widgets et tapez « HTML personnalisé » dans la barre de recherche.
Lorsque le bloc droit apparaît, faites-le glisser sur la barre latérale de votre site web.
Une fois cela fait, vous pouvez ajouter votre HTML et votre shortcode au bloc.
Lorsque vous êtes satisfait de la configuration du widget, cliquez sur « Mettre à jour ».
Maintenant, si vous visitez votre site web, vous verrez le shortcode et le HTML personnalisé en direct.
FAQ : Utiliser des shortcodes dans les widgets de la barre latérale WordPress
Quel que soit le thème que vous utilisez, vous devriez pouvoir ajouter des shortcodes à la barre latérale en utilisant l'une des méthodes ci-dessus.
Cependant, si vous avez besoin d'aide supplémentaire, voici quelques-unes des questions les plus fréquemment posées sur l'ajout de shortcodes à la barre latérale.
Comment changer l'emplacement d'apparition du widget de la barre latérale ?
L'emplacement de la barre latérale est contrôlé par votre thème WordPress. Si vous n'êtes pas satisfait de la position de la barre latérale, vous pourrez peut-être la modifier à l'aide des paramètres du thème.
De nombreux thèmes WordPress vous permettent de choisir entre différentes mises en page. Souvent, cela inclut l'affichage de la barre latérale sur différents côtés de l'écran.
Vous pouvez accéder au Personnalisateur de thème WordPress ou à l'éditeur de site complet pour voir les zones de barre latérale disponibles.
Comment ajouter une barre latérale à mon thème WordPress ?
Si votre thème n'a pas de barre latérale, vous pourriez créer un thème enfant, puis ajouter une barre latérale à l'aide de code.
Vous pouvez consulter notre guide sur comment ajouter des en-têtes, des pieds de page et des barres latérales personnalisés dans WordPress pour plus d'informations.
Si vous n'êtes pas à l'aise avec l'écriture de code, vous pouvez également créer un thème WordPress personnalisé à l'aide d'un plugin tel que SeedProd. Vous pouvez utiliser ce plugin de constructeur de pages populaire pour concevoir votre propre thème et barre latérale à l'aide d'un simple éditeur par glisser-déposer.
Pour des instructions étape par étape, veuillez consulter notre guide sur comment créer un thème WordPress personnalisé sans aucun code.
Comment utiliser un shortcode différent sur chaque article ou page ?
Parfois, vous voudrez peut-être utiliser différents shortcodes sur certains de vos articles et pages. Par exemple, vous pourriez vouloir afficher les articles les plus populaires sur votre page d'archives et afficher des publicités sur votre page d'accueil.
Pour en savoir plus, veuillez consulter notre guide sur comment afficher des barres latérales différentes pour chaque article et page dans WordPress.
Nous espérons que cet article vous a aidé à apprendre comment ajouter facilement des shortcodes à vos widgets de barre latérale WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment afficher ou masquer des widgets sur des pages WordPress spécifiques et nos sélections d'experts des meilleurs thèmes compatibles avec Gutenberg.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Dennis Muthomi
J'ai constaté qu'en créant un modèle standardisé combinant des shortcodes avec du HTML personnalisé et des classes CSS, il est beaucoup plus facile de maintenir une image de marque cohérente tout en permettant des ajustements de style spécifiques au client.
L'utilisation de WPCode au lieu de modifier directement functions.php m'a évité de nombreux problèmes potentiels sur différents sites. Excellente astuce d'inclure cette approche plus sûre dans le guide !
Mrteesurez
Voulez-vous dire, dans la dernière méthode, que je peux ajouter des shortcodes dans la boîte de widget HTML d'origine et qu'ils fonctionneront aussi bien que dans la boîte de widget shortcode ?
Support WPBeginner
For now you should be able to
Admin
Ralph
Les shortcodes sont l'une des meilleures choses dans WordPress. Ils font gagner tellement de temps quand on ne doit changer le code qu'à un seul endroit et que tout le reste se met à jour tout seul. Je les adore !
J'utilisais Ad Inserter depuis des années, mais il est limité à 20 shortcodes dans la version gratuite. Je vais certainement passer à la méthode WordPress maintenant que je la connais.
Support WPBeginner
Glad you found it helpful
Admin
Arkanum
Thanks! For me it’s work
Support WPBeginner
Glad our guide helped
Admin
Zdenko Zec
Bonjour. Je l'ai essayé sur mon site web développé en local mais cela ne fonctionne pas. J'ai essayé à la fois avec le widget texte et en ajoutant le filtre à functions.php et en utilisant le HTML personnalisé. Pouvez-vous partager vos réflexions à ce sujet ? Merci.
Support WPBeginner
Vous voudrez peut-être vous assurer que le shortcode que vous utilisez est un shortcode fonctionnel.
Admin
Merci beaucoup !!
Excellent article ! Merci beaucoup.
Support WPBeginner
You’re welcome
Admin
Muhammad Zeeshan
Bonjour
Bonjour
En fait, je veux afficher uniquement le texte de la publication sur une page spécifique, comment puis-je faire cela ?
Support WPBeginner
Pour ce que vous semblez vouloir, vous pourriez jeter un œil à :
https://www.wpbeginner.com/plugins/how-to-insert-wordpress-page-content-to-another-page-or-post/
Admin
Rahul
Hier soir, j'ai installé un plugin pour les shortcodes. Mais je n'ai pas pu l'utiliser. Mais maintenant, j'ai réussi
Support WPBeginner
Glad our article could help
Admin
Ahmer
C'est un article très bon et informatif sur la façon d'utiliser les shortcodes.
Je cherchais un tel article.
Les shortcodes font vraiment une différence sur les blogs et beaucoup de gens ne savent pas comment les utiliser correctement.
MikeL
L'option de code personnalisé ne fonctionne que dans la zone de CONTENU du texte du widget, mais pas dans la zone de TITRE.
nicole
où va-t-on pour créer réellement les shortcodes ?? Je cherche où trouver les paramètres montrés dans cette capture d'écran :
Neville
Bonjour,
J'ai de l'expérience en développement web, mais je suis nouveau dans WooCommerce. Je construis un site web pour un client, basé sur le thème Avada WP (5.6.1). Ceci est en cours de développement :
Vous verrez qu'il y a un carrousel sur la page d'accueil, mais j'ai cherché sans succès un plugin pour le remplacer qui me permettrait d'afficher des produits variables dans un style galerie/grille. Il doit fonctionner avec les variations de produits Woocommerce, par exemple le prix, la catégorie, une brève description. Ajouter au panier serait également idéal.
Je me demande si les shortcodes pourraient être utilisés pour créer cela ?
Si oui, comment pourraient-ils être ajoutés pour remplacer le carrousel ?
Merci.
Neville
Brendan
Bonjour,
J'ai essayé d'utiliser le widget shortcode comme vous l'avez suggéré, mais je n'arrive toujours pas à aligner les widgets dans le pied de page côte à côte plutôt que les uns sur les autres.
Pouvez-vous m'aider s'il vous plaît ?
Merci !
Brendan
lukman
Ça ne marche pas
Mathiew Burkett
Bonjour
J'ai créé le plugin spécifique au site et activé le plugin.
J'essaie de faire fonctionner un shortcode dans une zone différente où un shortcode ne fonctionne actuellement pas avec mon thème.
J'utilise la version 3.08 du thème Socrates.
Voici un lien vers une capture d'écran que j'ai créée et qui montre les deux endroits que j'ai encerclés en rouge où j'ai besoin qu'un shortcode fonctionne, et j'ai cliqué avec le bouton droit sur la zone où j'ai besoin d'ajouter le plugin et je l'ai inspectée pour trouver le code dans la zone de mon thème où j'essaie de faire fonctionner un shortcode et j'ai également ajouté la capture d'écran du code.
Quelqu'un pourrait-il me dire s'il existe une fonction que je pourrais ajouter au plugin spécifique au site qui ferait fonctionner un shortcode dans les deux zones que j'ai encerclées.
Gurpreet Singh Saini
Merci, ça fonctionne.
Bilal
oui, ça fonctionne.
A WP Life
Bonjour,
L'utilisateur a signalé après la nouvelle mise à jour de WordPress 4.5.3.
Shortcode ne fonctionne pas dans le widget texte..
Notre plugin est
Besoin d'aide, merci d'avance.
A WP Life
Support WPBeginner
Veuillez signaler le conflit à l'auteur du plugin.
Admin
Vinicius
Merci !
Monuruzzaman Milon
Vraiment génial, j'adore tous vos articles de blog. Parce que j'apprends le développement de thèmes WordPress. Cela m'aide vraiment concernant le hook add_filter.
Merci,
Alfredo
Merci beaucoup.
Arra Referees
Merci pour cela. Sauveteur. J'utilisais un plugin (GCAL) avec un widget de barre latérale spécial mais il ne me permettait pas d'ajouter un lien vers le calendrier en dessous sans plonger dans le code. Le simple ajout de ceci et l'utilisation du shortcode ont vraiment fait l'affaire. Merci beaucoup. Fonctionne dans 4.1.1
Manuel Meurer
Super astuce, fonctionne toujours très bien dans Wordpress 4.0 !
toile d'araignée
This saved my day – thanks!
slim shady
va-t-il interpréter [ ] tout comme un shortcode ?
Support WPBeginner
Non, seulement si un shortcode est enregistré. Par exemple, si vous n'avez pas de shortcode [pommes], il s'affichera tel quel.
Admin
firoz
Je veux un shortcode dans la barre latérale
queenofthehivemomof5
J'ai essayé de le mettre en bas du modèle PHP functions, entre les balises php, et j'obtiens toujours le code BRUT entourant mon shortcode. Le shortcode s'affiche, mais il est entouré de [raw] [/raw].
D'autres suggestions ? Merci d'avance !
wpbeginner
@queenofthehivemomof5 Vous devez le coller entre les balises php et vous assurer qu'il ne fait pas partie d'une autre fonction... il est donc préférable de le placer en bas.
queenofthehivemomof5
Y a-t-il une partie spécifique du fichier functions.php dans laquelle je devrais le coller ? Cela ne semble pas fonctionner pour moi. J'obtiens la sortie de mon shortcode, mais elle est entourée de "Raw".
[raw][/raw]TAB 1TAB 2TAB 3[raw][/raw]Contenu de l'onglet 1[raw] [raw] [raw][/raw] (quelque chose comme ça)
edward.caissie
Cette ligne de code peut être ajoutée à un plugin qui a un shortcode et cela fera la même chose... bien que l'ajout de la ligne de code au fichier functions.php d'un thème enfant serait une méthode plus pérenne.