Agregar Javascript al sitio de WordPress: 3 formas sencillas (publicaciones/páginas)

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 quiere hacerlo, quiere asegurarse de no hacerlo mal, porque podría romper su sitio web o crear un cuello de botella en el rendimiento.

No es posible agregar Javascript a las páginas y publicaciones de WordPress directamente, por lo que sugeriremos varias formas diferentes de agregar código Javascript a los sitios web y cuáles deben usarse en las diferentes circunstancias que pueda encontrar. 

Si tiene prisa, use la tabla de contenido a continuación para desplazarse a la parte relevante del artículo.

 

Este artículo incluye cambios en el código de WordPress. Si no está seguro de poder modificar el código usted mismo, le recomendamos que consulte este artículo para aprender a 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 un script en páginas seleccionadas usando un complemento como WPCode
  2. Agregue el script a una página específica o única de su elección, o a varias páginas usando functions.php
  3. Agregue un archivo Javascript al encabezado de su tema

Veamos cada uno de estos métodos en detalle.

1. Use un complemento como WPCode

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

Como su nombre lo indica, le permite agregar pequeños fragmentos de código, como secuencias de comandos, a los archivos de encabezado y pie de página, que es donde deben estar la mayoría de las veces. 

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 varias opciones diferentes, por lo que solo describiremos las más comunes que necesitará usar.

Puede descargar código WP aquí o instálelo usando la función Instalar complementos de WordPress.

Instale el complemento WPCode:

  • Inicie sesión en el backend o administrador de su sitio.
  • Vaya a Complementos> Agregar nuevo
  • Busque el complemento "WPCode" y haga clic en Instalar ahora.
  • Una vez que se haya instalado, haga clic en Activar

instalar wpcode

 

Ahora puede cargar una secuencia de comandos personalizada sin un archivo (por ejemplo, para agregar una secuencia de comandos que se le haya proporcionado, como Google Analytics) o cargar un archivo de Javascript personalizado. 

La opción más común que puede usar con este complemento es la opción de agregar el código directamente en WordPress.

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 Encabezado y pie de página globales ventana.

Puede optar por agregar la secuencia de comandos a Encabezado, Cuerpo o Pie de página. Debe recibir orientación del proveedor del script en cuál de estas secciones necesita agregar el script.

Digamos que desea agregarlo al encabezado:

agregando código javascript al encabezado de wordpress

Haga clic en "Guardar cambios" para finalizar.

El complemento WPCode ahora agregará el código a cada página de su sitio web.

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.

WPCode también le permite crear sus propios fragmentos de código.

También puede insertar fragmentos de código en cualquier lugar de su sitio web, como publicaciones o páginas internas, antes o después de una publicación, antes o después del contenido, o una serie de otras opciones que pueda necesitar.

Simplemente vaya a Fragmentos de código > Agregar fragmento y luego seleccione 'Crear el suyo propio'.

añade tu código personalizado

Ahora accederá a la página 'Crear fragmento personalizado' donde puede asignar un título a su código y pegarlo en el cuadro 'Vista previa del código'.

crear un fragmento de javascript personalizado

Luego, en el menú desplegable 'Tipo de código', seleccione 'Fragmento de JavaScript'.

fragmento de javascript

Luego, simplemente desplácese hacia abajo hasta llegar al área de 'Inserción'.

Todo lo que queda es elegir una 'Ubicación' para el código en el menú desplegable. Busque 'Página, Publicación, Tipo de publicación personalizada' y especifique dónde desea que se muestre el código en la página o publicación.

Si desea que WPCode coloque el fragmento antes o después de un párrafo, puede especificar qué párrafo en la publicación debe aparecer antes o después.

Si ingresa 1 en el campo 'Insertar número', por ejemplo, el fragmento de código aparecerá antes o después del primer párrafo. Para el segundo párrafo, use 2, y así sucesivamente.

Después de eso, simplemente cambie el interruptor cerca de la parte superior de la pantalla a 'Activo' y luego haga clic en la opción 'Guardar fragmento' al lado.

¡Eso es todo lo que necesita para obtener su muestra de código en línea!

La principal ventaja de usar un complemento es que es una opción amigable para principiantes. No necesita preocuparse por editar los archivos de su tema. El complemento WPCode también puede ser útil si está buscando una costuraless manera de agregar otros tipos de código y CSS personalizado.

Sin embargo, la desventaja de este método es que implica la instalación de un complemento de terceros, que algunos propietarios de sitios intentan evitar. Si desea mantener sus extensiones al mínimo, es mejor que utilice uno de los otros métodos.  

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

logotipo de Fiverr

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

 

2. 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:

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 usted usando un tema hijo, deberá usar get_stylesheet_directory_uri () en lugar de get_template_directory_uri () 


Con este método, no necesita instalar otro complemento si edita su archivo functions.php. Este método también se puede usar para agregar funciones y funciones tanto a su tema como a WordPress. Este enfoque, por ejemplo, puede instalar JavaScript en una sola publicación o página o en todas las páginas.

La principal desventaja de esta estrategia es que requiere que usted se ocupe del código y actualice los archivos de su sitio web. Por ello, si careces de experiencia en este campo, puede que no sea la alternativa ideal.

logotipo de Fiverr

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

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 título va aquí

 

Usando el gancho wp_head para agregar JavaScript personalizado


También puede agregar JavaScript personalizado a su encabezado usando el wp_head gancho de acción Una vez más, esta solución no es la preferida porque genera una cantidad excesiva de secuencias de comandos. lo es, nuncaless, preferible a insertar manualmente los scripts en su archivo header.php.

Este método, que también se puede usar para el pie de página, utiliza los ganchos de acción para insertar secuencias de comandos en línea en su sitio. A diferencia de la función wp enqueue script, que pone en cola scripts personalizados, el método wp head imprime los scripts en su plantilla de encabezado (y pie de página, si usa el wp_footer gancho).

Para comenzar, navegue a su archivo functions.php y copie y pegue el siguiente código:

función colectivo_personalizado_javascript() { ?>

<?php } add_action('wp_head', 'collective_custom_javascript');

 

Vale la pena señalar que el gancho de cabeza wp solo funciona en la parte frontal de su sitio web. Esto implica que cualquier JavaScript personalizado agregado a través de este enfoque no aparecerá en las áreas de administración o inicio de sesión. Sin embargo, si desea agregar JavaScript a esas ubicaciones, puede hacerlo utilizando los ganchos de acción del encabezado de administrador y del encabezado de inicio de sesión.


A los desarrolladores les gusta la función wp enqueue script porque evita los conflictos que pueden ocurrir con otras soluciones, como agregar scripts directamente a su archivo header.php. Además, esta solución no genera scripts dependientes.

El principal problema de agregar JavaScript de WordPress personalizado al encabezado de su sitio es que puede interferir con otros complementos que cargan sus propios scripts. Esta configuración también puede hacer que varias secuencias de comandos se carguen varias veces, lo que podría ralentizar la velocidad y el rendimiento general de su sitio web.

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

101 trucos de WordPress

Haga clic aquí para descargar ahora

Agregar Javascript al video de WordPress

¿Quiere ver cómo agregar Javascript a WordPress en un video de YouTube? Este es un buen reloj:

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.

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, pero 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.

(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.)

Preguntas Frecuentes

¿Qué es Javascript?

JavaScript es un lenguaje informático que se ejecuta en el navegador del usuario en lugar de en su servidor. La programación del lado del cliente permite a los desarrolladores lograr una variedad de cosas interesantes sin ralentizar su sitio web. Es posible que se le solicite con frecuencia que copie y pegue un fragmento de código JavaScript en su sitio web de WordPress si desea incrustar un reproductor de video, agregar calculadoras o algún otro servicio de terceros.

¿Cómo agrego un archivo Javascript a WordPress?

La forma más fácil de agregar un archivo Javascript a WordPress es usando el complemento Insertar WPCode. 

  • Inicie sesión en su sitio e instale el complemento WPCode.
  • 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 código WP
  • 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 un script simple, puede usar el complemento Insertar WPCode para agregar el script al encabezado, luego llamar al script desde cualquier parte del tema, publicación o complemento desde el que necesite usarlo.

¿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 la autora
David Atard
Autor: David AtardPagina 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 ...