Con el rápido crecimiento de usuarios de teléfonos inteligentes, se ha vuelto cada vez más importante en el desarrollo web para garantizar que los visitantes que acceden a su sitio web a través de dispositivos de mano sean atendidos adecuadamente. Hay varias maneras en que estos visitantes pueden ser dirigidos, y en este tutorial exploraremos la creación de una función para detectar de forma nativa a los usuarios de iPhone en WordPress.
Asegúrate de pegar la función antes del cierre. etiqueta. Por defecto, los temas TwentyEleven y TwentyTen usan el
body_class ();
Función en el archivo header.php para agregar clases dinámicamente al estándar etiqueta.
Por ejemplo, si está viendo una sola página en WordPress, es un ejemplo de una clase de cuerpo para una página / publicación única, que le permitiría cambiar el estilo de ciertos elementos de su diseño dinámicamente utilizando CSS. Si tu tema no usa el
body_class ();
etiqueta (¡aunque realmente debería estar haciendo eso ya!), adelante e inclúyalo, así:
>
WordPress tiene una serie de variables globales que se pueden usar para la detección del navegador, incluida la $ is_iphone
variable. Usaremos esta variable junto con el sistema de clases de cuerpo en WordPress. Para hacer eso, primero debemos escribir una función:
Esta es nuestra función. En primer lugar, le damos a nuestra función un nombre de? Detect_iphone? Para que podamos descifrarlo de nuestras otras funciones. Entonces notará agregado? Global? para nuestro $ is_iphone
variable, esto se debe a que la variable está definida fuera de nuestra función. Luego le decimos a WordPress que si se cumple esta condición (si el usuario está navegando en el sitio desde un iPhone), debe agregar? a nuestra clase de cuerpo. Continúa y pega este fragmento de código sobre el cierre etiqueta en header.php
Esta función ahora nos permite apuntar específicamente a los usuarios de iPhone usando CSS, usando nuestro? Iphone? clase. Por ejemplo, podemos incluir lo siguiente en nuestra hoja de estilos para mostrar nuestros h1
etiqueta diferente para los usuarios de iPhone:
h1 font-size: 30px; línea de altura: 110%; texto-decoración: subrayado; .iphone h1 font-size: 35px; texto-decoración: ninguno; color: # FF0000;
Hay un número cada vez mayor de métodos para hacer que los sitios de WordPress sean amigables para nuestra audiencia móvil, y espero que esta sugerencia rápida le haya ayudado a comprender otro enfoque para abordar los sitios compatibles con dispositivos móviles..
Lo aliento a discutir sus propios métodos preferidos para hacer que sus sitios de WordPress sean compatibles con dispositivos móviles en los comentarios a continuación!