Qu'est-ce que la barre latérale de WordPress ?

Une barre latérale WordPress est une zone de la mise en page d'un site web qui est généralement située sur le côté gauche ou droit d'une page, mais qui peut également être située en haut ou en bas d'une page. La fonction première d'une barre latérale est d'afficher du contenu supplémentaire, de fournir une navigation et d'améliorer l'expérience de l'utilisateur. Elle contient généralement divers widgets (gadgets) tels que des champs de recherche, des articles récents, des petites annonces, des nuages de mots-clés, des liens vers les médias sociaux, des publicités, des calendriers et du code HTML personnalisé.

Exemples de barres latérales de sites web

1.Wikipédia (encyclopédie en ligne)

2) ElementorCentre d'aide

Encadré Principales fonctions et utilisations

1. Navigation et rechercheLes barres latérales peuvent contenir le menu de navigation et le champ de recherche du site, ce qui permet aux utilisateurs de trouver plus facilement le contenu qui les intéresse.
2. Vitrine des derniers contenusEn affichant les derniers messages, les commentaires ou les articles les plus populaires, la barre latérale peut inciter les utilisateurs à cliquer et augmenter le nombre de pages vues.
3. Publicité et promotionLes barres latérales sont idéales pour afficher des publicités ou des contenus promotionnels susceptibles de capter efficacement l'attention des utilisateurs.
4. Liens vers les médias sociauxLes icônes de médias sociaux : En ajoutant des icônes de médias sociaux et des liens dans la barre latérale, un site web peut encourager les utilisateurs à partager le contenu sur les plateformes sociales, augmentant ainsi l'exposition du site.
5. Contenu personnaliséLes barres latérales peuvent ajouter du code HTML, du texte ou d'autres contenus personnalisés afin d'offrir davantage de personnalisation et de fonctionnalités.

Gérer les barres latérales à partir du Customiser de WordPress

L'une des principales façons de gérer les barres latérales d'un thème est de passer par le Customiser de WordPress. Si votre thème prend en charge les barres latérales et les personnalisations, elles s'affichent généralement ici.

L'emplacement exact des paramètres dépend du thème, mais vous devrez généralement rechercher des options telles que Paramètres de mise en page, Paramètres généraux ou Paramètres pour l'ensemble du site.

Par exemple, lorsque vous utilisez un thème OceanWP, vous pouvez choisir différentes configurations de barre latérale dans les paramètres généraux, telles que la barre latérale droite, la barre latérale gauche ou les barres latérales gauche et droite, et vous pouvez également configurer la largeur de la barre latérale.

Si vous ne trouvez pas ces réglages, essayez d'explorer les différentes zones du personnalisateur de WordPress. Vous pouvez également consulter la documentation d'assistance du développeur du thème.

Gérer les barres latérales pour chaque contenu

Certains thèmes proposent également des paramètres au niveau des pages qui vous permettent de contrôler les barres latérales de chaque article ou page.

Si le thème dispose de cette fonctionnalité, vous pouvez voir ces options lorsque vous utilisez l'éditeur WordPress. Elles peuvent être affichées dans la boîte méta située sous l'éditeur ou dans la barre latérale du document.

Par exemple, lorsque vous utilisez le thème OceanWP, vous pouvez choisir différentes dispositions de la barre latérale pour les pages ou les articles individuels.

Comment ajouter des widgets à la barre latérale de WordPress

La barre latérale est une zone du site web, mais dans laquelle le contenu de la page d'accueil peut être affiché.Ajouter du contenuSi vous voulez utiliser les widgets WordPress, vous devez utiliser les widgets WordPress.

Vous pouvez ajouter des widgets à la barre latérale du thème de deux manières :

1. Personnalisation de WordPress
2. Zone de widgets dédiée

Les deux méthodes se synchronisent automatiquement, vous pouvez donc utiliser l'une ou l'autre. L'avantage d'utiliser le personnalisateur de WordPress est que vous pouvez prévisualiser l'effet du widget en temps réel.

Gérer les widgets via le Customiser de WordPress

Pour gérer les widgets de la barre latérale à l'aide du personnalisateur de WordPress, procédez comme suit :

1. commutateur à Apparence → Personnalisé.

2. option widgets Options de menu.
3. Vous serez invité à sélectionner les zones de widgets que vous souhaitez gérer. En fonction de votre thème, il se peut que vous ne voyiez qu'une seule option ou que vous en voyiez plusieurs, y compris les zones qui ne sont pas dans la barre latérale (comme les pieds de page).

4. Cliquez ensuite sur"Ajouter un widget"pour commencer à ajouter le widget à la barre latérale. Une fois le widget ajouté, configurez-le à l'aide des options de la barre latérale :

Lorsque vous ajoutez de nouveaux widgets, vous les voyez immédiatement apparaître dans un aperçu en direct du site. Il est également possible d'utiliser la fonction "glisser-déposer" pour réorganiser l'ordre des widgets existants.

Outre l'utilisation du personnalisateur, WordPress propose un espace dédié à la gestion des widgets. Vous pouvez y accéder simplement par l'option "Widgets" du menu "Apparence".

Dans cette zone, vous pouvez voir tous les widgets qui peuvent être ajoutés à votre site web, ainsi que la zone de la barre latérale fournie avec votre thème (et éventuellement d'autres zones de widgets, comme le pied de page).

Pour ajouter un widget à votre site web, il vous suffit de le faire glisser de la liste des widgets disponibles vers la barre latérale ou toute autre zone où vous souhaitez le placer. Vous pouvez ensuite personnaliser son contenu en cliquant sur le bouton de configuration du widget, par exemple en ajustant le texte, en sélectionnant une image, etc :

Concevoir des widgets personnalisés avec Elementor

Avec Elementor Pro, il est facile de concevoir des widgets personnalisés et de les ajouter à votre barre latérale. Voici comment utiliser Elementor pour créer et ajouter des widgets personnalisés étape par étape :

Tout d'abord, ouvrez le backend de WordPress et naviguez jusqu'à la section "Templates" d'Elementor et sélectionnez "Ajouter un nouvel élément"pour créer un nouveau modèle de section. Ce modèle peut être tout ce que vous souhaitez mettre en valeur, comme un formulaire d'inscription par courriel ou une phrase d'appel à l'action (CTA) attrayante.

Lors de la création d'un modèle, utilisez l'interface "glisser-déposer" d'Elementor pour ajouter et disposer facilement divers éléments tels que du texte, des images, des boutons, etc. N'oubliez pas de cliquer sur le bouton Publier pour enregistrer votre modèle dans la bibliothèque lorsque vous avez terminé.

Ensuite, rendez-vous dans la zone de la barre latérale où vous souhaitez afficher ce widget personnalisé. Trouvez et ajoutez l'élément "Bibliothèque Elementor"Widget. Une fois ajouté, une liste déroulante de modèles s'affiche. Dans cette liste, sélectionnez le modèle spécifique que vous venez de créer.

Comment ajouter une barre latérale personnalisée dans WordPress

Pour ajouter une barre latérale personnalisée à votre site Web WordPress, mais votre thème ne dispose pas d'une barre latérale intégrée ou vous souhaitez ajouter plusieurs barres latérales, vous pouvez suivre ces étapes simples :

Étape 1 : Enregistrer une barre latérale personnalisée

Tout d'abord, enregistrez la barre latérale dans WordPress afin qu'elle apparaisse dans la section "état extérieur" → "widgetsLa page "Code d'accès". Vous pouvez ajouter du code de deux manières :

1. Modifier le fichier functions.php du thème(Notez qu'il peut être dangereux de modifier le fichier du thème directement, il est donc préférable d'utiliser un thème enfant) :
   • Créez un thème enfant (s'il n'existe pas déjà).
   • Ajoutez le code pour enregistrer la barre latérale dans le fichier functions.php du thème enfant.
2. Utilisation du plugin d'extraits de code(par exemple, les plug-ins Code Snippets, Insert Headers and Footers) :
   • Installez et activez le plugin Code Snippets.
   • Créez un nouvel extrait de code et ajoutez le code pour enregistrer la barre latérale.

Exemple de code pour l'enregistrement d'une barre latérale: :

function my_custom_sidebars() {
    register_sidebar(array(
        
        'id' => 'custom-sidebar-1',
        
        'before_widget' =&gt; '<div id="%1$s" class="widget %2$s">',
        'after_widget' =&gt; '</div>',
        'before_title' =&gt; '<h2 class="widgettitle">',
        'after_title' =&gt; '</h2>',
    )) ;

    // Si vous avez besoin de plus de barres latérales, copiez le code ci-dessus et modifiez les paramètres 'name', 'id' et autres.
}
add_action( 'widgets_init', 'my_custom_sidebars' ) ;

Étape 2 : Afficher la barre latérale sur la page d'accueil

Les barres latérales sont enregistrées et doivent figurer dans le fichier de gabarit de la page d'accueil (par ex. header.phpetsidebar.phpetfooter.php ou des fichiers de modèles à page unique) pour l'appeler afin d'afficher une barre latérale sur le site. Cela implique généralement l'utilisation de l'élément barre latérale dynamique() et les jugements conditionnels appropriés.

Par exemple, dans le fichier sidebar.php :

Ce code vérifie si la barre latérale nommée "custom-sidebar-1" contient le widget actif et l'affiche si c'est le cas.

Après avoir suivi ces étapes, vous pouvez voir la nouvelle barre latérale dans la page Apparence → Widgets et y ajouter des widgets.

Comment créer une barre latérale avec Elementor

Pour afficher une barre latérale personnalisée à l'aide d'Elementor, créez un nouveau modèle d'article ou de page qui contient la barre latérale ainsi que la zone de contenu principale.

Tout d'abord, rendez-vous à l'adresse suivanteTemplates → Theme Builder. Ensuite, sélectionnez l'endroit où ajouter la barre latérale en premier - le Poste uniquepeut-êtrePage unique: :

Vous pouvez choisir l'un des modèles prédéfinis. Ou créer votre design entièrement à partir de zéro. L'option la plus simple consiste à choisir l'un des modèles qui comprend déjà une barre latérale :

Modifiez ensuite leune barre latérale (dans un logiciel)et utiliser le widgetSélectionner la barre latéraleLa liste déroulante sélectionne la barre latérale personnalisée enregistrée à l'étape précédente.

Une fois cette opération effectuée, vous devriez voir un aperçu en direct de tous les widgets qui ont été ajoutés :

Pour mener à bien la tâche et garantirposteModèle. Lorsque vous effectuez cette action, vous pouvez utiliser des conditions d'affichage pour contrôler l'endroit où le modèle de barre latérale est affiché. Affichez-le sur tout le contenu (pour utiliser la barre latérale sur l'ensemble du site). Ou utilisez des règles d'affichage pour ajouter la barre latérale à un contenu spécifique uniquement.

Si vous avez l'habitude d'utiliser HTML, CSS ou PHP, vous pouvez ajouter une barre latérale dans le code. Sinon, il est recommandé d'utiliser Elementor Méthodes.

Pour afficher une barre latérale personnalisée dans WordPress via le code, vous devez modifier directement le fichier de template du thème. Comme il s'agit de modifier directement le thème, il est important d'utiliser un thème enfant pour éviter d'écraser vos modifications lors de la mise à jour du thème.

Pour plus d'informations sur la création et l'utilisation des thèmes enfants, vous pouvez consulter le Guide complet des thèmes enfants de WordPress.

Après avoir créé un thème enfant, vous déplacerez le dossier single.php est copié dans le dossier du thème enfant. Ensuite, modifiez le thème enfant dans la section single.php et ajoutez l'extrait de code suivant à l'endroit où vous souhaitez que la barre latérale personnalisée soit affichée :

<?php get_sidebar(); ?>

Comment supprimer la barre latérale dans WordPress

Comment supprimer une barre latérale que vous ne souhaitez pas utiliser. Par exemple, votre thème est livré avec une barre latérale, mais vous souhaitez qu'une partie ou la totalité du contenu utilise le modèle pleine largeur.

Pour supprimer la barre latérale dans WordPress, vous avez deux possibilités :

1. Utilisation d'Elementor Pro
2. Code d'utilisation

Avant d'utiliser ces méthodes, vérifiez si votre thème dispose d'une fonction intégrée permettant de désactiver la barre latérale. De nombreux thèmes proposent des options dans le personnalisateur de WordPress pour désactiver la barre latérale sans avoir à le faire manuellement. Il se peut aussi que le thème soit livré avec un modèle pleine largeur qui peut être sélectionné dans l'éditeur WordPress.

Si votre thème ne dispose pas de ces options, suivez les étapes suivantes pour supprimer manuellement la barre latérale.

Supprimer les barres latérales avec Elementor

Pour supprimer la barre latérale de WordPress à l'aide d'Elementor, vous devez créer un modèle qui ne contient pas la zone de la barre latérale. Les étapes sont les suivantes :

1. Créer un modèle: Aller à "modèle" → "Génération de thèmesWare", sélectionnez l'endroit où vous souhaitez supprimer la barre latérale, par exemple un seul article ou une seule page.
2. application mondialeSi vous souhaitez supprimer la barre latérale sur l'ensemble de votre site, vous pouvez utiliser ce modèle pour tout couvrir.
3. application localeSi vous ne souhaitez supprimer la barre latérale que sur certaines pages, vous pouvez choisir un modèle sans barre latérale aux endroits où vous en avez besoin.

Lorsque vous avez terminé, vous pouvezposteet utiliser les conditions d'affichage pour contrôler l'endroit où il est affiché.

Supprimer la barre latérale de WordPress avec du code

Vous pouvez supprimer la barre latérale de WordPress en modifiant directement le fichier de template du thème. Les étapes sont les suivantes :

1. Utilisation de thèmes enfantsPour ce faire, vous devez utiliser un thème enfant, car il est nécessaire de modifier les fichiers du thème. Cela évitera que la mise à jour du thème n'écrase vos modifications.
2. Copie de fichiers modèles: Le fichier modèle qui devra être supprimé de la barre latérale (par ex. single.phpetarchive.php etc.) du thème parent vers le dossier du thème enfant.
3. Modifier les fichiers de modèlesLes fichiers sont ouverts et les fichiers similaires sont supprimés. <?php get_sidebar(); ?> (le code peut être légèrement différent, mais il appelle essentiellement la barre latérale).
4. Ajustement de HTML et CSSLes pages de ce site sont en anglais : Ajustez le code HTML et CSS si nécessaire afin de vous assurer que la mise en page est correcte.

Comment afficher des barres latérales différentes pour des contenus différents ?

Nous avons vu précédemment comment ajouter une barre latérale dans WordPress même si votre thème ne la supporte pas. Mais que faire si vous souhaitez afficher différentes barres latérales sur différents contenus ? Cela vous permet d'afficher différentes collections de widgets pour différents types de contenu.

Par exemple, vous pouvez utiliser un ensemble de widgets pour les articles de blog de la catégorie "Commentaires" et un autre ensemble de widgets pour les articles de blog de la catégorie "Tutoriels".

utiliser Elementor Afficher différentes barres latérales

C'est le moyen le plus simple et vous pouvez suivre les étapes ci-dessous :

1. Créer un modèleLes modèles Elementor : Tout d'abord, créez plusieurs modèles Elementor, chacun contenant sa propre barre latérale.
2. Conditions de réglageVous pouvez ensuite passer aux paramètres de condition pour affecter chaque modèle à une catégorie, à une page ou à une autre condition.

Utilisation du plugin Content-Aware Sidebar

Une autre solution consiste à utiliser le plugin gratuit Content-Aware Sidebar. Après avoir installé et activé le plugin, suivez les étapes suivantes :

1. Ajouter une nouvelle barre latéralePour ce faire, vous devez vous rendre dans la rubrique "Content Aware → Add New".
2. Conditions de réglageSélectionnez la condition par laquelle vous souhaitez remplacer la barre latérale par défaut. Par exemple, si vous souhaitez utiliser cette barre latérale pour tous les articles de blog de la catégorie "Commentaires", créez une condition de catégorie.

3. commutateur à"Opération"et sélectionnez la barre latérale que vous souhaitez remplacer. Vous pouvez également "fusionner" les barres latérales pour inclure le contenu des deux :

4. Après avoir effectué votre sélection, cliquez sur"Créer". Ensuite, rendez-vous à l'adresse suivanteApparence → Widgetspour ajouter du contenu à la barre latérale conditionnelle :

Résumé :

En utilisant Elementor ou du code, vous pouvez mettre en place différentes collections de widgets pour différents types de contenu, ainsi qu'utiliser le plugin Content-Aware Sidebar pour une personnalisation plus avancée. Que ce soit par le biais du Customiser de WordPress ou en éditant manuellement un fichier de template, ce guide fournit des étapes et des méthodes complètes pour une variété de besoins d'utilisateurs.