El método más efectivo para agregar scripts en línea en WordPress

Los scripts en línea son dos palabras simples que envían escalofríos a los desarrolladores. Los scripts en línea son una manera fácil de agregar JavaScript (JS), CSS y HTML en el texto de su publicación de WordPress. Si bien se pueden usar para muchos propósitos, un uso general es realizar cambios sobre la marcha cuando publica un nuevo artículo de WordPress. Algunos podrían argumentar que no es necesario, pero hacerlo asegurará que su sitio web funcione sin problemas y de manera eficiente.

Una cosa que la mayoría de los usuarios de WordPress pasan por alto es complementar los scripts en sus sitios. Ya sea que desee implementar un texto en línea en una sola página o en todo su sitio web, hay muchas maneras de lograrlo con WordPress. Agregar scripts en línea a su sitio web de WordPress puede ser tan simple una vez que comprenda los métodos adecuados para hacerlo correctamente. Esta publicación de blog discutirá las formas más efectivas de agregar scripts en línea en WordPress con facilidad. Sigue leyendo para aprender mas.

Adición a través de Wp_print_scripts

Si está buscando agregar textos en línea de WordPress, entonces la función WordPress wp_print_scripts o/y admin_print_scripts es su respuesta. Los wp_print_scripts de WordPress pueden mostrar etiquetas de texto en el encabezado de un documento, lo que generalmente se hace cuando se incluyen archivos JS o CSS. Esta función de WordPress le permitirá hacer que su sitio sea más interactivo o agregar nuevas funciones. Al igual que con cualquier función de WordPress, hay algunas reglas simples a seguir antes de usarla en su sitio web.

Esta función establece tres variables basadas en las opciones del complemento de WordPress y las muestra en el front-end (la sección principal) usando el gancho admin_print_scripts. Para agregar los caracteres en línea al área de administración, también puede reemplazar wp_print_scripts con la función admin_print_scripts y llamarlo un día.

Cuando WordPress se instala por primera vez, viene con muchos textos que se agregan automáticamente al sitio. Esto puede generar un aumento en el tiempo de carga y el uso de la CPU en su servidor. Una forma de combatir esto es mediante el uso de la función wp_print_scripts, por lo que solo carga textos cuando se necesitan o se desean. Dicho esto, echemos un vistazo rápido a algunos pros y contras de usar la función wp_print_script para agregar caracteres en línea en su publicación de WordPress:

Ventajas:

• Siempre es sencillo agregar cualquier texto en línea a la "sección de encabezado" de las páginas de WordPress;
• El código que agregue no tendrá restricciones, lo que significa que puede agregar variables JS, funciones, métodos, condicionales o cualquier cosa que desee agregar a su sitio.

Contras:

• No existe una forma específica de asociar su código agregado con scripts registrados;
• En la mayoría de los casos, el código de salida en varios factores podría no ser una forma real y consistente de controlar la ubicación del código de salida. Sin embargo, siempre puede utilizar el parámetro <priority> debajo de <add_action> para controlar la ubicación de su código agregado.

Utilice la función wp_add_inline_script()

Recientemente, WordPress lanzó una nueva función aplicada para agregar JavaScript en línea a las publicaciones de WordPress. Sin embargo, esta nueva integración es compatible, comenzando con la versión 4.5 de WordPress, y es una forma más destacada de agregar textos en línea en comparación con otras opciones disponibles. Estamos definiendo la función wp_add_inline_script(), y usted espera que haga el trabajo sin problemas. Incluso el desarrollador de WordPress más experimentado puede confirmar este hecho.

La función wp_add_inline_script() es una forma de agregar caracteres en línea a su sitio sin editar ningún código en la página de WordPress. Esto le permite realizar cambios en tiempo real sin necesidad de acceso FTP o tener que usar un complemento. Esta función también es una de las integraciones esenciales que puede usar para personalizar su sitio de WordPress. El procedimiento le permite agregar textos en línea dentro del código de su sitio web, lo que significa que se agregarán directamente en las etiquetas HTML de su página web. Esto concede mucha más personalización que el uso de archivos JS externos o enlaces a otros sitios web.

Ventajas:

• La función wp_add_inline_script() es una forma valiosa de agregar caracteres en línea a su blog de WordPress;
• Puede ser una forma fácil y conveniente para que los desarrolladores agreguen código JS sin cambiar el tema de WordPress o los archivos del complemento o editar el archivo de plantilla header.php;
• Esto puede ser útil para agregar scripts como el código de Google Analytics. Le evita editar el archivo header.php cada vez que hay una actualización con las funciones o la configuración de Google Analytics.

Contras:

• El único inconveniente de la función wp_add_inline_script() es que solo está disponible a partir de la versión 4.5 de WordPress.

Utilice la función wp_localize_script()

La función wp_localize_script() es una útil utilidad de WordPress para agregar caracteres en línea a páginas individuales en su sitio web de WordPress. Es perfecto si necesita una funcionalidad rápida y temporal en sus sitios, como un evento o una promoción. Esta función acepta un número variable de argumentos y genera una lista de cadenas JS agregadas al encabezado del documento. Hacerlo puede ser útil si, por ejemplo, está usando jQuery y desea que el código del script solo aparezca en ciertas páginas.

Wp_localize_script() pone en cola su archivo JS y le da una ID/manejador de "shapeSpace_script", que define una matriz asociativa que contiene sus variables. Por último, estas variables JS se pasan a wp_localize_script() para que se incluyan en línea con el shapeSpace_script registrado. Como resultado, le permite aplicar cualquier variable JS como shapeSpace.varl, entre otras. Esta función está dedicada a localizar variables JS para su uso con traducción e internacionalización de idiomas. Sin embargo, la mayoría de los desarrolladores de WordPress lo usan como una forma común de agregar caracteres en línea a sus sitios.

Ventajas:

• Wp_localize_script() habilita la asociación "read:require" con su script registrado existente. Esto significa que proporciona una manera excelente y consistente de controlar la ubicación relativa de la salida de texto personalizada de su sitio web.

Contras:

• El único inconveniente es que solo puede agregar variables JS ( var = 'valor' ). Por lo tanto, es imposible agregar otros scripts en línea, como funciones, condicionales, ecuaciones, entre otros, usando wp_localize_script().

Usar respaldo

Como se mencionó anteriormente, métodos específicos como wp_add_inline_script() solo están disponibles a partir de la versión 4.5 de WordPress o superior. Sin embargo, al juntar todo, puede diseñar un método a prueba de fallas para agregar caracteres en línea a sus archivos de WordPress, independientemente de la versión de WordPress que esté usando. La forma más efectiva de hacer esto es a través de tres funciones en el complemento de publicación de la sección principal (front-end).

Lo primero que debe hacer es poner en cola su archivo JS y llamar a la siguiente función para agregar líneas en línea a través de la función wp_add_inline_script(). La tercera función es la alternativa a cualquier versión anterior a la 4.5. Sin duda, esto funcionará en WordPress 4.5 y cualquier versión distinta. Aquí es donde sucede la verdadera magia. Puede continuar con el método alternativo que hará su trabajo en la variante de WordPress de su elección desde 2.1 o lo que sea.

Ventajas:

• Puede tener varios archivos JS en su sitio web sin agregar solicitudes HTTP adicionales para cargarlos a la vez. Esto significa que podrá reducir el tiempo de carga para los visitantes de su sitio web.
• Si una secuencia de comandos falla, otras secuencias de comandos dentro de la misma funcionalidad alternativa seguirán funcionando porque se cargan de forma asincrónica desde diferentes subprocesos debido a su dependencia entre sí.

Contras:

• Cuando la secuencia de comandos falla, el usuario verá un espacio vacío en lugar del código en algunos casos. Esto puede parecer que no es gran cosa, pero es algo crucial a tener en cuenta como desarrollador de WordPress.

Un resumen sobre cómo agregar secuencias de comandos en línea en WordPress

La limitación de técnicas alternativas disponibles a su disposición hace que la función wp_add_inline_script() sea el método superior para agregar caracteres en línea de WordPress. Esta se considera la solución más efectiva hoy en día y, contrariamente a la creencia popular, esta función se puede utilizar en cualquier versión de WordPress si utiliza la técnica de respaldo. Para su información, a continuación hay un resumen rápido de las formas más efectivas de agregar scripts en línea en el núcleo de WordPress:

• wp_add_inline_script() le permite agregar cualquier código JS a cualquier script registrado;
• wp_print_scripts o admin_print_scripts le permite instalar cualquier código en la sección de encabezado o front-end;

• wp_localize_script() también le permite agregar variables JS a cualquier script registrado;
• Fallback te permite diseñar una técnica completa que funciona exactamente con cualquier versión de WordPress.

Nota: si desea agregar estilo en línea/CSS en lugar de JavaScript, WordPress le brinda un conjunto de funciones de "agregar estilo" que se asemejan a las que se usan para agregar scripts. Por ejemplo, consulte wp_print_styles y wp_add_inline_styles.

Conclusión

Los scripts en línea son una forma rápida y fácil de agregar funcionalidad a su sitio web de WordPress. Al escribir la secuencia de comandos en JavaScript, puede crear una secuencia de comandos en línea que haga lo que quiera que haga en la página sin necesidad de complementos o código adicionales. Este tutorial describe los métodos más efectivos para agregar scripts en línea en WordPress.

¿Eres un editor de WordPress con algo de experiencia agregando scripts a sitios de WP? ¿Qué método recomendaría para un desarrollador novato que busca hacer el trabajo rápidamente? Siéntase libre de usar la sección de comentarios para compartir su opinión y hacer cualquier pregunta preocupante.

Biografía del autor:

Arthur es especialista en marketing digital y bloguero de negocios. Desarrolla nuevas empresas interesantes a través de varias redes sociales y comparte su experiencia con los clientes para promover mejor su negocio. En su tiempo libre, Arthur estudia japonés y escribe artículos sobre tendencias de transformación digital.