JavaScript para WordPress Developers: nociones introductorias con JQuey

JQuey es una biblioteca de JavaScript popular con un código abierto, que le permite hacer sitios web interactivos y crear animaciones. Ha sido diseñado para simplificar los scripts HTML a nivel de cliente y se usa ampliamente, con el 65% de los primeros 10 millones de sitios con el tráfico web más alto. Esta es la tercera publicación de nuestra serie de cinco partes que se centra en JavaScript para los desarrolladores de WordPress. A lo largo de esta serie, aprenderá los elementos básicos, pero supongo que ya tiene conocimiento práctico sobre HTML y CSS. Si necesita ayuda con estos bloques, eche un vistazo a nuestra serie de desarrollo de WordPress.
En los dos tutoriales anteriores, observamos los elementos básicos de JavaScript, incluidos sintaxis, variables y funciones, así como objetos JavaScript . Estos tutoriales deberían haberlo preparado para usar JQuey, que usaremos para agregar características extraordinarias a nuestro sitio de WordPress. ¿Te has perdido un tutorial en nuestra serie JavaScript para desarrolladores de WordPress? Puede mantenerse al día con las cinco publicaciones aquí:
JavaScript para desarrolladores de WordPress: aprendiendo los elementos básicos
JavaScript para desarrolladores de WordPress: nociones introductorias con objetos
JavaScript para WordPress Developers: nociones introductorias con JQuey
JavaScript para desarrolladores de WordPress: JavaScript se carga en WordPress
JavaScript para desarrolladores de WordPress: usando AJAX
Nociones básicas antes de comenzar, asegurémonos de que todos comencemos desde el mismo lugar. El único requisito previo para este tutorial es el acceso a un sitio web de WordPress con la posibilidad de editar archivos. No recomiendo experimentar en un sitio en vivo, así que utilice una instalación de prueba o una copia local. Tenemos algunos artículos para ayudarlo a establecer una instalación de WordPress a nivel local, esto hará que las pruebas mucho más rápido, porque no confiará en su conexión a Internet. Si es un usuario de Windows, eche un vistazo a cómo instalar XAMPP y WordPress local en PC/Windows. Si está en Linux u OSX, vaya a nuestros artículos sobre cómo desarrollar WordPress local con el elemento MAMP. Personalmente prefiero un vagabundo, que se puede usar en cualquiera de los sistemas, pero cualquiera de ellos será bueno para nuestros propósitos aquí. Creación de un tema infantil para usar el tema predeterminado de WordPress, veinte dieciséis, para las pruebas. Cambiar el código de un tema existente es una mala práctica, por lo que crearemos un tema secundario. Los temas secundarios heredan todas sus funcionalidades de los temas principales, excepto en los casos especificados. Cree un nuevo director en la carpeta con temas llamados jQuery-test-theme. Cree tres archivos en: style.css, scrips.js y functions.php. Agregue lo siguiente a la hoja de estilo y guárdelo:
Se carga la idea 36D467F72129E4C6177CE13D8F61C032.
Agregue lo siguiente a Functions.php y guárdelo:
Se carga la idea 36D467F72129E4C6177CE13D8F61C032.
No se preocupe si no entiende lo que está sucediendo aquí, solo estamos instalando el entorno de prueba, enfocarnos en el futuro código JavaScript por el momento. Una vez que haya ingresado ese código, debe ver el tema del niño en la sección de aspecto. El tema de nuestro niño en la sección de aspecto.
Jquey WordPress WordPress le cobra a JQuey por usted, pero si no trabaja en WordPress, deberá incluirlo usted mismo antes de cualquier código de jquey que escriba. Vaya al sitio web de JQuey para obtener una copia. JQuey Jquey Bases es un marco de JavaScript utilizado principalmente para cruzar y manipular DOM (encontrar cosas en la página y modificarlas), administrar eventos (cambiar lo que hace el elemento, pasar con el mouse, etc.) y Ajax (carga de datos asíncronos) .

En este tutorial, nos centraremos en los dos primeros. Comencemos con el cruce y la manipulación. Nota: Por lo general, jQuery le permite usar la función $. Para asegurarse de que no aparezcan conflictos, WordPress usa el modo seguro, lo que significa que debe usar JQuey en lugar del signo de dólar. Hay formas de evitar esto que discutiremos más tarde encontrar los selectores jQuery que agregan un selector a un jQuery () se hará cargo de todas las instancias de ese elemento. Podemos usarlo para tomar el encabezado de la cabeza y recolorarlo. Escriba el siguiente código en su archivo scripts.js.
Se carga la idea 36D467F72129E4C6177CE13D8F61C032.
Esto debería dar lugar a algo similar a la pantalla bastante fea a continuación.
Elemento modificado con jQuey
Si usa un selector que coincida con varios elementos, todos serán tomados por JQuey, por lo que puede cambiarlos todos desde un solo movimiento. Cargue la idea 36D467F72129E4C6177CE13D8F61C032

Títulos de widgets modificados
Se puede usar una serie de selectores para ajustar finamente los elementos que desea seleccionar. Por ejemplo, puede usar: eq () para seleccionar un elemento con el índice dado en una sección. Hagamos solo el título del primer widget en rojo.
Se carga la idea 36D467F72129E4C6177CE13D8F61C032.

El selector: gt () selecciona elementos con un índice más grande que el dado. Recolemos todos los títulos de widgets después del tercero:
Se carga la idea 36D467F72129E4C6177CE13D8F61C032.
Las indicaciones siempre comienzan en 0, por lo que 2 es en realidad el tercer elemento. Debido a que recoloramos todo después del tercer elemento, el primer elemento que se recoloró será el cuarto. El selector: no () elimina un elemento de una selección. Podemos usarlo para recordar todos los títulos, excepto los widgets de categoría.
Se carga la idea 36D467F72129E4C6177CE13D8F61C032.
Usando el selector no
Eche un vistazo a la lista completa de selectores en la página de documentación de JQuey.
Crossing Dom JQuery ofrece muchas funciones que le permiten cruzar DOM. Comience desde un nudo DOM seleccionado y luego use las características de cruce para llegar al destino final. Usemos algunas de estas funciones para recuperar los títulos de widgets utilizando un método diferente.

Se carga la idea 36D467F72129E4C6177CE13D8F61C032.
Inicialmente, seleccionamos a un lado, que es el contenedor de barra lateral. Luego usamos la función de niños () para hacerse cargo de todos los niños directos del nodo. En nuestro caso, estos son elementos de sección que contienen widgets. Finalmente, usamos Find () para encontrar elementos con el selector dado, H2, y los recoloramos. ¡Atención a la forma en que elija! Debido a que H2 todos los elementos H2 en widget, podemos recolorar los títulos contenidos en el interior, no el título del widget. La función HAS () puede verificar la existencia de un selector dentro de un elemento. Podríamos usarlo para recordar el fondo del widget que tiene un título de widget. Esto excluiría el widget de búsqueda, que no tiene título.
Se carga la idea 36D467F72129E4C6177CE13D8F61C032.
Hay una serie de funciones de cruce útiles que puede usar para identificar exactamente los elementos. Cambiar contenido también puede eliminar, agregar o modificar el contenido de la página utilizando algunas funciones de JQuey. La forma más elemental de agregar contenido es seleccionar y usar html () o text () para inyectar contenido.
Se carga la idea 36D467F72129E4C6177CE13D8F61C032.

Html () trata la cadena que ingresa como html, las etiquetas se convertirán en los elementos apropiados. El texto trata la cadena como un texto, las etiquetas no se convertirán, sino que se mostrarán como están. Las funciones append () y Quail () pueden agregar contenido antes y después del contenido contenido en el elemento seleccionado.
Se carga la idea 36D467F72129E4C6177CE13D8F61C032.
Agregar texto a la descripción del sitio
Cambiar las propiedades y los elementos de estilo que ya ha visto un poco de estilo: utilicé la función CSS () en la mayoría de los ejemplos de código anteriores. La función toma un objeto que puede usar para aplicar más propiedades y valores de CSS. Aquí hay un ejemplo que cambia los títulos de las publicaciones: la idea 36D467F72129E4C6177CE13D8F61C032 está cargada
Estilización con jQuery
Tenga en cuenta que las propiedades CSS con guiones se convierten en letras mayúsculas, por lo que debe usar MarginBottom, Borderradius, etc. La carcasa de camello es bastante popular en JavaScript, por lo que debe comenzar a acostumbrarse ahora. No importa lo bueno que parezca, no es realmente el trabajo de Jquey hacer que las cosas se vean bien, esto está en el campo CSS. Si realmente necesita agregar estilos con JQuey, le recomiendo que cambie los nombres de las clases y use la hoja de estilo para implementar estilos.

Se carga la idea 36D467F72129E4C6177CE13D8F61C032.
La función addClass () agrega la clase dada, para que podamos agregar los estilos a nuestra hoja de estilo. Puede usar RemoveClass () para eliminar una clase o togglecass () para cambiarla. Para cambiar los atributos HTML, necesitará la función ATT (). Si se usa con un parámetro, reciba el atributo, si usa con dos, establezca el atributo dado al valor dado.
Se carga la idea 36D467F72129E4C6177CE13D8F61C032.

La primera línea devuelve la ID del elemento dado. La segunda línea cambia la ID con la que se da. Con el JavaScript que ahora se está volviendo más generalizado, los atributos de datos se han generalizado. Se utilizan para agregar nuestros datos personalizados a los elementos HTML. Si me gustaría eliminar una publicación usando jQuey, necesitaría una forma de leer la identificación del elemento HTML. Actualmente, esto es posible, pero debo mirar la ID, eliminar la cadena “post-” y usar el resto como una ID numérica. La información como esta a menudo se almacena en un atributo de datos, se ve así:
. Puede usar attr (‘data-iid’) para hacerse cargo de este valor, pero jQuery tiene un atajo: la función data (). Funciona de la misma manera que attr (). Si le da un parámetro como ID, recibirá el valor de Data-ID. Los eventos en jQuery eventos le permiten responder a ciertas acciones del usuario. Puede crear un menú desplegable que se abre al pasar con el mouse, puede implementar una ventana emergente cuando el usuario llega a la parte inferior de la pantalla, etc. W3Schools tiene una lista de eventos jQuery comúnmente utilizados. Echaremos un vistazo a cómo implementar uno aquí. La idea 36D467F72129E4C6177CE13D8F61C032 está cargada.
El resultado de esta función es un huevo de Pascua en su sitio. Si el usuario se duplica en el cabezal de masthead, el texto de la descripción del sitio cambiará. Hay algunas formas de adjuntar eventos a los elementos. Prefiero este método, porque funcionará incluso si el elemento se agrega después de cargar la página; este será un problema cuando miremos AJAX en el próximo artículo. La función ON () toma tres argumentos. El primero es el evento a escuchar, el segundo es el elemento al que lo adjunta, el tercero es una función anónima que realiza una cierta acción. Cambiar widgets con jQuery para usar lo que hemos aprendido a crear una función de conmutador de widget simple sin alcanzar ningún código de los archivos del tema. Agregaremos un elemento al widget que cambiará el contenido del widget al clic. ¡Solo necesitamos cuatro líneas de código! Cargue la idea 36D467F72129E4C6177CE13D8F61C032
La primera línea agrega un elemento SPAN con Widget de toggle de cada clase de widget. Este artículo está adjunto un evento, haga clic. Dentro de la función anónima usamos jQuery (esto) que se refiere al elemento real en el que se ha hecho clic. Esto es diferente para cada widget, porque cada intervalo de conmutación es un elemento separado. Encontramos al padre del elemento viajando DOM y luego encontramos todos los elementos del widget que no son el botón de título o conmutador y usamos la función Toggle () para cambiarlos. ¡Eso es todo!
Cambiando widgets usando jquey
¡Práctica práctica práctica!En este punto, sabes muchas cosas sobre JQuey.Puede crear funcionalidades, lo que llevaría al usuario al artículo al hacer clic en cualquier parte del extracto, puede crear máscaras seleccionables para su sitio y más.Te recomiendo que practiques tanto como sea posible.En el próximo tutorial, echaremos un vistazo a cómo podemos usar los complementos JQuey y Jquey en WordPress. ¿Fue útil este tutorial?¿Por qué quieres aprender JavaScript en el desarrollo de WordPress?¿De qué quieres saber más?Háganos saber en los comentarios a continuación.
Etiquetas:
desarrollo
Javascript
JQuery