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. A menudo recibimos esta pregunta cuando los usuarios quieren cambiar la barra lateral de izquierda a derecha o de derecha a izquierda. En este artículo, le mostraremos cómo 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 las personas escanean las páginas de izquierda a derecha. Recomiendan colocar el contenido importante a la izquierda para que los usuarios vean el contenido primero. Sin embargo, esto podría revertirse si su sitio está en un idioma escrito de derecha a izquierda.

Muchos sitios de WordPress utilizan el diseño típico de blog de dos columnas. Uno para el contenido y otro para la barra lateral.

Un sitio de WordPress con una barra lateral en el lado izquierdo

Si recién está iniciando un sitio web, debe seleccionar un tema de WordPress que tenga la barra lateral en su ubicación preferida.

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

Dicho esto, echemos un vistazo a cómo puede cambiar fácilmente el lado de la barra lateral en WordPress usando algo de CSS.

Cambiar el lado de la barra lateral en WordPress usando CSS

Antes de realizar cambios en el tema, primero debe considerar la posibilidad de crear un tema hijo. Al usar un tema hijo, podrá actualizar el tema principal sin perder los cambios.

En segundo lugar, siempre debe crear una copia de seguridad de su sitio de WordPress cuando realice cambios directos en su tema activo de WordPress.

Necesitará un cliente FTP para editar los archivos de tema. Consulte nuestra guía para principiantes sobre cómo usar FTP para cargar archivos en WordPress.

Conéctese a su sitio de WordPress utilizando el cliente FTP y vaya a la carpeta del tema. Generalmente se encuentra en:

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

Ahora necesita descargar y abrir el archivo de hoja de estilo principal de su tema en un editor de texto simple como el Bloc de notas. Este archivo se llama style.cssy se encuentra en el directorio raíz del tema.

En este archivo, busque la clase CSS para la barra lateral. Por lo general es .sidebar. En este ejemplo, estamos usando el tema Twenty Fifteen WordPress predeterminado que tiene este CSS para definir la barra lateral:

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

Como puede ver, la barra lateral flota hacia la izquierda con un margen de -100% hacia la derecha. Lo cambiaremos para que flote en el margen derecho e izquierdo de esta manera:

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

Guarde sus cambios y cargue el archivo style.css en su sitio web usando el cliente FTP. Ahora, si visita su sitio web, se verá así:

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

Esto se debe a que 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. Me gusta esto:

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

Así es como se comportó nuestro sitio web después de aplicar este CSS.

Un conflicto de CSS que muestra un área en blanco en blanco

Como puede ver, hemos cambiado de lado tanto para el contenido como para las áreas de la barra lateral. Sin embargo, todavía hay un bloque blanco a la izquierda.

Te encontrarás con esas cosas cuando trabajes con CSS. Se necesitará un poco de trabajo de detective para descubrir qué lo causa y cómo regularlo.

Utilice la herramienta “Inspeccionar” de su navegador para examinar el código fuente. Apunte con el mouse a la región afectada en el navegador, haga clic con el botón derecho y seleccione Inspeccionar en el menú del navegador.

Herramienta de inspección

A medida que mueva el mouse en la vista de código fuente, notará que las áreas a las que afecta se resaltan en la vista previa en vivo. En el panel derecho, podrá ver el CSS utilizado para ese elemento seleccionado.

Entendemos que este CSS en nuestra hoja de estilo debe cambiarse.

@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 agrega 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 hacia 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 cargar la hoja de estilo en el servidor, así es como se veía nuestro sitio web.

barra lateral movida al otro lado

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

Esperamos que este artículo le haya ayudado a cambiar el lado de la barra lateral en WordPress. Es posible que también desee ver nuestra lista de 12 trucos de la barra lateral de WordPress para obtener los mejores resultados.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *