Recientemente, uno de nuestros lectores nos preguntó cómo cambiar la barra lateral en un tema de WordPress. A menudo nos encontramos con este problema cuando los usuarios quieren cambiar su barra lateral de izquierda a derecha o de derecha a izquierda. En este artículo, le mostraremos cómo cambiar la barra lateral en WordPress.

Cambiar la barra lateral en WordPress

Por qué cambiar 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, si su sitio web está escrito en un idioma de derecha a izquierda, es posible que se invierta.

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

Sitio de WordPress con barra lateral a la izquierda

Si recién está comenzando a crear un sitio web, debe elegir un tema de WordPress con una barra lateral en su ubicación preferida.

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

Dicho esto, veamos cómo cambiar fácilmente la barra lateral en WordPress con un poco de CSS.

Cambiar la barra lateral en WordPress con CSS

Antes de realizar cambios en el tema, primero debe considerar crear un subtema. Al usar temas secundarios, 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 cambie el tema de WordPress activo directamente.

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

Conéctese a su sitio de WordPress usando un cliente FTP y vaya a la carpeta de su tema. Suele estar ubicado en:

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

Ahora necesita descargar y abrir el archivo de hoja de estilo principal del tema en un editor de texto sin formato como el Bloc de notas.Este archivo se llama style.css, que se encuentra en el directorio raíz del tema.

En este archivo, busque la clase CSS para la barra lateral.por lo general .sidebarEn este ejemplo, usamos el tema predeterminado de WordPress veinticinco, 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, flota la barra lateral hacia la izquierda y el margen derecho es -100%. Lo cambiamos para que flote a la derecha y flote a la izquierda de la siguiente manera:

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

Guarde sus cambios y cargue el archivo style.css nuevamente en su sitio web utilizando un cliente FTP. Ahora, si visitas tu sitio web, se verá así:

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

Eso es porque movimos la barra lateral, pero no movimos el área de contenido. Veinticinco utiliza este CSS para definir la ubicació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. como esto:

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

Así es como se ve nuestro sitio web con este CSS aplicado.

Conflicto de CSS que muestra espacios en blanco

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

Cuando trabajas con CSS, te encuentras con cosas como esta. Tomará un poco de trabajo de detective descubrir qué está causando esto y cómo ajustarlo.

Use la herramienta “inspeccionar” de su navegador para ver el código fuente. Apunte el mouse al área afectada en el navegador, haga clic con el botón derecho y seleccione Inspeccionar en el menú del navegador.

Herramienta de verificación

A medida que mueve el mouse en la vista del código fuente, notará que el área a la que afecta se resalta en la vista previa en vivo. En el panel derecho podrá ver el CSS utilizado para ese elemento seleccionado.

Encontramos que este CSS en la hoja de estilo 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 agrega un bloque de contenido vacío de 29,4118 % de ancho y 100 % de ancho en la esquina superior izquierda. Así es como lo movemos 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 la hoja de estilo y volver a cargarla en el servidor, así es como se verá nuestro sitio web.

Mover la barra lateral al otro lado

El uso de CSS puede resultar confuso para los principiantes. Si no desea hacer todo el trabajo de codificación manual, puede probar CSS Hero. Le permite editar 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 la barra lateral en WordPress. También puede consultar nuestra lista de 12 consejos de la barra lateral de WordPress para obtener los mejores resultados.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.