Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript
Webdesign

Cómo añadir JavaScript personalizado a tu sitio WordPress

by
Length:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Si quieres mejorar la funcionalidad del front-end de tu sitio WordPress, tendrás que añadirle JavaScript, con independencia de que estés utilizando una biblioteca de terceros o un script personalizado. Según tus objetivos y conocimientos de codificación, puedes elegir entre un par de técnicas para añadir JavaScript personalizado en WordPress, desde el uso de plugins hasta la conexión de scripts personalizados a diferentes ganchos de acción.

En este tutorial, examinaremos cada método, veremos cómo funcionan y cuándo debes usar cada uno de ellos.

Añadir JavaScript personalizado a WordPress

Aunque puedes usar el personalizador que viene integrado en WordPress para añadir CSS personalizado a tu tema, no puedes hacer lo mismo con JavaScript. Para añadir JavaScript personalizado a tu sitio WordPress, debes usar un plugin o editar el archivo functions.php de tu tema (hijo). Vamos a echar un vistazo en detalle a ambas opciones, pero aquí tienes un breve resumen.

1. Puedes utilizar diferentes tipos de plugins para añadir JavaScript personalizado a WordPress:

  • plugins para editar las plantillas de cabecera (archivo header.php) y de pie de página (archivo footer.php)
  • plugins para añadir código JS personalizado a WordPress
  • plugins específicos de scripts para añadir y configurar scripts de terceros como Google Analytics o AdSense

2. O puedes utilizar funciones y ganchos de WordPress en el archivo functions.php:

  • los ganchos de acción wp_head y wp_footer
  • los ganchos de acción wp_enqueue_scripts, admin_enqueue_scripts y login_enqueue_scripts
  • la función de WordPress wp_enqueue_script()

Una cosa que nunca deberías hacer

A pesar de que la forma más fácil de añadir un script personalizado a tu sitio de WordPress consiste en dejar caer una etiqueta <script> directamente bien en tu archivo de plantilla header.php o footer.php, nunca deberías hacerlo. Esto se debe a que WordPress tiene una secuencia de carga concreta que debería ser respetada en cualquier circunstancia.

Si insertas tu JavaScript personalizado directamente en tu plantilla de cabecera o de pie de página, podría causar conflictos con tu tema, con los plugins que se ejecutan en tu sitio o con el núcleo de WordPress. En su lugar, debes usar una de las técnicas detalladas en este artículo.

Por lo tanto, nunca añadas una línea como la siguiente en tu archivo header.php o footer.php, ni siquiera aunque puedas hacerlo técnicamente:

1. Utiliza un plugin para añadir JavaScript personalizado a WordPress

El uso de un plugin es el método recomendado cuando:

  • no quieras editar directamente los archivos fuente,
  • desees añadir JavaScript que sea independiente del tema, de manera que puedas mantenerlo incluso si decides cambiar y utilizar un nuevo tema.

Puedes utilizar diferentes tipos de plugins para añadir JavaScript personalizado a tu sitio WordPress.

1.1. Plugins para editar header.php y footer.php

La primera opción consiste en utilizar un plugin que te permita editar los archivos de plantilla de cabecera y pie de página de tu tema WordPress. Si deseas añadir scripts que se carguen antes que el contenido de la página, como scripts de análisis y seguimiento, debes editar la plantilla de cabecera, mientras que los scripts que se cargan después del contenido deben incluirse en la plantilla del pie de página. Normalmente, cuando el script modifica un elemento que se muestra en la página, como un script para una galería de imágenes, debe colocarse en el pie de página.

Insert Headers and Footers es un buen ejemplo de un plugin que te permite editar plantillas de cabecera y pie de página. Tiene una interfaz de usuario sencilla, con sólo dos campos de texto: uno para la cabecera y otro para los scripts de pie de página. Este plugin añade los scripts a los ganchos de acción wp_head o wp_footer.

Puedes insertar cualquier tipo de script en los dos campos de entrada. Debes incluir los scripts con las etiquetas de apertura y cierre, <script></script>. Además, también puedes usar este plugin para añadir CSS personalizado a tu plantilla de cabecera, solo necesitas encerrarlo dentro de la etiqueta <style></style> (ten en cuenta que el CSS siempre debe añadirse en la cabecera).

Insert Headers and Footers plugin for WordPress

1.2. Plugins para añadir JavaScript personalizado

Otra opción es optar por un plugin que te permita añadir JavaScript personalizado a tu sitio WordPress. Estos plugins son muy similares a los plugins de edición del archivo de cabecera "header.php", y del pie de página "footer.php", y la mayoría de ellos utilizan también los ganchos de acción wp_head y wp_footer. Sin embargo, por lo general te proporcionan más opciones de configuración.

Por ejemplo, el plugin Simple Custom CSS and JS te permite definir el permalink para tus archivos JavaScript personalizados, guardarlos en la carpeta wp-content/, administrar tus scripts como un tipo de entrada personalizada y mucho más. Si deseas añadir varios archivos JavaScript personalizados a tu sitio WordPress y mantenerlos organizados, este tipo de plugins te resultarán de gran utilidad.

Custom CSS and JS plugin

1.3. Plugins específicos para scripts

Por último, si deseas añadir solo un script de terceros a tu sitio, también puede comprobar si este tiene ya un plugin concreto para su integración con WordPress. Los creadores de populares bibliotecas JavaScript de terceros suelen publicar con frecuencia un plugin gratuito en el repositorio de WordPress.org para que puedas añadir fácilmente su herramienta a tu sitio. La mayor ventaja de este tipo de plugins es que vienen con opciones de configuración integradas para esa biblioteca JavaScript en concreto.

Por ejemplo, el popular plugin GA Google Analytics te permite añadir Google Analytics a tu sitio desde el área de administración de WordPress. Viene con funciones integradas específicas del script de Google Analytics, como la atribución mejorada de enlaces, la anonimización de IP, y los objetos de seguimiento personalizados entre otros.

GA Google Analytics plugin for WordPress

2. Edita el archivo functions.php de tu tema hijo

Además de apoyarte en plugins, también puedes usar las funciones integradas y los ganchos de acción del propio WordPress para añadir JavaScript personalizado a tu sitio. En este caso, debes editar tu archivo functions.php y cargar los scripts manualmente en tu servidor. También es recomendable crear un tema hijo para las modificaciones personalizadas que realices de manera que puedas actualizar el tema principal que estés usando de forma segura y sin perder tu código personalizado. Puedes cargar tus scripts personalizados en la carpeta raíz de tu tema hijo o, si tienes más de un script, puedes crear una carpeta denominada scripts en la que incluirlos todos.

Debes añadir el código PHP que pone en cola o imprime tu JavaScript personalizado en el archivo functions.php de tu tema hijo. Puedes editar este archivo en tu editor de código y cargar manualmente la versión actualizada en tu servidor, o editarlo directamente a través del menú Apariencia > Editor de temas de tu área de administración de WordPress (ver en la siguiente captura de pantalla).

WordPress Admin Theme Editor

2.1. Pon en cola tus scripts personalizados con la función wp_enqueue_script()

Para agregar scripts personalizados a tu sitio, el Manual de temas de WordPress ("WordPress Theme Handbook") recomienda la función wp_enqueue_script(). Esta función integrada respeta la secuencia de carga de WordPress y pone en cola tus scripts personalizados en el orden adecuado, por lo que no entrarán en conflicto con otros scripts cargados por el propio núcleo de WordPress ni por los plugins que se ejecuten en tu sitio.

Con wp_enqueue_script(), puedes añadir tu JavaScript personalizado tanto a las plantillas de cabecera (header.php) como al pie de página (footer.php). De forma predeterminada, pone en cola los scripts en la sección <head> de la página cargada por la plantilla de cabecera.

Si deseas añadir el script a la cabecera, solo tienes que definir un identificador personalizado ('custom' en el ejemplo siguiente) y la ruta de acceso al script. Como puedes ver a continuación, también he utilizado la función de WorPress get_stylesheet_directory_uri() para obtener el URI del directorio de temas secundarios. Además, la función add_action() añade la función personalizada tutsplus_enqueue_custom_js() al gancho de acción wp_enqueue_scripts que te permite poner en cola los scripts personalizados que desees mostrar en el front-end de tu sitio.

Ten en cuenta que aunque la función incorporada de WordPress wp_enqueue_script() y el gancho de acción wp_enqueue_scripts tienen casi el mismo nombre, son dos cosas diferentes.

Además de encolar scripts en la cabecera, también puedes utilizar la función wp_enqueue_script() para añadir JavaScript personalizado a la plantilla del pie de página. Sin embargo, en este caso, debes definir también todos los parámetros opcionales, respectivamente:

  1. las dependencias – array() ya que no tenemos dependencias por ahora,
  2. la versión del script – false ya que no queremos añadir números de versión,
  3. dependiendo de si esto es para la plantilla de cabecera o de pie de página – true ya que hemos cambiado a la plantilla de pie de página y esta no es la opción predeterminada.

Si el script personalizado tiene dependencias, debes añadirlas al parámetro array() de la función wp_enqueue_script(). Hay un par de populares scripts y bibliotecas, como jQuery, que ya están registrados por el núcleo de WordPress, por lo que puedes añadirlos usando su identificador registrado ('jquery' en el ejemplo siguiente).

Si tienes una dependencia que no está registrada por WordPress, tendrás que registrarla y ponerla en cola con otra función wp_enqueue_script(), antes de poder añadirla como una dependencia usando su identificador personalizado.

Si deseas ejecutar el script en el área de administración en lugar del front-end de tu sitio, debes usar el gancho de acción admin_enqueue_scripts en lugar de wp_enqueue_scripts en la función add_action(). Y para la pantalla de inicio de sesión, debes usar el gancho de acción login_enqueue_scripts que pone en cola los scripts personalizados solo para la página de inicio de sesión.

2.2. Publica tu script en línea con los ganchos de acción wp_head o wp_footer

Aunque la documentación de WordPress recomienda usar la función wp_enqueue_script() para los scripts personalizados, también puedes añadir scripts incrustados en línea a tu sitio con los ganchos de acción wp_head y wp_footer. En lugar de encolar los scripts personalizados, estos ganchos solo los publican en la plantilla de la cabecera o el pie de página. Por lo tanto, solo debes usar esta técnica para añadir scripts en línea, pero no para archivos .js externos.

Así es como puedes utilizar el gancho de acción wp_head para publicar un script en línea en la plantilla de cabecera:

Y, así es como puedes utilizar el gancho de acción wp_footer para publicar un script en línea en la plantilla de pie de página:

Como wp_head y wp_footer solo se activan en el front-end de tu sitio, los scripts añadidos con estos ganchos no se cargarán en el área de administración y la página de inicio de sesión. Para añadir scripts en línea personalizados a tu área de administración, deberías utilizar los ganchos de acción admin_head y admin_footer en la función add_action(). Y, si deseas publicar scripts en la página de inicio de sesión, utiliza los ganchos de acción login_head y login_footer.

Ten en cuenta que los plugins antes mencionados (Insert Headers and Footers y Simple Custom CSS and JS) utilizan wp_head y wp_footer no sólo para los scripts en línea, sino también para archivos .js externos, pero aún así no debes hacer esto último a menos que realmente sepas lo que está haciendo. Esto se debe a que los plugins ejecutan comprobaciones adicionales que se aseguran de que la secuencia de carga de WordPress es respetada. Si deseas añadir tus scripts personalizados manualmente, es mucho más seguro y más fácil utilizar la función recomendada wp_enqueue_script().

Resumiendo

Puedes añadir JavaScript personalizado a tu sitio WordPress mediante el uso de un plugin, editando el archivo functions.php de tu tema o del tema hijo.

Si no deseas editar tus archivos de origen, la técnica recomendada es el uso de un plugin, ya que los plugins se aseguran de que tus scripts personalizados se carguen en el orden correcto. Poner manualmente en cola tus scripts en el archivo functions.php te permite vincular tus scripts personalizados a tu tema y mantener todo en orden sin tener que añadir otro plugin a tu sitio WordPress.

Mejores temas y plugins de WordPress en Envato Market

Explora entre miles de los mejores temas jamás creados para WordPress en ThemeForest y los plugins más punteros para WordPress en CodeCanyon. Comprar estos temas y plugins de alta calidad para WordPress puede mejorar la experiencia de tu sitio web tanto para ti como para tus visitantes.

Estos son algunos de los temas y plugins de WordPress más vendidos y prometedores para el 2020 disponibles actualmente.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.