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 mucho esta pregunta cuando los usuarios desean cambiar su 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 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 revertirse si su sitio está en un idioma que está escrito en la dirección de derecha a izquierda.

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

Si está empezando 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 de la configuración del tema. Sin embargo, si su tema no tiene esta opción, tendrá que cambiar los lados de la barra lateral manualmente.

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

Cambiando el lado de la barra lateral en WordPress usando CSS

Antes de realizar cambios en su tema, primero debe considerar la creación de un tema secundario. Al utilizar un tema secundario, 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 de WordPress activo.

Necesitará un cliente FTP para editar sus archivos de temas. Vea nuestra guía para principiantes sobre cómo usar FTP para cargar archivos a WordPress.

Conéctese a su sitio de WordPress usando el cliente FTP y vaya a su carpeta de temas. Por lo general se encuentra en:

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

Ahora necesita descargar y abrir el archivo principal de hojas de estilo de su tema en un editor de texto plano como el Bloc de notas. Este archivo se llama style.css, y se encuentra en el directorio raíz de su tema.

En este archivo, encuentre la clase CSS para su barra lateral. Es usual .barra lateral. En este ejemplo, estamos usando el tema predeterminado de WordPress Twenty Fifteen que tiene este CSS para definir la barra lateral:

 .barra lateral flotador: izquierda; margen derecho: -100%; ancho máximo: 413px; posición: relativa; ancho: 29.4118%;  

Como puede ver, flota en la barra lateral a la izquierda con un margen de -100% a la derecha. Lo cambiaremos para que flote a la derecha y margen izquierdo como este:

 .barra lateral flotador: derecha; margen izquierdo: -100%; ancho máximo: 413px; posición: relativa; ancho: 29.4118%;  

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

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.

 .contenido del sitio mostrar: bloque; flotador izquierdo; margen izquierdo: 29.4118%; ancho: 70.5882%;  

Lo cambiaremos para mover el contenido a la derecha. Me gusta esto:

 .contenido del sitio mostrar: bloque; flotador izquierdo; margen derecho: 29.4118%; ancho: 70.5882%;  

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

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..

Encontrarás esas cosas cuando trabajes con CSS. Tomará un poco de trabajo de detective para averiguar qué está causando eso y cómo ajustarlo.

Use la herramienta 'Inspeccionar' de su navegador para ver el código fuente. Apunte el mouse hacia la región afectada en el navegador, haga clic con el botón derecho y seleccione Inspeccionar desde el menú del navegador.

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

Nos dimos cuenta de que este CSS en nuestra hoja de estilos necesita ajustes.

 @media screen y (min-width: 59.6875em) body: before background-color: #fff; caja-sombra: 0 0 1px rgba (0, 0, 0, 0.15); contenido: ""; bloqueo de pantalla; altura: 100%; min-altura: 100%; posición: fijo arriba: 0; izquierda: 0; ancho: 29.4118%; índice z: 0; / * Corrige el error de parpadeo con el desplazamiento en 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 a la derecha..

 @media screen y (min-width: 59.6875em) body: before background-color: #fff; caja-sombra: 0 0 1px rgba (0, 0, 0, 0.15); contenido: ""; bloqueo de pantalla; altura: 100%; min-altura: 100%; posición: fijo arriba: 0; derecha: 0; ancho: 29.4118%; índice z: 0; / * Corrige el error de parpadeo con el desplazamiento en Safari * / 

Después de guardar y cargar la hoja de estilo en el servidor, así es como se ve nuestro sitio web.

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

Esperamos que este artículo te haya ayudado a cambiar el lado de la barra lateral en WordPress. También puede querer ver nuestra lista de 12 trucos de la barra lateral de WordPress para obtener los mejores resultados..

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..