detectar ancho de pantalla en functions.php

Question

detectar ancho de pantalla en functions.php

5 jun 2017, 11:38:47

Vistas: 14.5K

Votos: 1

Estoy buscando una manera de añadir A antes del menú si estamos en escritorio y añadir B si estamos en un dispositivo móvil.

Así, estas son mis funciones para A y B:

add_action( 'wp_head', 'A_function' );
function A_function() {
    //añadir A
}
add_filter( 'wp_nav_menu_items', 'B_function', 10, 2 );
function B_function() {
    //añadir B
}

Sé que necesito poner estos hooks en el archivo functions.php pero no sé cómo hacerlo, sé que podemos usar wp_is_mobile().

¿Cómo puedo lograr esto?

Yoona

45

mobile

Comentarios

no es posible hacer esto de manera confiable en el lado del servidor ya que no sabemos mucho sobre la pantalla del dispositivo. Esto también hace imposible el almacenamiento en caché, y falla cuando tienes dispositivos que cambian de tamaño, por ejemplo, ventanas del navegador, teléfonos plegables, modos de pantalla dividida, etc. Utiliza consultas de medios CSS en su lugar para mover elementos en el lado del cliente

Tom J Nowell

16 ene 2023 15:01:19

Todas las respuestas a la pregunta

Comentarios

muy mala idea, no es confiable, rompe el caché, no es adaptable y probablemente tiene más atributos negativos

Mark Kaplun

5 jun 2017 12:32:37

@MarkKaplun Bueno, no se me ocurre ningún otro método del lado del servidor para hacer esto, y no creo que podamos hacerlo mediante AJAX ya que los filtros ya se aplican después de cargar la página? Hay que elegir entre lo peor y lo pésimo ( Aquí no aplica "malo" )

Johansson

5 jun 2017 12:36:36

El código PHP de WP se ejecuta en el servidor — no es y no puede ser consciente de la pantalla del dispositivo del cliente.

wp_is_mobile() depende del análisis del agente de usuario, es decir, intenta coincidir con los datos que proporciona el navegador del cliente. Esta técnica se considera notoriamente poco fiable y de utilidad muy limitada.

Como no proporcionas contexto sobre qué propósito cumplen tus enlaces, es difícil aconsejar un enfoque adecuado. Las técnicas del lado del cliente, como las consultas de medios CSS, se utilizan comúnmente para una detección fiable del contexto en el navegador del cliente.

Rarst

100K

5 jun 2017 12:13:46

wp_is_mobile() nunca debería usarse. En este momento, su existencia está principalmente relacionada con algunos errores del navegador que necesitan manejarse en el lado del administrador.

Para cualquier cosa que necesite ser consciente del tamaño físico del dispositivo o del tamaño de la ventana del navegador, debería hacerse con reglas de medios en CSS y JavaScript.

Mark Kaplun

23.7K

5 jun 2017 12:38:13

Comentarios

Creo que el problema es que el OP está intentando agregar contenido HTML dependiendo del agente de usuario, lo que haría obsoleto el CSS. Solo se me ocurre volcar todo el código en un archivo JavaScript y manejar el problema allí.

Johansson

5 jun 2017 12:42:49

La forma correcta de hacerlo es simplemente agregarlo siempre y deshabilitar su visualización cuando no sea necesario. Realmente no hay otra manera... al menos no si quieres que sea responsivo.

Mark Kaplun

5 jun 2017 13:11:01

Johansson 15.4K · Accepted Answer · 2017-06-05T12:11:26Z

Según el codex, wp_is_mobile(); es una función booleana que devuelve verdadero si el usuario está visitando el sitio web desde un dispositivo móvil, por lo que lo que necesitas es:

if ( wp_is_mobile() ) {
    // Ejecutar esto solo para visitantes móviles
    add_filter( 'wp_nav_menu_items', 'B_function', 10, 2 ); function B_function(/* añadir B */ );
} else {
    // Si no estamos en móvil, entonces ejecutar este filtro
    add_action( 'wp_head', 'A_function' ); function A_function(/* añadir A */);
}

Johansson

15.4K

5 jun 2017 12:11:26