La barra lateral es un área lista para widgets en tu tema de WordPress donde puedes mostrar información que no forma parte del contenido principal de la página. Sin embargo, las barras laterales pueden ser una distracción y ocupar un espacio valioso.
En WPBeginner, hemos ayudado a miles de usuarios a diseñar sus sitios de WordPress. En nuestra experiencia, hay varias maneras de eliminar una barra lateral. Puedes ocultarla desde la configuración del tema, eliminarla de páginas y publicaciones individuales, y usar el editor de sitio completo.
En este artículo, te mostraremos cómo eliminar fácilmente la barra lateral en WordPress.
¿Por qué eliminar la barra lateral en WordPress?
La mayoría de los temas de WordPress vienen con múltiples barras laterales o áreas listas para widgets.
Puedes usar las barras laterales para mostrar una lista de tus publicaciones recientes, anuncios, formularios de suscripción a tu lista de correo electrónico, o cualquier otro contenido que no forme parte de la página o publicación principal.
En WPBeginner, usamos una barra lateral para promocionar nuestras páginas de redes sociales y mostrar nuestras publicaciones más populares.
Puedes agregar fácilmente elementos a la barra lateral de un tema usando widgets de WordPress.
En la mayoría de los temas de WordPress, la barra lateral se ve diferente dependiendo de si el visitante está usando un dispositivo de escritorio o móvil. Dado que los teléfonos inteligentes y las tabletas tienen pantallas más pequeñas, WordPress generalmente mueve las barras laterales a la parte inferior de la pantalla.
Dependiendo de cómo esté configurado tu sitio, esto podría verse extraño. Los usuarios móviles también necesitarán desplazarse hasta el final de la pantalla para ver el contenido de la barra lateral, lo que podría afectar la experiencia del usuario. Para más información, por favor consulta nuestra guía sobre cómo ver la versión móvil de los sitios de WordPress desde el escritorio.
Incluso en un escritorio, la barra lateral puede distraer del contenido más importante, como el llamado a la acción de la página.
Dicho esto, veamos cómo puedes eliminar la barra lateral en WordPress. Te mostraremos cómo eliminar la barra lateral de todo tu sitio y cómo ocultar la barra lateral solo en una página o publicación específica.
- Método 1. Eliminar barras laterales usando la configuración de tu tema de WordPress
- Método 2. Eliminar la barra lateral usando la edición completa del sitio (solo temas basados en bloques)
- Método 3. Eliminar la barra lateral de todo tu sitio web de WordPress (Avanzado)
- Método 4. Eliminar barras laterales de páginas individuales en WordPress
- Método 5. Eliminar barras laterales de una página estática en WordPress
- Método 6. Eliminar la barra lateral de una publicación única en WordPress
- Tutorial en video
Si prefieres saltar directamente a un método en particular, puedes usar los enlaces de arriba.
Método 1. Eliminar barras laterales usando la configuración de tu tema de WordPress
Muchos de los mejores temas de WordPress vienen con configuraciones integradas para eliminar barras laterales. Dependiendo de tu tema, es posible que puedas eliminar la barra lateral de publicaciones y páginas individuales o incluso de todo tu sitio.
Para verificar si tu tema tiene esta opción, ve a Apariencia » Personalizar.
En el menú de la izquierda, busca una configuración de 'Barra lateral' o similar.
En la siguiente imagen, puedes ver las opciones para el popular tema de WordPress Astra.
Si ves una opción de 'Barra lateral' o similar, selecciónala y busca cualquier configuración que elimine la barra lateral.
Esto podría ser un menú desplegable, miniaturas que muestren los diferentes diseños de barra lateral, o alguna otra configuración.
Si tu tema no tiene una opción de 'Barra lateral', es posible que puedas eliminar la barra lateral seleccionando la sección 'Página' o similar.
Como puedes ver en la siguiente imagen, Astra también tiene una configuración de 'Página'.
Aquí, verás diferentes diseños, incluyendo varios que eliminan la barra lateral, como 'Sin barra lateral' y 'Ancho completo / Estirado'.
Simplemente haz clic en una miniatura para aplicar ese diseño a tu sitio.
No importa cómo elimines la barra lateral, no olvides hacer clic en ‘Publicar’.
Algunos temas también te permiten eliminar la barra lateral de publicaciones y páginas individuales. Esto puede ser útil al diseñar páginas personalizadas, como una página de destino o una página de ventas.
Para ver si tu tema tiene estas configuraciones, simplemente abre cualquier página o publicación donde quieras ocultar la barra lateral. En el menú de la derecha, selecciona ‘Publicación’ o ‘Página’ y luego busca una opción de ‘Configuración de publicación’ o ‘Configuración de página’.
Si tu tema tiene esta sección, haz clic para expandirla. Ahora puedes buscar cualquier configuración que te permita eliminar la barra lateral.
En la siguiente imagen, puedes ver la configuración de publicación del popular tema ThemeIsle Hestia.
Con algunos temas de WordPress, no es posible eliminar la barra lateral usando el personalizador o el editor de páginas. Si este es el caso, sigue leyendo y te mostraremos otras formas de eliminar la barra lateral en WordPress.
Método 2. Eliminar la barra lateral usando la edición completa del sitio (solo temas basados en bloques)
Si estás utilizando un tema de bloques como Divi, entonces puedes eliminar la barra lateral usando la Edición Completa del Sitio (FSE) y el editor de bloques.
Esta es una forma rápida y sencilla de eliminar la barra lateral en todo tu sitio, aunque no funcionará con todos los temas.
Para iniciar el editor, ve a Apariencia » Editor.
Por defecto, el editor de sitio completo muestra la plantilla de inicio de tu tema, pero puedes eliminar la barra lateral de cualquier página.
Para ver todas las opciones disponibles, simplemente selecciona 'Plantillas', 'Patrones' o 'Páginas'.
Ahora puedes hacer clic en la plantilla o página donde deseas eliminar la barra lateral.
WordPress ahora mostrará una vista previa del diseño. Para continuar y editar esta plantilla, haz clic en el pequeño ícono del lápiz.
Ahora puedes hacer clic para seleccionar la barra lateral.
En la pequeña barra de herramientas que aparece, haz clic en el ícono de puntos.
Ahora puedes eliminar la barra lateral haciendo clic en 'Eliminar columna' o una configuración similar.
Una vez que hayas hecho eso, puedes proceder a hacer clic en el botón 'Guardar'.
Ahora, si visitas tu sitio web de WordPress, verás que la barra de herramientas ha desaparecido.
También te puede interesar ver nuestra guía sobre la edición de sitio completo de WordPress.
Método 3. Eliminar la barra lateral de todo tu sitio web de WordPress (Avanzado)
Este método te permite eliminar las barras laterales de cada página y publicación en tu blog o sitio web de WordPress.
Necesitarás editar los archivos de tu tema, por lo que no es la opción más amigable para principiantes. Sin embargo, este método debería funcionar para la mayoría de los temas de WordPress, incluidos los temas que no tienen una forma integrada de ocultar la barra lateral.
Ten en cuenta que si editas los archivos de tu tema de WordPress directamente, esos cambios desaparecerán cuando actualices el tema.
Dicho esto, te recomendamos crear un tema hijo, ya que esto te permite actualizar tu tema de WordPress sin perder personalizaciones.
Primero, necesitas conectarte a tu sitio de WordPress usando un cliente FTP como FileZilla, o puedes usar el administrador de archivos de tu cPanel de hosting de WordPress. Si eres usuario de SiteGround, entonces puedes usar el panel de Site Tools en su lugar.
Si es la primera vez que usas FTP, puedes ver nuestra guía completa sobre cómo conectarte a tu sitio usando FTP.
Una vez que te hayas conectado, ve a /wp-content/themes/ y abre la carpeta de tu tema actual de WordPress.
Los temas de WordPress están compuestos por diferentes plantillas, por lo que necesitarás editar todas las plantillas que incluyan una barra lateral. Para averiguar qué archivos necesitas editar, consulta nuestra guía sobre la jerarquía de plantillas de WordPress.
Por ejemplo, es posible que necesites editar index.php, page.php, single.php, archive.php, home.php, y así sucesivamente.
Para editar un archivo, ábrelo en un editor de texto como el Bloc de notas. Luego, busca la línea que se ve así:
<?php get_sidebar(); ?>
Si tu tema tiene varias barras laterales, el código se verá ligeramente diferente y puede haber varias partes de código de barra lateral. Típicamente, este código tendrá la palabra 'sidebar' dentro de la función, por ejemplo:
<?php get_sidebar('footer-widget-area'); ?>
Simplemente puedes eliminar la línea de la barra lateral que deseas quitar.
Ahora, guarda y sube el archivo de vuelta a tu cuenta de hosting de WordPress. Ahora puedes repetir este proceso para todos los archivos de plantilla que tengan una barra lateral.
Cuando hayas terminado, visita tu tienda en línea, blog o sitio web para ver el cambio en acción.
Es posible que notes que, aunque las barras laterales han desaparecido, tu área de contenido sigue teniendo el mismo ancho, lo que deja el área de la barra lateral vacía.
Esto sucede cuando el tema tiene un ancho definido para el área de contenido. Después de eliminar la barra lateral, es posible que necesites ajustar el ancho del área de contenido agregando CSS personalizado a tu tema de WordPress.
Para hacer esto, ve a Tema » Personalizar. En el menú de la izquierda, haz clic en CSS adicional.
Ahora puedes proceder a pegar el siguiente código en el pequeño editor de código:
.content-area {
width: 100%;
margin: 0px;
border: 0px;
padding: 0px;
}
.content-area .site {
margin:0px;
}
Hecho esto, haz clic en el botón ‘Publicar’. Ahora, visita tu sitio y verás que el área de contenido ocupa el 100% del espacio disponible.
Método 4. Eliminar barras laterales de páginas individuales en WordPress
Es posible que solo quieras eliminar la barra lateral en ciertas páginas, mientras que sigues mostrando la barra lateral en otras áreas de tu sitio. Por ejemplo, muchos sitios web no muestran la barra lateral en su página de pago, ya que puede distraer a los compradores y evitar que completen su compra.
Si solo quieres eliminar la barra lateral de una página específica, te recomendamos usar un constructor de páginas como SeedProd.
SeedProd te permite diseñar cualquier tipo de página utilizando un editor sencillo de arrastrar y soltar. Esto facilita añadir y eliminar la barra lateral de cualquier página.
En el editor de SeedProd, simplemente haz clic para seleccionar la barra lateral que deseas eliminar. Luego, procede a hacer clic en el icono de la papelera.
Si deseas eliminar la barra lateral de todo tu sitio, también puedes usar SeedProd para crear fácilmente un tema personalizado que no tenga barras laterales.
Para obtener instrucciones más detalladas, consulta nuestra guía sobre cómo crear una página personalizada en WordPress, usando SeedProd.
Método 5. Eliminar barras laterales de una página estática en WordPress
Algunos temas de WordPress vienen con múltiples plantillas, incluyendo plantillas de página de ancho completo que no muestran la barra lateral a ambos lados del contenido. Puedes usar estas plantillas para eliminar la barra lateral de cualquier página.
Para ver si tu tema tiene una plantilla de ancho completo, simplemente abre cualquier página. En el menú de la derecha, haz clic en el enlace junto a ‘Plantilla’.
En la ventana emergente que aparece, abre el menú desplegable y busca una plantilla de ancho completo.
Si encuentras una, haz clic en ella para aplicar la plantilla a esta página.
Si tu tema no tiene una plantilla de ancho completo, puedes crear una manualmente.
Abre un editor de texto plano como el Bloc de notas y pega el siguiente código en un archivo en blanco:
<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>
Ahora puedes guardar este archivo con el nombre full-width.php.
Después de eso, conéctate a tu sitio usando un cliente FTP o el administrador de archivos proporcionado por tu proveedor de hosting de WordPress.
Luego, ve a /wp-content/themes/ y abre la carpeta de tu tema actual. Dentro de esta carpeta, busca el archivo page.php y ábrelo en cualquier editor de texto.
Ahora, copia todo lo que aparece después de la línea <?php get_header(); ?> y pégalo en tu archivo full-width.php.
Una vez que hayas hecho eso, busca y elimina la línea que se ve así:
<?php get_sidebar(); ?>
Ahora puedes guardar tus cambios y subir el archivo full-width.php a tu carpeta de temas.
Con eso hecho, puedes usar esta plantilla con cualquier página siguiendo el mismo proceso descrito anteriormente.
Nota: Si tienes una página abierta en el editor de contenido mientras creas el archivo full-width.php, tendrás que actualizar el editor antes de que la nueva plantilla aparezca en el menú desplegable.
Para más detalles, consulta nuestra guía sobre cómo crear una plantilla de página de ancho completo en WordPress.
Método 6. Eliminar la barra lateral de una publicación única en WordPress
WordPress también tiene plantillas de publicaciones, que funcionan de manera similar a las plantillas de página.
Si deseas eliminar la barra lateral de ciertas publicaciones individuales, puedes crear una plantilla personalizada para publicaciones individuales. Esto es similar a crear una plantilla de página de ancho completo.
Primero, necesitarás crear un nuevo archivo de plantilla usando un editor de texto como el Bloc de notas. Una vez que hayas hecho eso, puedes copiar y pegar el siguiente código en ese archivo:
<?php
/*
* Template Name: Featured Article
* Template Post Type: post, page, product
*/
get_header(); ?>
Este código crea una nueva plantilla llamada ‘Artículo Destacado’ y la hace disponible para cualquier página o publicación, además de cualquier tipo de publicación de producto en tu tienda en línea.
En tu plantilla personalizada de publicación única, simplemente necesitas eliminar la parte de la barra lateral del código. Para más información, sigue los pasos descritos en nuestra guía sobre cómo crear plantillas personalizadas de publicación única en WordPress.
Cuando hayas terminado, guarda este archivo como full-width.php.
A continuación, necesitas subir el archivo a la carpeta de tu tema actual de WordPress usando un cliente FTP o un administrador de archivos.
Una vez que lo hayas hecho, puedes aplicar esta plantilla a cualquier publicación. En el menú del lado derecho, simplemente haz clic en el enlace junto a ‘Plantilla’.
En la ventana emergente que aparece, abre el menú desplegable y luego elige la plantilla de ancho completo que acabas de crear.
Después de eso, simplemente haz clic en ‘Actualizar’ o ‘Publicar’ para que tus cambios se hagan en vivo.
Tutorial en video
¿Eres más de aprender visualmente? Mira nuestro tutorial de YouTube sobre cómo eliminar fácilmente la barra lateral en WordPress:
Esperamos que este artículo te haya ayudado a aprender cómo eliminar fácilmente la barra lateral en tu tema de WordPress. También puedes consultar nuestra guía paso a paso sobre cómo agregar widgets personalizados después de la publicación en WordPress y los mejores temas de WordPress compatibles con Gutenberg.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Dennis Muthomi
Uso barras laterales en las entradas de mi blog para mostrar una tabla de contenidos que se queda fija mientras los usuarios se desplazan. Y REALMENTE mejora los clics en las entradas más largas.
Pero, he eliminado las barras laterales de algunas páginas, como mis páginas clave de ventas o conversión.
En estas, las barras laterales eran demasiado distractivas y ocupaban espacio valioso.
Jiří Vaněk
Normalmente intento eliminar la barra lateral en el momento en que el sitio web no es como un blog clásico, sino un portafolio de negocios o personal. Normalmente intento hacerlo usando el editor de plantillas, pero donde esto no es posible, o esta opción falta, esta guía es muy útil. Gracias por los consejos sobre cómo hacerlo de varias maneras.
Soporte de WPBeginner
¡Nos alegra que nuestros consejos te hayan sido útiles!
Administrador
Conny Dijkstra
¡Muchas gracias por tu extensa explicación! Solo quería eliminar un widget que aparecía en una página. Y me diste la solución correcta. Configura tu plantilla a ancho completo para esa página.
¡Me alegraste el día!
Qué genial que dediques mucho tiempo a ayudar a otras personas.
Soporte de WPBeginner
Glad our guide was able to help
Administrador
frespaniol
Lo probé con el tema Twenty Sixteen, pero no funciona... ¿es normal..?
Soporte de WPBeginner
El tema puede tener una ubicación diferente donde agrega la barra lateral. Si te pones en contacto con el soporte del tema, normalmente te pueden decir dónde se agrega el código de la barra lateral.
Administrador
Stacey Beckles
Tus publicaciones siempre son un salvavidas.
Soporte de WPBeginner
Glad you find them helpful
Administrador
Gary
¿Pueden los usuarios simplemente activar el interruptor en el front-end para mostrar u ocultar la barra lateral ellos mismos?
Sergio
¡Gracias!
Eray
¿Hay alguna forma de deshabilitar la barra lateral en dispositivos móviles? Tengo un tema adaptable y en móviles se ajusta naturalmente. Pero al desplazarse hacia abajo, veo el widget de "artículos recientes" de la barra lateral allí.
En la vista de escritorio, está bien, pero en móviles muestra otros bloques, que son suficientes, pero también las barras laterales. ¿Puedo deshabilitarla para móviles? Gracias.
Hussain
Otra publicación clara y útil. Muchas gracias.
Tengo dos preguntas:
1-El tema que estoy usando, a saber, OceanWP, tiene la opción de eliminar la barra lateral pero simplemente no funciona. ¿Cuál es la posible razón?
1- Logré eliminar la barra lateral usando el archivo index.php. Si hay una actualización para el tema. ¿El cambio es reversible?
Saludos
Max
¿Hay alguna forma de eliminar la barra lateral/pie de página usando hooks? Por ejemplo, ¿usando remove_action();?
Steff
¡Eres una leyenda absoluta!
David Riewe
La plantilla personalizada elimina la barra lateral pero no utiliza el ancho completo.
Patricia
¿Podrías ayudarme? Estoy tratando de eliminar la barra lateral de todas las páginas excepto de index.php. Seguir estas instrucciones funciona de maravilla, pero cambiar el ancho del área de contenido al 100% empuja la barra lateral al final de index.php. ¿Cómo excluyo index.php del cambio del ancho del área de contenido?
Girik
Hola equipo
Estoy buscando una solución para eliminar la barra lateral de la página de inicio donde la página de inicio está configurada como la última publicación. ¿Tienes alguna?
Susan Taunton
Me encantan tus tutoriales en video: siempre son muy claros e informativos. Y tus temas son con tanta frecuencia precisamente relevantes para mis necesidades. ¡¡¡Gracias!!!
¡¡¡Viva la WPBeginner!!!
Mateo
Tengo un problema, quiero que se vea de ancho completo, pero cuando lo hago, mi página de inicio también está de ancho completo (seguramente porque no uso extracto, sino que uso the_content() para obtener el contenido en la página de inicio)... ¿cómo puedo hacer un ancho completo con este problema...
Linda
Muchas gracias por ayudarme a deshacerme de la barra derecha. Pero ahora no puedo mostrar mi blog en pantalla completa. Se llama “inicio” en el menú, pero no existe cuando me desplazo por “lados” como muestras aquí. ¿Puedes ayudarme a arreglarlo en el código?
katma
¡¡¡Eso es lo que estoy buscando!!!
Pero el problema es encontrar la clase CSS.
Lo intenté con CSS Hero. Pude encontrar el nombre de la clase CSS pero no pude hacerlo con la función de agregar CSS personalizado.
Incluso puedo optimizar el ancho para el teléfono, la posición vertical y horizontal de la tableta y la PC.
Terry
En lugar de eliminar el código, es más seguro y recomendable comentarlo.
Agrega los siguientes // delante de cada instancia de la llamada a get_sidebar y las barras laterales dejarán de mostrarse sin interrumpir el código.