Comment ajouter une barre latérale à WordPress » Guide ultime étape par étape

Lors de la création de votre site WordPress, vous devez ajouter une barre latérale comme l'une des sections de mise en page de votre site WordPress. La création d'une barre latérale dans un site HTML de base est simple car il vous suffit d'utiliser les balises de la barre latérale <aside> </aside> mais pour ajouter une barre latérale à WordPress, vous avez besoin d'une approche différente.

Balise de modèle de barre latérale : comment la barre latérale s'affiche dans WordPress

Il est important que vous vous souveniez que WordPress fonctionne avec des balises de modèle et que l'en-tête est appelé avec la fonction get_header() tandis que le pied de page est appelé avec la fonction get_footer(). Pour la barre latérale, elle est affichée avec la balise de modèle get_sidebar().

Cette balise de modèle peut être ajoutée partout où vous souhaitez ajouter la barre latérale WordPress. Mais avant de commencer à afficher la barre latérale WordPress, nous devons apprendre comment elle est créée afin qu'elle existe dans votre code de thème avant de pouvoir l'appeler dans les modèles.

Il y a deux étapes principales que vous devez suivre pour ajouter une barre latérale dans WordPress ; ces étapes incluent : enregistrer la barre latérale, appeler la barre latérale

Comment ajouter une barre latérale à WordPress étape par étape

Pour que vous puissiez ajouter avec succès la nouvelle barre latérale à WordPress ou créer une barre latérale personnalisée dans WordPress, vous devez suivre les étapes suivantes :

1. Tout d'abord, créez une copie de sauvegarde de votre thème WordPress
2. Créez un thème enfant à partir de votre thème WordPress parent et le thème enfant doit avoir le fichier functions.php
3. Dans ce fichier functions.php de votre thème enfant, vous utiliserez la fonction register_sidebar() pour créer la barre latérale.
4. Créez le fichier sidebar.php et ajoutez la fonction dynamic_sidebar() à ce fichier avec le nom de la barre latérale comme ceci - dynamic_sidebar( 'sidebar-1' ) où sidebar-1 est l'identifiant de la barre latérale que vous avez ajouté lors de l'enregistrement de la barre latérale.
5. Dans vos fichiers de modèle de thème , vous pouvez désormais appeler la barre latérale à l'aide de la balise de modèle get_sidebar() .
6. Si vous avez créé une barre latérale personnalisée , vous pouvez utiliser la fonction dynamic_sidebar() pour afficher la barre latérale personnalisée.

Anatomie d'une barre latérale WordPress

Pour comprendre en profondeur le fonctionnement de la barre latérale dans WordPress, vous devez apprendre comment le code de la barre latérale est réparti sur différents fichiers de thème WordPress.

Fonctions de la barre latérale WordPress

Il est important de savoir que les trois fonctions WordPress liées à l'ajout de la barre latérale WordPress sont :

• Enregistrer la barre latérale - register_sidebar ()
• Barre latérale dynamique – dynamic_sidebar()
• Obtenir la barre latérale - get_sidebar ()

Enregistrer la barre latérale - Première étape

Cette fonction register_sidebar() est la première fonction qui crée la barre latérale et elle se trouve dans le fichier functions.php de votre thème.

Lorsque vous ouvrez votre fichier functions.php de thème, vous devriez voir cette fonction register_sidebar() enregistrant les différentes barres latérales affichées sur votre thème.

Comme pour le cas du thème WordPress Twenty seventeen par défaut, vous pouvez voir dans l'image ci-dessous le code enregistrant les barres latérales sur ce thème :

Fondamentalement, cette fonction est celle qui permet de tout démarrer

Enregistrer les paramètres de la barre latérale

La fonction de la barre latérale de registre est exprimée sous la forme d'une fonction qui prend les différents arguments qui peuvent être sous la forme de données d'un tableau ou d'une chaîne. Elle peut être généralement exprimée comme suit :

register_sidebar( array|string $args = array() )

Voici une image de la fonction register_sidebar telle qu'utilisée dans un thème WordPress où les différents paramètres sont ajoutés au tableau qui est passé à l'intérieur de l'appel de fonction :

Cette fonction WordPress a divers arguments qu'elle peut accepter, qui peuvent être une chaîne PHP ou un tableau PHP. Les arguments incluent :

• Nom - il s'agit du nom ou du titre de la barre latérale, il doit s'agir d'une chaîne.
• ID - il s'agit d'un identifiant unique de la barre latérale que vous utiliserez la fonction dynamic_sidebar () pour appeler la barre latérale.
• Description - c'est la description de la barre latérale qui s'affiche dans l'interface Widgets et c'est une chaîne.
• Classe c'est un argument pour ajouter une classe CSS supplémentaire pour la barre latérale qui vous aidera dans le style.
• Before_widget - c'est le contenu HTML qui est ajouté avant la sortie de chacune des barres latérales
• After_widget - c'est le contenu HTML qui est ajouté après la sortie de chacune des barres latérales
• Before_title c'est le contenu HTML à ajouter au titre de la barre latérale lorsqu'il est affiché et la valeur par défaut est généralement la balise HTML d'ouverture <h2>.
• After_title c'est le contenu HTML à ajouter au titre de la barre latérale lorsqu'il est affiché et la valeur par défaut est généralement la balise HTML d'ouverture <h2>.

Cette fonction est ajoutée au fichier functions.php et enregistre les barres latérales WordPress à l'aide d'un crochet d'action comme celui partagé ci-dessous :

add_action( 'widgets_init', ' njengah_tutorial_sidebars' ' );

Pour enregistrer une barre latérale, nous devons nous connecter à l'événement widgets_init et nous avons la fonction de rappel avec un nom de notre choix comme dans ce cas, nous avons nommé la fonction de rappel comme 'njengah_tutorial_sidebars'

Le code complet que vous devez ajouter à votre fichier functions.php pour enregistrer la barre latérale est le suivant :

 <?php

//Fonction de rappel 

function njengah_register_sidebar_tutorial() {
	
	//Fonction d'enregistrement de la barre latérale - https://developer.wordpress.org/reference/functions/register_sidebar/
	register_sidebar(
		déployer(
			'name' => __( 'Sidebar Example', 'textdomain' ),
			'id' => 'barre latérale-1',
			'description' => __( 'Ajoutez des widgets ici pour qu'ils apparaissent dans votre barre latérale sur les articles de blog et les pages d'archives.', 'textdomain' ),
			'before_widget' => '<section id="%1$s" class="widget %2$s">',
			'after_widget' => '</section>',
			'before_title' => '<h2 class="widget-title">',
			'after_title' => '</h2>',
		)
	);
	
} 

// Crochet d'action 

add_action( 'widgets_init', 'njengah_register_sidebar_tutorial' );

Barre latérale dynamique - Deuxième étape

Cette fonction dynamic_sidebar() appelle maintenant la barre latérale que nous avons enregistrée à la première étape ci -dessus et le code est placé dans le fichier sidebar.php ou tout autre fichier où nous voulons afficher la barre latérale que nous avons créée à la première étape.

L'expression générale de la fonction dynamic_sidebar() est la suivante :

dynamic_sidebar( int|string $index = 1 )

Cette fonction prend un entier ou un argument de chaîne et cela peut être le nom ou les paramètres d'identification utilisés lors de l'enregistrement de la barre latérale à la première étape.

Dans le thème WordPress vingt-sept par défaut lorsque vous ouvrez le fichier sidebar.php, vous verrez la fonction dynamic_sidebar() comme indiqué dans l'image ci-dessous :

Dans ce cas, vous pouvez voir que nous passons le paramètre id de la fonction register_sidebar à la fonction dynamic_sidebar afin que nous puissions afficher cette barre latérale comme barre latérale par défaut. Comme le montre l'image ci-dessous :

Si nous enregistrions cette barre latérale en tant que barre latérale personnalisée, nous utiliserions le code ci-dessus pour l'afficher dans tous les fichiers de modèle de thème pouvant inclure ; en-tête, pied de page, corps, etc. Ainsi, le code pour afficher la barre latérale devrait être le suivant :

 <?php si ( is_active_sidebar( 'custom' ) ) : ?>
  <div id="sidebar">
    <?php dynamic_sidebar( 'personnalisé' ); ?>
   </div>
<?php endif; ?>

Comme vous pouvez le voir, nous utilisons une instruction if pour valider si la barre latérale est active et la fonction que nous utilisons ici est is_active_sidebar() . Cette fonction découvre simplement si la barre latérale passée dans la fonction dynamic_sidebar() est utilisée. C'est l'une des balises conditionnelles de WordPress.

Obtenir la barre latérale - Troisième étape

Lors de la création de la barre latérale WordPress par défaut dans un thème, vous devez vous inscrire , créer le fichier sidebar.php et enfin utiliser la balise get_sidebar() t emplate pour charger la barre latérale dans le modèle.

Le get_sidebar peut être utilisé pour afficher différentes barres latérales dans différentes pages car, par défaut, la fonction prend un argument de chaîne équivalent au nom de la barre latérale. Le nom que vous avez utilisé pour enregistrer la barre latérale ou le paramètre ID comme indiqué à l'étape ci-dessus.

get_sidebar( string $name = null )

Ainsi, si vous avez une barre latérale nommée ' cool-sidebar ', vous pouvez appeler la barre latérale dans un modèle de page personnalisé comme suit :

get_sidebar('cool-sidebar');

Vous pouvez également avoir plusieurs barres latérales pour chaque page et vous pouvez utiliser une instruction if/else pour afficher chacune des barres latérales dans différentes pages de manière conditionnelle, comme dans ce code où nous avons trois barres latérales ; une pour la page d'accueil, une autre pour 404 et la barre latérale par défaut :

 si ( is_home() ) :

      get_sidebar( 'accueil' );

   sinon ( is_404() ) :

      get_sidebar( '404' );

   autre :

     get_sidebar();

fin si;

Fichiers de la barre latérale WordPress

Il est également important de savoir que les sept fichiers de thème WordPress communs où le code de la barre latérale est ajouté sont :

• functions.php File
• sidebar.php File
• Pages Files
• Posts Files
• Custom Posts Type Files
• footer.php File
• header.php File

Le code peut également être ajouté aux plugins où vous enregistrez et affichez des widgets de barre latérale comme certains des plugins de widgets WordPress les plus courants.

Si vous êtes un développeur WordPress ou un débutant WordPress apprenant comment fonctionne WordPress , comprendre la façon dont ces fichiers sont liés à l'ajout et à l'affichage de la barre latérale WordPress sera un grand pas en avant pour devenir un pro.

Comment fonctionne le code de la barre latérale dans chaque fichier WordPress de thème

Dans un résumé rapide les trois fonctions d'ajout de sidebar dans WordPress sont placées dans chacun de ces fichiers illustrés dans le tableau ci-dessous respectivement :

Pour ajouter une barre latérale dans WordPress, vous devez suivre les trois étapes que nous avons décrites dans ce tutoriel de développement WordPress qui comprend :

• S'inscrire – Enregistrez la barre latérale dans functions.php en utilisant register_sidebar()
• Appelez la barre latérale par défaut / la barre latérale personnalisée - Appelez la barre latérale dans le fichier sidebar.php pour la barre latérale par défaut, mais ou la barre latérale personnalisée, vous pouvez l'appeler dans n'importe quel fichier de modèle à l'aide de dynamic_sidebar ()
• Afficher la barre latérale dans les modèles de publication WP - Dans la page, le modèle de publication et de page personnalisé et le modèle de publication personnalisé, vous pouvez appeler la barre latérale à l'aide de la balise de modèle get_sidebar().

Comment ajouter une barre latérale à l'exemple de code WordPress

Ce qui suit est l'exemple de code de la façon dont vous ajouteriez une barre latérale par défaut dans un thème WordPress que nous nommerons Njengah Tutorial Sidebar

Enregistrer la barre latérale

La première étape, nous l'enregistrerions comme suit :

 /**
* Enregistrez la zone de widget.
*
* @lien https://gist.github.com/Njengah/010453c11d170df9b9c8de2f31954a5d
*/

function njengah_register_sidebar_tutorial() {

  //Fonction d'enregistrement de la barre latérale - https://developer.wordpress.org/reference/functions/register_sidebar/

  register_sidebar(

        déployer(
                  'name' => __( 'Njengah Tutorial Sidebar ', 'textdomain' ),
                   'id' => 'njengah-sidebar-default',
                   'description' => __( 'Ajoutez des widgets ici pour qu'ils apparaissent dans votre barre latérale sur les articles de blog et les pages d'archives.', 'textdomain' ),
                   'before_widget' => '<section id="%1$s" class="widget %2$s">',
                   'after_widget' => '</section>',
                   'before_title' => '<h2 class="widget-title">',
                   'after_title' => '</h2>',
                  )
             );
    
        }

add_action( 'widgets_init', 'njengah_register_sidebar_tutorial' );

Le résultat serait visible sur notre tableau de bord WordPress sous apparence > Widgets comme indiqué dans l'image ci-dessous :

Appeler la barre latérale par défaut dans le fichier Sidebar.php

Dans les fichiers sidebar.php ou index , nous ne devrions pas appeler la barre latérale comme suit :

 if ( ! is_active_sidebar('njengah-sidebar-default') ) {
   retourner;
}

  dynamic_sidebar('njengah-sidebar-default');

Afficher la barre latérale

Enfin, dans nos modèles de page, nous appellerions simplement la barre latérale en utilisant le code suivant

get_sidebar();

Emballer

Dans cet article, nous avons décrit en détail l'approche étape par étape sur la façon d'ajouter une barre latérale dans le thème WordPress. Dans un bref résumé, vous devez vous rappeler qu'il n'y a que 2 ou 3 étapes ; pour ajouter la barre latérale par défaut dans WordPress, vous devez enregistrer la barre latérale dans functions.php , créer un fichier sidebar.php dans lequel vous appelez la barre latérale que vous avez enregistrée à la première étape et dans la page ou les modèles de publication, vous utilisez la fonction get_sidebar pour appeler la valeur par défaut barre latérale .

Si vous ajoutez des barres latérales personnalisées, vous n'avez pas besoin de la dernière partie puisque vous placeriez directement le code dynamic_sidebar() dans le modèle ou le fichier où vous souhaitez afficher la barre latérale. Par exemple, dans le pied de page, vous verrez généralement les widgets de pied de page affichés à l'aide de cette fonction dynamic_sidebar().

J'espère que vous avez appris quelque chose de nouveau grâce à ce tutoriel ou que vous avez mieux compris comment ajouter une barre latérale au thème WordPress sans nécessairement copier-coller du code dans votre fichier functions.php. Si vous souhaitez plus d'aide dans ce domaine ou avez besoin des conseils d'un développeur WordPress professionnel, n'hésitez pas à me contacter.