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
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
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.css
y 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í
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
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
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
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.
Deja un comentario
¡Más Contenido!