Cómo agregar Javascript (archivos o scripts) sin romper su sitio de WordPress (functions.php, plantilla o complemento)

Agregar Javascript a WordPress

Por lo general, hay muchas razones por las que desea agregar Javascript a WordPress, ya sea un pequeño ajuste a una función o tal vez esté buscando agregar un script de terceros. Respectoless De la razón por la que desea hacerlo, debe asegurarse de no equivocarse, ya que podría arruinar su sitio web.

Existe una buena forma de agregar Javascript a WordPress. Y luego están las malas formas, que podrían romper su sitio web o crear un impacto negativo en el rendimiento.

En este artículo, sugeriremos varias formas diferentes de agregar código Javascript a sitios web y cuáles deben usarse en las diferentes circunstancias que pueda encontrar.

 

 

WordPress es tan extensible que le permite agregar fácilmente nuevas características y funcionalidades a su sitio web sin tener que rediseñar o reemplazar todo su tema. En lugar de recrear el tema de WordPress desde cero, puede agregar la funcionalidad simplemente agregando complementos.

Y si la funcionalidad que desea agregar es bastante pequeña y no es necesario crear o instalar un complemento, puede usar el archivo functions.php o varias otras formas de agregar Javascript a WordPress sin tener que crear un complemento por separado.

(Nota especial: ¿Está buscando una lista de ajustes / trucos que pueda realizar fácilmente en su sitio de WordPress sin utilizar un complemento? Puede consultar nuestra guía aquí: 101 trucos de WordPress que todo bloguero serio debe saber.)

Lo mejor de la archivo de funciones es que actúa como un complemento, que se puede usar para agregar características y extender la funcionalidad tanto del tema como del propio WordPress.

Aunque puedes agregar fácilmente Código javascript directamente a tu archivo header.php, hay un problema con este método.

De hecho, puede causar conflictos con otros complementos cuando cargan sus propios scripts JS.

En este artículo de CollectiveRay, echamos un vistazo a la forma correcta de agregar javascript a los temas de WordPress. Como desarrolladores de WordPress, esta es una de las cosas que tendremos que hacer muy a menudo.

Si no está seguro de poder modificar el código usted mismo, le recomendamos que consulte este artículo para aprender cómo contratar al mejor desarrollador de WordPress para su negocio: https://www.collectiveray.com/wordpress-developers-for-hire, o descubra las siguientes opciones de desarrollo económicas. 

Si no está seguro de si esto es adecuado para usted y qué hacer rápidamente, consulte algunos conciertos de Fiverr que pueden hacerlo por usted rápidamente.

logotipo de Fiverr

Haga clic aquí para encontrar expertos baratos en correcciones de WordPress

 

Cómo agregar JavaScript a WordPress

Hay varias formas de agregar código Javascript personalizado a su sitio de WordPress, cada una con sus propios usos:

  1. Agregue el script a una página específica o única de su elección, o a varias páginas usando functions.php
  2. Agregue un script en páginas seleccionadas usando complementos como encabezados y pies de página
  3. Agregue un archivo Javascript al encabezado de su tema

1. Usando functions.php

Una sola página o publicación

Este ajuste de código utilizará el funciones archivo que se encuentra en la carpeta de su plantilla para agregar un archivo .JS de su propia elección a una sola página de su propia elección solamente.

Esto usa la función IS_PAGE que puede encontrar aquí: https://developer.wordpress.org/themes/basics/conditional-tags/. En realidad, puede usar varias otras opciones si desea agregar el script solo en condiciones específicas, como:

  • is_single(),
  • is_front_page(),
  • is_home,
  • is_admin etc. 

Si prefiere ver un video en YouTube sobre cómo hacer esto, este breve video es bastante bueno, sobre cómo agregar Javascript a una sola página:

Fw6VDOZYqrM

Tenemos instrucciones detalladas en la página, por lo que una vez que haya visto el video, puede usar este artículo como referencia.

Si necesita agregar el archivo a todas las páginas, continúe desplazándose para encontrar otras alternativas a este método a continuación.

  • Primero, deberá identificar el ID de la página a la que desea agregar el script. Para hacer esto, vaya a la página a la que desea agregar el archivo, haga clic en Editar y luego obtenga el ID de la página de la URL como puede ver a continuación. El ID es el número que se encuentra en la URL de la barra del navegador.
  • ID de página de wordpress

  • Ahora que tiene el ID de la página, deberá cargar el archivo .js en una ubicación. Le recomendamos que cargue el archivo .js en la carpeta de su plantilla, tal vez en el directorio secundario.
  • Una vez que haya subido eso, debe tomar nota exactamente del directorio y el nombre del archivo .JS, que usamos en lugar de PATH_TO_JS_FILE a continuación. Como ejemplo, su archivo podría estar en: https://www.yourwebsite.com/wp-content/themes/twentynineteen/js/myjsfile.js
  • Tome nota completa de esa URL completa y reemplace el PATH_T_JS_FILE a continuación. También deberá reemplazar la identificación que ha encontrado arriba.
  • Agregue el código completo a continuación al final de la funciones archivo de su plantilla.

función collectiveray_load_js_script () {
  if (is_page (ID)) {
    wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', array ('jquery'), '', falso);
    // o use la versión siguiente si sabe exactamente dónde está el archivo
    // wp_enqueue_script ('archivo-js', get_template_directory_uri (). '/js/myscript.js');
  }
}

add_action ('wp_enqueue_scripts', 'collectiveray_load_js_script ');

Si sabe exactamente dónde ha colocado el archivo JS, puede usar una ligera variación de wp_enqueue_script: 

wp_enqueue_script ('archivo-js', get_template_directory_uri (). '/js/myscript.js');

En este caso, el archivo /js/mysript.js es la ubicación del archivo que desea agregar.

Una vez que vuelva a cargar la página, encontrará que se ha agregado el archivo. Puede confirmar esto haciendo clic en Ver código fuente de la página.

Si en lugar de agregar el archivo Javascript a una página, desea agregarlo a una sola página, podemos usar un pequeño ajuste de esta función para que se aplique a una sola publicación. Puede utilizar cualquier variación de lo siguiente:

  • is_single ('17') - usa el ID de la publicación
  • is_single ('Título de mi publicación') - usa el título de la publicación para verificar si esta es la publicación a la que agregar el archivo
  • is_single ('mi-título-post') - cheques contra la babosa del poste
  • is_single (array (17, 'my-post-title', 'Mi título de la publicación')) - esto verifica si alguna de las condiciones ID de publicación es "17", slug es "my-post-title" o si el título es "Mi título de publicación"
  • es soltera() - otras variaciones de la función is_single usando una matriz de valores para comparar

El código, en este caso, sería el siguiente o una ligera variación en función de los parámetros de la función is_single. 

función collectiveray_load_js_script () {
  if (is_single ('17 ')) {
    wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', array ('jquery'), '', falso);
    // o use la versión siguiente si sabe exactamente dónde está el archivo
    // wp_enqueue_script ('archivo-js', get_template_directory_uri (). '/js/myscript.js');
  } 
}

add_action ('wp_enqueue_scripts', 'collectiveray_load_js_script ');

Si tiene el título de la publicación, puede usarlo en lugar del parámetro "17". Una vez más, wp_enqueue_script también se puede modificar para:

wp_enqueue_script ('archivo-js', get_template_directory_uri (). '/js/myscript.js');

Agregar Javascript a todas las páginas 

Como hemos visto, el método más fácil y limpio para agregar un archivo javascript a su tema de WordPress es usar functions.php archivo con wp_enqueue_script. En este caso, en lugar de crear una condición para agregar el contenido a páginas específicas, agregaremos una función genérica.

He aquí cómo hacerlo:

Abra su functions.php archivo y copie el siguiente fragmento de código. Asegúrese de reemplazar la URL de la plantilla con la suya antes de guardar.

función collectiveray_theme_scripts_function () {
  wp_enqueue_script ('archivo-js', get_template_directory_uri (). '/js/myscript.js');
}
add_action ('wp_enqueue_scripts', 'collectiveray_theme_scripts_function ');

Si eres usando un tema hijo, deberá usar get_stylesheet_directory_uri () en lugar de get_template_directory_uri () 

2. Usar complementos

Si simplemente desea usar un complemento para incrustar una referencia de javascript al archivo de encabezado o pie de página del tema de WordPress, el complemento 'Insertar encabezados y pies de página' es una opción fácil.

Como su nombre lo dice, le permite agregar scripts a los archivos de encabezado y pie de página al conectarse a wp_head y wp_footer funciones de WordPress. 

Este complemento es una buena opción porque le permite agregar cualquier script sin correr ningún riesgo de romper cosas. Además, no tiene que cambiar ni modificar ningún código usted mismo (si no se siente cómodo haciéndolo), como tuvimos que hacer en el ejemplo anterior.

Cambiar el código directamente suele ser una mejor opción para los diseñadores web. El método que utiliza este complemento es más sencillo.

En lugar de modificar los archivos del tema directamente con el código Javascript personalizado, el complemento le permite insertar el código, que luego se agregará al encabezado o al pie de página de su sitio, según las opciones que haya elegido. 

Este complemento admite dos opciones:

  1. Agregar la ruta a un archivo Javascript específico que cargue
  2. Agregar el script directamente (por ejemplo, para Analytics u otros scripts de terceros)

Empecemos: 

Puedes descargar Insertar encabezados y pies de página aquí.

Instale el complemento:

  • Inicie sesión en el backend o administrador de su sitio.
  • Vaya a Complementos> Agregar nuevo
  • Busque el complemento "Encabezados y pies de página" y haga clic en Instalar ahora.
  • Una vez que se haya instalado, haga clic en Activar
Encabezados y pies de pagina
Dependiendo de su escenario, ahora debe seguir la opción 1 o 2. Por ejemplo, para agregar Google Analytics, debe seguir la opción 2.

Opción 1: cargar un archivo Javascript personalizado

  • Primero, debe preparar el archivo para su inclusión
  • Guarde su archivo o código JavaScript en un nuevo archivo de prueba con la . Js extensión.
  • Súbelo a su sitio en la siguiente carpeta: wp-content / themes / / js /
  • Vaya a Configuración> Insertar encabezados y pies de página.

Ahora tenemos un par de opciones para cargar nuestro archivo:

  1. Scripts en el encabezado (cargar dentro etiqueta)
  2. Scripts en pie de página (cargar antes de cerrar etiqueta)

Utilice la ubicación que mejor se adapte a sus necesidades específicas utilizando el siguiente ejemplo. Tenga en cuenta que debe cambiarse por el nombre del directorio del tema que está utilizando, por ejemplo, veintidós

/js/file.js">
 
Insertar guión en la cabeza
  • Haga clic en el botón "Guardar" para finalizar y guardar.

Opción 2: cargar un script personalizado sin un archivo

La segunda opción que puede usar con este complemento, es la opción de agregar el código directamente en WordPress sin la necesidad de usar un archivo específico.

Esto se puede usar cuando está utilizando un servicio de terceros, como Google Analytics, Drip u otra herramienta que necesita que se agregue algún script a su sitio. Simplemente tome el guión y colóquelo en el Secuencias de comandos en el encabezado ventana:

agregar script / código directamente
 
Una vez más, haga clic en "Guardar" para finalizar.

 

Vuelva a cargar el front-end y verifique la fuente de su sitio web para asegurarse de que se muestre el código. También es una buena idea navegar por algunas páginas para confirmar que todo sigue funcionando bien.

 

Aunque esto parece bastante simple, podría estar fuera de su zona de confort, por lo que si desea hacerlo rápidamente, consulte a algunos desarrolladores de Fiverr que pueden hacerlo por usted.

logotipo de Fiverr

Haga clic aquí para encontrar expertos baratos en correcciones de WordPress

 

Si este consejo le resultó útil, es posible que desee consultar más de nuestros consejos de WordPress en el menú correspondiente en la parte superior de la página.

3. Agregue JavaScript al encabezado de su tema

En ciertos casos, es posible que desee que el archivo JavaScript se use en todo su sitio, pero no desea usar un complemento para hacer esto.

Por ejemplo, si desea agregar una secuencia de comandos de terceros en todas sus páginas (por ejemplo, la secuencia de comandos instantpage.js para hacer que su sitio web sea más rápido), puede insertar la secuencia de comandos o agregar el archivo de secuencia de comandos al que se hace referencia en el head de tu header.php archivo de plantilla. 

ESTO NO ES IDEAL. Si actualiza su tema, es posible que pierda estos cambios. Si aún desea hacer esto directamente, es muy recomendable que cree un tema hijo.

Para este escenario, donde desea que este script se agregue en todas partes, puede agregar el archivo directamente a la plantilla según las instrucciones a continuación:

Esta llamada al archivo (o script) debe agregarse entre las metaetiquetas y el enlace de la hoja de estilo. Esto es exactamente lo mismo que si estuviera agregando código Javascript en cualquier página HTML. 

Para "agregar" el archivo Javascript a su sitio, en el head, usa el siguiente código:


Asegúrese de haber definido el type correctamente, de lo contrario su sitio no será válido. También asegúrese de que el directorio / scripts exista en el tema y que le haya agregado myscript.js.

Luego, puede agregar cualquier referencia a las funciones utilizadas dentro del archivo que acaba de agregar al HTML donde necesita usarlo. 

Por ejemplo, este es un ejemplo del uso de la función que acaba de agregar.

" >El rumbo va aquí

 

Descargue la lista de 101 trucos de WordPress que todo bloguero debe conocer

101 trucos de WordPress

Haga clic aquí para descargar ahora
 

Preguntas Frecuentes

¿Cómo agrego un archivo Javascript a WordPress?

La forma más fácil de agregar un archivo Javascript a WordPress es utilizando el complemento Insertar encabezados y pies de página. 

  • Inicie sesión en su sitio e instale el complemento Encabezados y pies de página.
  • Una vez que se haya instalado, haga clic en Activar
  • Guarde su archivo o código JavaScript en un archivo nuevo con la . Js extensión.
  • Súbelo a su sitio en la siguiente carpeta: wp-content / themes / / js /
  • Vaya a Configuración> Insertar encabezados y pies de página.
  • Agregue lo siguiente a las secuencias de comandos en el encabezado:  <script src="https://www.website.com/wp-content/themes/<theme-you-are-using>/js/file.js"></script>

 

¿Puedo usar Javascript en WordPress?

Sí, hay muchas formas de usar Javascript en WordPress. Si desea agregar una secuencia de comandos simple, puede usar el complemento Insertar encabezados y pies de página para agregar la secuencia de comandos al encabezado y luego llamar la secuencia de comandos desde cualquier parte del tema, publicación o complemento desde donde necesite usarla.

¿Cómo agrego mi propio código a WordPress?

La mejor manera de agregar su propio código a WordPress es a través del archivo functions.php. Se recomienda que cree un tema hijo y luego agregue sus propias modificaciones al tema hijo para que no interrumpa la capacidad de actualización de su tema.

¿Cómo edito Javascript en WordPress?

La mejor manera de editar Javascript en WordPress es creando un tema hijo, luego agregue sus ediciones de Javascript o personalización de otras funciones en el tema hijo. Esto le permite editar Javascript según sea necesario sin romper el resto de su tema o la capacidad de actualización del tema.

Conclusión

Los tres métodos anteriores son la forma más limpia de agregar Javascript a WordPress. En general, el ajuste directo del código debe ser realizado por usuarios avanzados que tengan una experiencia significativa en el código y puedan estar seguros de que saben cómo revertir cualquier cambio que hayan realizado. De lo contrario, es mejor ceñirse a los complementos. Si no se siente cómodo modificando el código usted mismo, sería genial ponerse en contacto con nuestros socios en Fiverr, quienes pueden hacerlo hoy mismo.

logotipo de Fiverr

Haga clic aquí para encontrar expertos baratos en correcciones de WordPress

 

Sobre el autor
David Attard
Autor: David AttardPagina Web: https://www.linkedin.com/in/dattard/
David ha estado trabajando en o alrededor de la industria digital / en línea durante los últimos 18 años. Tiene una vasta experiencia en las industrias de software y diseño web utilizando WordPress, Joomla y los nichos que los rodean. Como consultor digital, su enfoque es ayudar a las empresas a obtener una ventaja competitiva utilizando una combinación de su sitio web y plataformas digitales disponibles en la actualidad.

Una cosa más... ¿Sabías que las personas que comparten cosas útiles como esta publicación también se ven IMPRESIONANTES? ;-)
Por favor deja un eficiente Comente con sus pensamientos, luego comparta esto en su (s) grupo (s) de Facebook que lo encontrarán útil y cosechemos los beneficios juntos. ¡Gracias por compartir y ser amable!

Divulgación: Esta página puede contener enlaces a sitios externos para productos que amamos y recomendamos de todo corazón. Si compra productos que le sugerimos, es posible que ganemos una tarifa de referencia. Tales tarifas no influyen en nuestras recomendaciones y no aceptamos pagos por reseñas positivas.

Autor (es) destacado en:  Logotipo de la revista Inc   Logotipo de Sitepoint   Logotipo de CSS Tricks    logotipo de webdesignerdepot   Logotipo de WPMU DEV   y muchos más ...