En este artículo veremos algunas formas de usar la función de la barra lateral de registro de WordPress junto con algunos consejos avanzados también!

Barra lateral de registro de WordPress – Individual

Para conseguir que una barra lateral funcione en su tema necesitará informar primero a WordPress – para asegurarse de que aparece en el administrador – y añadir algo de código de interfaz para mostrar los widgets. Para registrar una barra lateral puede elegir una de dos opciones: registrar una barra lateral con register_sidebar() o registrar muchas a la vez con register_sidebars().

El uso básico de la función register_sidebar() se parece a esto:

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 );

}

Las funciones deben ser sacadas desde una función enganchada a widgets_init y toma un único array de parámetros. El nombre y la descripción se muestran en el backend cuando el usuario está montando la barra lateral, y los últimos cuatro parámetros se usan para mostrar cada widget.

Los parámetros antes y después del título se preparan y se añaden al título, y los parámetros antes y después del widget se añaden antes y después del elemento del widget. Esto permite un estilo uniforme en toda la barra lateral de los widgets.

Barra lateral de registro de WordPress – Múltiples barras laterales a la vez

La función register_sidebars() es casi exactamente igual a su hermano de forma singular, pero toma un parámetro extra que dicta el número de barras laterales a añadir. He aquí un ejemplo rápido:

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 única diferencia aquí es el uso del marcador de posición %d que mostrará el número de la barra lateral, en nuestro caso 1, 2 o 3.

Registro de múltiples barras laterales

El único problema de la función anterior es que no permite realmente personalizar el título y la descripción, y el uso del parámetro «id» es técnicamente incorrecto ya que debería ser único. Para evitar este problema, normalmente configuro un array de información y lo recorro en bucle para crear mis barras laterales, así es como lo hago.

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 );
  }

}

En primer lugar, he definido una serie de barras laterales con los parámetros que necesito cambiar por cada barra lateral. También he creado un conjunto de parámetros por defecto que puede ser usado en caso de que no haya datos en alguna parte. Mientras hacemos un bucle a través de nuestro array de barras laterales fusionamos el array de argumentos específicos de la barra lateral con los valores por defecto y los pasamos a la función register_sidebar().

Si quiere ponerse realmente elegante puede separar el array de barras laterales de esta función y crear su propia función que puede reutilizar de tema a tema, todo lo que tiene que hacer es modificar el array de barras laterales.

Esto le da más control y más estandarización a través de su trabajo, lo cual es excelente si ofrece actualizaciones y soporte.

Resumen

Mientras use las funciones predeterminadas de WordPress no importa realmente cómo registre sus barras laterales, pero si hace regularmente trabajos relacionados con temas o quiere empezar a crear algunos fragmentos reutilizables, le recomiendo encarecidamente que use bucles y matrices de datos.

Personalmente no me gusta la función register_sidebars() porque lleva a HTML inválido en muchos casos y no le da tanto control como debería tener en un escenario de tematización apropiado.

Lectura sugerida: ¿Cómo quitar la barra lateral en WordPress? (4 métodos).

Daniel Pataki

Hola, mi nombre es Daniel, soy el CTO de Kinsta. Puede que me conozcas de Smashing Magazine, WPMU Dev, Tuts+ y otras revistas de WordPress/Desarrollo. Aparte de WordPress y PHP, paso la mayor parte de mi tiempo alrededor de Node, React, GraphQL y otras tecnologías en el espacio Javascript. Cuando no estoy trabajando en crear la mejor solución de alojamiento del Universo, colecciono juegos de mesa, juego al futbolín en la oficina, viajo o toco la guitarra y canto en un grupo bastante malo.