WordPress: Cómo detectar visitantes segun su navegador
A veces tenemos que brindar contenido específico o ajustarlo para determinados navegadores Web. Hay varias maneras de hacerlo. Por ejemplo, podemos utilizar JavaScript BrowserDetect.browser function. También podemos usar las siguientes etiquetas de comentario para orientar exclusivamente a Internet Explorer.
Modernizr es útil para la detección de características de los navegadores, por lo que somos capaces de arreglar las funcionalidades que no son compatibles. También podemos usar consulta de medios de CSS3 a pesar de que no está diseñado para recuperar información del navegador, es útil para hacer frente a la presentación sitio web en particular en los navegadores móviles.
PHP Detección del navegador
Sin embargo, todos estos métodos sólo están alterando el lado frontal, mientras que el contenido real en el marcado o codigo del documento no se verán afectados. Digamos, tenemos dos elementos <div> una para Internet Explorer y una para los demas. Estos dos elementos de hecho permanecen en el documento independientemente de los navegadores.
En algunos casos, estos métodos no pueden ser la solución ideal. Por lo tanto, la única opción viable sería la de utilizar el lenguaje de servidor, como PHP. Si está utilizando WordPress, hay una forma fácil de hacerlo con un plugin llamado PHP Browser Detection.
Funciones condicionales
Cuando este plugin se ha activado no aparece nada en el panel o Dashboard. En su lugar, le proporciona varias funciones condicionales para utilizar en sus archivos de temas – como page.php, index.php y otros. Tambien permite la detección de todos los navegadores populares de escritorio y dispositivos móviles – como el iPad y el iPhone.
Uso básico
Vamos a ver algunos ejemplos de uso. Digamos, queremos mostrar la notificación sólo para usuarios de Internet Explorer. Podemos escribir algo como esto dentro de los header.php bajo <body>.
[code lang=»php»]
<?php if ( is_IE() ) {
$browserInfo = php_browser_info();
$browser = $browserInfo[browser];
$version = $browserInfo[version];
echo ‘<div>You are using ‘.$browser.’ ‘.$version.’ . Please, update your browser for better experience.</div>’;
}; ?>
[/code]
Con unos pocos ajustes en la hoja de estilo css, los usuarios de Internet Explorer verán lo siguiente.
Sin embargo, cuando lo vemos en otros navegadores – Firefox, Opera, Safari y Chrome, la notificación de marcado no se genera.
Como se mencionó, también podemos dirigir esto para dispositivos móviles, lo cual es muy útil para optimizar su sitio de WordPress en la plataforma móvil. Suponiendo que se ha habilitado el soporte post thumbnail en el tema, podemos añadir la siguiente función a su index.php para soportar resoluciones inferiores de imagen en dispositivos móviles, y las resoluciones más altas para los navegadores de escritorio.
[code lang=»php»]
<?php if ( is_mobile() ) {
the_post_thumbnail( ‘small’ );
} else {
the_post_thumbnail( ‘large’ );
}; ?>
[/code]
Esos son sólo algunos ejemplos, ve a la página de WordPress.org para ver más de este plugin con detalle.