Las barras laterales pueden ser un término confuso en WordPress. Esto se debe principalmente a que, en el contexto de los temas y el diseño web, la barra lateral es un componente del diseño de un sitio web. Pero en WordPress, la barra lateral también puede referirse a barras laterales dinámicas o áreas con widgets. Estos son bloques de espacio donde puede arrastrar y soltar widgets en el administrador de WordPress, luego enviarlos a su tema, en cualquier lugar. Para aumentar la confusión, las barras laterales dinámicas no necesariamente tienen que mostrar su contenido en la barra lateral en su diseño, en realidad se pueden incluir en cualquier archivo de plantilla.
En esta publicación, mencionaré brevemente qué son las barras laterales en el contexto del diseño de un tema, luego pasaré a cómo usar las barras laterales dinámicas y los widgets para aprovechar al máximo su tema.
En WordPress, los temas se componen de diferentes componentes, que se representan cuando un usuario accede a su sitio. Esto incluye el encabezado y el pie de página, el contenido principal de su página y la barra lateral que a menudo se muestra a la izquierda o a la derecha de un tema. Cada uno de estos componentes obtiene su propio archivo de plantilla, una parte de PHP que usa etiquetas de WordPress para generar contenido que ha agregado en el administrador.
La barra lateral en Divi
Una de estas plantillas es la plantilla de la barra lateral. En su forma más simple, este archivo se llamará “sidebar.php”. Se puede agregar cualquier tipo de contenido a este archivo de plantilla, pero generalmente se usa para almacenar el contenido de sus áreas widgetizadas, de las que hablaremos en un momento. Para agregar este archivo de plantilla a su tema, debe usar la función get_sidebar . Si nombró a su archivo «sidebar.php», simplemente tiene que abrir un archivo de plantilla, desplazarse hasta donde desea agregar su barra lateral y agregar:
|
01
|
<?php get_sidebar(); ?> |
También es posible configurar múltiples plantillas de barra lateral para incluirlas en su tema, de modo que las diferentes páginas tengan diferentes barras laterales. Por ejemplo, es posible que desee tener uno para publicaciones y otro para páginas. Para crear varias barras laterales, debe agregar un sufijo al archivo PHP de la plantilla. Por ejemplo, podemos llamar a una plantilla «sidebar-left.php». Luego, podemos usar la función get_sidebar nuevamente para recuperar esta plantilla, esta vez agregando un nombre a la función.
|
01
|
<?php get_sidebar( 'left' ); ?> |
Agregamos «izquierda» aquí para decirle a WordPress que queremos el archivo llamado «sidebar-left.php», no la plantilla predeterminada. Las barras laterales son útiles para cualquier fragmento de contenido reutilizable. El encabezado y el pie de página cubrirán la parte superior e inferior de su página, pero las plantillas de la barra lateral se pueden usar para agregar bloques de contenido que se muestran en cada página, navegación adicional o una barra de búsqueda. La mayoría de los temas vienen con una o varias plantillas de barra lateral incluidas y, a menudo, incluyen datos predeterminados para que pueda comenzar. Por supuesto, para aprovechar al máximo la plantilla de la barra lateral, probablemente querrá agregarle una barra lateral dinámica.
Las barras laterales dinámicas, también conocidas como áreas con widgets, son espacios vacíos a los que puede agregar widgets en el administrador de WordPress. Por lo general, estos se incluyen en las plantillas de la barra lateral que mencionamos anteriormente, pero se pueden agregar a cualquier parte de su contenido, por ejemplo, encima o debajo de una publicación. La mayoría de los temas vienen con algunas áreas widgetizadas a las que puede comenzar a agregar contenido de inmediato. Para ver sus propios temas, puede ir a Apariencia -> Widgets en el administrador de WordPress.
Una lista de áreas widgetizadas
En el lado derecho de la página, verá una lista de áreas de widgets que están disponibles en su tema. Puede arrastrar y soltar widgets en cualquiera de estas áreas y comenzarán a aparecer en su sitio. Hay muchos widgets para elegir listos para usar, como una lista de publicaciones o comentarios recientes, y muchos widgets disponibles como complementos.
Esto puede ser suficiente para usted, pero también es posible agregar su propia área de widgets personalizada para usarla en otro lugar de su tema. Hay dos pasos para configurar una barra lateral dinámica:
- Registra tu área widgetizada
- Muestra el bloque de widgets en tu tema
En este ejemplo, crearemos una nueva área widgetizada que se mostrará en la parte inferior de las páginas de publicación. Este contendrá información sobre el sitio y el autor, que se agregará como widgets a nuestra área dinámica. Usaré un tema secundario de Divi, pero esto debería funcionar para cualquier tema que exista.
Registro de un área widgetizada en Elegant Themes
Si está utilizando un tema de Elegant Themes, podrá registrar una nueva barra lateral en el administrador de WordPress sin necesidad de ningún código. Para hacerlo, vaya a Apariencia -> Widgets en el administrador de WordPress. Verá una lista de áreas con widgets ya configuradas para usted en el lado derecho de la página. Esto incluirá la barra lateral del diseño, así como algunas áreas de pie de página que puede incluir en su tema.
Solo complete el título, no se requiere código
Debajo de esto, verá un meta cuadro con un solo campo de texto etiquetado como «Nombre del widget». Para crear una nueva barra lateral dinámica, simplemente escriba un título y haga clic en el botón «Crear». Trate de evitar títulos genéricos como «Sidebar 1» o «Sidebar 2». En su lugar, describa el área donde vivirá este contenido, algo así como «Debajo de la publicación» o «Barra lateral izquierda». Iremos con el primero. Y eso es todo, su nueva barra lateral dinámica está lista. El siguiente paso será agregarlo a su tema.
Registrar un área Widgetizada manualmente
Si no está usando un tema de Elegant Themes, o si desea un poco más de control sobre su nueva barra lateral dinámica, puede usar la función register_sidebar . Esto irá en el archivo functions.php de su tema o tema secundario. Si desea ayuda para configurar un tema secundario, debe consultar el tutorial de Nick Roach .
En su archivo functions.php, puede agregar este bloque de código al final:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
|
add_action( 'widgets_init', 'below_post_sidebar' );function below_post_sidebar() { register_sidebar( array( 'id' => 'below-post', 'name' => __( 'Below Post' ), 'description' => __( 'Content that will go below post pages.' ), 'class' => 'widget-class', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) );} |
La función register_sidebar toma una serie de opciones que puede usar para personalizar cómo se mostrará la barra lateral. El primer parámetro es id , que es como se referirá a su barra lateral. Esto es obligatorio y no debe incluir caracteres especiales ni espacios. Los campos de nombre y descripción se usarán para designar su nueva área de widgets en el administrador.
El resto de las opciones tienen que ver con la salida HTML de tus widgets. El parámetro de clase adjuntará una clase CSS a toda la barra lateral. El before_widget y el after_widget se deben usar para designar el HTML en el que se debe envolver cada bloque de widget individual y el before_title y after_title se deben usar para designar el HTML para el título que se muestra encima de cada widget.
Para obtener más información sobre lo que significan estos parámetros, puede consultar el códice de WordPress .
Después de haber registrado su widget, puede agregarle contenido simplemente arrastrándolo y soltándolo. Puede agregar tantos widgets como desee a cualquier área, pero asegúrese de agregar solo lo que sea necesario. En el ejemplo «Debajo de la publicación» que creé, solo quiero mostrar un poco de información al final de cada publicación. Usaré el widget «ET About Me» incluido con Elegant Themes para mostrar un cuadro de autor con información sobre mí, y el widget «Meta» incluido con WordPress para mostrar algunos enlaces relevantes al administrador de WordPress, fuente RSS y WordPress .org.
Agregando tu widget
Una vez que haya agregado contenido a su área de widgets, aún debe mostrarlo en su tema. Para eso, tendremos que agregar un pequeño código.
Una vez que haya registrado su barra lateral y le haya agregado algo de contenido, deberá enviarlo a su sitio. Comience abriendo el archivo de plantilla de la sección a la que desea agregar su contenido. Para mí, creé un archivo «single.php» en mi tema secundario, luego copié y pegué el código «single.php» del tema principal de Divi . Esto mantendrá todo igual, pero me permitirá agregar algo de contenido propio.
Puede usar la función dynamic_sidebar para agregar los widgets que agregó a su sitio. Coloqué esto justo encima de la función get_sidebar en mi archivo «single.php», por lo que muestra mis widgets en la parte inferior del contenido de la publicación. Debido a que estoy agregando esto al archivo single.php, mis widgets solo se mostrarán en publicaciones individuales, no en páginas ni en ningún otro tipo de publicación personalizada.
Simplemente pase el título de su área widgetizada a la función de la barra lateral dinámica:
|
01
|
<?php dynamic_sidebar( 'below-post' ); ?> |
Esto agregará el contenido de su widget donde inserte el código. Si estaba siguiendo mi ejemplo, verá una sección Acerca de mí y una sección Información del sitio en la parte inferior de las páginas de publicación. Si no hay widgets, no se mostrará nada.
Nuevamente, puede agregar esta línea de código a cualquier archivo de plantilla en WordPress. Hay muchas maneras de usar esto, y puede ser una manera fácil de actualizar y agregar contenido fuera del área de publicación principal, sin tener que lidiar con demasiado código.
Afortunadamente, si no se siente cómodo agregando código a sus temas, existen algunos complementos que pueden ayudarlo a administrar las barras laterales de su sitio. Estos pueden configurarlo con áreas de widgets y colocarlos en una página automáticamente, o pueden usarse para personalizar la salida del widget real.
Custom Sidebars es probablemente el complemento de gestión de widgets y barra lateral más popular que existe. Con este complemento, puede configurar áreas con widgets en la sección Apariencia -> Widgets del administrador de WordPress, sin ningún código. Las barras laterales personalizadas le permiten conectarse a áreas widgetizadas que ya existen dentro de su tema, pero personalizarlas según el tipo de publicación en la que se encuentre (publicaciones, páginas, etc.) o publicación por publicación en el editor de WordPress . Esto significa que puede tener un conjunto de widgets para publicaciones, otro para páginas y otro para páginas especiales, todo en el mismo lugar.
Hay una versión gratuita y una versión pro del complemento. La versión pro le brinda un poco más de control sobre sus barras laterales, con la capacidad de personalizar el contenido según ciertas categorías o roles de usuario . Básicamente, el complemento le brinda una GUI fácil para administrar sus widgets y áreas widgetizadas.
Content Aware Sidebars adopta un enfoque similar para administrar complementos, pero le brinda aún más control sobre dónde se deben mostrar exactamente las áreas widgetizadas. El complemento crea una nueva sección en el administrador de WordPress donde puede crear nuevas barras laterales. Para cada barra lateral, puede especificar exactamente dónde desea que aparezca. Para ello, agregue grupos de contenido a cada uno que indiquen dónde se debe mostrar el contenido. Esto puede incluir ciertas categorías, tipos de publicaciones, tipos de archivos e incluso publicaciones y páginas individuales.
Una vez que haya configurado las reglas para su barra lateral, puede agregarle widgets y elegir cuál de las áreas con widgets de su tema desea que reemplace su nueva barra lateral con reconocimiento de contenido. O bien, puede usar display_ca_sidebar de la misma manera que usaría la función dynamic_sidebar para agregar sus nuevos widgets directamente a un tema.
Lógica de widgets
Widget Logic requiere cierto conocimiento de la API de WordPress, pero le permite personalizar cómo y dónde se debe mostrar el contenido para cada widget individual. El complemento agrega un nuevo campo de texto a cada widget que agrega en el administrador de WordPress, etiquetado como «Lógica de widget». En este campo, puede usar etiquetas condicionales de WordPress para especificar dónde se debe mostrar el contenido.
Hay una lista completa de etiquetas condicionales disponibles en el códice de WordPress, pero incluye parámetros como is_single() , que solo mostrará el widget en las publicaciones, hasta designaciones más específicas como is_page(‘about’) , que solo mostrará un widget en la página con el slug “acerca de”. Dado que este complemento funciona a nivel de widget, en lugar de a nivel de la barra lateral, es fácil mezclar y combinar widgets para diferentes casos de uso, todo en la misma área. Si está buscando el control más simple y probablemente más flexible sobre el contenido granular, Widget Logic es el complemento adecuado.
Al principio, las diferencias entre las barras laterales dinámicas y las plantillas de barra lateral pueden ser difíciles de comprender. Es por eso que me gusta pensar en las primeras como áreas con widgets. Es posible que tarden un tiempo en configurarse, pero una vez que lo haga, será fácil agregar y actualizar el contenido de su sitio sin tocar una sola línea de código. Recomiendo probar algunas de las técnicas o complementos anteriores en un entorno de prueba y ver qué tipo de contenido puede agregar. Una vez que haya realizado los movimientos una o dos veces, será fácil replicarlo en cualquier momento que lo necesite.
Miniatura del artículo del autor PureSolution a través de Shutterstock