existe WordPress en los que lamenú de navegaciónjunto concolumna de gestión（El problema de la superposición (Admin Bar) es uno que muchos usuarios encuentran. Por lo general, este problema se debe a que el CSS del tema no tiene en cuenta la altura de la barra de administración, por lo que el menú de navegación queda oculto. En este artículo, analizaremos la causa de este problema en detalle y elegiremos la solución adecuada en función de la situación real.

Causas comunes de superposición de barras de administración y menús de navegación de WordPress

Estas son algunas de las razones que pueden hacer que el menú de navegación quede oculto por la barra de administración:

1. Conflicto temático: El CSS de algunos temas no gestiona correctamente la altura de la barra de administración, lo que puede provocar que el menú de navegación se muestre en una posición incorrecta.
2. conflicto de plug-insAlgunos plugins (como el plugin Mega Menu o el plugin Header Banner) pueden introducir CSS o JavaScript que afecten al dise?o del front-end, provocando errores en la posición del menú de navegación.
3. CSS personalizadoSi se a?ade CSS personalizado manualmente, también puede afectar a la visualización del menú de navegación, especialmente si el estilo personalizado no tiene en cuenta la presencia de la barra de administración.

?Cómo reconozco un problema?

Al observar el menú de navegación, se suele ver que es difícil hacer clic en los elementos del menú o que parte del menú está tapado. Este problema no sólo afecta a la experiencia del usuario, sino que también hace que sea incómodo para los usuarios navegar por el sitio. Conociendo la causa, hay algunas soluciones diferentes, ?así que vamos a verlas juntos!

Solución 1: Ocultar la barra de administración a través de la configuración del perfil de usuario

Si desea solucionar el problema de solapamiento rápidamente y no quiere implicar cambios en el código, puede elegir la opciónOcultar la barra de administración. Este método es adecuado para principiantes y usuarios que no saben CSS o no tienen privilegios de edición de temas.

mover

1. Acceda a la administración de WordPressVaya al panel de control de WordPress.

2. Vaya a Configuración de usuarioEn la barra lateral, haga clic en Usuarios > Mi perfil.

3. Desmarque la opción de la barra de herramientas: en barra de herramientas (en software informático) desmarque la casilla Mostrar la barra de herramientas al visualizar el sitio Las opciones.

4. Guardar cambios: Click Actualizar datos personales Guarde los ajustes.

Por qué funciona.

Después de ocultar la barra de administración, el front-end ya no muestra la barra de administración, evitando así que el menú de navegación quede cubierto. Este método no implica modificaciones de código y, por tanto, no afecta a otros ajustes de dise?o del sitio.

Atención:Este método sólo funciona para el usuario actual, otros usuarios tendrán que acceder a su cuenta y repetir los pasos anteriores.

Solución 2: Ajuste manualmente el CSS del tema

Con un poco de conocimiento de CSS, para solucionar este problema para siempre, puede solucionar el problema de superposición del menú ajustando manualmente el CSS del tema.

mover

1. Inspección de las zonas problemáticas

• Abra el menú Herramientas para desarrolladores(Haga clic con el botón derecho del ratón en el menú de navegación y seleccione sonda tal vez Elementos de control).

• En Herramientas para desarrolladores, busque la clase CSS o el ID del menú de navegación o de la zona de cabecera del sitio y registre la información para utilizarla más tarde en ajustes personalizados de CSS.

2. Instale el complemento WPCode

El plugin WPCode ayuda a a?adir CSS personalizado a la vez que proporciona funcionalidad de lógica condicional para hacer que el código funcione sólo para usuarios registrados.

• Navegue hasta Plugins > Instalar PluginsSi desea instalar el plugin WPCode, busque e instale el plugin WPCode.

• Después de activar el plugin, vaya a Fragmentos de código > A?adir fragmento de códigoy luego seleccione A?adir código personalizado y seleccione Fragmento de código CSS.

3. A?adir CSS personalizado

Introduzca el siguiente fragmento de código en el editor de código:

#u-menu-id .tu-menu-clase {
    margin-top: 40px; /* Ajuste este valor para adaptarlo al tema */
    z-index: 10001;
    posición: relativa;
    padding-top: 40px;
}

llamar la atención sobre algo: Will #u-id-menú responder cantando .tu-clase-de-menú Sustitúyalo por el ID real del menú de navegación y el nombre de la clase.

Este código se pasa a través del margin-top responder cantando padding-top Ajuste la posición del menú y fije el z-index Un valor de 10001 hace que se muestre encima de la barra de administración.posición: relativa Se garantiza que el índice z funcione.

4. Activar la lógica condicional

Desplácese hasta lógica condicional inteligente (ICL)active la condición lógica y configúrela para que sólo se aplique si el usuario ha iniciado sesión.

5. Guardar y activar fragmentos de código

golpe (en el teclado) Guardar fragmentos de código y cambia el estado a activeDe este modo, el código CSS sólo tendrá efecto cuando un usuario conectado visite el sitio. De esta manera, el código CSS sólo tendrá efecto cuando un usuario conectado visite el sitio, evitando cualquier impacto en los visitantes del front-end.

Por qué funciona.

El problema suele deberse a que el CSS del tema no tiene en cuenta la altura de la barra de administración. Si a?ades este CSS personalizado, te asegurarás de que el menú de navegación se muestre por encima de la barra de administración, resolviendo así el problema de la superposición de menús.

Solución 3: Compruebe si hay conflictos entre plug-ins

Si ninguna de las soluciones anteriores resuelve el problema, los conflictos entre plugins pueden ser la causa de la superposición de los menús de navegación. Algunos plugins pueden introducir código CSS o JavaScript que interfiere con la configuración de dise?o del tema.

mover

1. Desactive todos los plug-ins

• En el backend de administración de WordPress, vaya a Plugins > Plugins instalados.
• Marque todos los plug-ins y seleccione en el menú desplegable Acciones masivas desactivarHaga clic en aparato.

2. Comprobar si el problema ha desaparecido

Después de desactivar todos los plugins, compruebe si el menú de navegación vuelve a la normalidad. Si el problema de superposición desaparece, significa que uno de los plugins puede estar causando un conflicto.

3. Active los plug-ins uno a uno para localizar los plug-ins problemáticos

Habilite los plugins uno a uno y actualice la página después de cada uno para ver si el problema reaparece. De esta manera, se puede encontrar el plugin específico que causa el conflicto.

4. Resolución de conflictos

Tras confirmar que se trata de un plugin conflictivo, intente ponerse en contacto con el desarrollador del plugin para solicitar asistencia, o busque otro plugin con una funcionalidad similar para sustituirlo.

Preguntas frecuentes

1. ?Hay alguna solución más rápida?
Si no quieres mostrar la barra de administración en el front-end, puedes simplemente ocultarla a través de tu perfil de usuario, lo que puede evitar inmediatamente problemas de solapamiento.

2. ?Afecta la personalización de CSS al rendimiento del sitio?
En general, una peque?a cantidad de CSS personalizado no afectará significativamente al rendimiento del sitio. Sin embargo, asegúrate de aplicar el código CSS sólo cuando sea necesario para evitar cargas innecesarias.

3. ?Qué es z-index?Por qué se utiliza aquí?
z-index es una propiedad CSS que controla el orden de apilamiento de los elementos. Puede controlar el orden de apilamiento de los elementos estableciendo el menú de navegación con un alto z-indexpuede asegurarse de que aparezca en la parte superior de la página y de que no quede oculta por la barra de administración.

resúmenes

La superposición de la barra de administración de WordPress con el menú de navegación puede solucionarse de varias maneras. Puedes optar por ocultar la barra de administración como una solución rápida, o más precisamente reposicionar el menú con CSS personalizado, o incluso comprobar si hay conflictos de plugins para erradicar el problema. Sea cual sea el método que elijas, estos pasos pueden ayudar a arreglar la correcta visualización del menú de navegación y mejorar la experiencia de usuario de tu sitio web.

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres