Cómo cambiar el lado de la barra lateral en WordPress

Recientemente, uno de nuestros lectores nos preguntó cómo cambiar el lado de la barra lateral en un tema de WordPress. Recibimos muchas veces esta pregunta cuando los usuarios quieren cambiar la barra lateral de izquierda a derecha, o de derecha a izquierda. En este artículo, te mostraremos cómo cambiar el lado de la barra lateral en WordPress

Cambiar el lado de la barra lateral en WordPress

Por qué cambiar el lado de la barra lateral en WordPress

Los expertos en usabilidad creen que la gente escanea las páginas de izquierda a derecha. Recomiendan poner el contenido importante a la izquierda para que los usuarios vean primero el contenido. Sin embargo, esto podría invertirse si tu sitio está en un idioma que se escribe de derecha a izquierda

Muchos sitios de WordPress utilizan el típico diseño de blog con dos columnas. Una para el contenido y la otra columna para la barra lateral

Un sitio de WordPress con barra lateral en el lado izquierdo

Si estás empezando un sitio web, entonces debes seleccionar un tema de WordPress que tenga la barra lateral en el lugar que prefieras

Muchos temas tienen opciones para cambiar los lados de la barra lateral desde la configuración del tema. Sin embargo, si tu tema no tiene esta opción, tendrás que cambiar los lados de la barra lateral manualmente

Dicho esto, vamos a ver cómo puedes cambiar fácilmente el lado de la barra lateral en WordPress utilizando un poco de CSS

Cambiar el lado de la barra lateral en WordPress usando CSS

Antes de realizar cualquier cambio en tu tema, deberías considerar la posibilidad de crear un tema hijo. Al utilizar un tema hijo, podrás actualizar tu tema padre sin perder los cambios

En segundo lugar, siempre debes crear una copia de seguridad de tu sitio de WordPress cuando realices cambios directos en tu tema activo de WordPress

Necesitarás un cliente FTP para editar los archivos de tu tema. Consulta nuestra guía para principiantes sobre cómo utilizar el FTP para subir archivos a WordPress

Conéctate a tu sitio de WordPress utilizando el cliente FTP y ve a la carpeta de tu tema. Normalmente se encuentra en

/yourwebsite/wp-content/themes/your-theme-folder/

Ahora tienes que descargar y abrir el archivo principal de la hoja de estilos de tu tema en un editor de texto plano como el Bloc de notas. Este archivo se llama style.cssy se encuentra en el directorio raíz de tu tema.

En este archivo, encuentra la clase CSS para tu barra lateral. Normalmente es .sidebar. En este ejemplo, estamos utilizando el tema predeterminado de WordPress Twenty Fifteen que tiene este CSS para definir la barra lateral


.sidebar {
		float: left;
		margin-right: -100%;
		max-width: 413px;
		position: relative;
		width: 29.4118%;
	}


Como puedes ver, la barra lateral flota a la izquierda con un margen de -100% a la derecha. Lo cambiaremos para que flote a la derecha y con margen a la izquierda de esta manera


.sidebar {
		float: right;
		margin-left: -100%;
		max-width: 413px;
		position: relative;
		width: 29.4118%;
	}


Guarda los cambios y sube el archivo style.css a tu sitio web utilizando el cliente FTP. Ahora, si visitas tu sitio web, se verá así

La barra lateral se ha movido pero el lado del contenido sigue siendo el mismo

Eso es porque hemos movido la barra lateral pero no hemos movido el área de contenido. Twenty Fifteen utiliza este CSS para definir la posición del área de contenido


.site-content {
		display: block;
		float: left;
		margin-left: 29.4118%;
		width: 70.5882%;
	}

Lo cambiaremos para mover el contenido a la derecha. Así


.site-content {
		display: block;
		float: left;
		margin-right: 29.4118%;
		width: 70.5882%;
	}

Este es el aspecto de nuestro sitio web después de aplicar este CSS

Un conflicto CSS que muestra un área blanca vacía

Como puedes ver, hemos cambiado de lado tanto el contenido como las áreas de la barra lateral. Sin embargo, sigue habiendo un bloque blanco a la izquierda

Te encontrarás con este tipo de cosas cuando trabajes con CSS. Habrá que hacer un poco de trabajo de detective para averiguar cuál es la causa y cómo ajustarla

Utiliza la herramienta "Inspeccionar" de tu navegador para ver el código fuente. Apunta con el ratón a la región afectada en el navegador, haz clic con el botón derecho y selecciona Inspeccionar en el menú del navegador

Herramienta de inspección

Cuando muevas el ratón en la vista del código fuente, verás que las áreas a las que afecta están resaltadas en la vista previa en vivo. En el panel derecho, podrás ver el CSS utilizado para ese elemento seleccionado

Nos hemos dado cuenta de que este CSS de nuestra hoja de estilos necesita ser ajustado


@media screen and (min-width: 59.6875em) {
	body:before {
		background-color: #fff;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
		content: "";
		display: block;
		height: 100%;
		min-height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		width: 29.4118%;
		z-index: 0; /* Fixes flashing bug with scrolling on Safari */
	}


Este código CSS añade un bloque de contenido vacío de 29,4118% de ancho y 100% de ancho en la parte superior izquierda. Así es como lo moveremos a la derecha


@media screen and (min-width: 59.6875em) {
	body:before {
		background-color: #fff;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
		content: "";
		display: block;
		height: 100%;
		min-height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		width: 29.4118%;
		z-index: 0; /* Fixes flashing bug with scrolling on Safari */
	}


Después de guardar y subir la hoja de estilos al servidor, este es el aspecto de nuestro sitio web

la barra lateral se ha movido al otro lado

Trabajar con CSS puede ser confuso para los principiantes. Si no quieres hacer todo el trabajo de código manual, entonces puedes probar CSS Hero. Te permite editar el CSS sin escribir ningún código, y funciona con todos los temas de WordPress

Esperamos que este artículo te haya ayudado a cambiar el lado de la barra lateral en WordPress. Quizás también quieras ver nuestra lista de 12 trucos para la barra lateral de WordPress para obtener los máximos resultados

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.

Si quieres conocer otros artículos parecidos a Cómo cambiar el lado de la barra lateral en WordPress puedes visitar la categoría Themes.

¡Más Contenido!

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Go up