Puede preguntarse: «¿Qué diablos son los widgets ‘conscientes del contenido’?» Sé que lo hice. Pero resulta que «consciente del contenido» es solo otra forma de decir «condicional». Lo que significa que puede mostrar diferentes widgets según el contenido de la página o publicación.
Entonces, supongamos que desea mostrar el pie de página predeterminado de WordPress en cada artículo escrito por un autor, pero un pie de página personalizado en los artículos de otro autor. Un widget de contenido te permitirá hacer eso. (Y eso es lo que vamos a hacer en este tutorial).
O tal vez desee mostrar información sobre el tipo de widget en un área donde no se puede colocar un widget estándar. Como en medio de una página o en una plantilla. Bueno, también puedes hacer eso.
Los widgets condicionales o sensibles al contenido pueden ser la respuesta a una pregunta que no sabía que tenía. Pero apuesto a que ya está pensando en algunas formas útiles en las que podría poner en acción un widget de este tipo, ¿no es así?
Empecemos.
Instalación del complemento de WordPress de barras laterales conscientes del contenido
Como te habrás dado cuenta, usaremos un complemento llamado Content Aware Sidebars para trabajar esta parte particular de la magia de WordPress.
Inicie sesión en su panel de administración de WordPress.
En la navegación de la columna izquierda, pase el mouse sobre el enlace «Complementos» y haga clic en el enlace «Agregar nuevo».
En el cuadro «Buscar complementos…», ingrese «Barras laterales conscientes del contenido».
Una vez que haya localizado el complemento, haga clic en el botón «Instalar ahora».
Cuando se haya instalado el complemento, haga clic en el botón «Activar».
Creación y configuración de un widget de contenido
En la columna de navegación de la izquierda, pase el mouse sobre el enlace «Reconocimiento de contenido» y haga clic en el enlace «Agregar nuevo».
Vayamos pestaña por pestaña y avancemos a través de los widgets condicionales de WordPress.
Tenga en cuenta que cada vez que realice un cambio que se guarde automáticamente, verá un aviso de «Condiciones actualizadas».
Pestaña Condiciones
Comience por darle un nombre a la barra lateral.
El término «barra lateral» se usa en el complemento, pero está creando algo que se puede usar no solo en un área de widgets, como una barra lateral o pie de página, sino prácticamente en cualquier lugar, ya que también se puede llamar con un código abreviado.
El menú desplegable «+ Nuevo grupo de condiciones» contiene las opciones «General», «Tipos de publicaciones» y «Taxonomías». En aras de la simplicidad en este tutorial, voy a elegir una de las opciones de «Agregar rápido», «Publicaciones por autor».
Los autores del complemento Content Aware Sidebars tienen una página que lo guía a través de opciones más avanzadas .
El botón «Configuración» tiene un menú desplegable «Tipos de página» que le permite seleccionar páginas individuales o archivadas. Además de los interruptores de encendido/apagado para «Negar condiciones» y «Seleccionar automáticamente nuevos elementos secundarios de los elementos seleccionados».
No vamos a cambiar ninguno de los valores predeterminados.
En la sección «Dónde mostrar», lo primero que verá es un menú desplegable «+ Cumplir con TODAS estas condiciones».
Tiene la misma lista de opciones de condiciones que el menú desplegable «Nuevo grupo de condiciones» que vimos en el paso anterior («General», «Tipos de publicaciones» y «Taxonomías»). Al seleccionar una condición del menú desplegable, se agrega otro campo de opción en la sección «Y».
Nuevamente, para simplificar las cosas, solo vamos a usar las opciones que ya se presentan, «Publicaciones / Blog» y «Autores». Así que dejaremos ese menú desplegable solo.
Quiero mostrar una barra lateral solo en los artículos escritos por Jane Doe. Cuando comienza a escribir en el campo «Autores», el complemento busca y muestra automáticamente las coincidencias. Selecciono a Jane Doe y se agrega a la condición.
Si nos detuviéramos aquí, nuestra barra lateral se mostraría en todos los artículos escritos por Jane Doe. Que es en última instancia lo que queremos, pero hablemos de cómo funcionan estas condiciones.
SI, Y, O, y más
En nuestro campo «Autores», hemos especificado a Jane Doe. Pero observe el «Y» entre el campo «Autores» y el campo «Publicaciones / Blog» que se encuentra arriba. Eso nos dice que la barra lateral que estamos creando mostrará artículos que coincidan con los dos campos, «Autores» y «Publicaciones/Blog».
De forma predeterminada (si no ingresamos nada en el campo «Publicaciones / Blog»), la barra lateral aparecerá en todas las publicaciones y páginas escritas por Jane Doe porque ella es el sujeto «Y».
Pero, si elegimos una publicación o una página que Jane Doe no escribió, la barra lateral no se mostrará en ninguna parte.
¿Por qué? Porque ninguna publicación coincidiría con las condiciones que establecimos. Esas condiciones solo mostrarían la barra lateral en esta publicación no escrita por Jane Doe y solo se mostraría en las publicaciones escritas por Jane Doe.
Mira, dimos dos condiciones que se anulan entre sí.
Todo lo cual es para señalar que es fácil cometer errores con la configuración condicional. Si configura una barra lateral y no se muestra donde espera que esté, verifique su configuración en busca de un error que pueda evitar que se muestre.
Entonces, para hacer lo que queremos hacer aquí, mostrar una barra lateral personalizada en todas las publicaciones de Jane Doe, dejamos el campo «Publicaciones / Blog» en blanco.
Como puede ver, la sección «Dónde mostrar» también tiene un campo «O». Eso nos da la opción de mostrar algo si nuestro primer conjunto de opciones aparece vacío.
No vamos a agregar una condición «O» en este tutorial, pero puede ver cómo podría ser útil como respaldo en caso de que no se puedan cumplir sus condiciones principales.
Por ejemplo, es posible que no sepamos que Jane no escribió cierto artículo. O que un artículo no tiene una determinada etiqueta o categoría. Sin darnos cuenta, podríamos ingresar condiciones que darían como resultado que no se mostrara.
Si ingresamos una opción «O», no presentaremos un resultado vacío a los visitantes.
Pestaña de acción
En la sección «Cómo mostrar», hay tres menús desplegables, «Acción», «Barra lateral de destino» y «Posición de combinación».
La acción controla si la nueva barra lateral reemplaza o se fusiona con una barra lateral de destino (existente). También hay una opción de código abreviado si desea utilizar la nueva barra lateral fuera de un área de widgets.
Target Sidebar es una lista de todas sus barras laterales activas. En nuestra demostración aquí, la única área de widget existente en el tema es el pie de página.
Fusionar posición controla dónde aparecen estos nuevos datos de la barra lateral en una barra lateral fusionada, encima o debajo de los datos existentes.
En esta pestaña, si elegimos «Combinar» como la acción, «Pie de página» como la barra lateral de destino y «Superior» como la posición de combinación, nuestra barra lateral debería aparecer en la parte superior del pie de página.
Si en lugar de «Combinar» elegimos «Código corto» como acción, se genera un código corto que podemos colocar en cualquier página, publicación o plantilla.
Le mostraré cómo se ven estos en un minuto después de que creemos un widget para la barra lateral de Jane Doe.
Ficha Diseño
La pestaña «Diseño» tiene una sección de «Estilos» que le permite agregar CSS a varios aspectos de la barra lateral. No vamos a cambiar ninguno de esos. Si no hacemos ningún cambio aquí, el estilo de nuestra nueva barra lateral se heredará del tema.
Pestaña Programación
La pestaña «Programar» le permite programar una hora específica para que la barra lateral se active automáticamente. Eso podría ser útil si desea configurar widgets con reconocimiento de contenido antes de usarlos. De forma predeterminada, las nuevas barras laterales se activarán cuando se creen, por lo que estarán visibles de inmediato.
Pestaña de opciones
Aquí es donde establece el orden de visualización. Eso solo entra en juego si aparecen varias barras laterales en la misma área o en la misma página.
Aquí también es donde elimina un widget haciendo clic en el botón «Mover a la papelera».
Hagamos que nuestra barra lateral Jane Doe haga algo
Hemos configurado una barra lateral para dar a los artículos de Jane Doe un pie de página diferente, pero aún no hemos agregado nada a ese pie de página.
En la navegación de la columna izquierda, pase el mouse sobre el enlace «Apariencia» y haga clic en el enlace «Widgets».
Puede ver que hay un nuevo widget en la ciudad: nuestro widget «Publicaciones de Jane Doe».
Pero está vacío, así que arrastraré «Nube de etiquetas» al widget «Publicaciones de Jane Doe». Puede notar que también hay un interruptor de palanca que puede usar para deshabilitar temporalmente el widget si alguna vez necesita hacerlo.
Una vez que hago clic en el botón «Guardar», la nube de etiquetas debería aparecer en la parte superior del pie de página, pero solo en los artículos escritos por Jane Doe.
Insertar la barra lateral de Jane Doe usando Shortcode
Ahora, veamos qué sucede si cambiamos la «Acción» de «Combinar» a «Código corto».
En la navegación de la columna izquierda, pase el mouse sobre el enlace «Consciente del contenido» y haga clic en el enlace «Todas las barras laterales».
Haga clic en «Editar» en «Publicaciones de Jane Doe».
Haga clic en la pestaña «Acción» y cambie «Acción» de «Combinar» a «Código corto».
Ahora copia el shortcode.
Y lo pegaremos en una publicación escrita por Jane Doe.
Así que ahora, si vamos al artículo, está la nube de etiquetas, justo donde insertamos el código abreviado.
¡Intenta hacer eso con un widget estándar de WordPress! (Alerta de spoiler: no puedes).
Las barras laterales ya no son solo para los lados
Como puede ver, Content Aware Sidebars es más que otro complemento de widgets de WordPress. Es una poderosa herramienta para crear diseños personalizados basados en un número casi infinito de opciones y condiciones.
Rascamos la superficie aquí y demostramos algunos conceptos básicos. Pero con suerte, sus ruedas están girando ahora y se le ocurren algunos usos interesantes para los widgets condicionales y las barras laterales que en realidad no son barras laterales.
¿Alguna vez has experimentado con algún método manual de presentación condicional en WordPress? Ahora que sabe que se puede lograr más fácilmente, ¿probará el complemento? Házmelo saber en los comentarios.