De vez en cuando suceden cosas locas dentro de WordPress que hacen que el diseño de su sitio elimine su barra lateral, o haga algo extraño como moverlo debajo de su contenido o al pie de página. La barra lateral que falta en WordPress suele ser solo el resultado de un código fuera de lugar. A veces es causado por un tema, complemento o incluso un error de actualización. Afortunadamente, un poco de solución de problemas es todo lo que se necesita para solucionarlo.
El problema de la barra lateral que falta casi siempre se debe a un cambio reciente que ha realizado. Tal cambio puede ser el resultado de:
- un nuevo tema
- Un nuevo complemento
- Una publicación reciente
- Cambios recientes en el código
Algunas de las soluciones son simples. Otros pueden tomar algún tiempo para revisar el código y solucionarlo. Con un puñado de procedimientos simples de solución de problemas, esto no será demasiado difícil. Echemos un vistazo a algunos ejemplos y veamos cómo solucionarlos.
Configuraciones y soluciones simples
He aprendido de la manera difícil cuando soluciono problemas para mirar primero las cosas simples. Es demasiado fácil pasar medio día investigando el código cuando el problema era una configuración simple en un tema. Comience con las adiciones o actualizaciones recientes, como código, temas y complementos.
Antes de profundizar en el código, veamos algunas cosas que son tan simples que pueden pasarse por alto fácilmente. Algunos de estos pueden parecer obvios para aquellos con mucha experiencia en WordPress, pero incluso alguien que haya usado WordPress durante años podría no haberlos encontrado. Por ejemplo, es posible haber usado WordPress durante años y nunca haber cambiado de tema.
Los widgets desaparecen con el nuevo tema
A veces, la solución es tan simple como necesitar colocar widgets cuando cambia a un nuevo tema.
Los temas tienen diferentes diseños de widgets y cuando vas a un nuevo tema, deben configurarse.
En este ejemplo, las áreas de widgets están en su lugar pero no hay widgets dentro de ellas.
Arrastre y suelte sus widgets y volverá a estar en funcionamiento.
Configuración de diseño de publicación
Muchos temas tienen configuraciones adicionales que quizás debas verificar. Por ejemplo, Divi le brinda un conjunto adicional de configuraciones de publicación. En el lado derecho de la pantalla, frente al título de las publicaciones, hay un cuadro llamado Configuración de publicaciones de Divi . Aquí encontrará un cuadro desplegable llamado Diseño de página . Puede elegir entre Barra lateral derecha , Barra lateral izquierda y Ancho completo . Full Width desactiva las barras laterales de esa publicación. Si tiene barras laterales en algunas páginas o publicaciones y no en otras, este podría ser el problema.
Actualizar WordPress
Asegúrate de no haberte perdido ninguna actualización. WordPress y los temas son los más importantes para este problema. A veces puede que tengas que reinstalar WordPress o el tema.
Modificación de temas
Una forma en que ocurre este problema es modificando el tema y luego actualizándolo. Una vez que actualice el tema, todo su código personalizado se perderá.
Hay dos formas de evitar esto:
- Usa un tema hijo . Cuando use temas secundarios, deberá asegurarse de que el tema principal esté actualizado.
- Guarde sus archivos personalizados y péguelos nuevamente después de actualizar el tema.
Código
A veces cometemos errores con el código. Confía en mí… es fácil de hacer. Algo tan simple como usar el nombre de una barra lateral en lugar de la identificación es suficiente para dañar el estado zen normal de su diseño. A veces, esto se debe a un error en el código que impide que el código se ejecute más. Incluso puede ser código dentro de una publicación. Cuando esto sucede, puede ver las barras laterales en todas las páginas, excepto en la página con esa publicación.
Antes de comenzar a experimentar y realizar cambios en su código, asegúrese de tener una copia de seguridad reciente. Confía en mí, es posible empeorarlo, en cuyo caso una copia de seguridad es tu mejor amigo. De hecho, siempre haga una copia de seguridad antes de actualizar WordPress, temas, complementos o realizar modificaciones en su código. Si hay algún problema, puede restaurarlo a la versión original.
Código dentro de las publicaciones
Pegar código en las publicaciones puede ser complicado. Al copiar código de otras fuentes, es fácil pasar por alto una etiqueta o incrustar accidentalmente código aleatorio de procesadores de texto como Microsoft Word (Word a veces agrega su propio formato. Una vez eliminé mis barras laterales pegando el código de afiliado de Amazon de Word). Por lo general, los fragmentos de código aleatorios dentro de una publicación moverán la barra lateral a la parte inferior de la página.
Algo tan simple como un extra </div>puede causar el problema. Esto puede hacer que el tema responda como si la barra lateral estuviera fuera del envoltorio del elemento div. También verifique si hay un elemento div no cerrado. Otra causa posible es que el rango de categorías es demasiado amplio y empuja el contenido de la barra lateral hacia abajo. Mire también cualquier código que haya colocado dentro de sus barras laterales y widgets. Esto también puede deberse a problemas con los complementos o al establecer el ancho en CSS demasiado alto.
En este ejemplo, la barra lateral se movió al pie de página y el inicio de sesión de envío de comentarios se movió a la ubicación de la barra lateral. Solo hace esto en esta publicación o en una pantalla que incluye esta publicación. Para encontrar el problema, vaya a cada publicación individualmente hasta que encuentre la publicación específica con el problema. A continuación, vaya al modo de edición para esa publicación.
Para solucionar el problema, fui a la publicación y seleccioné la pestaña Texto . Encontré un fragmento de código que no eliminé cuando copié el texto de otra fuente. Era un cierre </div>pero no tenía una apertura a juego <div>. Eliminé el código y la barra lateral volvió a su ubicación correcta.
Herramientas de desarrollo W3
W3 Developer Tools es un conjunto de herramientas en línea para validar su código. Probará HTML, CSS, compatibilidad móvil, fuentes RSS, enlaces y mucho más. Busca piezas faltantes y resaltará todos los problemas para que pueda solucionarlos aún más. Esta es una buena opción si tiene mucho código para solucionar o no puede encontrar el problema. Puede escribir la URL que desea que verifique, cargar el código como un archivo o pegar el código como entrada directa. Luego probará el código y le dará un análisis.
Pegué mi URL y me dio una lista de errores para solucionar. Sin embargo, esto puede volverse confuso y llevar mucho tiempo si hay muchos errores que no son parte del problema.
Hoja de estilo
El problema podría deberse al código dentro de la hoja de estilo del tema. Puede encontrarlo en Apariencia > Editor . Desplácese hacia abajo y haga clic en Hoja de estilo en Estilos .
Deberías ver un código que se parece a esto:
|
01
|
.sidebar |
Aquí está el código para Twenty Sixteen:
|
01
02
03
04
05
06
|
.sidebar {float: left;margin-left: 75%;padding: 0;width: 25%;} |
En este ejemplo, cometí un error simple cuando intenté hacer una modificación en el tema Twenty Sixteen.
|
01
02
03
04
05
06
|
.sidebar {float: right;margin-left: -100%;max-width: 413px;position: relative;width: 29.4118%; |
Float le dice a la barra lateral su posición en la pantalla. Descubrí que las posiciones flotante y de margen se habían intercambiado. El código debería verse así:
|
01
02
03
04
05
06
07
|
.sidebar {>float: left;margin-right: -100%;max-width: 413px;position: relative;width: 29.4118%;} |
Esto trae mi barra lateral de vuelta. Otros problemas que pueden causar esto son el porcentaje de ancho y el tamaño de píxel incorrectos. Puede experimentar y ver qué funciona mejor para su tema.
Widgets
Si está inicializando widgets, asegúrese de usar la ID del widget y no su nombre. Esto se ve principalmente en temas gratuitos donde los programadores colocan enlaces a sus empresas. Este es un ejemplo de cómo se ve el código en el tema Twenty Sixteen.
|
01
02
03
04
05
06
07
08
09
10
|
function twentysixteen_widgets_init() {register_sidebar( array('name' => __( 'Sidebar', 'twentysixteen' ),'id' => 'sidebar-1','description' => __( 'Add widgets here to appear in your sidebar.', 'twentysixteen' ),'before_widget' => '<section id="%1$s" class="widget %2$s">','after_widget' => '</section>','before_title' => '<h2 class="widget-title">','after_title' => '</h2>',) ); |
En el archivo functions.php del tema , busque register_sidebar y mire la identificación del widget.
|
01
02
03
04
|
// Adds a class of no-sidebar to sites without active sidebar.if ( ! is_active_sidebar( 'sidebar-1' ) ) {$classes[] = 'no-sidebar';} |
Ahora busque la identificación y el nombre de la barra lateral y asegúrese de que se esté utilizando la identificación y no el nombre.
Cambiar esta línea de la identificación al nombre movió la barra lateral debajo del contenido.
Cambiarlo de nuevo a la identificación movió la barra lateral nuevamente a su lugar.
Los propios widgets podrían ser el problema. Abra sus widgets de texto y busque el código faltante o fuera de lugar. Las etiquetas adicionales pueden causar problemas dentro de los widgets al igual que dentro de las publicaciones. Si no está seguro de qué widget está causando el problema, puede eliminarlos de uno en uno hasta que el problema desaparezca. Alternativamente, puede eliminarlos todos para ver si el problema se solucionó y, cuando lo haga, puede volver a agregarlos uno a la vez hasta que encuentre el widget con el código incorrecto.
Nota: Ni siquiera tiene que tener código en el widget de texto. Un widget de texto vacío a veces puede ser suficiente para evitar que se carguen el resto de sus widgets. Eliminar todos los widgets innecesarios; especialmente aquellos sin contenido.
Algunos temas están diseñados sin barras laterales. Si desea agregarlos, debe consultar nuestro tutorial llamado Cómo administrar la barra lateral de WordPress .
Pensamientos finales
El problema de la barra lateral faltante de WordPress puede ser una molestia y hacer que su sitio se vea inestable hasta que encuentre la solución correcta. Echando un vistazo rápido a su configuración y código encontrará la mayoría de los problemas probables rápidamente y ayudará a que su sitio vuelva a funcionar correctamente.
Nos gustaría saber de usted. ¿Ha tenido el problema de la barra lateral faltante de WordPress? ¿Cuál fue la causa? ¿Tienes algo que añadir? Háganos saber en los comentarios.
Imagen en miniatura del artículo de Sira Anamwong / shutterstock.com