Muy bien, hablemos de las barras laterales conscientes del contenido. Sin embargo, antes de hacerlo, primero debemos hablar sobre las barras laterales en general.
La típica barra lateral es un elemento básico del diseño web y de muchos temas de WordPress . Son un buen lugar para mostrar información adicional, como formularios de contacto, sus publicaciones de blog más recientes o más populares, publicidad o cualquier otra cosa que no sea la atracción principal de su sitio. Si bien en los últimos años, la tendencia se ha ido hacia los diseños de una página sin barras laterales, siguen siendo un elemento popular.
En la mayoría de los casos, la barra lateral de un sitio web mostrará el mismo contenido sin importar en qué página se encuentre. Sin embargo, esa no siempre es la forma óptima de hacerlo. De hecho, hay muchas razones para mostrar barras laterales personalizadas en diferentes páginas o publicaciones que son conscientes del contenido que acompañan.
Por esa razón, en este artículo queremos hablar más sobre este tema. Primero le mostraremos casos de uso para barras laterales con reconocimiento de contenido. De esta manera, comprenderá si tienen sentido para usted. Después de eso, continuaremos explicando cómo implementar este tipo de barra lateral en su sitio web de WordPress.
¿Listo para ir? Entonces empecemos.
Antes que nada, hablemos de por qué te molestarías en personalizar las barras laterales dependiendo del contenido al lado del cual aparecen. Después de todo, la barra lateral estática ha existido durante mucho tiempo y todavía parece funcionar. ¿Por qué meterse con un sistema de trabajo?
Resulta que hay muchos casos de uso en los que tiene sentido usar barras laterales conscientes del contenido:
- Incorporación : los visitantes primerizos pueden necesitar contenido diferente al de los habituales. Por ejemplo, los usuarios que hayan iniciado sesión no necesitan ver la llamada a la acción «registrarse» que tiene como objetivo que las personas se unan a su sitio oa su lista de correo electrónico.
- Información personalizada : cierta información tiene más sentido en algunas páginas que en otras. Los ejemplos incluyen información de contacto adicional en la página de contacto, los mejores o los últimos artículos en la página del blog, ofertas especiales en la página de la tienda: usted entiende la esencia.
- SEO mejorado : aunque no es un factor importante, el contenido de la barra lateral sigue siendo importante para la optimización del motor de búsqueda (especialmente si los títulos de los widgets están correctamente envueltos en etiquetas de encabezado). Por lo tanto, puede usar barras laterales conscientes del contenido para hacer que sus páginas sean aún más específicas.
- Llamadas a la acción : también puede usar este tipo de barra lateral para personalizar las llamadas a la acción para diferentes lugares de su sitio web.
- Idiomas : también permiten crear barras laterales para diferentes versiones de idioma de su sitio y dirigirse a diferentes mercados.
Como puede ver, hay varias razones para usar barras laterales conscientes del contenido y esta lista está lejos de ser exhaustiva. Sin embargo, centrémonos ahora en cómo implementarlos.
Hay tres formas principales de configurar barras laterales personalizadas para publicaciones y páginas. Lo que todos tienen en común es que el contenido de la barra lateral cambia en respuesta a la página o publicación en la que se muestra. Las condiciones incluyen etiquetas de WordPress, categorías, nombres de página u otros atributos, como si un usuario ha iniciado sesión o no.
Después de eso, la barra lateral generalmente se cambia de una de estas tres maneras:
- Filtrar widgets : una barra lateral está llena de widgets y algún tipo de lógica en segundo plano decide qué widgets aparecen en qué ubicación y cuáles están ocultos.
- Configure barras laterales completas : otra forma es crear barras laterales completamente separadas que se muestren en la misma ubicación cuando se cumplan diferentes condiciones. Pueden contener configuraciones de widgets individuales.
- Codificado en el tema : por supuesto, también puede agregar barras laterales personalizadas a sus archivos de tema, si tiene las habilidades de codificación para ello.
Personalmente, creo que el segundo método es el que da como resultado la interfaz de usuario más ordenada. Sin embargo, a continuación repasaremos cada forma en detalle para que pueda tomar su propia decisión. Después de eso, enumeraremos algunas opciones más para implementar barras laterales personalizadas en su sitio de WordPress.
Utilice la visibilidad de widgets de Jetpack para filtrar widgets
La forma más fácil de filtrar la apariencia del widget en su sitio es el módulo Visibilidad de Widget incluido en Jetpack . Si ya tiene el complemento en su sitio, crear barras laterales personalizadas es tan fácil como activar el módulo (si aún no está activo de forma predeterminada). Alternativamente, también puede usar esta versión independiente .
Una vez que lo haga y vaya al menú de widgets, encontrará un nuevo botón de Visibilidad en todos sus widgets. Haga clic en él y podrá implementar fácilmente la lógica de visualización deseada para sus widgets a través de menús desplegables.
Las condiciones de visibilidad son las siguientes:
- Categoría : los widgets pueden aparecer en ciertas páginas de categorías o en todas
- Autor — Aparición en todas las páginas del autor o limitada a ciertos usuarios
- Usuario : comprueba si el usuario ha iniciado sesión o no.
- Rol : controle los widgets según el rol del usuario
- Etiqueta : funciona como páginas de categorías pero para etiquetas.
- Fecha : controle en qué fecha aparecen los widgets de los archivos
- Página : configure la visibilidad del widget para la página principal, la página de publicaciones, las páginas de archivo, la página de error 404 , los tipos de publicaciones, los archivos de tipos de publicaciones y las páginas estáticas.
Para cada opción, puede definir si los widgets se muestran u ocultan. Las reglas deben ingresarse por separado, lo que significa que no es posible ingresar varias páginas a la vez. Sin embargo, este método es aún más conveniente que ingresar los identificadores de página manualmente según sea necesario en otras soluciones (más sobre eso a continuación). También hay una casilla de verificación Hacer coincidir todas las condiciones que obliga a que los widgets solo se muestren si todas las condiciones son válidas.
La segunda solución de la que queremos hablar es el complemento Content Aware Sidebars . Como se mencionó anteriormente, este complemento le permite configurar barras laterales completas que luego puede completar con widgets y asignar a publicaciones y páginas. Es bastante simple de usar.
Después de la instalación, encontrará un nuevo elemento de menú llamado Barras laterales en el menú de WordPress.
Cuando elige Agregar nuevo aquí, accede a esta pantalla:
Aquí, lo primero que debe hacer es nombrar su barra lateral. Después de eso, es hora de configurar las condiciones para mostrarlo. Las opciones disponibles son similares a Jetpack:
- Páginas estáticas : elija páginas estáticas para mostrar la barra lateral como la página principal, los resultados de búsqueda o las páginas de error 404
- Publicaciones : las mismas opciones que arriba pero para publicaciones
- Páginas : elija en qué páginas de su sitio mostrar la barra lateral
- Medios : determina en qué páginas de medios aparece la barra lateral
- Autores : limite la visualización a las páginas del autor
- Plantillas de página : elija plantillas de página para mostrar su barra lateral en
- Categorías : elija ciertas categorías o todos los archivos de categorías
- Etiquetas : las mismas opciones pero para las etiquetas
- Formatos : nuevamente, la misma configuración para archivos de formato
- Fechas — Y una vez más para los archivos de fechas
- URL (solo versión Pro): limita la visualización de la barra lateral a ciertas URL
Ajustes adicionales:
- Programar : establezca un tiempo para la visualización de la barra lateral. En la versión gratuita, está limitado a días completos, la versión Pro ofrece franjas horarias más granulares.
- Diseño : agregue clases de CSS personalizadas a sus barras laterales, widgets y títulos de widgets para manipular su
- Avanzado : establezca el orden de sus barras laterales (en caso de que haya más de una)
Además de eso, también puede fusionar las barras laterales entre sí, reemplazarlas, configurarlas como áreas de widgets y controlar su visibilidad para los usuarios registrados (roles de usuario disponibles en Pro).
Una vez que haya terminado de configurar, la nueva barra lateral aparece en el menú de widgets normal, donde puede completarla, activarla y desactivarla e incluso ver las revisiones anteriores. Limpio y fácil.
Finalmente, también es posible crear barras laterales personalizadas mediante codificación. WordPress ofrece muchas opciones para eso y repasaremos rápidamente el proceso.
Lo primero que debe hacer para crear barras laterales personalizadas es registrar una nueva área widgetizada. Para eso, simplemente ingrese el siguiente código en functions.php de su tema (hijo):
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
|
function custom_sidebar_init() { register_sidebar( array( 'name' => 'New Custom Sidebar', 'id' => 'custom_sidebar_1', 'description' => 'Add widgets here to appear for single posts.', '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', 'custom_sidebar_init' );[/phpOf course, you can change the name and other elements to your liking. After saving and uploading to your server, it will now appear in your widget menu where you can add widgets to it as usual.<img class="with-border aligncenter wp-image-53962 size-full" src="https://www.elegantthemes.com/blog/wp-content/uploads/2017/06/new-widget-area.jpg" alt="new widget area" width="672" height="445" />However, so far the sidebar doesn't show up anywhere on your site. To change that, you need to add it to the template file(s) of where you want them to show up.In our example, we want the new sidebar to appear for single posts, so we would input it inside <em>single.php</em> of our theme. In the case of the <em>Twenty Seventeen</em> theme, that means we would exchange this:<?php get_sidebar(); ?> |
Con este:
|
01
02
03
04
05
|
<?php if ( is_active_sidebar( 'custom_sidebar_1' ) ) : ?> <aside id="secondary" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'custom_sidebar_1' ); ?> </aside><!-- #primary-sidebar --><?php endif; ?> |
Después de eso, ese es el resultado final en la interfaz:
Por supuesto, si tiene habilidades de desarrollo adicionales, es posible agregar más condiciones, como mostrar la barra lateral solo para los usuarios registrados. También puede obtener más detalles sobre dónde mostrarlo utilizando la jerarquía de plantillas de WordPress . Puede que no sea la solución más dinámica, sin embargo, funciona y puede funcionar completamente en segundo plano sin necesidad de instalar complementos adicionales.
Además de las opciones anteriores, también tenemos algunos complementos más con una funcionalidad similar.
Lógica de widgets
Este complemento funciona de manera similar a la solución Jetpack, sin embargo, en lugar de menús desplegables, debe ingresar manualmente las etiquetas condicionales de WordPress . De esa manera, puede determinar dónde aparecen los widgets según tantas reglas como desee.
Sin embargo, para hacerlo, debe conocer los identificadores de sus páginas y, en general, es un poco más técnico que lo que hemos visto anteriormente. Eso no significa que no funcione y que no sea un complemento poderoso, sin embargo, las personas menos técnicas podrían estar mejor con otra cosa.
Hecho por WPMU DEV, aquí tenemos otra solución para configurar barras laterales conscientes del contenido que funcionan con cualquier área de widgets. El complemento le permite mostrar widgets dinámicamente en cualquier publicación, página, archivo de categoría, tipo de publicación y más. Además, hace todo eso con una interfaz de usuario muy poderosa y fácil de usar. Para una introducción completa, consulte el artículo de Tom Ewer en su sitio web.
La solución final para crear barras laterales personalizadas está hecha para simplificar. Le permite asignar barras laterales y realizar cambios de forma masiva directamente desde el editor de páginas. Una vez que lo haya hecho, puede completarlos como de costumbre en el menú de widgets.
Desafortunadamente, faltan opciones de personalización más avanzadas. Sin embargo, si solo desea tener barras laterales diferentes para sus páginas, esta podría ser la solución que está buscando.
Hay muchas buenas razones para usar barras laterales personalizadas en su sitio. No todo el contenido necesita la misma información para aparecer junto a él. Con las barras laterales conscientes del contenido, puede mostrar lo que tiene sentido en lugar de usar una barra lateral estándar.
En este tutorial, hemos aprendido varias formas de crear barras laterales personalizadas. Desde filtrar widgets hasta crear barras laterales completamente nuevas hasta codificarlos en su tema, todo está ahí.
Armado con esta información, ahora puede proporcionar solo el contenido de la barra lateral que necesita para mejorar la interacción del usuario y el servicio a su audiencia. ¡Darle una oportunidad!
¿Cuál es su experiencia con las barras laterales basadas en el contenido? ¡Háganos saber en la sección de comentarios!
Imagen en miniatura del artículo de Kit8.net/shutterstock.com