Qué es WordPress Sidebar

Una barra lateral de WordPress es un área del diseño de un sitio web que normalmente se encuentra en el lado izquierdo o derecho de una página, pero también puede estar situada en la parte superior o inferior de una página. La función principal de una barra lateral es mostrar contenido adicional, proporcionar navegación y mejorar la experiencia del usuario. Suelen contener varios widgets (gadgets), como cuadros de búsqueda, entradas recientes, clasificados, nubes de etiquetas, enlaces a redes sociales, anuncios, calendarios y código HTML personalizado.

Ejemplos de barras laterales

1.Wikipedia (enciclopedia en línea)

2. ElementorCentro de ayuda

Funciones y usos principales de la barra lateral

1. Navegación y búsquedaLas barras laterales pueden contener el menú de navegación y el cuadro de búsqueda del sitio, lo que ayuda a los usuarios a encontrar más fácilmente el contenido que les interesa.
2. Últimos contenidosLa barra lateral: al mostrar las últimas entradas, comentarios o artículos populares, la barra lateral puede atraer a los usuarios a hacer clic y aumentar las visitas a la página.
3. Publicidad y promociónLas barras laterales son ideales para mostrar anuncios o contenidos promocionales que capten la atención de los usuarios.
4. Enlaces a redes socialesAñadir iconos y enlaces de redes sociales en la barra lateral: un sitio web puede animar a los usuarios a compartir contenidos en plataformas sociales, aumentando así la exposición del sitio.
5. Contenidos personalizadosLas barras laterales pueden añadir código HTML personalizado, texto u otros contenidos para ofrecer una mayor personalización y funcionalidad.

Gestión de las barras laterales desde el personalizador de WordPress

Una de las principales formas de gestionar las barras laterales de los temas es a través del Personalizador de WordPress. Si tu tema admite barras laterales y personalizaciones, normalmente aparecerán aquí.

La ubicación exacta de los ajustes depende del tema, pero normalmente tendrás que buscar opciones como Ajustes de diseño, Ajustes generales o Ajustes de todo el sitio.

Por ejemplo, cuando se utiliza un tema OceanWP, se pueden elegir diferentes configuraciones de la barra lateral en los ajustes generales, como barra lateral derecha, barra lateral izquierda, o ambas barras laterales izquierda y derecha, y también se puede configurar el ancho de la barra lateral.

Si no encuentra estos ajustes, pruebe a explorar las distintas áreas del personalizador de WordPress. O consulta la documentación de soporte del desarrollador del tema.

Gestión de barras laterales para contenidos individuales

Algunos temas también ofrecen ajustes a nivel de página que permiten controlar las barras laterales de entradas o páginas individuales.

Si el tema dispone de esta función, podrá ver estas opciones cuando utilice el editor de WordPress. Pueden aparecer en el cuadro meta situado debajo del editor o en la barra lateral del documento.

Por ejemplo, si utilizas el tema OceanWP, puedes elegir diferentes diseños de barra lateral en páginas o entradas individuales.

Cómo añadir widgets a la barra lateral de WordPress

La barra lateral es una zona de la página web, pero a la que losAñadir contenidoSi quieres usar widgets de WordPress, tienes que usar widgets de WordPress.

Puedes añadir widgets a la barra lateral del tema de dos formas:

1. Personalizador de WordPress
2. Área dedicada a widgets

Ambos métodos se sincronizan automáticamente, por lo que cualquiera de ellos es válido. La ventaja de utilizar el personalizador de WordPress es que puedes previsualizar el efecto del widget en tiempo real.

Gestión de widgets a través del personalizador de WordPress

Para gestionar los widgets de la barra lateral a través del personalizador de WordPress, siga estos pasos:

1. cambiar a Apariencia → Personalizado.

2. opción widgets Opciones de menú.
3. Se le pedirá que seleccione las áreas de widgets que desea gestionar. Dependiendo de tu tema, puede que solo veas una opción, o puede que veas múltiples opciones, incluyendo áreas que no sean la barra lateral (como los pies de página).

4. A continuación, haga clic en"Añadir widgetpara empezar a añadir el widget a la barra lateral. Una vez añadido el widget, configúrelo utilizando las opciones de la barra lateral:

Al añadir nuevos widgets, los verás aparecer inmediatamente en una vista previa en vivo del sitio. También es posible utilizar la función de arrastrar y soltar para reorganizar el orden de los widgets existentes.

Además de utilizar el personalizador, WordPress ofrece un área dedicada a la gestión de widgets. Puedes acceder a ella simplemente a través de la opción "Widgets" del menú "Apariencia".

En esta área, puede ver todos los widgets que se pueden añadir a su sitio web, así como el área de la barra lateral que viene con su tema (y posiblemente otras áreas de widgets, como el pie de página).

Para añadir un widget a su sitio web, sólo tiene que arrastrarlo de la lista de widgets disponibles a la barra lateral o a la zona donde desee colocarlo. Después, puedes personalizar más su contenido haciendo clic en el botón de configuración del widget, como ajustar el texto, seleccionar una imagen, etc:

Diseño de widgets personalizados con Elementor

Con Elementor Pro, es fácil diseñar widgets personalizados y añadirlos a tu barra lateral. A continuación te explicamos cómo usar Elementor para crear y añadir widgets personalizados paso a paso:

En primer lugar, abra el backend de WordPress y vaya a la sección "Plantillas" de Elementor y seleccione "Añadir nuevo elemento" para crear una nueva plantilla de sección. Esta plantilla puede ser cualquier cosa que desee mostrar, como un formulario de suscripción de correo electrónico o una atractiva frase de llamada a la acción (CTA).

Cuando crees una plantilla, utiliza la interfaz de arrastrar y soltar de Elementor para añadir y distribuir fácilmente varios elementos como texto, imágenes, botones y mucho más. Cuando hayas terminado, haz clic en el botón Publicar para guardar la plantilla en la biblioteca.

A continuación, vaya a la zona de la barra lateral en la que desea mostrar este widget personalizado. Busque y añada el widget "Biblioteca Elementor"Widget". Una vez añadido, verá una lista desplegable de plantillas para elegir. En esta lista, seleccione la plantilla específica que acaba de crear.

Cómo añadir una barra lateral personalizada en WordPress

Para añadir una barra lateral personalizada a su sitio web WordPress, pero su tema no tiene soporte incorporado para barras laterales o desea añadir más barras laterales, puede seguir estos sencillos pasos:

Paso 1: Registrar una barra lateral personalizada

En primer lugar, registre la barra lateral en WordPress para que aparezca en la sección "apariciones" → "widgets". Puede añadir código de las dos maneras siguientes:

1. Edite el archivo functions.php del tema(Tenga en cuenta que puede que no sea seguro editar el archivo del tema directamente, por lo que es mejor utilizar un tema hijo):
   • Cree un tema hijo (si aún no existe).
   • Añada el código para registrar la barra lateral en el archivo functions.php del tema hijo.
2. Uso del complemento de fragmentos de código(por ejemplo, los complementos Fragmentos de código, Insertar encabezados y pies de página):
   • Instale y active el plugin Code Snippets.
   • Cree un nuevo fragmento de código y añada el código para registrar la barra lateral.

Ejemplo de código para registrar una barra lateral::

function mis_barras_ laterales_personalizadas() {
    register_sidebar(array(
        
        'id' => 'custom-sidebar-1',
        
        'before_widget' =&gt; '<div id="%1$s" class="widget %2$s">',
        'after_widget' =&gt; '</div>',
        'before_title' =&gt; '<h2 class="widgettitle">',
        'after_title' =&gt; '</h2>',
    ));

    // Si necesitas más barras laterales, copia el código anterior y cambia los parámetros 'name', 'id' y otros
}
add_action( 'widgets_init', 'my_custom_sidebars' );

Paso 2: Mostrar la barra lateral en la parte frontal

Las barras laterales se registran y deben estar en el archivo de plantilla del front-end (por ejemplo. header.phpybarra lateral.phpypie.php o archivos de plantilla de una sola página) para llamarlo con el fin de mostrar una barra lateral en el sitio. Esto suele implicar el uso de la función barra_lateral_dinámica() funciones y juicios condicionales adecuados.

Por ejemplo, en el archivo sidebar.php:

Este código comprueba si la barra lateral llamada 'custom-sidebar-1' contiene el widget activo y lo muestra en caso afirmativo.

Después de seguir estos pasos, podrá ver la nueva barra lateral en la página Apariencia → Widgets y añadir widgets en ella.

Cómo crear una barra lateral con Elementor

Para mostrar una barra lateral personalizada con Elementor, crea una nueva plantilla de entrada o página que contenga la barra lateral y el área de contenido principal.

En primer lugar, vaya aPlantillas → Creador de temas. A continuación, seleccione dónde desea añadir la barra lateral en primer lugar: el botón Puesto únicotal vezUna página::

Puede elegir una de las plantillas prediseñadas. O construir tu diseño completamente desde cero. La opción más sencilla es elegir solo una de las plantillas que ya incluyen una barra lateral:

A continuación, edite el archivouna barra lateral (en software)y utilizar el widgetSeleccionar barra lateralLa lista desplegable selecciona la barra lateral personalizada registrada en el paso anterior.

Una vez hecho esto, debería ver una vista previa en vivo de todos los widgets que se han añadido:

Para completar la tarea y garantizarCorreo electrónico:Plantilla. Cuando realice esta acción, puede utilizar condiciones de visualización para controlar dónde se muestra la plantilla de la barra lateral. Muéstrela en todo el contenido (para utilizar la barra lateral en todo el sitio). O utilice reglas de visualización para añadir la barra lateral sólo a contenidos específicos.

Si estás acostumbrado a utilizar HTML, CSS o PHP, puedes añadir una barra lateral en código. De lo contrario, se recomienda utilizar Elementor Métodos.

Para mostrar una barra lateral personalizada en WordPress mediante código, debe editar directamente el archivo de plantilla del tema. Dado que se trata de modificar el tema directamente, es importante utilizar un tema hijo para evitar sobrescribir los cambios al actualizar el tema.

Para obtener más información sobre la creación y el uso de temas hijo, puede consultar la Guía completa de temas hijo de WordPress.

Después de crear un tema hijo, moverá la carpeta del tema padre a la carpeta single.php se copia en la carpeta del tema hijo. A continuación, edite el tema hijo en la carpeta single.php y añada el siguiente fragmento de código en el lugar donde desea que se muestre la barra lateral personalizada:

<?php get_sidebar(); ?>

Cómo eliminar la barra lateral en WordPress

Cómo eliminar una barra lateral que no desea utilizar. Por ejemplo, tu tema viene con una barra lateral, pero quieres que parte o todo el contenido utilice la plantilla de ancho completo.

Para eliminar la barra lateral en WordPress, tiene dos opciones:

1. Uso de Elementor Pro
2. Código de uso

Antes de utilizar estos métodos, comprueba si tu tema tiene una función integrada para desactivar la barra lateral. Muchos temas ofrecen opciones en el personalizador de WordPress para desactivar la barra lateral sin tener que hacerlo manualmente. O bien, el tema puede venir con una plantilla de ancho completo que se puede seleccionar al utilizar el editor de WordPress.

Si tu tema no tiene estas opciones, sigue estos pasos para eliminar manualmente la barra lateral.

Eliminar barras laterales con Elementor

Para eliminar la barra lateral de WordPress usando Elementor, necesitas crear una plantilla que no contenga el área de la barra lateral. Los pasos son los siguientes:

1. Crear una plantillaIr a "plantilla" → "Generación de temasWare", seleccione la ubicación en la que desea eliminar la barra lateral, como una sola entrada o una sola página.
2. aplicación global: Si desea eliminar la barra lateral en todo su sitio, puede utilizar esta plantilla para cubrirlo todo.
3. aplicación localSi sólo desea eliminar la barra lateral en determinadas páginas, puede elegir una plantilla sin barra lateral donde la necesite.

Cuando termine, puedeCorreo electrónico:y utilice las condiciones de visualización para controlar dónde se muestra.

Eliminar la barra lateral de WordPress con código

Puede eliminar la barra lateral de WordPress editando directamente el archivo de plantilla del tema. Los pasos son los siguientes:

1. Uso de temas hijoAsegúrese de utilizar un tema hijo debido a la necesidad de editar los archivos del tema. Esto evitará que la actualización del tema sobrescriba tus cambios.
2. Copia de archivos de plantilla: El archivo de plantilla que deberá eliminarse de la barra lateral (p. ej. single.phpyarchivo.php etc.) del tema principal a la carpeta del tema secundario.
3. Edición de archivos de plantilla: Abra estos archivos y elimine todos los similares <?php get_sidebar(); ?> (el código puede ser ligeramente diferente, pero básicamente llama a la barra lateral).
4. Ajustar HTML y CSSAjuste el código HTML y CSS según sea necesario para garantizar que el diseño de la página sea correcto.

Cómo mostrar diferentes barras laterales en diferentes contenidos

Anteriormente hemos discutido cómo añadir una barra lateral en WordPress, incluso si su tema no lo soporta. ¿Pero qué pasa si quieres mostrar diferentes barras laterales en diferentes contenidos? Esto le permite mostrar diferentes colecciones de widgets para diferentes tipos de contenido.

Por ejemplo, puede que desee utilizar un conjunto de widgets para las entradas de blog de la categoría "Reseñas" y otro conjunto de widgets para las entradas de blog de la categoría "Tutoriales".

utilizar Elementor Mostrar diferentes barras laterales

Esta es la forma más fácil y puedes seguir los pasos que se indican a continuación:

1. Crear una plantillaEn primer lugar, cree varias plantillas Elementor, cada una con su propia barra lateral.
2. CondicionesA continuación, vaya a Configuración de condiciones para asignar cada plantilla a una categoría, página u otra condición relevante.

Uso del plugin Content-Aware Sidebar

Otra forma es utilizar el plugin gratuito Content-Aware Sidebar. Después de instalar y activar el plugin, siga estos pasos:

1. Añadir nueva barra lateral: Vaya a "Content Aware → Añadir nuevo".
2. CondicionesSeleccione la condición por la que desea sustituir la barra lateral predeterminada. Por ejemplo, si desea utilizar esta barra lateral para todas las entradas del blog de la categoría "Comentarios", cree una condición de categoría.

3. cambiar a"Operación"y seleccione la barra lateral que desea sustituir. También puede "fusionar" las barras laterales para incluir el contenido de ambas:

4. Una vez realizada la selección, pulse"Crear". A continuación, vaya aApariencia → Widgetspara añadir contenido a la barra lateral condicional:

Resumen:

Utilizando Elementor o código, puedes configurar diferentes colecciones de widgets para distintos tipos de contenido, así como utilizar el plugin Content-Aware Sidebar para una personalización más avanzada. Ya sea a través del personalizador de WordPress o editando manualmente un archivo de plantilla, esta guía ofrece pasos y métodos completos para una gran variedad de necesidades de los usuarios.