Agregar Javascript a los temas de WordPress de la manera correcta

Hay una forma específica de agregar Javascript a su tema de WordPress para evitar conflictos con los complementos o los Temas principales de WordPress. El problema es que muchos “desarrolladores” llaman a sus archivos javascript directamente en el archivo header.php o footer.php, que es la forma incorrecta de hacerlo.


En esta guía, le mostraré cómo llamar correctamente a sus archivos javascript utilizando su archivo functions.php para que se carguen directamente en la etiqueta de encabezado o pie de página de su sitio. De esta manera, si está desarrollando un tema para su distribución y su usuario final desea modificar los scripts a través de un tema secundario, puede hacerlo o si está utilizando minifiguración / almacenamiento en caché u otros complementos de optimización, funcionarán correctamente. Y si está trabajando con un tema secundario, sus scripts se agregan de la manera correcta, sin copiar los archivos header.php o footer.php en su tema secundario que nunca deberían ser necesarios (cuando se trabaja con un tema bien codificado)

Manera incorrecta de agregar Javascript a los temas de WordPress

Llamar a javascript en su archivo header.php o footer.php como se muestra a continuación, NO es la forma correcta y lo recomiendo encarecidamente, a menudo causa conflictos con otros complementos y hacer cosas manualmente cuando se trabaja con un CMS nunca es una buena idea.

La forma correcta de agregar Javascript a los temas de WordPress

Lo mejor para agregar JavaScript a su tema de WordPress es hacerlo a través del archivo functions.php usando wp_enqueue_script. El uso de la acción wp_enqueue_scripts para cargar su JavaScript le ayudará a mantener su tema libre de problemas..

Ejemplo

wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array (), verdadero);

El código anterior cargará el archivo my-script.js en su sitio. Como puede ver, solo he incluido el identificador $ pero también puede agregar dependencias para su script, número de versión y si cargarlo en el encabezado o pie de página (el valor predeterminado es el encabezado).

La función wp_enqueue_script () se puede utilizar técnicamente en cualquier tema o archivo de plantilla de complemento, pero si está cargando scripts globales, querrá colocarlo en el archivo function.php de su tema o en un archivo separado destinado específicamente a cargar scripts en el sitio. Pero si solo está buscando cargar un script en un archivo de plantilla específico (por ejemplo, en publicaciones de la galería), podría colocar la función directamente en el archivo de plantilla, sin embargo, personalmente recomiendo mantener todos los scripts en un solo lugar y usar condicionales para cargar guiones según sea necesario.

Scripts alojados en WordPress

Una cosa genial de WordPress es que ya hay un montón de scripts alojados y registrados que puedes usar en el desarrollo de tu tema. Por ejemplo, jQuery, que se usa en casi todos los proyectos, SIEMPRE debe cargarse desde WordPress y nunca alojarse en un sitio de terceros como Google. Entonces, antes de agregar un script personalizado a su proyecto, verifique la lista de guiones registrados para asegurarte de que no esté incluido en WordPress y si es así, debes cargarlo en lugar de registrar el tuyo propio.

Usando el gancho de cola de WordPress

Anteriormente mencionamos la función necesaria para cargar un script en su sitio, sin embargo, cuando trabaje con archivos que no sean de plantilla, como su archivo functions.php, debería agregar esta función dentro de otra función enganchada en los ganchos de WordPress adecuados, de esta manera sus scripts se obtienen registrado con todos los otros scripts registrados por WordPress, complementos de terceros y su tema principal cuando se utiliza un tema secundario.

WordPress tiene dos ganchos de acción diferentes que puedes usar para invocar tus scripts.

  1. wp_enqueue_scripts – acción utilizada para cargar scripts en el front-end
  2. admin_enqueue_scripts – acción utilizada para cargar scripts en el administrador de WP

Aquí hay un ejemplo (que se agregaría a su archivo functions.php) de cómo crear una función y luego usar el enlace de WordPress para llamar a sus scripts.

/ **
* Poner en cola un guión
* /
función myprefix_enqueue_scripts () {
wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array (), verdadero);
}
add_action ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Nota: ¿Ves cómo estamos usando la función “get_template_directory_uri” al definir la ubicación de tu script? Esta función crea una URL a su carpeta de temas. Si está trabajando con un tema secundario, deberá utilizar “get_stylesheet_directory_uri” para que apunte al tema secundario y no al tema principal..

Agregar código Javascript en línea

Si bien puede pegar fácilmente JavaScript en línea en cualquier archivo de plantilla a través de la etiqueta de script, puede ser una buena idea también usar ganchos de WordPress para agregar su código en línea, especialmente cuando se trata de un complemento central o código de tema. A continuación se muestra un ejemplo de cómo agregar scripts en línea a su sitio:

función myprefix_add_inline_script () {
wp_add_inline_script ('my-script', 'alert ("hello world");', 'after');
}
add_action ('wp_enqueue_scripts', 'myprefix_add_inline_script');

Lo que esto hará es agregar su JavaScript en línea después del script “my-script” previamente registrado. Cuando use wp_add_inline_script solo puede agregar código en línea antes o después de un script ya registrado, por lo que si está tratando de modificar el código de un script en particular, asegúrese de que esté cargado después, o si solo necesita agregar un código personalizado, puede engancharlo a la secuencia de comandos jquery que generalmente carga la mayoría de los temas de WordPress y, si no, puede usar wp_enqueue_script para cargar la versión alojada de WordPress de jQuery.

Al usar este método, las personas pueden eliminar fácilmente sus scripts en línea a través de un tema secundario o complemento de complemento, mantiene todo su JavaScript personalizado perfectamente organizado y WordPress lo analiza, lo que puede ser más seguro. Y si está utilizando un tema secundario, puede cargar sus scripts a través de su archivo functions.php en lugar de copiar los archivos header.php o footer.php sobre su tema secundario.

Dicho esto, si está trabajando en un tema secundario que no necesita hacer esto, simplemente puede volcar su código en su encabezado ya sea usando los ganchos wp_head o wp_footer como en el ejemplo a continuación:

add_action ('wp_footer', function () {?>  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map