WordPress JavaScript: una guía para principiantes

Si pregunta a un millón de desarrolladores web qué es JavaScript, recibirá un millón de respuestas diferentes. Casi todo lo que es interactivo en la web se realiza con JavaScript. Siendo un sistema moderno de gestión de contenido (CMS), WordPress y muchos de sus complementos se basan parcialmente en JavaScript para hacer el trabajo. Al contrario de lo que puede sonar, JavaScript no tiene nada que ver con el lenguaje de programación Java. Se llama así solo para fines de marketing. Vamos a sumergirnos en todo lo que necesita saber para capitalizar el poder combinado de JavaScript y WordPress.
En esta guía
¿Qué es JavaScript? En resumen, JavaScript es uno de los lenguajes de programación más populares utilizados en la web. JavaScript se puede utilizar para crear sitios web dinámicos, aplicaciones web / móviles, aplicaciones de red en tiempo real, como chats, herramientas de línea de comandos e incluso juegos. Hace mucho tiempo, Internet se basó exclusivamente en HTML y CSS. Esta combinación permite un estilo de contenido muy simple. Sin embargo, se podría hacer muy poco para dinamizar el contenido, y se excluyó la creación de aplicaciones web.
Debido a que los servidores eran mucho más caros de mantener, los desarrolladores decidieron escribir JavaScript para operar en la computadora del cliente. Escrito de manera similar a otros lenguajes de programación funcional, JavaScript puede tomar datos en posiciones, procesar y producir datos. Los navegadores web tienen un motor JavaScript que sabe cómo ejecutar el 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 se basa en los navegadores para “comprender” cómo interpretar, administrar y manipular la pantalla de datos. JavaScript Ash Technical ¿Desea saber más sobre la tecnología detrás de JavaScript? Hay algunos diferenciadores importantes que saber para aquellos que tienen experiencia en otros tipos de desarrollo. En primer lugar, JavaScript es agnóstico como PHP. Esto significa que sus variables no tienen un tipo definido y cualquier variable dada puede atribuirse a casi cualquier tipo de valor. La mayoría de los idiomas modernos están “orientados a objetos”, lo que significa que se basan en “clases” reutilizables que representan un objeto literal. Los enfoques más cercanos de JavaScript son 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 idiomas construidos alrededor del concepto orientado al objeto, como Java.
¿Qué hace JavaScript? Debido al enorme apoyo y las inversiones comunitarias de grandes empresas como Facebook e incluso Netflix, JavaScript puede hacer mucho más que trabajar en los navegadores web. JavaScript puede hacer algo tan simple como la graduación de este año que se mostrará cerca del símbolo de derechos de autor en un sitio web y funciona más complejo, como llevar a cabo la mayoría de un editor de imágenes en línea. En resumen, JavaScript hace casi todo lo que el desarrollador quiere hacer en la computadora del cliente. JavaScript es un caché local en la computadora del cliente cuando el cliente visita un sitio que lo usa. Si bien los datos confidenciales deben tratarse en el servidor, muchas aplicaciones basadas en la web utilizan en gran medida JavaScript para aprovechar la potencia de procesamiento del automóvil del cliente. Ahora que estamos en la era de los “cuadros” interminables que hacen que el desarrollo de diferentes tipos de contenido sea mucho más rápido, las posibilidades son infinitas. JavaScript es seguro? Como la mayoría de los protocolos e idiomas más antiguos, JavaScript no se construyó inicialmente en vista de la seguridad. Esto es algo perfectamente razonable de preguntar, dado lo generalizado que se han vuelto los ataques cibernéticos. Hay extensiones de navegador como “Noncscript” que simplemente bloquean la ejecución de todos los códigos JavaScript. Siempre que respete la regla general de la web y no visite sitios confiables, es bueno permitir la ejecución del JavaScript.
Debido a que es un lenguaje de programación, por supuesto, los usuarios maliciosos 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 de WordPress JavaScript, puede estar tranquilo con un complemento de seguridad de WordPress que pone la mayoría de los aspectos del sitio de seguridad en el piloto automático. Dos tipos principales de ataque JavaScript dicen que “Mantenga a sus amigos y enemigos cercanos más cerca” es relevante cuando se trata de desarrollo y seguridad. ¡Es muy importante entender cómo los malos, los malos, se aprovechan de JavaScript para evitar sus esfuerzos! Scripting del sitio cruzado (XSS) Scripting de sitios cruzados (XSS) es un tipo de malware que se ejecuta explotando vulnerabilidades de sitios cruzados en cualquier sitio de WordPress. De hecho, es la forma más común en que los sitios de WordPress pueden ser pirateados porque hay muchos complementos de WordPress que tienen vulnerabilidades XSS. Se utiliza un ataque de script entre sitios si una página permite que los datos transmitan. En este ataque, el usuario malicioso coloca el código JavaScript en los datos que se enviarán en una página accesible al público. Si no hay medidas de mitigación, este código malicioso ejecuta el código JavaScript en la computadora de cualquier persona que visite esa página. Es por eso que es importante “desinfectar” los datos de entrada. Esto significa que, antes de ser publicado, elimina cosas como soportes y citas que harían que el código sea inútil.
Falsificación de solicitudes cruzadas (CSRF) Este tipo de ataque aprovecha las páginas web a las que ya puede estar conectado. El escenario más común supondría que está conectado a su banco. Digamos que está conectado a su cuenta bancaria, pero luego decide acceder a un sitio web de torrent que tiene CSRF listo para comenzar. CSRF, en ausencia de atenuación del navegador, adopta el patrón de conexión para hacer cosas como transferencias bancarias para cada banco principal, luego ejecutar en su computadora en segundo plano. Un escenario que realmente le sucedió a un sitio importante y un banco importante fue que la conexión del banco con la transferencia de dinero se veía como: www.bankwithbadsecurity.com/transfer&amount=1000&toaccount=12345 para transferir $ 1,000 a una cuenta con el número 12345. El banco, parece que lo ha solicitado y, debido a que la solicitud vendría de su dirección IP, es difícil demostrar que no la ha iniciado. Afortunadamente, la mayoría de los navegadores modernos detectarán automáticamente esto y lo evitarán. ¿Puedo usar JavaScript dentro de WordPress? Sí, puede usar JavaScript cuando se desarrolla para WordPress. Tenga en cuenta que WordPress es un sistema de administración de contenido flexible que tiene dos modos de edición. Uno de ellos le permite editar directamente el código, y el otro le permite usar un editor similar a lo que podría ver en un procesador de texto, también conocido como editor “Wysiwyg”. En la última versión de WordPress, el editor de Wysiwyg se llama Gutenberg.
Tenga en cuenta que puede usar JavaScript al desarrollar extensiones de WordPress. Si bien el lado del servidor de WordPress es PHP, la parte del cliente representa casi el 100% del tiempo de JavaScript. ¿Debo aprender JavaScript para WordPress? La respuesta a estas preguntas depende de lo que pretenda hacer con WordPress. Si solo desea unas pocas páginas estáticas que genere utilizando la plataforma, probablemente se sentirá bien sin aprender JavaScript. Además, es bastante fácil comenzar con JavaScript y también descubrirá mucho sobre cómo funcionan HTML y CSS. Sin embargo, además de la capacitación de 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 para principiantes, no espere dominar JavaScript en unos días. JavaScript es conocido porque tiene mensajes de error muy vagos y a menudo se critica porque es “código de espagueti”. Esto significa que a lo largo de los años, los desarrolladores han acumulado muchos códigos sin organizarlo correctamente. Además, la mayoría de los desarrolladores aprenden cómo programar en cuadros usando JavaScript, pero sintácticamente son un poco diferentes. En particular, debe invertir tiempo en el aprendizaje de JavaScript si es un profesional independiente o agencia que administra los sitios de los clientes. Aunque hay herramientas principales que le permiten administrar más sitios de WordPress, ¡ningún complemento puede crear sitios para usted! Además, si tiene aspiraciones de ser un desarrollador web, JavaScript Learning es beneficioso para estas carreras:
Desarrollador de interfaz
Desarrollador de back-end
Desarrollador de tiempo completo
Además, JavaScript Learning, junto con HTML, CSS y PHP más avanzado sirven como una base sólida de WP que probablemente reducirá los costos generales para usted. En realidad, puede tomar unos minutos. Una vez que domina JavaScript, puede ir a marcos populares, como React y Angular, para crear aplicaciones verdaderamente únicas y receptivas en WordPress. ¿Cómo escribe JavaScript cuando codifique en WordPress? Incluso si agregar JavaScript a un sitio de WordPress no es tan simple como agregar CSS y HTML, no llevará mucho tiempo comenzar. Hay dos formas diferentes de enfoque y cada una tiene un propósito diferente. Método 1: en cada página Si desea ejecutar el mismo script en cada página de su sitio de WordPress, agregar manualmente el código a cada página sería bastante aburrido, al menos, al menos. El lugar correcto para insertar JavaScript en HTML está en el encabezado y el sótano de la página. Hay algunos complementos gratuitos que se harán cargo de su JavaScript personalizado y lo lanzarán en el encabezado y / o el sótano de cada página en su sitio de WordPress. A los administradores de WordPress les encantan estos complementos, porque funciona perfectamente con Google Analytics, asegurando que cada acceso de página se cuente, contribuyendo al rápido aumento de la clasificación SEO.
Método 2: JavaScript diferente en cada página Suponga que ejecuta un sitio de WordPress que tiene una herramienta diferente en cada página que se basa en al menos una “biblioteca” para funcionar. Forzar la carga de todos sus JavaScripts en cada página, especialmente cuando no sea necesario, simplemente disminuirá la velocidad a su sitio. ¡Buen sentido nos dice que desacelerar la experiencia de sus visitantes no es la mejor manera de ganar negocios! Hay muchos tutoriales en la web que tienen formas extremadamente complicadas de realizar este proceso. Aunque es cierto que esto se puede hacer haciendo ediciones complejas en el archivo Function.php, no necesita adoptar este enfoque a menos que disfrute de los dolores de cabeza. En su lugar, instale el complemento de incrustación de código en su sitio, esto le permitirá agregar JavaScript e incorporarlo donde quiera.
Usando el complemento con código de código después de instalar el complemento de incrustación de código, vaya a las opciones de pantalla y marque el cuadro de selección que dice “campos personalizados”. Esto le permitirá agregar JavaScript a la página.
En la página de edición, verá un cuadro que escribe “campos personalizados”, con la opción “Tipo nuevo” campos personalizados. Haga clic en él y tendrá cuadros de texto vacíos para ingresar su nombre de código JavaScript, así como para el código en sí. Para evitar conflictos con los códigos de WordPress existentes, debe iniciar el nombre del código JavaScript con el “código” de las letras mayúsculas. Algo como “Codetimer” estaría bien. Luego agregará el JavaScript real a la otra caja. ¡Asegúrese de incluir las etiquetas de apertura y cierre del script! Después de haber terminado, haga clic en el botón “Agregar un campo personalizado”. Finalmente, identifique dónde desea ejecutar el código JavaScript en la página. Por ejemplo, si el código carga un temporizador, encuentre dónde desea ingresar el temporizador en su página. Luego usará la sintaxis exacta [[CodetImer]] para que WordPress inserta su JavaScript allí y ¡está listo! ¿Cómo incluyo mis archivos JavaScript y CSS en WordPress? Aunque WordPress ha construido temas, muchos desarrolladores web prefieren tener un diseño más único y utilizarán su propio CSS. También necesitará una forma de almacenar estos archivos JavaScript. En esta parte, deberá ir al Administrador de archivos y localizar el archivo llamado “Functions.php”. Tenga en cuenta que esto estará en el archivo en el que el tema básico se encuentra para su sitio que agrega CSS a functions.php Una vez que esté en las funciones.php, siga estos pasos: en una nueva línea, cree una característica vacía agregando la función de código addMyCSS () {#fill this in sill}
“Registre” su archivo CSS con WordPress usando la función incorporada llamada wp_register_style en el siguiente paso, por favor el relleno que he ingresado en el código y, en su lugar, ponga wp_register_style (‘name_of_css_style’, plugins_url (‘file-location.css’ , __));
Ahora le dije a WordPress cómo llamar a nuestro estilo CSS y dónde está. Ahora es el momento de “poner el estilo” en el estilo o decir WordPress que estamos listos para usarlo.
Manteniéndose en el bloque funcional AddMyCSS, agregue el código wp_enqueue_style (‘name_de_css_style’); Incluso bajo el código que ingresé en el último paso.
Hay un último paso, pero primero, asegúrese de estar fuera de toda la función que hemos creado en la parte general del archivo PHP.
Outside 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.
Es posible que se pregunte por qué tenemos wp_enqueue_scripts en 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 pasado por el proceso de generar una función, registrando un archivo y agregando una acción, ¡esta parte debería ser un pedazo de pastel!

Hacer una función en Functions.php llamado addMyjs tal como lo hice con AddMyCSS.
Usaremos la función wp_register_coscrip, pero es un poco más compleja. Tiene cinco “parámetros” (los elementos colocados entre los soportes). Mire a continuación para ver cuál es cada parámetro.
Wp_register_cripri (1. El nombre de su script, 2. Plugins_url (ubicación_of_script.js, __file__), 3. JS Adicción matriz, generalmente matriz (jQuery), 4. (opcional) su versión de archivo JS entre cotizaciones únicas, 5. Debe hacerlo Sea verdadero si desea JS en su sótano, falso si lo desea en el encabezado); aquí hay un ejemplo práctico de JavaScript para ejecutarse en el sótano de un tema: wp_register_script (‘timer_js’, plugins_url (‘timer_file.js’, __file__), array (‘jquey’), ‘1.0’, true);
Nuevamente, aparte de nuestra función addMyjs, “elimine” su script colocando esto en su área general de php: add_action (‘wp_enqueue_scripts’, ‘addMyjs’);
Puede parecer complejo, pero una vez que lo consigas, tomará menos de un minuto, ¡así que no tengas miedo! ¿Qué complementos puedo usar para agregar JavaScript a WordPress? Hay muchos complementos completamente gratuitos solo para este propósito. Cada uno funciona ligeramente diferente, así que experimente algunos antes de contratar. Aquí hay cinco de los intentos más importantes.
Async: exclusivamente, este complemento carga 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 otro modo detendría la página de carga.
Async JS y CSS
JS en widgets: ¿solo tiene que agregar algunas líneas de bacalao para algo como Google Analytics? Este complemento elimina los problemas y permitirá la adición de pequeños fragmentos en sus sitios de WordPress.
Permitir javascript en widgets de texto
ZIA CSS / JS Helper: esto es, con mucho, el mejor para aquellos experimentados con el clásico desarrollo web HTML / CSS / JS.Hace que la funcionalidad de edición de WordPress al igual que editar un sitio a través del Administrador de archivos de Cpanel.Puede usar CSS y JavaScript en línea para agregar rápidamente bits de COD, para crear y administrar archivos externos y más. SIA3 CSS JS
¡Siempre haga una copia de seguridad del sitio! Si bien la gran mayoría de los complementos de WordPress no afectarán el sitio, siempre existe la posibilidad de tener problemas. Antes de instalar cualquier complemento adicional o modificar su sitio, haga una copia de seguridad de su sitio utilizando un enchufe de copia de seguridad de WordPress que pueda manejar copias completas de repuesto de su instalación de WordPress, cómo sería Backuppeddy. Ahórrese por posibles horas y asegúrese de que no se desperdicie todo su trabajo duro. ¿Puedo usar API de WordPress usando JavaScript? Como probablemente sepa, WordPress tiene una extensa serie de API o interfaces de programación de aplicaciones. Las API son esencialmente funciones del servidor que puede usar en idiomas como JavaScript. El método más moderno más moderno para que los desarrolladores aprendan la funcionalidad de API WordPress es a través de la página de referencia de la API de WordPress WordPress. Aquí obtuve esas “funciones incorporadas” que usé anteriormente. Podríamos continuar durante días sobre cada función en las API y cómo funcionan en conjunto con JavaScript. Sin embargo, este es un tema avanzado que simplemente requiere tiempo individual y dedicación para aprender. ¿Hay bibliotecas JavaScript adaptadas a WordPress? ¡Sí!
Reconociendo que muchos desarrolladores no han dominado completamente el contenido de API WordPress, muchos programadores han creado bibliotecas JavaScript que se pueden incorporar fácilmente, utilizando cualquiera de los complementos que hemos discutido. La mayoría de las bibliotecas de JavaScript se pueden encontrar en GitHub y son completamente gratuitas. ¡Hay cientos de miles de bibliotecas JavaScript compatibles con WordPress, desde una que agrega efectos divertidos a WordPress a una que le permite crear un sitio con un aspecto muy similar a Pinterest! La biblioteca más popular utilizada con WordPress (y la mayoría de los sitios) se llama jquey. JQuery elimina la complejidad de JavaScript y, una vez que la obtenga, escribirá funciones rápidas y fáciles. ¡Ayuda! ¡Mi Javascript, mi WordPress no funciona! Una de las partes menos afortunadas de JavaScript es que los errores no son obvios. Y agregar WordPress en la parte superior puede hacer esto bastante confundido. Algunos errores pueden ser causados ​​tan fácilmente como un guilimel olvidado. Otros pueden ser causados ​​por errores de codificación importantes que no se identifican tan fácilmente. Entonces, ¿cómo hacen la diferencia los desarrolladores profesionales? Hay dos claves principales para la resolución de problemas: la consola JavaScript. La consola Chrome en particular es excelente para esto. console.log Esto se puede usar para ver cuál es el valor de una variable en un cierto punto de una función y para garantizar que las partes de las funciones realmente se alcancen. En un archivo JavaScript, simplemente pondría algo como console.log (“prueba”);
. La consola de solución de problemas según el navegador utilizado, la configuración de la consola será diferente. En general, solo tiene que presionar F12 para abrirlo, luego haga clic en la pestaña “Consola”. La consola mostrará qué línea, desde qué archivo JavaScript se ha producido un error. Por lo general, se ve completo “Stacktrace” o la serie de archivos que necesita viajar hasta que llegue al culpable. También aquí están los mensajes de console.log. Conclusión: JavaScript + WordPress Hay herramientas profesionales que le darán mucho más comprensión, pero generalmente cuestan un centavo bastante grande. La buena noticia es que a medida que se expande como el próximo desarrollador de JavaScript más grande del mundo, ¡los instrumentos crecerán con usted! Kristen Wright
Kristen escribió tutoriales para ayudar a los usuarios de WordPress en 2011. Por lo general, puede encontrarlo trabajando en nuevos artículos para IThems Blog o desarrollar recursos para #WpProsper. Fuera del trabajo, Kristen disfruta del diario (¡escribió dos libros!), Senderismo y acampar, cocinar y aventuras diarias con su familia, con la esperanza de llevar una vida más presente.