Cómo agregar una barra lateral a WordPress » Guía definitiva paso a paso

Al crear su sitio de WordPress, debe agregar una barra lateral como una de las secciones de diseño de su sitio de WordPress. Crear una barra lateral en un sitio HTML básico es simple, ya que solo necesita usar las etiquetas de la barra lateral <aside> </aside> pero para agregar una barra lateral a WordPress necesita un enfoque diferente.

Etiqueta de plantilla de barra lateral: cómo se muestra la barra lateral en WordPress

Es importante que recuerde que WordPress funciona con etiquetas de plantilla y el encabezado se llama con la función get_header() mientras que el pie de página se llama con la función get_footer(). Para la barra lateral, se muestra con la etiqueta de plantilla get_sidebar().

Esta etiqueta de plantilla se puede agregar en cualquier lugar donde desee agregar la barra lateral de WordPress. Pero antes de comenzar a mostrar la barra lateral de WordPress, debemos aprender cómo se crea para que exista en el código de su tema antes de que pueda llamarlo en las plantillas.

Hay dos pasos principales que debe seguir para agregar una barra lateral en WordPress; estos pasos incluyen: registrar la barra lateral, llamar a la barra lateral

Cómo agregar una barra lateral a WordPress paso a paso

Para que pueda agregar con éxito la nueva barra lateral a WordPress o crear una barra lateral personalizada en WordPress, debe seguir los siguientes pasos:

1. Primero, cree una copia de seguridad de su tema de WordPress
2. Cree un tema secundario a partir de su tema principal de WordPress y el tema secundario debe tener el archivo functions.php
3. Dentro de este archivo functions.php de su tema hijo, utilizará la función register_sidebar() para crear la barra lateral.
4. Cree el archivo sidebar.php y agregue la función dynamic_sidebar() a este archivo con el nombre de la barra lateral como este – dynamic_sidebar( 'sidebar-1' ) donde sidebar-1 es la identificación de la barra lateral que agregó al registrar la barra lateral.
5. En los archivos de plantilla de su tema , ahora puede llamar a la barra lateral usando la etiqueta de plantilla get_sidebar().
6. Si ha creado una barra lateral personalizada , puede usar la función dynamic_sidebar() para mostrar la barra lateral personalizada.

Anatomía de una barra lateral de WordPress

Para comprender en profundidad cómo funciona la barra lateral en WordPress, debe aprender cómo se distribuye el código de la barra lateral en diferentes archivos de temas de WordPress.

Funciones de la barra lateral de WordPress

Es importante saber que las tres funciones de WordPress relacionadas con agregar la barra lateral de WordPress son:

• Registrar barra lateral – register_sidebar()
• Barra lateral dinámica – dynamic_sidebar()
• Obtener barra lateral – get_sidebar()

Barra lateral de registro – Paso uno

Esta función register_sidebar() es la primera función que crea la barra lateral y se encuentra en el archivo functions.php de tu tema.

Cuando abra el archivo functions.php de su tema, debería ver esta función register_sidebar() registrando las distintas barras laterales que se muestran en su tema.

Al igual que en el caso del tema de WordPress por defecto de Twenty seventeen, puedes ver en la imagen de abajo el código que registra las barras laterales en ese tema:

Básicamente, esta función es la que hace que todo comience

Registrar parámetros de la barra lateral

La función de barra lateral de registro se expresa como una función que toma los diversos argumentos que pueden estar en forma de datos de una matriz o una cadena. En general se puede expresar de la siguiente manera:

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

La siguiente es una imagen de la función register_sidebar tal como se usa en un tema de WordPress donde los diferentes parámetros se agregan a la matriz que se pasa dentro de la llamada a la función:

Esta función de WordPress tiene varios argumentos que puede aceptar, que pueden ser una cadena de PHP o una matriz de PHP. Los argumentos incluyen:

• Nombre : este es el nombre o el título de la barra lateral; debe ser una cadena.
• ID : este es un identificador único de la barra lateral que usará la función dynamic_sidebar () para llamar a la barra lateral.
• Descripción : esta es la descripción de la barra lateral que se muestra en la interfaz de Widgets y es una cadena.
• Clase : este es un argumento para agregar una clase CSS adicional para la barra lateral que lo ayudará a diseñar.
• Before_widget : este es el contenido HTML que se agrega antes de que se emita cada una de las barras laterales
• After_widget : este es el contenido HTML que se agrega después de que se genera cada una de las barras laterales
• Before_title este es el contenido HTML que se agregará al título de la barra lateral cuando se muestre y el valor predeterminado suele ser la etiqueta HTML de apertura <h2>.
• After_title este es el contenido HTML que se agregará al título de la barra lateral cuando se muestre y el valor predeterminado suele ser la etiqueta HTML de apertura <h2>.

Esta función se agrega al archivo functions.php y registra las barras laterales de WordPress usando un gancho de acción como el que se comparte a continuación:

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

Para registrar una barra lateral, debemos conectarnos al evento widgets_init y tenemos la función de devolución de llamada con un nombre de nuestra elección, como en este caso hemos llamado a la función de devolución de llamada 'njengah_tutorial_sidebars'

El código completo que debe agregar a su archivo functions.php para registrar la barra lateral es el siguiente:

 <?php

//Función de devolución de llamada 

función njengah_register_sidebar_tutorial() {
	
	//Registrar la función de la barra lateral - https://developer.wordpress.org/reference/functions/register_sidebar/
	registrarse_barra lateral(
		formación(
			'nombre' => __( 'Ejemplo de barra lateral', 'dominio de texto'),
			'id' => 'barra lateral-1',
			'descripción' => __( 'Agregue widgets aquí para que aparezcan en su barra lateral en publicaciones de blog y páginas de archivo', 'dominio de texto'),
			'before_widget' => '<sección id="%1$s" class="widget %2$s">',
			'after_widget' => '</sección>',
			'before_title' => '<h2 class="widget-title">',
			'después_del_título' => '</h2>',
		)
	);
	
} 

// Gancho de acción 

add_action('widgets_init', 'njengah_register_sidebar_tutorial');

Barra lateral dinámica – Paso dos

Esta función dynamic_sidebar() ahora llama a la barra lateral que hemos registrado en el paso uno anterior y el código se coloca en el archivo sidebar.php o cualquier otro archivo donde queramos mostrar la barra lateral que hemos creado en el primer paso.

La expresión general de la función dynamic_sidebar() es la siguiente:

dynamic_sidebar( int|string $index = 1 )

Esta función toma un número entero o un argumento de cadena y puede ser el nombre o los parámetros de ID utilizados al registrar la barra lateral en el primer paso.

En el tema predeterminado de veinte diecisiete de WordPress cuando abre el archivo sidebar.php, verá la función dynamic_sidebar() como se muestra en la imagen a continuación:

En este caso, puede ver que estamos pasando el parámetro id de la función register_sidebar a la función dynamic_sidebar para que podamos mostrar esa barra lateral como la barra lateral predeterminada. Como se muestra en la imagen a continuación:

Si estuviéramos registrando esta barra lateral como una barra lateral personalizada, usaríamos el código anterior para mostrar en cualquier archivo de plantilla de tema que pueda incluir; encabezado, pie de página, cuerpo, etc. Entonces, el código para mostrar la barra lateral debería ser el siguiente:

 <?php if ( es_active_sidebar('personalizado') ) : ?>
  <div id="barra lateral">
    <?php barra_lateral_dinámica('personalizada'); ?>
   </div>
<?php endif; ?>

Como puede ver, estamos usando una instrucción if para validar si la barra lateral está activa y la función que usamos aquí es is_active_sidebar() . Esta función simplemente descubre si la barra lateral pasada en dynamic_sidebar() está en uso. Esta es una de las etiquetas condicionales de WordPress.

Obtener barra lateral – Paso tres

Al crear la barra lateral predeterminada de WordPress en un tema, debe registrarse , crear el archivo sidebar.php y finalmente usar la etiqueta de plantilla get_sidebar() para cargar la barra lateral en la plantilla.

El get_sidebar se puede usar para mostrar diferentes barras laterales en diferentes páginas ya que, de manera predeterminada, la función toma un argumento de cadena que es equivalente al nombre de la barra lateral. El nombre que usó para registrar la barra lateral o el parámetro ID como se describe en el paso anterior.

get_sidebar( string $name = null )

Entonces, si tiene una barra lateral llamada ' cool-sidebar ', puede llamar a la barra lateral en una plantilla de página personalizada de la siguiente manera:

get_sidebar('cool-sidebar');

También puede tener varias barras laterales para cada página y puede usar una declaración if/else para mostrar cada una de las barras laterales en diferentes páginas condicionalmente como en este código donde tenemos tres barras laterales; uno para la página de inicio, otro para 404 y la barra lateral predeterminada:

 si ( es_casa() ) :

      get_sidebar('inicio');

   más si ( es_404 () ) :

      get_sidebar('404');

   demás :

     get_sidebar();

terminara si;

Archivos de la barra lateral de WordPress

Es igualmente importante saber que los siete archivos de temas comunes de WordPress donde se agrega el código de la barra lateral son:

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

El código también se puede agregar a los complementos en los que se registra y muestra los widgets de la barra lateral, como algunos de los complementos de widgets de WordPress más comunes.

Si es un desarrollador de WordPress o un principiante de WordPress que está aprendiendo cómo funciona WordPress , comprender la forma en que estos archivos están relacionados con agregar y mostrar la barra lateral de WordPress será un gran paso para convertirse en un profesional.

Cómo funciona el código de barra lateral en cada archivo de tema de WordPress

En un resumen rápido, las tres funciones de agregar barra lateral en WordPress se colocan en cada uno de estos archivos ilustrados en la tabla a continuación, respectivamente:

Para agregar una barra lateral en WordPress, debe seguir los tres pasos que describimos en este tutorial de desarrollo de WordPress que incluye:

• Registrarse: registre la barra lateral en functions.php usando register_sidebar()
• Llamar a la barra lateral predeterminada/barra lateral personalizada: llame a la barra lateral en el archivo sidebar.php para la barra lateral predeterminada, pero puede llamar a la barra lateral personalizada en cualquier archivo de plantilla usando dynamic_sidebar()
• Mostrar barra lateral en plantillas de publicación de WP: en la página, publicación y plantilla de página personalizada y plantilla de publicación personalizada, puede llamar a la barra lateral usando la etiqueta de plantilla get_sidebar ().

Cómo agregar una barra lateral al ejemplo de código de WordPress

El siguiente es el código de ejemplo de cómo agregaría una barra lateral predeterminada en un tema de WordPress que llamaremos Njengah Tutorial Sidebar

Barra lateral de registro

El primer paso lo registraríamos de la siguiente manera:

 /**
* Registrar área de widgets.
*
* @enlace https://gist.github.com/Njengah/010453c11d170df9b9c8de2f31954a5d
*/

función njengah_register_sidebar_tutorial() {

  //Registrar la función de la barra lateral - https://developer.wordpress.org/reference/functions/register_sidebar/

  registrarse_barra lateral(

        formación(
                  'nombre' => __( 'Barra lateral del tutorial de Njengah', 'dominio de texto'),
                   'id' => 'njengah-sidebar-default',
                   'descripción' => __( 'Agregue widgets aquí para que aparezcan en su barra lateral en publicaciones de blog y páginas de archivo', 'dominio de texto'),
                   'before_widget' => '<sección id="%1$s" class="widget %2$s">',
                   'after_widget' => '</sección>',
                   'before_title' => '<h2 class="widget-title">',
                   'después_del_título' => '</h2>',
                  )
             );
    
        }

add_action('widgets_init', 'njengah_register_sidebar_tutorial');

El resultado se vería en nuestro tablero de WordPress en apariencia > Widgets como se muestra en la imagen a continuación:

Llamar a la barra lateral predeterminada en el archivo Sidebar.php

En los archivos sidebar.php o index no debemos llamar a la barra lateral de la siguiente manera:

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

  dynamic_sidebar('njengah-sidebar-default');

Mostrar barra lateral

Finalmente, en nuestras plantillas de página, simplemente llamaríamos a la barra lateral usando el siguiente código

get_sidebar();

Terminando

En esta publicación, hemos descrito detalladamente el enfoque paso a paso sobre cómo agregar una barra lateral en el tema de WordPress. En un resumen rápido, debe recordar que solo hay 2 o tres pasos; para agregar la barra lateral predeterminada en WordPress, debe registrar la barra lateral en functions.php , crear un archivo sidebar.php donde llame a la barra lateral que registró en el paso uno y en la página o plantillas de publicación use la función get_sidebar para llamar a la predeterminada barra lateral

Si está agregando barras laterales personalizadas, no necesita la última parte, ya que colocaría directamente el código de la barra lateral dinámica () en la plantilla o el archivo donde desea mostrar la barra lateral. Por ejemplo, en el pie de página, normalmente verá los widgets de pie de página que se muestran con esta función dynamic_sidebar().

Espero que haya aprendido algo nuevo de este tutorial o que haya adquirido una mejor comprensión de cómo agregar una barra lateral al tema de WordPress sin necesariamente copiar y pegar el código en su archivo functions.php. Si desea más ayuda en esta área o requiere el asesoramiento de un desarrollador profesional de WordPress, no dude en ponerse en contacto conmigo.