WordPress Javascript: una guía para principiantes

Si le pregunta a un millón de desarrolladores web qué es JavaScript, obtendrá un millón de respuestas diferentes. Prácticamente todo lo interactivo en la web se realiza mediante JavaScript.

Como sistema de gestión de contenido (CMS) moderno, WordPress y muchos de sus complementos dependen parcialmente de JavaScript para hacer el trabajo. Al contrario de lo que pueda parecer, JavaScript no tiene relación con el lenguaje de programación Java. Solo se llama así con fines de marketing.

Analicemos todo lo que necesita saber para aprovechar el poder combinado de JavaScript y WordPress.

¿Qué es JavaScript?

Hace mucho tiempo, Internet se basaba exclusivamente en HTML y CSS. Esta combinación permite un estilo de contenido muy básico. Sin embargo, se podía hacer muy poco para dinamizar el contenido y era imposible crear aplicaciones web.

Dado que los servidores eran mucho más costosos de mantener, los desarrolladores decidieron escribir JavaScript para operar en la máquina cliente. Escrito de manera similar a otros lenguajes de programación funcional, JavaScript puede tomar datos en funciones, procesarlos y generar datos.

Los navegadores web tienen un motor JavaScript que sabe cómo ejecutar código JavaScript. Por ejemplo, el motor JavaScript en Chrome es v8, mientras que el motor JavaScript FireFox es SpiderMonkey. Por esta razón, Javascript depende de los navegadores para "comprender" cómo interpretar, manejar y manipular la visualización de datos.

Los aspectos técnicos de JavaScript

¿Interesado en saber más sobre la tecnología detrás de JavaScript? Hay algunos diferenciadores importantes que deben conocer quienes tienen experiencia en otros tipos de desarrollo. Primero, JavaScript es independiente de los tipos como PHP. Eso significa que sus variables no tienen un tipo definido y cualquier variable dada se puede asignar a casi cualquier tipo de valor.

La mayoría de los lenguajes modernos están "orientados a objetos", lo que significa que se basan en "clases" reutilizables que representan un objeto literal. Lo más cerca que se acerca JavaScript a esto es a través de “prototipos”. Estas estructuras de datos se pueden reutilizar y pueden contener ciertos valores, pero su funcionalidad y usabilidad son mucho más limitadas que los lenguajes construidos alrededor del concepto orientado a objetos, como Java.

¿Qué hace JavaScript?

Debido al enorme apoyo de la comunidad y la inversión de grandes empresas como Facebook e incluso Netflix, JavaScript puede hacer mucho más que operar dentro de los navegadores web. JavaScript puede hacer algo tan simple como tomar el año actual para mostrarlo junto al símbolo de derechos de autor en un sitio web, y un trabajo más complejo, como realizar la mayor parte del procesamiento para un editor de imágenes en línea.

En pocas palabras, JavaScript hace casi todo lo que el desarrollador quiere que haga en la máquina del cliente. JavaScript se almacena en caché localmente en la máquina del cliente cuando el cliente visita un sitio que lo usa.

Si bien los datos confidenciales deben manejarse en el servidor, muchas aplicaciones basadas en web utilizan en gran medida JavaScript para aprovechar la potencia de procesamiento de la máquina cliente. Ahora que estamos en la era de los “marcos” interminables que hacen que el desarrollo de varios tipos de contenido sea mucho más rápido, las posibilidades son infinitas.

¿Es seguro JavaScript?

Como la mayoría de los protocolos y lenguajes más antiguos, JavaScript no se creó inicialmente teniendo en cuenta la seguridad. Esto es algo perfectamente razonable para preguntarse, dado lo frecuentes que se han vuelto los ciberataques.

Hay extensiones de navegador como "NoScript" que simplemente bloquean la ejecución de todo el código JavaScript. Siempre que siga la regla general de la web y no visite sitios que no sean de confianza, está bien permitir la ejecución de JavaScript.

Debido a que es un lenguaje de programación, por supuesto que los usuarios malintencionados pueden abusar de él para atacar su computadora. Los navegadores modernos detectarán automáticamente la mayoría de estos ataques. Si le preocupa la seguridad con JavaScript de WordPress, puede estar tranquilo con un complemento de seguridad de WordPress que pone la mayoría de los aspectos de la seguridad del sitio web en piloto automático.

Dos tipos principales de ataques de JavaScript

El adagio “mantén cerca a tus amigos ya tus enemigos más cerca” es pertinente cuando se trata de desarrollo y seguridad. ¡Es muy importante comprender cómo los malos se aprovechan de JavaScript para que pueda frustrar sus esfuerzos!

Secuencias de comandos entre sitios (XSS)

Cross-site scripting (XSS) es un tipo de ataque de malware que se ejecuta mediante la explotación de vulnerabilidades entre sitios en cualquier sitio de WordPress. De hecho, es la forma más común de piratear sitios de WordPress porque hay muchos complementos de WordPress que tienen vulnerabilidades XSS.

Se utiliza un ataque de secuencias de comandos entre sitios si una página permite que se envíen datos en ella. En este ataque, el usuario malintencionado coloca código JavaScript en los datos que se enviarán a una página accesible al público.

Si no se implementan medidas de mitigación, este código malicioso realmente ejecuta el código JavaScript en la computadora de cualquier persona que visite esa página. Por eso es importante "desinfectar" la entrada. Esto significa que, antes de que se publique, elimine elementos como corchetes y comillas que inutilizarían el código.

Falsificación de solicitud entre sitios (CSRF)

Este tipo de ataque aprovecha las páginas web en las que es posible que ya haya iniciado sesión. El escenario más común implicaría que inicie sesión en su banco.

Supongamos que ha iniciado sesión en su cuenta bancaria, pero luego decide ir a un sitio web de torrents que tiene CSRF listo para funcionar. CSRF, en ausencia de mitigaciones del navegador, adopta el patrón de enlace para hacer cosas como transferencias bancarias para cada banco importante y luego las ejecuta en su máquina en segundo plano.

Un escenario que sucedió en realidad con un sitio importante y un banco importante fue que el enlace del banco para transferir dinero se veía así: www.bankwithbadsecurity.com/transfer&amount=1000&toAccount=12345 para transferir $ 1,000 a una cuenta con el número 12345 .

Para el banco, parece que lo solicitó, y debido a que la solicitud provendría de su dirección IP, es difícil demostrar que no la inició. Afortunadamente, la mayoría de los navegadores modernos detectarán esto automáticamente y lo evitarán.

¿Puedo usar JavaScript dentro de WordPress?

Sí, puede usar JavaScript cuando esté desarrollando para WordPress. Tenga en cuenta que WordPress es un sistema de gestión de contenido flexible que tiene dos modos de edición. Uno de ellos le permite editar código directamente y el otro le permite usar un editor similar al que podría ver en un procesador de texto, también conocido como editor "WYSIWYG". En la versión más reciente de WordPress, el editor WYSIWYG se llama Gutenberg.

Tenga en cuenta que también puede utilizar JavaScript cuando desarrolle extensiones para WordPress. Mientras que el lado del servidor de WordPress es PHP, el lado del cliente es casi el 100% del tiempo JavaScript.

¿Debería aprender JavaScript para WordPress?

La respuesta a estas preguntas depende de lo que pretenda hacer con WordPress. Si solo desea que genere algunas páginas estáticas utilizando la plataforma, es probable que esté bien sin aprender JavaScript.

Por el lado positivo, es bastante fácil comenzar con JavaScript y también aprenderá mucho sobre cómo funcionan HTML y CSS. Sin embargo, además de la capacitación en WordPress, querrá trabajar en el aprendizaje de JavaScript si desea crear un sitio dinámico y memorable.

Una advertencia rápida: si es un desarrollador web principiante, no espere dominar JavaScript en cuestión de días. JavaScript es conocido por tener mensajes de error muy vagos y, a menudo, se lo critica por ser un "código espagueti". Esto significa que a lo largo de los años, los desarrolladores han acumulado una gran cantidad de código sin organizarlo correctamente. Además de eso, la mayoría de los desarrolladores aprenden a programar en marcos que usan JavaScript pero que son sintácticamente un poco diferentes.

Especialmente debería invertir tiempo en aprender JavaScript si es un profesional independiente o una agencia que administra los sitios de los clientes. Si bien existen herramientas de primer nivel que le permiten administrar varios sitios de WordPress, ¡ningún complemento puede crear los sitios por usted!

Además, si tiene aspiraciones de ser un desarrollador web, aprender JavaScript es beneficioso para estas carreras:

• Desarrollador front-end
• Desarrollador back-end
• Desarrollador de pila completa

Además, aprender JavaScript, junto con HTML, CSS y PHP más avanzados, sirve como una base sólida de WP que probablemente reducirá los costos generales para usted. Ya no tendrá que pagar a contratistas externos, reduciendo sus resultados finales, para realizar tareas que en realidad pueden tardar minutos en completarse. Una vez que domine JavaScript, puede pasar a marcos populares, como React y Angular, para crear aplicaciones verdaderamente únicas y receptivas dentro de WordPress.

¿Cómo escribo JavaScript al codificar en WordPress?

Aunque agregar JavaScript a un sitio de WordPress no es tan sencillo como agregar CSS y HTML, no tardará en comenzar. Hay dos formas diferentes de abordarlo y cada una tiene un propósito diferente.

Método 1: en cada página

Si está buscando ejecutar el mismo script en cada página de su sitio de WordPress, agregar el código manualmente a cada página sería bastante tedioso, por decir lo menos. El lugar adecuado para insertar JavaScript en HTML es el encabezado y el pie de página de la página.

Hay algunos complementos gratuitos que tomarán su JavaScript personalizado y lo colocarán en el encabezado y / o pie de página de cada página de su sitio de WordPress. A los administradores de WordPress les encantan estos complementos porque funcionan perfectamente con Google Analytics, lo que garantiza que se cuente cada visita a la página, lo que ayuda a mejorar el ranking de SEO más rápido.

Método 2: JavaScript diferente en cada página

Digamos que está ejecutando un sitio de WordPress que tiene una herramienta diferente en cada página que depende de al menos una "biblioteca" para funcionar. Obligar a que todo su JavaScript se cargue en cada página, especialmente cuando no es necesario, simplemente ralentizará el acceso a su sitio. El sentido común nos dice que ralentizar la experiencia de sus visitantes no es la mejor manera de ganar negocios.

Hay muchos tutoriales en la web que tienen métodos increíblemente complicados para realizar este proceso. Si bien es cierto que esto se puede hacer haciendo ediciones complejas dentro de su archivo functions.php, no hay una necesidad real de adoptar este enfoque a menos que disfrute de los dolores de cabeza.

En su lugar, instale el complemento Code Embed en su sitio. Esto le permitirá agregar JavaScript e incrustarlo donde desee dentro de la página.

Usando el complemento CodeEmbed

Después de instalar el complemento Code Embed, vaya a Opciones de pantalla y presione la casilla de verificación que dice "Campos personalizados". Esto le permitirá agregar su JavaScript a la página.

En la página de edición, verá un cuadro que dice "Campos personalizados", con una opción para "Ingresar nuevos campos personalizados". Haga clic en eso y tendrá cuadros de texto vacíos para ingresar el nombre de su código JavaScript, así como el código en sí.

Para evitar conflictos con los códigos de WordPress existentes, debe comenzar el nombre de su código JavaScript con las letras "CÓDIGO" en mayúscula. Algo como "CODEtimer" estaría bien. Luego, agregará el JavaScript real en el otro cuadro. ¡Asegúrese de incluir las etiquetas de apertura y cierre del script !

Una vez que haya terminado, simplemente haga clic en el botón que dice "Agregar campo personalizado". Finalmente, identifique en qué parte de la página le gustaría que se ejecute el código JavaScript. Por ejemplo, si el código carga un temporizador, busque en qué parte de su página le gustaría insertar ese temporizador. Luego, usará la sintaxis exacta [[CODEtimer]] para que WordPress inserte su JavaScript allí, ¡y listo!

¿Cómo incluyo mis archivos JavaScript y CSS en WordPress?

Aunque WordPress tiene temas integrados, muchos desarrolladores web prefieren tener un diseño más exclusivo y usarán su propio CSS. También necesitará una forma de almacenar esos archivos JavaScript.

En esta parte, deberá dirigirse a su Administrador de archivos y localizar el archivo llamado "functions.php". Tenga en cuenta que estará en la carpeta donde se encuentra el tema base de su sitio.

Añadiendo CSS a functions.php

Una vez que esté en el archivo functions.php , siga estos pasos:

1. En una nueva línea, cree una función vacía agregando la función de código
   addMyCSS () {#Fill This In Later}
2. “Registre” su archivo CSS con WordPress usando la función incorporada llamada wp_register_style en el siguiente paso
3. Quite el relleno que pusimos en el código y en su lugar ponemos wp_register_style ('name_of_css_style', plugins_url ('file-location.css', __ FILE__));
4. Ahora le hemos dicho a WordPress cómo llamar a nuestro estilo CSS y dónde está. Ahora es el momento de "poner en cola" el estilo, o decirle a WordPress que estamos listos para usarlo.
5. Permaneciendo dentro del bloque de funciones addMyCSS , agregue el código wp_enqueue_style ('name_of_css_style'); justo debajo del código que ingresamos en el último paso.
6. Hay un paso final, pero primero, asegúrese de estar FUERA de toda la función que creamos y en la parte general del archivo PHP.
7. Fuera de addMyCSS , simplemente agregue la siguiente línea: add_action ('wp_enqueue_scripts', 'name_of_css_style'); . Esto le dice a WordPress que active la carga de este archivo al cargar la página.

Quizás se pregunte por qué tenemos wp_enqueue_scripts en la función add_action para una hoja de estilo. Esta es simplemente la forma en que WordPress siempre ha implementado la función.

Agregar archivos JavaScript a WordPress

Ahora que hemos repasado el proceso de generar una función, registrar un archivo y agregar una acción, ¡esta parte debería ser pan comido!

1. Cree una función en functions.php llamada addMyJS como hicimos con addMyCSS .
2. Utilizaremos la función wp_register_script , pero es un poco más compleja. Tiene cinco "parámetros" (los elementos entre paréntesis). Mire a continuación para ver qué es cada parámetro.
3. wp_register_script (1. Su nombre de script, 2. plugins_url (location_of_script.js, __FILE__), 3. matriz de dependencias JS, generalmente matriz (jquery), 4. (Opcional) versión de su archivo JS entre comillas simples, 5. debe ser verdadero si desea el JS en su pie de página, falso si lo desea en el encabezado);
4. Aquí hay un ejemplo práctico de algo de JavaScript para ejecutar en el pie de página de un tema: wp_register_script ('timer_js', plugins_url ('timer_file.js', __FILE__), array ('jquery'), '1.0', true);
5. Nuevamente, FUERA de nuestra función addMyJS , “ ponga en cola” su script colocando esto en su área general de PHP: add_action ('wp_enqueue_scripts', 'addMyJS');

Puede parecer complejo, pero una vez que lo domines, te llevará menos de un minuto, ¡así que no temas!

¿Qué complementos puedo usar para agregar JavaScript a WordPress?

Hay muchos complementos completamente gratuitos solo para este propósito. Cada uno funciona de forma ligeramente diferente, por lo que experimenta con algunos antes de comprometerse. Aquí hay cinco principales para probar.

• ASync: de forma única, este complemento carga los archivos JS y CSS por separado del resto de la página. Esto puede ser particularmente útil si hay un error de codificación que de otra manera detendría indefinidamente la carga de su página.

• JS en widgets: ¿solo necesita agregar algunas líneas de códigos para algo como Google Analytics? Este complemento elimina la molestia y permitirá que se agreguen pequeños fragmentos a sus sitios de WordPress.

• Zia CSS / JS Helper: este es, con mucho, el mejor para aquellos con experiencia en el desarrollo web clásico HTML / CSS / JS. Hace que su funcionalidad de edición de WordPress sea como editar un sitio a través del administrador de archivos de cPanel. Puede utilizar CSS y JavaScript en línea para agregar rápidamente fragmentos de código, crear y administrar archivos externos y más.

¡Siempre haga una copia de seguridad de su sitio primero!

Si bien la gran mayoría de los complementos de WordPress no dañarán su sitio, siempre existe la posibilidad de que tenga problemas. Antes de instalar complementos adicionales o modificar su sitio, haga una copia de seguridad de su sitio utilizando un complemento de copia de seguridad de WordPress que pueda manejar copias de seguridad completas de su instalación de WordPress, como BackupBuddy. Ahórrese horas de posibles retrabajos y asegúrese de que todo su arduo trabajo no se desperdicie.

¿Puedo utilizar las API de WordPress con JavaScript?

Como sabrá, WordPress tiene una extensa serie de API o interfaces de programación de aplicaciones. Las API son esencialmente funciones del lado del servidor que puede utilizar en lenguajes como JavaScript. El método más nuevo y moderno para que los desarrolladores aprendan la funcionalidad de la API de WordPress es a través de la página de referencia de código de las API de WordPress.

Aquí es donde obtuvimos esas "funciones integradas" que usamos anteriormente. Podríamos continuar durante días sobre cada función en las API y cómo funcionan en conjunto con JavaScript. Sin embargo, ese es un tema avanzado que simplemente requiere tiempo individual y dedicación para aprender.

¿Existen bibliotecas de JavaScript adaptadas a WordPress?

¡Sí! Reconociendo que muchos desarrolladores no han dominado la totalidad del contenido de la API de WordPress, muchos programadores han creado bibliotecas de JavaScript que se pueden incrustar fácilmente, utilizando cualquiera de los complementos que discutimos antes.

La mayoría de las bibliotecas de JavaScript se encuentran en GitHub y son completamente gratuitas. Hay cientos de miles de bibliotecas de JavaScript disponibles compatibles con WordPress, que van desde una que agrega efectos divertidos a WordPress hasta una que le permite crear un sitio con un diseño muy similar a Pinterest.

La biblioteca más conocida que se utiliza con WordPress (y la mayoría de los sitios) se llama jQuery. jQuery elimina la complejidad de JavaScript y una vez que lo domine, estará escribiendo funciones rápida y fácilmente.

¡Ayudar! ¡Mi JavaScript de WordPress no funciona!

Una de las partes menos afortunadas de JavaScript es que los errores no son obvios. Y agregar WordPress además de eso puede hacerlo bastante confuso.

Algunos errores se pueden producir tan fácilmente como una comilla olvidada. Otros pueden deberse a errores de codificación importantes que no se identifican tan fácilmente. Entonces, ¿cómo los desarrolladores profesionales notan la diferencia?

Hay dos claves principales para la resolución de problemas: la función de JavaScript console.log y la consola de depuración del navegador. La consola de Chrome en particular es ideal para esto.

console.log

Esto se puede usar para ver cuál es el valor de una variable en un punto dado de una función y garantizar que se alcancen partes de las funciones. Dentro de un archivo JavaScript, simplemente pondría algo como console.log ("prueba"); .

La consola de depuración

Dependiendo del navegador que se utilice, la configuración de la consola será diferente. Generalmente, solo necesita presionar F12 para abrirlo, luego hacer clic en la pestaña "Consola".

La consola mostrará qué línea, de qué archivo JavaScript, hubo un error. Por lo general, muestra el "seguimiento de pila" completo, o la serie de archivos que se deben revisar hasta que se da con el culpable. Aquí también es donde se imprimen los mensajes de console.log .

Conclusión: JavaScript + WordPress

Existen herramientas profesionales que le darán mucha más información, pero por lo general cuestan un centavo. La buena noticia es que a medida que crezca como el próximo desarrollador de JavaScript de WordPress más grande del mundo, ¡las herramientas crecerán con usted!

Kristen Wright

Kristen ha estado escribiendo tutoriales para ayudar a los usuarios de WordPress desde 2011. Por lo general, puede encontrarla trabajando en nuevos artículos para el blog iThemes o desarrollando recursos para #WPprosper. Fuera del trabajo, a Kristen le gusta llevar un diario (¡ha escrito dos libros!), Hacer caminatas y acampar, cocinar y las aventuras diarias con su familia, con la esperanza de vivir una vida más presente.