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 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 que cambiar el lado de la barra lateral en WordPress
Contents
Los expertos en ergonomía creen que los usuarios 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 de blog típico con dos columnas. Uno para el contenido y otro para la barra lateral.
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, tendrá que cambiar los lados de la barra lateral manualmente. Dicho esto, veamos cómo puede cambiar fácilmente el lado de la barra lateral en WordPress usando un poco de CSS.
Cambiar el lado de la barra lateral en WordPress usando CSS
Antes de realizar cambios en su tema, primero debe considerar la posibilidad de crear un tema hijo. Al utilizar un tema secundario, podrá actualizar su 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 sus archivos de tema. Consulte nuestra guía para principiantes sobre cómo usar FTP para cargar archivos en WordPress. Inicie sesión en su sitio de WordPress utilizando el cliente FTP y navegue hasta la carpeta de su tema. Por lo general, se encuentra en: / su sitio web / 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 sin formato como el Bloc de notas. Este archivo se llama style.css y se encuentra en el directorio raíz de su tema. En ese archivo, busque la clase CSS para su barra lateral. Suele ser .sidebar. En este ejemplo, estamos usando el tema Twenty Fifteen predeterminado de WordPress que tiene este CSS para definir la barra lateral: .sidebar {float: left; margen derecho: -100%; ancho máximo: 413px; posición: relativa; ancho: 29,4118%; } Como puede ver, la barra lateral flota hacia la izquierda con un margen de -100% hacia la derecha. Vamos a cambiarlo para que flote a derecha e izquierda así: .sidebar {float: right; margen izquierdo: -100%; ancho máximo: 413px; posición: relativa; ancho: 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í:
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; flotador izquierdo; margen izquierdo: 29,4118%; ancho: 70,5882%; } Lo vamos a modificar para mover el contenido a la derecha. Así: .site-content {display: block; flotador izquierdo; margen derecho: 29,4118%; ancho: 70,5882%; } Así lucía nuestro sitio web después de aplicar este CSS.
Como puede ver, hemos cambiado de lado para el contenido y las áreas de la barra lateral. Sin embargo, todavía hay un bloque blanco a la izquierda. Te encontrarás con estas cosas cuando trabajes con CSS. Se necesitará un poco de trabajo de detective para descubrir qué está causando esto y cómo ajustarlo. Utilice la herramienta «Inspeccionar» de su navegador para ver el código fuente. Coloque el mouse sobre la región afectada en el navegador, haga clic con el botón derecho y seleccione Inspeccionar en el menú del navegador.
A medida que mueva el mouse en la vista de código fuente, notará las áreas que afecta resaltadas en la vista previa en vivo. En el panel derecho, podrá ver el CSS utilizado para ese elemento seleccionado. Descubrimos que este CSS en nuestra hoja de estilo debe modificarse. @media pantalla y (min-width: 59.6875em) {body: before {background-color: #fff; cuadro de sombra: 0 0 1px rgba (0, 0, 0, 0.15); contenido: «»; bloque de visualización; altura: 100%; altura mínima: 100%; posición: fija; alto: 0; izquierda: 0; ancho: 29,4118%; índice z: 0; / * Se corrigió 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 vamos a mover hacia la derecha. @media pantalla y (min-width: 59.6875em) {body: before {background-color: #fff; cuadro de sombra: 0 0 1px rgba (0, 0, 0, 0.15); contenido: «»; bloque de visualización; altura: 100%; altura mínima: 100%; posición: fija; alto: 0; derecha: 0; ancho: 29,4118%; índice z: 0; / * Se corrigió el error de parpadeo con el desplazamiento en Safari * /} Después de guardar y cargar la hoja de estilo en el servidor, este es el aspecto de nuestro sitio web.
Trabajar con CSS puede resultar confuso para los principiantes. Si no desea hacer todo el trabajo de código manual, puede probar CSS Hero. Te permite modificar 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. También puede consultar nuestra lista de 12 consejos de la barra lateral de WordPress para obtener los mejores resultados. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.
Originally posted 2021-02-24 16:58:45.
