[Cerrado] Menú duplicado Wordpress (¿Problema con Varnish?)  

Que tal Álvaro,

Si bien desde este apartado no podemos sugerir códigos completamente personalizados me gustaria poder tener un mayor contexto de la incidencia

El menu se duplica solo en la vista de escritorio?

Estos contenedores poseen las mismas clases?

Considerando que tienes conocimientos al respecto puedes indicarnos por medio del inspector de código del navegador como puedes determinar de que en efecto estan presentes dos menus?

Ahora bien retomando el tema del script, el ajuste a nivel de servidor es un apartado que tendria que elevarse a nuestros compañeros de tickets ya que solo ellos tiene la capacidad de contemplar y en dado caso implementar lo que deseas de ser posible

Saludos!

Hola de nuevo.

Me acaban de responder esto desde el ticket de soporte:

Gracias por contactarnos y por compartir la información técnica junto con el contexto detallado. Tras revisar el comportamiento del sitio y el código compartido, podemos confirmar que el problema que estás experimentando se debe a que la función wp_is_mobile() no es compatible con entornos donde interviene una capa de caché a nivel de servidor, como en este caso, con Varnish.

Ante cualquier duda, estamos a tu disposición.

Según esto, tendría que deshabilitar la caché de Varnish... porque, si no he entendido mal, desde soporte plantean algo que ya viene por defecto con Wordpress, que es renderizar los dos menús y ocultar uno de ellos con CSS.

Pero, como decía, la idea es que en el código fuente no aparezcan los dos bloques de enlaces, que es código que Google a efectos SEO considera enlaces duplicados, y no favorece el SEO de la página.

¿No hay entonces ninguna forma de evitar duplicar el código fuente de los menús y renderizar solo uno dependiendo el tamaño del dispositivo de acceso?

Un saludo y gracias.

Hola, Álvaro

Tienes que tener en cuenta que tu dominio (sobre el que haces esta consulta) utiliza CloudFlare como servidor de elementos cacheados, lo que significa que Cloudflare sirve directamente la respuesta al usuario, sin siquiera contactar a tu servidor web ni a Varnish.

Si el recurso solicitado no está en la caché de Cloudflare, ha expirado o la petición no es cacheable por Cloudflare (por ejemplo, un POST request), Cloudflare reenviará la petición a tu servidor web y entonces sí intermediará Varnish.

Si el recurso está en la caché de Varnish y es válido, Varnish sirve la respuesta a Cloudflare que la entregará al navegador desde donde partió la petición de carga de contenidos estáticos de tu web.

A nivel jerárquico, Cloudflare actúa como la primera capa de caché y si encuentra el contenido, no le consulta Varnish, por lo que Varnish solo entra en juego cuando Cloudflare no tiene una copia válida del contenido a mostrar en el navegador de destino.

Cuando el contenido de tu sitio web se actualiza, necesitas invalidar la caché tanto en Cloudflare como en Varnish para que los usuarios vean la versión más reciente. Ambos sistemas tienen mecanismos para esto (purga por URL, purga total, etc.), es decir, "vaciado de caché" de tu sitio web para actualizar estáticos en Varnish y CloudFlare y entregar contenidos actualizados.

Espero haber podido aclarar tu consulta.

Hola, buenas tardes Luis.

Gracias por tu respuesta.

Anteriormente he intentado purgar la caché de Cloud Flare y vaciar la caché de Varnish.

Pero al volver a la página en cuestión sigo viendo tras actualizar que el código fuente sigue mostrando los dos menús duplicados.

Por terminar de aclararlo, ¿qué sugieres hacer, deshabilitar ambas cachés y recargar la página hasta que solo se vea en el código fuente los enlaces de un solo menú, y en ese momento reactivar de nuevo ambas cachés?

Como digo, ya he intentado previamente en varias ocasiones borrar ambas cachés y acto seguido, recargar la página en cuestión con CTRL + F5, pero sigue mostrando los menús duplicados.

También ahora, acabo de desactivar la cache de Varnish, purgado Cloud Flare, recargado la página donde tengo el menú asignado como prueba, pero sigue ocurriendo lo mismo.

¿Tendría que deactivar temporalmente también Cloud Flare y esperar a qué el nuevo código PHP se "reconozca" y entonces, reactiva de nuevo Varnish y Cloud Flare?

Si es posible, como entiendo que indicáis, poder ejecutar el código indicado, ¿qué pasos tendría que segur para que se haga efectivo en ambas cachés?

Un saludo y gracias.

Por aclarar lo comentado anteriormente:

Si es problema de Varnish, ¿no se podría resolver el problema manteniendo Varnish desactivado un tiempo hasta que el código se esté ejecutando correctamente y en ese momento activar de nuevo Varnish?

Si la idea es esta, de cargar el código del menú aplicando la ejecución de la función wp_is_mobile() desactivando Varnish, y luego volviéndola a activar cuando ya esté ejecutándose, ¿por qué ahora no está cargando bien el menú? WP Rocket y Cloud Flare también han sido purgados.

Un saludo.

Que tal Álvaro,

Lo ideal considerando lo ya explicado por mi compañero es mantener desactivado los complementos asociados a la cache del sitio ademas del CDN para que exista una versión ya visible en la cual el script se ejecute y sea considerado para las versiones cacheadas en los navegadores confirmando que en efecto si esta funcionando

Luego si que podemos restablecer tanto la conexión con Cloudflare, Varnish y WP Rocket respectivamente

Si aun asi el conflicto persiste, ya puede ser que el origen sea la forma en la cual se esta presentando este script y puede que sea necesario utilizar otro abordamiento o reestructurar este código personalizado

Saludos!

Hola Bruno.

Ayer desactivé Varnish y ahora he pausado Cloud Flare y purgado su caché junto con la de WP Rocket de nuevo.

El código que se está utilizando es el mismo que uso en otra de mis webs, donde el código no se duplica (no usa Varnish ni Cloud Flare): https://diseñowebasturias.com/

El código es el siguiente, se introduce en la plantilla de cabecera como un shortcode:

// Shortcode para el menú
function responsive_menu_shortcode() {
ob_start();

if (!wp_is_mobile()) : ?>
<nav class="desktop-menu-wrapper">
<?php wp_nav_menu(array(
'menu' => 'main',
'menu_class' => 'desktop-menu',
'container' => false,
'depth' => 2
)); ?>
</nav>
<?php endif;

if (wp_is_mobile()) : ?>
<div class="mobile-menu-container">
<button class="hamburger" aria-label="Abrir menú">
<svg class="hamburger-svg" viewBox="0 0 46 46" width="46" height="46">
<path class="hamburger-line top" d="M6 13h34" />
<path class="hamburger-line middle" d="M6 23h34" />
<path class="hamburger-line bottom" d="M6 33h34" />
</svg>
</button>
<div class="offcanvas-menu">
<?php wp_nav_menu(array(
'menu' => 'main',
'menu_class' => 'mobile-menu',
'container' => false
)); ?>
</div>
</div>
<?php endif; ?>

<?php
return ob_get_clean();
}
add_shortcode('responsive_menu', 'responsive_menu_shortcode');

/* JS Hamburguer */
function load_libs_footer(){
?>
<script class="webMenus">
document.addEventListener('DOMContentLoaded', function() {
// Función para gestionar los menús según el tamaño de pantalla
function handleMenus() {
var desktopMenu = document.querySelector('.desktop-menu-wrapper');
var mobileMenu = document.querySelector('.mobile-menu-container');

if(window.innerWidth < 1025) {
if(desktopMenu && desktopMenu.parentNode) {
desktopMenu.parentNode.removeChild(desktopMenu);
}
} else {
if(mobileMenu && mobileMenu.parentNode) {
mobileMenu.parentNode.removeChild(mobileMenu);
}
}
}

// Ejecutar al cargar
handleMenus();

// También ejecutar cuando cambie el tamaño de la ventana
window.addEventListener('resize', function() {
// Recargar la página al cambiar de tamaño para reconstruir los menús correctamente
if ((window.innerWidth < 1025 && !document.querySelector('.mobile-menu-container')) ||
(window.innerWidth >= 1025 && !document.querySelector('.desktop-menu-wrapper'))) {
location.reload();
}
});

// Configuración del menú hamburguesa
const hamburger = document.querySelector('.hamburger');
const offcanvas = document.querySelector('.offcanvas-menu');

if(hamburger && offcanvas) {
hamburger.addEventListener('click', function(e) {
e.stopPropagation();
this.classList.toggle('active');
offcanvas.classList.toggle('active');
});

// Cerrar al hacer click fuera
document.addEventListener('click', function(e) {
if(offcanvas.classList.contains('active') &&
!offcanvas.contains(e.target) &&
!hamburger.contains(e.target)) {
hamburger.classList.remove('active');
offcanvas.classList.remove('active');
}
});

// Cerrar al seleccionar item
const mobileLinks = document.querySelectorAll('.mobile-menu a');
if(mobileLinks.length > 0) {
mobileLinks.forEach(link => {
link.addEventListener('click', () => {
hamburger.classList.remove('active');
offcanvas.classList.remove('active');
});
});
}
}
});
</script>
<?php
}
add_action('wp_footer', 'load_libs_footer', 99);

Hola Alvaro.

No veo que tengas el menu duplicado, de todas formas no damos soporte a código personalizado.

Una cosa que puedes probar es a comentar el código que genera el menu de la plantilla.

.- Accede a la carpeta de tu plantilla ( Creo que es hello )

.- Accede a template-parts y edita el archivo header.php

.- Comenta este bloque de código:

<?php if ( has_nav_menu( 'menu-1' ) ) : ?>
<nav class="site-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'menu-1' ) ); ?>
</nav>
<?php endif; ?>

Un saludo

Perfecto Pepe, aclarado.

Un saludo.