Habilitar sidebar a partir de un "width" específico

76david76 · 19 Jul 2017

Hola. He creado un sidebar en mi functions.php. Con el siguiente comando, lo inserto en header.php:

<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('nombre del sidebar')): endif; ?>

De este modo, el sidebar aparece en la cabecera de todas mis páginas. Hasta aquí todo funciona correctamente.

Lo que quiero es que ese sidebar aparezca sólo a partir de un ancho de 991px. Hasta ahora, lo he hecho con media queries en css, poniéndole un display:none por encima de esos 991px, pero lo que quiero es deshabilitar el widget por encima de 991px. Con las media queries en css, lo oculto, pero sigue apareciendo en el código fuente, y mi intención es deshabilitar el widget a efectos SEO.

He intentado muchas opciones, pero no he conseguido nada. No sé si hay alguna manera, a través de PHP y jQuery, de habilitar o deshabilitar el widget a partir de 991px.

sevilla666 · 20 Jul 2017

Si no quieres que salga en el código fuente tienes que hacerlo con php, pero php no puede detectar el ancho~alto de la pantalla.

Tienes que capturar el ancho con una variable JS al principio del html y luego pasar la variable a php, tal vez pasando la variable por ajax y devolviéndola en php.
Una vez que tienes la variable en php le pones un condicional que haga un echo a lo que quieres ocultar/mostrar,, algo así:

PHP:

if ($variable>950){
echo "<script>sidebar();</script>";
}

También tienes que tener en cuenta que si lo haces así, si reducen o amplían el tamaño del navegador el script no hara los cambios.

Hay otra forma que es monitorizar/detectar las medias querys con javascrypt.
el código seria este:

Insertar CODE, HTML o PHP:

var mediaquery = window.matchMedia("(max-width: 600px)");
function handleOrientationChange(mediaquery) {
  if (mediaquery.matches) {
     document.write("menor de 600");
  } else {
     document.write("mayor de 600");
  }
}
mediaquery.addListener(handleOrientationChange);

Tambièn tienes que hacer una llamada a ajax donde pone "document.write" borrando/mostrando el div que contiene el código deseado.

Este ultimo còdigo en su día yo lo utilice y va bien, pero creo que lo hice con JQuery "jQuery width()", y se puede hacer de tal forma que cuando reducen o amplían el tamaño del navegador el script se muestra o se borra.
Saludos

76david76 · 20 Jul 2017

Gracias por responder, pero llevo todo el día dándole vueltas y no he sido capaz de dar con el código correcto. Ya probé con window.matchMedia, pero no soy capaz de hacerlo funcionar.

kanikase · 21 Jul 2017

No puedes detectar el ancho de la ventana con php, lo que puedes hacer es detectar el dispositivo con php, si es móvil (tablet, celular) no lo muestras y ya, puedes usar la classe Mobile Detect - lightweight PHP class for detecting mobile devices (including tablets)

Carambel · 21 Jul 2017

Deberias usar bootstrap para evitar usar codigo extra.

sevilla666 · 21 Jul 2017

[MENTION=183840]76david76[/MENTION] tiene razón [MENTION=81006]kanikase[/MENTION], pero tu pregunta ponia: "aparezca sólo a partir de un ancho de 991px".Puedes hacerlo como te ha dicho, es mucho mas facil, pero no estarás condicionado al ancho del navegador estarás condicionado al dispositivo. Si con un navegador de ordenador se le baja el tamaño de este, el código no te va a cambiar.

Saludos

reverse999 · 21 Jul 2017

¿Probaste con meterle un display: none para ese width?

76david76 · 21 Jul 2017

Voy a probar con Mobile Detect como me decís; he estado informándome y creo que me solucionará el problema. Ya os digo.

- - - Actualizado - - -

Sí, reverse999, de hecho, ahora mismo lo tengo con display: none a partir de 991px. El diseño funciona correcto así. Por encima de 991px me muestra un estilo de menú, y por debajo de 991 oculto ese menú con ese display: none y le pongo display: block al nuevo menú que he diseñado para dispositivos más pequeños (tablets, móviles).

El problema es que ambos menús, estén o no con display: none, aparecen siempre en el código fuente, y esos menús tienen 70 enlaces a categorías cada uno, lo cual es horroroso para el SEO, porque, según el ancho de píxeles, siempre tendré un menú escondido con 70 enlaces que no necesito y que me están gastando un montón de presupuesto de rastreo del robot de Google en todas las páginas. Por eso quiero deshabilitarlos cuando no los necesite en lugar de esconderlos. No sé si me explico.