Aprenda a agregar JavaScript personalizado a WordPress correctamente

Hiciste tiempo para aprender a usar JavaScript en WordPress. También ha reunido una serie de bibliotecas y recursos de JavaScript en el camino para que la codificación sea más eficiente. Pero ahora, ¿qué haces con las habilidades que has adquirido? Hay varias razones por las que es posible que desee agregar JavaScript personalizado a su sitio web de WordPress y también hay varias formas de implementarlo. Pero debes tener mucho cuidado con cómo haces esto. La implementación incorrecta de JavaScript puede hacer más daño que bien. En la guía rápida de hoy para el tutorial de JavaScript, hablaré sobre por qué le gustaría agregar JavaScript personalizado a su sitio y cómo hacerlo de manera segura y correcta (incluido el uso de complementos de WordPress).
¿Por qué podría agregar JavaScript a WordPress cuando codifica un sitio de WordPress? Necesita tres elementos:
Html
CSS
Javascript
HTML y CSS son geniales. Ponen una base sólida para su sitio de WordPress. Sin embargo, no puedo ayudarlo mucho si desea cambiar el “comportamiento” de su sitio, por ejemplo, probablemente necesite usar JavaScript para hacer lo siguiente:
Cambie, oculte o muestre elementos HTML.
Agregue valores a las variables CSS y realice operaciones complejas en ellas, como las variables de combinación, o dar una respuesta después de una acción (como un clic).
Cambie la apariencia y el diseño de su WordPress (si tiene prohibido controlar ciertos elementos).
Cambiar o mejorar la funcionalidad de un complemento de WordPress.
Mejore su sitio web con contenido dinámico como diapositivas, animaciones, reproductores de video, efectos desplegables o desplegables, computadoras y otros elementos interactivos. Ponne con una fuente o elemento externo, como Google Analytics o una API de terceros.
Aquí es donde JavaScript puede ayudarlo.
Dicho esto, JavaScript no es tan simple de implementar como HTML y CSS. No solo tiene que prestar atención a cómo escribe el código, sino que debe tener cuidado con cómo y dónde lo agrega a WordPress. Cómo agregar JavaScript personalizado a WordPress Una vez que haya dominado HTML y CSS y realmente desea dejar que su sitio de WordPress, es hora de agregarle JavaScript. Pero, ¿cómo haces esto y dónde lo pones? Y, lo que es más importante, ¿realmente importa? Como regla básica, JavaScript pertenece a una de las dos ubicaciones:
A su cabeza para aplicaciones para aplicaciones a nivel de todo el sitio de script.
En el cuerpo de una página web para aplicaciones específicas de página.
Y no siempre debe colocar la etiqueta completa en esos lugares. Si desea que sus páginas web se ejecuten más rápido y más fácil de leer, puede crear archivos JavaScript separados (.js) y llamarlas usando una referencia como esta:
http: //filename.js suena bastante simple, ¿verdad? Bueno, lo es, pero debes recordar que JavaScript es un lenguaje de programación. No es algo que pueda inyectar fácilmente en sus páginas web, como haría HTML o CSS. Entonces, aquí hay algunas reglas a seguir mientras agrega JavaScript personalizado en su sitio de WordPress: Regla #1: No use el editor de WordPress
A menos que agregue un script muy pequeño a una sola página o llame a un archivo, el editor de texto para sus páginas y publicaciones de WordPress no es el lugar para escribir JavaScript. Ralentizará la carga de su página web y puede crear una miseria de bacalao #2: no cambie sus archivos directamente

Esta regla se refiere al tema y los archivos de complemento. Si bien JavaScript lo ayudará a agregar o cambiar la funcionalidad de su integración de WordPress, es una mala práctica agregar JavaScript personalizado a esos archivos de encabezado. Para empezar, es el problema que sus scripts bloquean el código bien escrito del desarrollador. Una de las formas en que mantiene bien su sitio es confiar en las prácticas de codificación limpia. Y JavaScript Lost puede interrumpir esto. En segundo lugar, perderá sus directivas JavaScript personalizadas tan pronto como actualice su tema o archivos de complementos. Aunque JavaScript pertenece a su encabezado de tema y hay un archivo de encabezado.php que se puede editar, no haga esto aquí.
Finalmente, si está pensando en evitar este problema creando un tema secundario y aplicando JavaScript personalizado allí, no. Cuando actualiza los archivos Header.php o Footer.php con JavaScript, puede crear involuntariamente un conflicto con los complementos que se ejecutan en su sitio. Esto puede ralentizar mucho o tomar el servidor fuera de línea como el sitio que no tiene idea de cómo lidiar con estas solicitudes simultáneas. Nota: Esta regla en realidad se refiere a los desarrolladores de WordPress que usan temas o complementos de tercera parte. Si escribe sus propios temas y complementos, puede agregar JavaScript directamente al archivo de encabezado; Sin embargo, querrá usar un sistema de cierre de colas, como se detalla aquí. Regula #3: Crea archivos separados para JavaScript si le digo que no agregue JavaScript directamente a sus archivos o páginas de WordPress, entonces cómo demonios deberías ingresar allí allí ? Hay dos maneras de hacer esto. Una es crear un archivo JavaScript separado, y el otro, que detallaré en la Regla #4, es usar un complemento de WordPress para agregar JavaScript personalizado. Como ya hemos mencionado, agregar JavaScript directamente a WordPress puede hacer un verdadero desastre de las cosas y causar problemas serios, como la pantalla blanca de la muerte. Pero si desea aplicar el script solo una página, entonces necesita una forma de inyectar el código donde pertenece, en lugar de agregarlo y bloquear el resto de su sitio con solicitudes HTTPS innecesarias.

Por lo tanto, debe crear un archivo JavaScript separado. WordPress Codex incluye algunos pasos sobre qué hacer a continuación con su archivo para una referencia fácil, esto es lo que se recomienda: si tiene un script o más scripts, asegúrese de definir la función para cada uno de los archivos. Por ejemplo: luego llame al archivo desde el encabezado de su sitio usando un script como este (puede agregar esto al encabezado usando un complemento):
Finalmente, deberá llamar a la función JavaScript real que definió en el archivo. Incluso si solo hay un script allí, debe definirse en su código.

Si JavaScript se aplica a toda la página o sitio, puede agregar la siguiente llamada de JavaScript al encabezado. Si JavaScript tiene que ser ejecutado en algún lugar de la página, debe ir al cuerpo de su sitio:
Regla #4: Use una gloria de complemento de WordPress al Señor para los complementos de WordPress. Cuando se trata de JavaScript, los siguientes complementos lo ayudarán a evitar los problemas que ocurren cuando JavaScript se coloca directamente en sus archivos de WordPress. En su lugar, estos complementos le informan al servidor que use el script solo cuando la acción se “active”, lo que le ayuda a evitar el tema de WordPress y las actualizaciones de complementos que eliminarán cualquier cambio que aplique directamente.

Inserte el complemento para encabezados y sótanos

Este complemento de WordPress ha sido desarrollado por WP Beginner para ayudar a los desarrolladores a introducir código personalizado en la sede y los sótanos de su tarea.Esencialmente, lo que hace es darle una herramienta conveniente, aparte del archivo Header.php, donde puede agregar todos los scripts personalizados.Tenga en cuenta que este complemento es ideal solo si intenta hacer cambios en todo el sitio con JavaScript.Aunque hay algunos otros complementos para la sede y los sótanos disponibles en WordPress Warehouse, el WP Beginner es, con mucho, el más popular y confiable entre muchos. Más información complemento de código corto
Para aquellos de ustedes que desean agregar JavaScript personalizado en páginas o publicaciones individuales, mencioné anteriormente una serie de formas en que pueden hacerlo. Puede agregarlo directamente a HTML si es un script pequeño. También puede usar un archivo JavaScript que contenga todo su código. Sin embargo, ambos métodos continúan agregando una serie de líneas de código en su sitio y pueden hacer que las cosas sean más desordenadas y difíciles de leer. Si desea limpiarlo, puede usar el complemento de código corto. Una ventaja adicional del uso del código de acceso corta es el factor de ahorro de tiempo. Supongamos que tiene una cierta función de JavaScript a la que desea aplicar una docena de páginas. Entonces no hay necesidad de copiar el script en cada uno. En su lugar, puede crear un código corto para representar esa función y insertarla en cualquier momento que lo necesite. Más información que concluye la comprensión del uso de JavaScript para aumentar el poder de los temas, complementos y contenido. Sin embargo, debe prestar atención a cómo lo usa para no interrumpir el rendimiento de su sitio o no causar problemas con otras integraciones que está tratando de ejecutar en su sitio. Siga las reglas anteriores y debe hacerlo bien. Vengo. Vengo. Volver: ¿Cuánto tiempo usa JavaScript y lo encuentra necesario para cada sitio web que cree?

Etiquetas:
Javascript

Tutoriales de WordPress