Dans cet article, nous examinerons quelques façons d’utiliser la fonction WordPress d’enregistrement de barre latérale ainsi que quelques astuces avancées !

Enregistrement de sidebar WordPress – Sidebar unique

Pour qu’une barre latérale fonctionne dans votre thème, vous devez d’abord en informer WordPress – pour vous assurer qu’elle apparaît dans l’admin – et ajouter du code sur l’interface publique pour afficher les widgets. Pour enregistrer une barre latérale, vous pouvez choisir entre deux options : enregistrer une barre latérale avec register_sidebar() ou en enregistrer plusieurs à la fois avec register_sidebars().

L’utilisation de base de la fonction register_sidebar() ressemble à ceci :

add_action( 'widgets_init', 'my_awesome_sidebar' );
function my_awesome_sidebar() {
  $args = array(
    'name'          => 'Awesome Sidebar',
    'id'            => 'awesome-sidebar',
    'description'   => 'The Awesome Sidebar is shown on the left hand side of blog pages in this theme',
    'class'         => '',
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>' 
  );

  register_sidebar( $args );

}

Les fonctions doivent être appelées à partir d’une fonction connectée à widgets_init et il faut un seul tableau de paramètres. Le nom et la description sont affichés dans l’administration lorsque l’utilisateur assemble la barre latérale, et les quatre derniers paramètres sont utilisés pour afficher chaque widget.

Les paramètres avant et après le titre sont ajoutés et ajoutés au titre et les paramètres avant et après le widget sont ajoutés avant et après l’élément de widget. Cela permet d’obtenir un style uniforme sur toute une barre latérale de widgets.

Enregistrement de sidebar WordPress – Plusieurs sidebars à la fois

La fonction register_sidebars() est presque exactement la même que celle de forme unique, mais prend un paramètre supplémentaire qui dicte le nombre de barres latérales à ajouter. Voici un exemple rapide :

add_action( 'widgets_init', 'my_theme_sidebars' );
function my_theme_sidebars() {
  $args = array(
    'name'          => 'Awesome Sidebar %d',
    'id'            => 'awesome-sidebar',
    'description'   => 'One of the awesome sidebars',
    'class'         => '',
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>' 
  );

  register_sidebar( 3, $args );

}

La seule autre différence ici est l’utilisation du caractère %d qui affichera le numéro de la barre latérale, dans notre cas 1, 2 ou 3.

Mieux enregistrer plusieurs sidebars

Le seul problème avec la fonction ci-dessus est qu’elle ne permet pas vraiment de personnaliser le titre et la description, et l’utilisation du paramètre « id » est techniquement incorrecte car il devrait être unique. Pour contourner ce problème, j’ai l’habitude de mettre en place un tableau d’informations et de boucle pour créer mes barres latérales, voici comment.

add_action( 'widgets_init', 'my_awesome_sidebar' );
function my_awesome_sidebar() {

  $my_sidebars = array(
    array(
      'name'          => 'Header Widget Area',
      'id'            => 'header-widget-area',
      'description'   => 'Widgets shown in the flyout of the header',
    ),
    array(
      'name'          => 'Header Widget Area',
      'id'            => 'header-widget-area',
      'description'   => 'Widgets shown in the flyout of the header',
    ),
    array(
      'name'          => 'Header Widget Area',
      'id'            => 'header-widget-area',
      'description'   => 'Widgets shown in the flyout of the header',
    ),  
  );

  $defaults = array(
    'name'          => 'Awesome Sidebar',
    'id'            => 'awesome-sidebar',
    'description'   => 'The Awesome Sidebar is shown on the left hand side of blog pages in this theme',
    'class'         => '',
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>' 
  );

  foreach( $my_sidebars as $sidebar ) {
    $args = wp_parse_args( $sidebar, $defaults );
    register_sidebar( $args );
  }

}

Tout d’abord, j’ai défini un certain nombre de barres avec les paramètres que j’ai besoin de modifier par barre. J’ai également créé un ensemble de paramètres par défaut qui peut être utilisé au cas où il n’y aurait pas de données quelque part. Tout en bouclant notre tableau de barres, nous fusionnons le tableau d’arguments spécifiques aux barres avec les valeurs par défaut et les passons à la fonction register_sidebar().

Si vous voulez devenir vraiment fantaisiste, vous pouvez séparer le tableau de barre de cette fonction et créer votre propre fonction que vous pouvez réutiliser de thème en thème, tout ce que vous avez à faire est de modifier le tableau des barres latérales.

Cela vous donne plus de contrôle et plus de standardisation dans votre travail, ce qui est formidable si vous offrez des mises à jour et du support.

Résumé

Tant que vous utilisez les fonctions par défaut de WordPress, la façon dont vous enregistrez vos barres latérales n’a pas vraiment d’importance, mais si vous faites régulièrement du travail lié aux thèmes ou si vous voulez commencer à créer des extraits de code réutilisables, je recommande fortement d’utiliser des boucles et des tableaux de données.

Personnellement, je n’aime pas la fonction register_sidebars() parce qu’elle conduit à un HTML non valide dans de nombreux cas et qu’elle ne vous donne pas autant de contrôle que vous devriez avoir dans un scénario de thème approprié.


Si vous avez aimé cet article, alors vous allez adorer la plateforme d’hébergement WordPress de Kinsta. Accélérez votre site Web et obtenez le support 24/7 de notre équipe de vétérans de WordPress. Notre infrastructure propulsée par Google Cloud met l’accent sur la mise à l’échelle automatique, la performance et la sécurité. Laissez-nous vous montrer la différence de Kinsta ! Découvrez nos plans