Share
Hoy, veremos cómo configurar mediante gestos para navegar a través de sus publicaciones de WordPress. Es muy simple, así que vamos a bucear!
A medida que avanzamos en el diseño de sitios web receptivos y aumenta el número de usuarios que visitan sitios web desde dispositivos móviles, es bueno que podamos hacer que nuestro sitio web funcione con tecnologías sorprendentes como los gestos. Vamos a utilizar una biblioteca jQuery para lograr esto junto con algunos buenos ejemplos de PHP y WordPress..
La demostración es un tema reducido que se ha creado solo para los fines de este tutorial..
Así que abre tu editor de texto favorito y comencemos!
Utilizaremos un excelente complemento de jQuery para crear nuestro gesto de navegación llamado Hammer.js. Nos proporcionan todas las funciones para usar diferentes tipos de gestos dentro de nuestros sitios web.
Comencemos por obtener todos los archivos necesarios que necesitamos para que los gestos funcionen. Puede descargar los archivos localmente a su máquina o usar su versión en línea.
Necesitamos poner en cola los siguientes scripts:
Encolaremos estos scripts dentro de nuestro "funciones.php" expediente. Mi método preferido es crear primero una función para registrar y poner en cola cada script dentro de esta función. Esto se vería algo como esto:
Accentsconagua
function vsgt_enqueue_scripts () // Registrar Hammer.js desde el enlace externo wp_register_script ('hammer', 'http://eightmedia.github.com/hammer.js/hammer.js'); // Registre jQuery Hammer desde un enlace externo // Establezca jQuery y Hammer como dependencias para que solo podamos encolar esto y obtengamos todos wp_register_script ('jquery_hammer', 'http://eightmedia.github.com/hammer.js/jquery. hammer.js ', array (' jquery ',' hammer ')); // Poner en cola nuestros scripts wp_enqueue_script ('jquery_hammer'); add_action ('wp_enqueue_scripts', 'vsgt_enqueue_scripts'); Luego, debemos crear un archivo JavaScript en blanco que luego usaremos para escribir el script de gestos. Cree un archivo, y regístrese y ponga en cola en la misma función que usamos para registrar y poner en cola todas las demás bibliotecas y secuencias de comandos:
// Registre nuestro script JS personalizado wp_register_script ('custom_js', get_template_directory_uri (). '/Js/jquery.custom.js', array ('jquery_hammer'), '1.0', true); wp_enqueue_script ('custom_js'); Si no está seguro con los scripts de puesta en cola, siga este tutorial: Cómo incluir JavaScript y CSS en sus temas y complementos de WordPress
Ahora que nuestros scripts están en su lugar, debemos asegurarnos de que podemos navegar hacia adelante y hacia atrás al leer una sola publicación de blog. Hacemos esto insertando el siguiente código en nuestro WordPress Loop dentro de nuestro "single.php" expediente:
Envolvemos nuestra navegación dentro de un div para una mejor administración y flexibilidad de estilo, y luego use un lapso para envolver alrededor de nuestros enlaces siguientes y anteriores generados por WordPress. Lo envolvemos con clases de intervalo, de modo que podamos apuntar a los enlaces directamente que necesitaremos usar más adelante. Puede leer más sobre las funciones siguientes y anteriores en el Códice de WordPress.
Finalmente, tenemos que ir a nuestra apertura. Etiqueta y aplica una clase a ella. Agregaré una clase de "gesto" al body_class () función: >. Aplicamos una clase a la etiqueta del cuerpo porque más adelante la usaremos en nuestro archivo JavaScript, donde actuará como nuestro contenedor para verificar si el usuario ha deslizado el dedo para navegar..
Ahora que nuestra navegación está configurada, debería permitirle navegar hacia adelante y hacia atrás al leer una única publicación de blog. Luego tenemos que escribir nuestro JavaScript para hacer la navegación con gestos. Comencemos abriendo nuestro archivo JavaScript en blanco que creamos anteriormente y creamos una función. Su documento debe verse algo como esto:
jQuery (document) .ready (function ($) function runGesture () // Nuestro código entrará aquí);
A continuación vamos a crear algunas variables. Inserte el siguiente código dentro de nuestro runGesture función:
// Establecer nuestra variable contenedor de gestos var gestoContainer; // Establecer nuestra variable para ser 'martillado' var hammeredGesture;
Después de esto, vamos a asignar las variables a sus tareas apropiadas. Estaremos usando gestor de contenedores para asignar la clase en la etiqueta del cuerpo, y luego inicializaremos el complemento Hammer.js en nuestra martilladoGesture variable. Inserte el siguiente código en nuestro runGesture Funciona y nuestro código debería verse así:
// Asigne nuestro contenedor a la ID GestContainer = $ ('body.gesture'); // Hammer our Gesture hammeredGesture = $ (gestureContainer) .hammer (); Ahora que hemos establecido nuestros fundamentos, podemos continuar y vincular nuestro evento de gesto a nuestro contenedor que se ha inicializado con el complemento Hammer.js. Hacemos esto ejecutando el enlazar funcionar en nuestro martilladoGesture Variable y pase el gesto del evento; Específicamente vamos a utilizar el evento "arrastrar". Luego, abra una función donde escribiremos todo el manejo del evento gestual. Inserte el siguiente código en nuestro runGesture función:
// Enlace nuestro Hammer al evento que queremos ejecutar hammeredGesture.bind ("arrastrar", función (evnt) // Aquí manejaremos el código para el evento de arrastre); Ahora nos encargaremos de la parte de navegación. Dentro de nuestro enlazar función, creamos una variable llamada url. Esto será usado para obtener el href Valor de los enlaces siguientes y anteriores. También probaremos si estamos arrastrando hacia la izquierda o hacia la derecha, dependiendo de la dirección que estemos arrastrando pasaremos el href valor para el url variable. Finalmente comprobaremos si hay un valor para el url, y si la hay, redirigiremos la ventana al valor de url. El siguiente código debería mostrar esto:
// Configurar una variable de URL y establecerla en false var url = false; / * Probar si la dirección que estamos deslizando es correcta si es VERDADERO luego obtener el intervalo con la clase 'nav-next' y pasar el enlace href a la URL * / if (evnt.direction == 'right') url = jQuery ( '.nav-next a'). attr ('href'); / * Igual que la tecla derecha pero cambie el valor de la URL para obtener el enlace anterior * / if (evnt.direction == 'left') url = jQuery ('. Nav-previous a'). Attr (' href '); / * Si la URL tiene un valor, cambie la ventana y pase la ubicación de la URL a ella * / if (url) window.location = url; Eso es todo nuestro script de gestos hecho y completo junto con la navegación. Solo necesitamos hacer una detección del navegador para asegurarnos de que la secuencia de comandos solo se ejecuta cuando estamos en un dispositivo móvil.
WordPress nos permite detectar qué página está viendo el cliente usando el body_class lo cual es excelente para el estilo y la compatibilidad entre navegadores, pero vamos a ampliar esto un poco y agregarle detección de navegador. Gracias a Nathan Rice, que ya ha escrito lo que estamos buscando. Asegúrese de que está aplicando el body_class a su etiqueta de cuerpo como lo hicimos arriba y luego abrir nuestro funciones.php e inserte el siguiente código:
función browser_body_class ($ classes) global $ is_lynx, $ is_gecko, $ is_IE, $ is_opera, $ is_NS4, $ is_safari, $ is_chrome, $ is_iphone; if ($ is_lynx) $ classes [] = 'lynx'; elseif ($ is_gecko) $ classes [] = 'gecko'; elseif ($ is_opera) $ classes [] = 'opera'; elseif ($ is_NS4) $ classes [] = 'ns4'; elseif ($ is_safari) $ classes [] = 'safari'; elseif ($ is_chrome) $ classes [] = 'chrome'; elseif ($ is_IE) $ classes [] = 'ie'; else $ classes [] = 'unknown'; if ($ is_iphone) $ classes [] = 'iphone'; devuelve $ clases; add_filter ('body_class', 'browser_body_class'); ¡Genial! Ahora que tenemos la detección del navegador en su lugar, junto con todo el script de gestos completo y nuestra navegación completamente terminada. Volvamos y abramos nuestro custom.jquery.js e inserte el siguiente código fuera de nuestro runGesture función:
// Solo ejecuta los gestos en un iPhone o dispositivo móvil si ($ ('. Gesto'). HasClass ('iphone')) runGesture (); El código que acabamos de insertar hace una prueba final para verificar si estamos en un dispositivo móvil y si luego ejecutamos el script de gestos, de lo contrario no haremos nada..
¡Eso es! Simple verdad? ¡Puede deslizar el dedo hacia la izquierda y hacia la derecha en sus dispositivos móviles a través de publicaciones y su sitio de WordPress se ejecutará perfectamente en los escritorios! Diviértete jugando con los diferentes eventos..
Me gustaría dar las gracias por pasar el tiempo leyendo mi tutorial, espero que haya sido de ayuda. Por favor, siéntase libre de dejar comentarios y haré todo lo posible para ayudarles y responderlos. Si no es así, siempre puede contactarme directamente a través de mi sitio web: www.VinnySingh.co
