En WordCamp Us en diciembre, el cofundador WordPress Matt Mullenweg usó su discurso sobre el estado de la palabra para instarnos a “aprender JavaScript”. Pero, ¿qué significa esto y qué saben los desarrolladores de WordPress sobre JavaScript? JavaScript es un lenguaje frontal consagrado y de crecimiento constante, que se ha utilizado tradicionalmente para crear animaciones y efectos en las páginas web. Hay posibilidades de que si tiene un complemento en su sitio web para un control deslizante, enlaces de redes sociales o un menú de navegación receptivo, utiliza JavaScript para crear los efectos.
Si es un desarrollador de WordPress ordinario para trabajar con PHP, es posible que nunca haya tocado una línea de JavaScript y se sienta algo intimidado por la posibilidad de explorar esto. Pero la buena noticia es que PHP y JavaScript tienen sus similitudes. Funcionan de diferentes maneras y contextos, pero el código que escribe no siempre es muy diferente. En esta publicación, enfatizaré algunos de los conceptos clave de JavaScript que los desarrolladores de WordPress necesitan entender para comenzar a trabajar con él. Cubriré:
Javascript y WordPress: cómo interactúan, similitudes y diferencias
Uso de JavaScript en su tarea y complementos: la forma más fácil de comenzar a aprender JavaScript
Interacción con WP-Rest API-A Presentación general.
Pero comencemos con una rápida introducción a JavaScript y por qué se vuelve tan popular.
¿Qué es JavaScript de todos modos? JavaScript es un lenguaje de programación frontal (también llamado al cliente), lo que significa que se comunica con el navegador web de un usuario al visitar su sitio. Esta es la principal diferencia entre JavaScript y PHP, que es un lenguaje de fondo (o en el lado del servidor), lo que significa que se comunica con el servidor. Esto significa que los sitios basados ​​en JavaScript tienen el potencial de ejecutarse mucho más rápido y ser más receptivo: si su sitio usa PHP para responder algo que hacen sus usuarios, se enviará una solicitud al servidor para procesar ese cambio y luego la página se actualizará con el cambio activado.
Si usa JavaScript, el navegador procesa los cambios, lo que significa que una solicitud no debe comunicarse con el servidor y la página no se actualiza.
Puede imaginar las ventajas que esto puede traer: eliminar todas estas solicitudes de servidor puede hacer que su sitio se ejecute mucho más rápido y brindarle la flexibilidad para crear aplicaciones basadas en la web que funcionen mucho como programas de escritorio.
De hecho, como usuario de WordPress, ya usa uno de ellos porque el software de WordPress usa JavaScript para alimentar las pantallas de administración de back -end. Si alguna vez ha dibujado elementos en los menús, ha creado widgets o ha utilizado el personalizador, entonces se ha beneficiado de JavaScript que alimenta al administrador de WordPress.
Pero eso no significa que usar JavaScript siempre sea mejor que PHP. A veces es posible que desee que el servidor actualice la página, por ejemplo, si desea generar nuevas páginas y URL para fines de SEO (aunque hay una manera de evitar esto en JavaScript). La otra desventaja potencial de usar JavaScript es que lo hará. No funcione si sus usuarios no tienen JavaScript activado en el navegador. Los navegadores modernos (tanto de escritorio y móvil) funcionan perfectamente con JavaScript, pero si su usuario tiene un navegador o JavaScript más antiguo no funciona bien con su versión de Explorer o usa herramientas de accesibilidad que requieren JavaScript. Desactivado, entonces nada de JavaScript funcionará. Por lo tanto, es una buena idea tener una reserva en el lado del servidor, para cualquier eventualidad. Finalmente, es importante tener en cuenta que la marca generada usando JavaScript después de que se haya cargado la página no siempre será accedido con los motores de búsqueda. Entonces, si algo es esencial para la clasificación de sus motores de búsqueda, agréguelo usando un idioma en el lado del servidor o use un método JavaScript que los motores de búsqueda puedan leer.
JavaScript y WordPress Como desarrollador de WordPress, no tiene que saber todo sobre JavaScript, solo necesita saber qué es relevante cuando se trabaja con WordPress. Así que echemos un vistazo a los usos de JavaScript con WordPress y cómo interactúan los dos entre sí. 1. JavaScript ya es parte del JavaScript WordPress ya viene con WordPress, en forma de numerosas bibliotecas de JavaScript, como JQuey, JSON, Backbone.js y Underscore.js. Se puede desanimar a ver esta lista y preguntarme por dónde empezar, por lo que recomendaría centrarse primero en JQuey. JQuey es una vasta biblioteca que hace que la programación con JavaScript sea más fácil y más confiable (mejora para el soporte del navegador, por ejemplo), y si agrega animaciones o efectos en su sitio por tema o complemento, entonces Jquey es probablemente la herramienta que la tiene. . Lo haré. Una vez que tenga algo de experiencia con JavaScript usando JQuey, sabrá cómo funcionan las Escrituras y estará listo para moverse en JSON para interactuar con la API WP-Rest. Más sobre esto más adelante en esta publicación. 2. JavaScript está en muchos complementos y temas que probablemente tenga complementos instalados en su sitio que usa JavaScript para crear efectos y animaciones o puede administrar datos o insertar contenido dinámico. También hay muchos temas, ya sea estimulando los efectos en el front-end o haciendo la interacción con el tema más dinámico en las pantallas de administración.
3. JavaScript Feeds El administrador de WordPress JavaScript se ha vuelto cada vez más fundamental para el administrador de WordPress en versiones recientes y es probable que se vuelva aún más importante en el futuro, especialmente con el lanzamiento de Calypso, una versión del administrador de WordPress basado en JavaScript. El personalizador utiliza JavaScript Todo lo que hace en las pantallas de administración, que resulta en cambios inmediatos, utilizará JavaScript, que incluya:
Creación y edición de menús
Creación y edición de widgets
Actualización de complementos y temas

El uso del personalizador.
El PHP comienza solo cuando hace clic en los botones de publicación, actualización o rescate, rescate permanente en la base de datos y la pantalla de administración se actualiza, por lo que es tan importante hacer clic en esos botones.
4. JavaScript y WP-Rest API En el último año, JavaScript ha pasado de ser un papel de apoyo a uno más cercano a WordPress, y esto se debe al resto de la API de WordPress. No entraré en grandes cantidades de detalles aquí sobre cuál es la API, porque ya lo he hecho, pero este es un ejemplo de cómo WordPress interactúa con JavaScript. La API en sí está escrita en PHP, porque tiene que usar un idioma en el lado del servidor para interactuar con la base de datos. Pero la diferencia es que puede interactuar con él usando JavaScript, especialmente usando objetos JSON.
Le daré una visión general de cómo hacer esto más adelante en esta publicación, pero primero echaré un vistazo al lugar donde la mayoría de las personas comienzan cuando se trata del uso de JavaScript con WordPress: agregarlo a complementos y temas. Uso de JavaScript en sus complementos y temas Si agrega efectos de JavaScript, la forma de hacerlo es en sus complementos y temas. Si usa el resto, puede hacerlo en un complemento o un tema o mediante una aplicación externa (usando JavaScript) . En mi opinión, vale la pena comenzar usando jQuery para agregar una interacción o dos, ya que esto lo ayudará a familiarizarse con el uso de JavaScript. Pero si desea ir directamente al uso de la API REST, ¡continúe! Echemos un vistazo a cómo inserta scripts en sus temas y complementos y cómo llamar a bibliotecas externas. 1. Agregar scripts a complementos y temas: la forma correcta si escuchó el consejo de Matt y pasó vacaciones de Navidad aprendiendo todo sobre JavaScript, probablemente haya encontrado instrucciones sobre cómo llamar a los scripts de sus páginas. Estático, esta es la forma correcta de hacer esto. ¡Pero pare! En WordPress, no debe llamar a los scripts en la sección , sin importar cuán tentado esté para agregarlos al archivo de encabezado.php o conectarlo a wp_head en sus complementos. Hay una forma correcta de agregar scripts a WordPress, que se llama encarcelamiento. Poner la cola del guión es mejor por dos razones principales:
Evite agregar un script varias veces, porque WordPress no cargará el mismo script dos veces si está en línea dos veces. Es adicto y el orden de agregar los scripts para usted: así que si un script (por ejemplo, uno que escribió usando jquey) necesita Otra carga (por ejemplo, jquey), entonces lo hará en el orden correcto.
Tenga en cuenta que JQuery (entre otros) ya está en la cola, por lo que no tiene que ponerlo en la cola, simplemente coloque sus propios guiones y configure JQuey como adicción.
Descubra cómo cargar correctamente los scripts en WordPress con nuestra guía para colocar los scripts en wp_enqueue_script (), use la función wp_enqueue_script (), colocándola en su propia función que luego se conecta a los wp_enquee_scripts. Si desea cargar un script en las pantallas de administración, use la función wp_enqueue_scripts () de la misma manera, pero conecte la función al gancho admin_enqueue_styles.
Entonces, para cargar un script en su tema, usaría este código:
Cargue el esencial B215307BACB005482FFA
Agrega un script llamado My-Inncript.js, que se almacena en el filtro de script en su tema. Siempre agrego scripts a una carpeta separada, porque contiene cosas organizadas y es particularmente útil si tiene que agregar más de un script. Este script depende de la jQuery y se cargará en cada página. A veces es posible que no desee registrar su script en cada página, en cuyo caso usa dos funciones separadas: wp_register_cript y wp_enquee_cript (). Para obtener detalles completos, consulte el tutorial de Daniel Pataki sobre poner los guiones en la cola. 2. JavaScript: Algunos conceptos familiares JavaScript y PHP tienen un legado común: ambos provienen del lenguaje de programación C. Esto significa que hay algunos conceptos de JavaScript que serán familiares si tiene experiencia laboral de PHP. La noticia no es exactamente buena es que hay otros conceptos que serán completamente nuevos para usted y otros que son similares a PHP, pero ligeramente diferentes (es decir, tendrá que tener cuidado de no escribir JavaScript como si PHP: un poco como aprender italiano ¡Fue para mí después de haber aprendido el español!)
Comentarios. Use exactamente la misma sintaxis para comentar el texto en JavaScript y PHP. Ciertamente, una ventaja para alguien como yo que continúa tratando de usar comentarios de estilo PHP en archivos CSS.
Sintaxis. JavaScript y PHP tienen una sintaxis similar, tanto usando una coma y coma al final de una línea. JavaScript difiere en la forma en que usan los puntos antes de los métodos, pero usa soportes y citas de una manera que será familiar.

Variables. Puede definir variables en JavaScript de la misma manera que en PHP, con la principal diferencia de que agrega cal antes del nombre de la variable. También puede usar variables globales y locales en JavaScript y Php. Carácter, matrices, valores booleanos y valores numéricos. La forma en que funcionan y la sintaxis utilizada para cada una es muy similar en JavaScript y PHP. La principal diferencia es que en JavaScript use la sintaxis para designar la matriz, no la matriz de palabras.
Operadores. JavaScript utiliza los mismos operadores para la aritmética y las comparaciones (p. Ej. Y> =), con una diferencia: JavaScript tiene el modus operador ( %), que devuelve el resto de un número dividido a otro. Tanto JavaScript como PHP usan = para la asignación de valores y == para igual.
Funciones. Puede crear funciones en JavaScript, como puede en PHP. La sintaxis básica es la misma que en PHP.
Condiciones. Puede usar en el lugar donde, de lo contrario y de lo contrario, si, si más, si está en JavaScript de la misma manera que usarían si, de lo contrario y de lo contrario, en PHP.

Pero hay algunas formas en que JavaScript difiere de PHP y algunos conceptos nuevos. Estos son algunos de los más importantes:
Sintaxis. JavaScript se complace más cuando se trata de sintaxis. Entonces, si pierde una coma y una coma, su código continuará funcionando.
Métodos . Un método es algo que le sucede a un objeto. Es similar a una función PHP: al crear una función, entonces llámelo usando un método o puede llamar a un método Built -in. Puede reconocer un método después del paréntesis que sigue su nombre.
Objetos. Un objeto en JavaScript es algo en la página, como un elemento. Las variables también son un tipo de objeto. Los objetos PHP son muy diferentes y se usan junto con clases de PHP alquiladas por objetos. Las propiedades son los valores asociados con un objeto. Las propiedades también se usan en PHP (con clases), pero funciona de manera diferente.
Los métodos, objetos y propiedades son los conceptos básicos que usará al escribir JavaScript. Demostrarlos con un ejemplo:
Cargue el esencial B215307BACB005482FFA
En el código anterior creamos una variable (un objeto) llamado animal. Tiene una serie de propiedades, tipo y color, cada una de ellas con un valor. Luego uso el método document.write () para eliminar el valor de tipo en la página web. 3. Uso de JQuey para agregar efectos y animaciones La Biblioteca JQuey se agrega a lo que está disponible en JavaScript para brindarle una amplia gama de efectos que puede usar en sus tareas y complementos y viene con WordPress, por lo que es un gran lugar para comenzar. También es la forma más fácil de comenzar a trabajar con JavaScript: ¡un bono!
Cuando trabaje con jQuery, usará la sintaxis de JavaScript y puede continuar utilizando los mismos objetos, propiedades y métodos que ha utilizado en Vanilla JavaScript, pero puede usar los proporcionados por JQuey. JQUEY SELECTORS Un aspecto fuerte de jQuery es la forma en que le permite seleccionar elementos usando su CSS. Entonces, por ejemplo, seleccionaría un elemento con ID de banner como este:
Cargue el esencial B215307BACB005482FFA
Luego puede tomar ese selector y aplicar un método de la siguiente manera:
El esencial B215307BACB005482FFAACE se carga con la ID de banner y agrega una etiqueta

con contenido, utilizando el método append (). Los métodos jQuery jQuery en sí tienen una serie de métodos que puede usar para crear animaciones y efectos. Los ejemplos incluyen agregar contenido, cambio dinámico de CSS, ocultar e implementar elementos, hacer que los elementos se muevan y cambien el tamaño: para una lista completa, consulte el sitio web de JQuey. JQuey usa algunos conceptos simples que usará en su código:
Selectores: deberá seleccionar un elemento (o más elementos) en la página para que pueda hacer algo con ellos.
Filtros: puede filtrar su selección para que solo se seleccionen ciertos elementos (como números impares).
Eventos: JQuery puede reaccionar a ciertos eventos, como un clic o teclado del mouse. Puede combinarlos con selectores, por lo que algo sucede al hacer clic en un enlace en particular, por ejemplo.
Variables: Defina variables basadas en las selecciones, entradas o valores definidos por usted y luego maneje esas variables.
Efectos: una vez que haya seleccionado algo o haya activado un evento, puede aplicar un efecto al elemento seleccionado. Los efectos incluyen alivio y salida, deslizando los elementos hacia arriba y hacia abajo o cambiar entre ellos.
Animaciones: Uso de la propiedad animated (), puede animar cualquier propiedad CSS que acepte valores numéricos, por ejemplo, tamaño de texto, posición del elemento u opacidad.
JQuery (o, más correctamente, JavaScript) también usa funciones que puede definir, no diferentes de cómo hacerlo en PHP. Y si los métodos y efectos de JQuey no son suficientes para usted, entonces puede usar la Biblioteca JQuey UI, lo que le brinda acceso a aún más interacciones y efectos. 4. JavaScript y WP API descansan aquí las cosas se vuelven interesantes. La API WP-REST le permite hacer mucho más que agregar efectos usando JavaScript: le permite interactuar con la base de datos de su sitio. JSON (JavaScript Object Notation). JSON está diseñado para leer, escribir y editar datos utilizando JavaScript. Use conceptos de JavaScript que ya hemos introducido: objetos, matrices, cadenas y valores. Entonces, cada entrada de su base de datos es un objeto. Tiene una etiqueta (una cadena) y un valor. Su sitio también tendrá datos que consisten en matriz y matriz.
JSON puede manejar todo esto. Como en PHP, un valor puede ser una cadena, un número, una matriz (aquí están las matrices vestidas) o un valor booleano. También puede ser un objeto. Comprensión en detalle cómo usar JSON con la API REST supera el propósito de esta publicación, pero aquí hay una introducción al principio:
Instrumentos. Lo primero que necesita es un cliente HTTP que interactúe con la API. Lo más popular que he encontrado es Postman para Chrome. Luego trabaja en este cliente.
Descubrimiento. Antes de interactuar con su sitio, deberá verificar que el sitio tenga el resto en el resto. Hay varias formas de hacer esto, que puede encontrar en la documentación de API REST.
Acceso . Por razones de seguridad, deberá usar la autenticación. Puede hacer esto utilizando uno de los tres métodos: autenticación de cookies para temas y complementos que se ejecutan en el sitio; una autenticación con autenticación para aplicaciones externas; y autenticación básica para clientes externos durante el desarrollo (no recomendado para la producción, porque es menos seguro). Descubra cómo funciona esto en la API REST del sitio web. Haz esto usando el comando Get Get. Esto se hace cargo de todos los datos asociados con una publicación, pero no elimina nada. Entonces, por ejemplo, para obtener todas las publicaciones de un sitio, usaría:
O para obtener una sola publicación, con ID 100, usaría:
Edición y publicación de datos. Puede hacer más que tomar datos: Order Put le permite editar datos, y el comando POST le permite publicar nuevos datos. Piense en actualizar una publicación y publicar como si estuviera publicando una. Para empezar, recomiendo usar la API para tomar datos, si comete errores y pierde sus datos.
La salida y manejo de datos. Una vez que haya utilizado los datos Get TO TOMA, está disponible para salir y manejarlos. La API REST le ofrece una serie de funciones que puede usar para trabajar y filtrar objetos JSON: uno de los recursos más fáciles de usar que hemos encontrado y demostrado es el libro electrónico de Josh Pollock sobre la API WP-Rest.
Puede trabajar con sus datos en un complemento PHP o pasar por completo PHP y crear aplicaciones por cuenta propia utilizando JavaScript, que es el lugar donde las posibilidades realmente se abren. Le recomendaría que comience con una combinación de JavaScript y PHP utilizando los consejos en el libro de Josh o nuestra guía de API WP-REST, ya que la curva de aprendizaje es menos empinada. ¡JavaScript no debería dar miedo! La idea de dejar sus habilidades de PHP que apenas ganaron y aprender JavaScript pueden ser desalentador. Pero la buena noticia es que JavaScript tiene mucho en común con PHP; No solo comparte algunos conceptos, sintaxis y código común, sino que también utiliza una estructura y lógica que será completamente familiar para los desarrolladores de PHP. JavaScript se ha convertido en un tema candente en los círculos de WordPress debido a la API WP-Rest, pero tiene muchas otras aplicaciones en complementos y temas. Al aprender JavaScript y JQuery necesarios para agregar este tipo de funcionalidad, puede comenzar a desarrollar sus habilidades de JavaScript y luego cambiarlas con la API REST, tomar y manipular objetos JSON para crear aplicaciones flexibles y poderosas utilizando datos de WordPress. . ¿Aprendes JavaScript? ¿Empezó a trabajar con WP REST o Calypso API? Cuéntanos tu consejo para enseñar a JavaScript en los comentarios a continuación. Etiquetas: JavaScript