Cómo agregar JavaScript personalizado a su sitio web de WordPress

Cómo agregar JavaScript personalizado a su sitio web de WordPress

El código JavaScript se puede agregar a su sitio web de WordPress para varios propósitos, generalmente para mejorar una característica o agregar funcionalidad. Independientemente de la razón por la que agregue JavaScript (JS) a su sitio web, es importante crear, colocar y mantener correctamente este código. La ubicación incorrecta del código puede dañar el rendimiento del sitio o incluso romperlo.

En este artículo, le mostraremos varias formas de agregar el código JavaScript. ¡Vamos a empezar!

Algunos temas de WordPress incorporan un campo para incluir código JS. Para ver si ese es el caso con el tema de su sitio web, revise las opciones disponibles. Si existe la opción, inserte el código JS en el lugar designado, si existe.

Por ejemplo, todos los temas de WordPress creados por Qode Interactive le permiten insertar código JS en la configuración del tema. Puede acceder a ellos navegando a Opciones de Theme_name> General. Desplácese hacia abajo hasta la sección denominada Código personalizado e inserte su código JS en el campo JS personalizado.

Opciones de tema

Usar plugins

Finish Design Projects Quickly4662

Uno de los muchos beneficios de WordPress es una amplia gama de plugins disponibles para casi cualquier funcionalidad que pueda imaginar. Por lo tanto, agregar código JS a su sitio de WordPress puede ser tan simple como encontrar el plugin que mejor se adapte a sus necesidades.

Los plugins de JavaScript pueden ser gratuitos, premium o incluso venir incluidos con los temas. En este artículo, cubriremos varios ejemplos de estos plugins, pero si no parecen ser los adecuados, puede explorar más allá de esta lista.

Códigos cortos de plugins

Algunos plugins, como WPBakery Page Builder, tienen códigos cortos para agregar JS a páginas y publicaciones individuales. En WPBakery, este shortcode se llama Raw JS.

Si no tiene este plugin, primero debe instalarlo y activarlo. Luego, vaya al backend de una página o publicación y haga clic en "Agregar elemento".

Agregar elemento

Busque "Raw JS" y haga clic para agregar el código corto.

Código corto JS sin formato

Lo único que queda por hacer es agregar el código dentro del shortcode. Al crear el código corto, también crea un código JS ficticio. Agrega tu código entre la apertura <script> etiqueta y cierre </script> etiqueta.

Si elimina el código JS ficticio, debe asegurarse de que el código que inserte tenga tanto la apertura <script> y el cierre </script> etiqueta.

Código corto JS sin formato
Código corto JS sin formato

Si está utilizando este método para agregar JavaScript a su sitio web, se recomienda encarecidamente que agregue código JS que sea de menor tamaño. De lo contrario, la velocidad de carga de la página podría disminuir. Si desea incluir un código JS más grande, considere usar un método diferente.

Cómo agregar JavaScript a WordPress - Opciones de plugins

La mayoría de los plugins ofrecen opciones para incluir código JS. Dependiendo del plugin, este código se puede aplicar en todo el sitio o ser específico de la página. En esta sección, describiremos el plugin Insertar encabezados y pies de página, ya que es una solución ampliamente recomendada.

Este plugin se utiliza para implementar código JS en todo el sitio, aunque el código se puede ajustar solo para páginas o publicaciones específicas. Para los propósitos de esta guía, nos centraremos en el código de todo el sitio, ya que las complejidades de los ajustes de código adicionales garantizan un artículo separado.

Un ejemplo de código popular en todo el sitio es el código de Google Analytics. Para instalar el plugin, vaya a Complementos, haga clic en "Agregar nuevo" y escriba una palabra clave ("Encabezados", por ejemplo) en la barra de búsqueda. Haga clic en el resultado, instálelo y no olvide activarlo: el plugin instalado no funcionará a menos que esté activado.

Complemento de encabezados y pies de página

Para usar el plugin, vaya a Configuración, haga clic en Encabezados y pies de página e inserte su código en Scripts en el Encabezado o Scripts en la sección Pie de página.

Opciones de encabezados y pies de página
Opciones de encabezados y pies de página

Aquí hay otro consejo: dentro de Scripts en el campo Encabezado, incluya el código que es parte del <head> sección y aplicado en todo el sitio. Esto incluye código de Google Analytics, hojas de estilo o código relacionado <meta> etiquetas, por ejemplo. El resto debe colocarse en la sección "Scripts en pie de página", especialmente si el código JS se ajusta para ser específico de la página.

Sin embargo, si el código no funciona cuando lo agrega a la primera sección, intente eliminarlo y agregarlo a la segunda sección.

Otra forma de agregar código JS es agregarlo directamente a la sección correspondiente.

Agregar secuencias de comandos

Si tiene scripts JS más grandes, puede crear una hoja de estilo (un archivo con extensión .js), cargarlo en la carpeta JS dedicada dentro de su tema e incluir su ruta. Lo más probable es que la ruta sea una de las dos siguientes:

wp-content / themes / theme_name / js

O

wp-content / themes / theme_name / assets / js

Agregue la línea de código con la ruta al archivo cargado. Dependiendo de la ruta, el atributo src variará. Aquí hay dos posibles ejemplos:

<script src="https://qodeinteractive.com/magazine/add-custom-javascript-to-wordpress/your_website_url/wp-content/themes/theme_name>/js/filename.js"></script>

O

<script src="https://qodeinteractive.com/magazine/add-custom-javascript-to-wordpress/your_website_url/wp-content/themes/theme_name>/assets/js/filename.js"></script>

Cuando use esta línea, el código completo del archivo cargado se cargará cuando se ejecute el script.

Agregar secuencias de comandos

Asegúrese de que el código que agrega tenga la apertura <script> y el cierre </script> etiqueta.

Siempre revise su sitio a fondo después de agregar el código JS. Aunque el código JavaScript puede mejorar la funcionalidad de ciertas páginas, puede dañar a otras al pasar por alto los casos atípicos.

Si no cree que este plugin sea el adecuado para usted, le recomendamos que explore la página de plugins de WordPress.org o que nos cuente sus experiencias con los plugins de inclusión de JS en los comentarios.

Ahora pasemos a soluciones más centradas en la codificación. Estos requerirán una comprensión algo más profunda de WordPress, por lo que son una buena opción para los desarrolladores. Si desea probarlos a pesar de no ser un experto en WordPress, intente hacer una investigación adicional para prepararse.

Métodos más avanzados

Finish Design Projects Quickly4662

Antes de mostrarte soluciones de codificación para JavaScript, abordaremos algunas prácticas y hábitos de codificación que debes evitar.

Una mala práctica que debe evitar a toda costa es agregar directamente código JS dentro de los archivos header.php y footer.php de su tema. Esto también se extiende a la inclusión de la ruta del archivo de un determinado archivo JS cargado, tanto dentro de header.php como footer.php.

¿Por qué es tan mala idea? Siempre que se actualice su tema, su código se perderá durante la anulación total de los archivos del tema. Hay formas de evitar esto copiando los archivos header.php y footer.php dentro de un child tema.

Sin embargo, aún puede generar conflictos con los scripts JS cargados con el plugin, razón por la cual no se recomienda este método. Ahora veamos las formas correctas de agregar JavaScript a su sitio web de WordPress.

Cómo crear un efecto de paralaje en Slider Revolution
VER

Un método que se recomienda menos, pero aún mejor que incluir directamente el código, es agregar el código usando los ganchos wp_head y wp_footer. Los Hooks son una forma de cambiar el comportamiento predeterminado de temas, plugins y WordPress, sin cambiar sus archivos de plantilla.

Puede agregar el código tanto dentro del tema como en los plugins, creados específicamente para su sitio. Le recomendamos que utilice functions.php de su child tema, para que pueda conservar los cambios después de las actualizaciones del tema. Otra sugerencia: agregue scripts de código JS más pequeños.

¿Por qué no se recomienda este método? Si bien puede parecer efectivo al principio, agregar demasiado código puede resultar fácilmente difícil de seguir. Además, puede hacer que ciertos scripts se carguen varias veces, disminuyendo la velocidad de su sitio web. Por lo tanto, este método le servirá bien solo con un uso cuidadoso y limitado.

Si está seguro de que desea agregar JavaScript de esta manera, simplemente inserte uno de estos 2 bloques de código dentro de su functions.php (o functions.php de su child theme), dependiendo de si desea conectarse a wp_head o wp_footer.

function my_javascript_code() {
?>
<script>
// your javascript code goes here
</script>
<?php
}
add_action('wp_head', 'my_javascript_code');
Código de enlaces de JavaScript
function my_footer_javascript_code() {
?>
<script>
// your javascript code goes here
</script>
<?php
}
add_action('wp_footer', 'my_footer_javascript_code');
Javascript Hooks Code WP Footer

También es posible aplicar el código JS de forma selectiva, utilizando etiquetas condicionales de WordPress.

Incluiremos dos posibles ejemplos:

  • código específico de la página, para una página llamada "Acerca de nosotros" y
function about_us_javascript_code() {
if ( is_page( 'About Us' ) ) { ?>
<script>
// your javascript code goes here
</script>
<?php }
}
add_action( 'wp_head', 'about_us_javascript_code' );
Código de Wp Head
  • código específico de la publicación, para la publicación con el ID de 30.
function my_post_javascript_code() {
if ( is_single( '30' ) ) { ?>
<script>
// your javascript code goes here
</script>
<?php }
}
add_action( 'wp_head', 'my_post_javascript_code' );
Código de Wp Head

Los ID de las publicaciones son visibles cuando está editando. El número de identificación se encuentra dentro de la URL después de la parte "post =".

ID del mensaje

No hace falta decir que es importante cuidar la sintaxis correcta del código en las etiquetas de apertura y cierre, tanto para PHP como para JavaScript.

Se pueden crear códigos similares y "engancharlos" al gancho wp_footer. El gancho Wp_head se encuentra antes del cierre del </head> etiqueta, mientras que wp_footer se encuentra antes del cierre de la </body> etiqueta. Recomendamos que enganche el código en el gancho wp_footer para evitar la disminución de la velocidad de carga de su sitio web, especialmente si el código es más largo.

Usando wp_enqueue_script

El método más efectivo para agregar código JavaScript a su sitio de WordPress es crear un archivo .js separado, insertarlo en el lugar adecuado y luego usar la función wp_enqueue_script.
Más precisamente, esto significa que agregará wp_enqueue_script a otra función que está conectada a uno de los dos ganchos de carga de scripts de WordPress: wp_enqueue_scripts.

Este método es el preferido por los desarrolladores de cualquier tema bien codificado. Evita las desventajas de los métodos descritos anteriormente, como los conflictos de plugins y la carga del mismo script varias veces. Además, WordPress ofrece una lista de scripts registrados y ampliamente utilizados, con el fin de mejorar aún más este proceso.

De manera similar al método que describimos en la sección anterior, este método requiere lo siguiente:

  • Creando un archivo con la extensión .js
  • Colocar el archivo en el lugar designado dentro del tema o plugin
  • Uso adecuado de la función wp_enqueue_script

Aclararemos las cosas explicando algunos de los posibles usos de esta función.

Como se indica en la descripción, la función wp_enqueue_script tiene 5 parámetros. De estos cinco parámetros, solo se requiere el primero. Ese es el nombre de identificador único.

  • El código que puede ver a continuación pone en cola un script con el identificador "dev-script". La ruta al archivo es wp-content / themes / theme_name / js / devscript.js.
Imagen de Devscript

Los parámetros restantes se establecen en los valores predeterminados. Esto significa que la función no tiene scripts dependientes, su versión es la misma que la versión de WordPress instalada actualmente y se pone en cola antes del cierre de la </head> etiqueta.

El código debe colocarse dentro del archivo functions.php de su tema (padre).

Funciones de Devscript
function my_dev_script() {
wp_enqueue_script( 'dev-script', get_template_directory_uri() . '/js/devscript.js');
}
add_action('wp_enqueue_scripts', 'my_dev_script');
  • El script en cola a continuación tiene el identificador "aparecer", mientras que la ruta al archivo es wp-content / themes / child_theme_name / assets / js / jquery.appear.js. La función depende del script con el identificador "jquery". Su versión es la misma que la versión de WordPress instalada actualmente y está en cola antes de la etiqueta de cierre.

El código debe colocarse dentro del archivo functions.php de su child tema.

function js_appear_script{
wp_enqueue_script( 'appear', get_stylesheet_directory_uri() . '/assets /js/ jquery.appear.js', array( 'jquery' ), false, true );
}
add_action('wp_enqueue_scripts','js_appear_script');
  • El identificador del script es "muy compatible", la ruta al archivo es wp-content / plugins / plugin_name / 'assets / js / compatible.js. La función no tiene scripts dependientes, su versión es 3.5 y está en cola antes de la etiqueta de cierre.

El código debe colocarse en uno de los archivos de su plugin. El mismo plugin donde insertó previamente el archivo .js.

function my_compatible_script() {
wp_enqueue_script('very-compatible', plugins_url('assets/js/compatible.js', __FILE__), array(), '3.5', true);
}
add_action('wp_enqueue_scripts','my_compatible_script');
  • El siguiente código primero registra el script con la función wp_register_script y luego lo pone en cola.

La función wp_register_script tiene los mismos parámetros que wp_enqueue_script, por lo que no requiere explicación adicional. Dados todos los parámetros, la función wp_enqueue_script ya registra el script JS, por lo que no es necesario utilizar wp_register_script.

Sin embargo, el principal beneficio de usar ambas funciones es que se puede dar de baja el mismo script usando wp_deregister_script y luego volver a registrarlo con el mismo identificador y diferentes parámetros restantes.

function register_and_add_script() {
wp_register_script('my-js-script', get_template_directory_uri() . '/assets/js/my_js_script.js', array('jquery'),'3.4.1', true);
wp_enqueue_script('my-js-script');
}
add_action( 'wp_enqueue_scripts', 'register_and_add_script' );

Usando wp_add_inline_script

Este método de agregar código JS se usa mejor junto con el método descrito anteriormente. Si bien el uso de wp_enqueue_script es más adecuado para agregar scripts grandes, wp_add_inline_script es la mejor opción para inclusiones de código JS más pequeñas.

La función Wp_add_inline_script agrega el código JS a un script ya registrado, ya sea al principio o al final. Por tanto, los pasos son los siguientes:

  • Usando wp_enqueue_script
  • Colocar el archivo en la carpeta designada
  • Creando el archivo .js
  • Usando wp_add_inline_script

Ambas funciones deben usarse dentro de una función que "se engancha" a wp_enqueue_scripts.

Aquí hay un ejemplo de este tipo de función. Debe colocarse dentro del functions.php del tema (padre).

function inline_custom_js() {
wp_enqueue_script( 'theme-js-script', get_template_directory_uri() . '/js/modules.js', array( 'jquery' ), false, true );
$custom_js="insert-your-inline-javascript-here";
if ( ! empty( $custom_js ) ) {
wp_add_inline_script( 'theme-js-script', $custom_js );
}
}
add_action( 'wp_enqueue_scripts', 'inline_custom_js' );
1604457061 832 Como agregar JavaScript personalizado a su sitio web de WordPress

Pensamientos finales

Finish Design Projects Quickly4662

En esta guía sobre la inclusión de código JavaScript en WordPress, intentamos cubrir todos los niveles de dificultad y eficiencia. También le hemos dado la oportunidad de sopesar los pros y los contras de cada método.

Dependiendo de sus necesidades y conocimientos, puede encontrar el método que más le convenga. También puede utilizar este tutorial para aprender algo nuevo y conocer un poco mejor su sitio web de WordPress.

Finish Design Projects Quickly4662

Si quieres conocer otros artículos parecidos a Cómo agregar JavaScript personalizado a su sitio web de WordPress puedes visitar la categoría Tutoriales.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

/* */ Subir

Este sitio web utiliza cookies para ofrecerle una mejor experiencia de navegación, si continua en navegando consideramos que acepta su uso.