Agregar JavaScript a tus páginas o publicaciones de WordPress puede mejorar la funcionalidad y la participación del usuario. Sin embargo, WordPress no te permite insertar JavaScript directamente en tu contenido de forma predeterminada.
Entendemos que esta limitación puede ser frustrante, especialmente si deseas personalizar tu sitio con funciones interactivas o scripts de seguimiento.
Afortunadamente, existen formas sencillas de agregar JavaScript a tu sitio de WordPress. Puedes aplicarlo a páginas o publicaciones específicas, o incluso a todo tu sitio web. Además, puedes usar un plugin de fragmentos de código como WPCode, como hacemos en WPBeginner, para facilitar todo.
En este artículo, te mostraremos dos métodos sencillos para implementar JavaScript en tus páginas o publicaciones de WordPress.
¿Qué es JavaScript?
JavaScript es un lenguaje de programación que se ejecuta en el navegador del usuario, no en tu servidor. Esta programación del lado del cliente permite a los desarrolladores hacer muchas cosas interesantes sin ralentizar tu sitio web.
Si deseas incrustar un reproductor de video, agregar calculadoras o algún otro servicio de terceros, a menudo se te pedirá que copies y pegues un fragmento de código JavaScript en tu sitio web de WordPress.
Un fragmento de código JavaScript típico puede verse así:
<script type="text/javascript">
// Some JavaScript code
</script>
<!-- Another Example: --!>
<script type="text/javascript" src="/path/to/some-script.js"></script>
Pero, si agregas un fragmento de código JavaScript a una publicación o página, WordPress lo eliminará cuando intentes guardarlo.
Teniendo esto en cuenta, te mostraremos cómo agregar fácilmente JavaScript a páginas o publicaciones de WordPress sin romper tu sitio web. Puedes usar los enlaces rápidos a continuación para saltar directamente al método que deseas usar.
- Método 1. Agrega JavaScript en cualquier lugar de tu sitio de WordPress usando WPCode (Recomendado)
- Método 2. Agrega código JavaScript a WordPress manualmente usando código (Avanzado)
- Consejo adicional: Más guías de fragmentos de código
¡Vamos a empezar!
Método 1. Agrega JavaScript en cualquier lugar de tu sitio de WordPress usando WPCode (Recomendado)
A veces, un plugin o herramienta requerirá que copies y pegues un fragmento de código JavaScript en tu sitio web para que funcione correctamente.
Por lo general, estos scripts irán en la sección de encabezado o pie de página de tu blog de WordPress, para que el código se cargue en cada visita a la página.
Por ejemplo, cuando instalas Google Analytics, el código necesita ejecutarse en cada página de tu sitio web para poder rastrear a tus visitantes.
Puedes agregar manualmente el código a tus archivos header.php o footer.php, pero estos cambios se sobrescribirán cuando actualices o cambies tu tema.
Es por eso que recomendamos usar WPCode para agregar JavaScript en cualquier lugar de todo tu sitio de WordPress.
WPCode es el plugin de fragmentos de código más potente disponible para WordPress. Te permite agregar fácilmente código personalizado a cualquier área de tu sitio y, lo mejor de todo, es gratis.
Primero, necesitas instalar y activar el plugin gratuito WPCode. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activado, necesitas ir a Fragmentos de código » Encabezados y Pie de página.
Aquí, verás tres campos separados etiquetados como 'Encabezado', 'Cuerpo' y 'Pie de página'.
Ahora puedes agregar tu código JavaScript en una de estas cajas y luego simplemente hacer clic en el botón ‘Guardar’. WPCode ahora cargará automáticamente el código que agregaste en cada página de tu sitio web.
También puedes agregar fragmentos de código en cualquier otro lugar de tu sitio, como dentro de publicaciones o páginas.
Para hacer esto, simplemente ve a Fragmentos de código » + Agregar fragmento y luego haz clic en ‘Crear el tuyo’.
A continuación, selecciona ‘Fragmento de JavaScript’ como el tipo de código de la lista de opciones que aparecen en la pantalla.
Ahora verá una página de ‘Crear fragmento personalizado’ donde puede agregar un título para su código. Esto puede ser cualquier cosa que le ayude a recordar para qué es el código.
Después de eso, pegue su código en el cuadro ‘Vista previa del código’.
Luego, querrá desplazarse hasta encontrar la sección ‘Inserción’.
Ahora, todo lo que tiene que hacer es seleccionar una ‘Ubicación’ para el código del menú desplegable. Busque ‘Página, Publicación, Tipo de publicación personalizada’ y elija dónde desea que aparezca el código en la página o publicación.
Si elige que WPCode inserte el fragmento antes o después de un párrafo, podrá elegir en qué párrafo específico de la publicación aparecerá antes o después.
Por ejemplo, si pone 1 en el campo ‘Número de inserción’, el fragmento de código aparecerá antes o después del primer párrafo. Use 2 para el segundo párrafo, y así sucesivamente.
Después de eso, solo tiene que hacer clic en el interruptor cerca de la parte superior de la pantalla para cambiar a ‘Activo’ y luego hacer clic en el botón ‘Guardar fragmento’ que está al lado.
¡Eso es todo lo que se necesita para que su fragmento de código esté activo en el sitio!
Método 2. Agrega código JavaScript a WordPress manualmente usando código (Avanzado)
Nota: Los siguientes métodos son para principiantes y propietarios de sitios web. Si está aprendiendo desarrollo de temas o plugins de WordPress, entonces necesita incluir correctamente JavaScript y hojas de estilo en sus proyectos.
Con este método, necesita agregar código a sus archivos de WordPress. Si no ha hecho esto antes, entonces querrá consultar nuestra guía sobre cómo copiar y pegar código en WordPress.
Primero, le mostraremos cómo agregar código al encabezado del sitio de su WordPress. Necesita copiar el siguiente código y agregarlo a su functions.php.
function wpb_hook_javascript() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');
Agregar JavaScript a una Publicación Específica de WordPress Usando Código
Si deseas agregar JavaScript a una sola publicación de WordPress, necesitarás agregar lógica condicional al código.
Veamos primero el siguiente fragmento de código:
function wpb_hook_javascript() {
if (is_single ('5')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
El código anterior solo ejecutará el JavaScript si el ID de la publicación coincide con '5'. Asegúrate de reemplazar el '5' con tu propio ID de publicación.
Para encontrar el ID de la publicación, simplemente abre la publicación donde deseas que se ejecute el JavaScript. Luego, en la URL de la página, encontrarás el ID de la publicación.
Agregar JavaScript a una Página Específica de WordPress Usando Código
Si deseas agregar JavaScript a una sola página de WordPress, necesitarás agregar lógica condicional al código, al igual que arriba.
Echa un vistazo al siguiente ejemplo:
function wpb_hook_javascript() {
if (is_page ('10')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
El código anterior solo ejecutará el JavaScript si el ID de la página es '10'. Asegúrate de reemplazar el '10' con tu propio ID de página.
Puedes encontrar el ID de la página usando el mismo método que arriba. Simplemente abre la página donde deseas que se ejecute el JavaScript y anota el ID de la página en la URL.
Agregar JavaScript a una Publicación o Página Específica de WordPress Usando Código en el Pie de Página
Si deseas que el JavaScript se ejecute en el pie de página de tu sitio en lugar del encabezado, puedes agregar el siguiente fragmento de código a tu sitio web.
function wpb_hook_javascript_footer() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');
Este fragmento de código se engancha a wp_footer en lugar de wp_head. También puedes agregar etiquetas condicionales para agregar JavaScript a publicaciones y páginas específicas como en los ejemplos anteriores.
Consejo adicional: Más guías de fragmentos de código
Ahora que has aprendido cómo agregar fácilmente JavaScript a páginas o publicaciones de WordPress, ¡veamos algunos fragmentos de código personalizados más para expandir aún más la funcionalidad de tu sitio!
Agregar un Acordeón de Preguntas Frecuentes con jQuery en WordPress
jQuery, una útil biblioteca de JavaScript, agrega funciones interactivas a tu sitio.
Usar un acordeón de preguntas frecuentes de jQuery en WordPress ayuda a mantener tu contenido organizado. Muestra preguntas y respuestas en un formato colapsable, lo que facilita que los visitantes encuentren información sin tener que desplazarse por textos largos.
Pero eso no es todo.
Un acordeón de preguntas frecuentes puede mejorar tus rankings en motores de búsqueda al estructurar el contenido de una manera que a los motores de búsqueda les gusta. En WPBeginner, también hemos encontrado que los acordeones de preguntas frecuentes de jQuery son útiles para abordar preguntas comunes, atraer a más visitantes y mejorar el SEO.
Para más información, puedes consultar nuestro artículo sobre cómo agregar un acordeón de preguntas frecuentes con jQuery en WordPress.
Incrustar código iFrame en WordPress
Un iFrame, o marco en línea, te permite incrustar videos u otro contenido en tu sitio web sin tener que alojar los archivos tú mismo. Esto ahorra ancho de banda y espacio de almacenamiento, lo que lo convierte en una mejor opción que subir videos directamente a WordPress, lo cual nunca deberías hacer en primer lugar.
Usar un iFrame también puede mejorar la velocidad y el rendimiento de tu sitio, ya que extrae contenido de una fuente externa.
Para obtener más información, puedes consultar nuestra guía sobre cómo incrustar fácilmente código iFrame en WordPress.
Crear un feed RSS separado para cada tipo de publicación personalizada en WordPress
WordPress te permite crear tipos de publicación personalizados adaptados a tus necesidades de contenido específicas, como reseñas de películas, productos o testimonios. Esta función te ayuda a organizar mejor tu sitio y mejora la experiencia del usuario.
Ten en cuenta que puedes configurar feeds RSS para cada tipo de publicación personalizada, proporcionando a los visitantes feeds especializados que permiten una interacción más personalizada con tu contenido.
Si desea más información, puede leer nuestra guía sobre cómo crear un feed RSS separado para cada tipo de publicación personalizada en WordPress.
Para obtener más ideas de fragmentos personalizados, no dude en consultar nuestras selecciones expertas de los fragmentos de código de WordPress más útiles para principiantes.
Esperamos que este artículo le haya ayudado a aprender cómo agregar fácilmente JavaScript a páginas o publicaciones de WordPress. También puede consultar nuestra guía sobre cómo agregar correctamente JavaScripts y estilos en WordPress y nuestras selecciones expertas de trucos extremadamente útiles para el archivo de funciones de WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Mesht
Con el primer método (Wpcode), ¿puedo agregar un script a una sola página?
Soporte de WPBeginner
You can use the first method to add it to multiple pages not just one
Administrador
Dennis Muthomi
I manage lots of client sites, and WPCode has been my go to tool for me. It’s super reliable when I need to add tracking scripts or custom features to client websites.
One thing I must do when adding code is to always back up your site before using WPCode. I test everything on staging first. Trust me, it’s saved me so many headaches! Especially when scripts clash with theme features.
ANd the best part is that if something goes wrong, you can just turn off the problematic code snippet. So simple!
Jiří Vaněk
WPCode salvó mi sitio web completo de esta manera, el cual ya tenía completado, pero finalmente descubrimos que el menú funciona muy mal en dispositivos móviles. Encontré una solución en forma de JavaScript, pero no sabía dónde o cómo insertarlo en el sitio web. Esto me ahorró todo el trabajo y resolvió el problema de cerrar el menú en dispositivos móviles.
Soporte de WPBeginner
¡Me alegra saber que el plugin fue útil!
Administrador
ala
me pregunto por qué no usar el método más simple, simplemente usar directamente el bloque "HTML personalizado" de WordPress para insertar código JavaScript en una publicación o página. Lo he intentado y probado. Sin problemas. Método muy, muy, muy simple.
Soporte de WPBeginner
Dependería del código específico, los métodos que mostramos en esta guía son para agregar el código a la sección de encabezado, ya que la mayoría de los JavaScript quieren ejecutarse en la sección de encabezado.
Administrador
Rejane
Tengo un tema hijo activo y usé el plugin "Insert Headers and Footer" para agregar un código JavaScript para un servicio de marketing por correo electrónico. ¡Funcionó! Pero desafortunadamente, tuve que cancelar mi cuenta con este servicio y ahora me gustaría eliminar el código JavaScript. ¿Cómo lo hago cuando estoy usando un tema hijo? ¿Hay alguna forma fácil o algún otro plugin para esto?
Soporte de WPBeginner
You would remove the code from the Insert Headers and Footers plugin and it would remove the code from your site
Administrador
Paul Liles
¿No encuentro el menú de tres puntos por ninguna parte? Necesito ayuda.
Soporte de WPBeginner
Debería estar en la parte superior de la página de edición. Si estás usando el editor clásico, estaría en Opciones de pantalla.
Administrador
Eleni
No me aparece la opción de Campos personalizados en la pestaña Opciones de pantalla. Estoy usando un sitio web autoalojado y he instalado y activado el plugin Code Embed.
Soporte de WPBeginner
Si estás usando el editor de bloques, la configuración se ha movido al área de preferencias.
Administrador
Ashley
¡¡¡Este sitio es INCREÍBLE!!! Este es el tercer post seguido en el que he dado en el clavo consiguiendo lo que necesitaba y de la manera más fácil posible. ¡¡Gracias!!
Soporte de WPBeginner
Glad our guides were helpful
Administrador
Amigo
¡Hola, excelentes cosas WPbeginners! El segundo método funcionó a la perfección. Sin embargo, tenía una pregunta. Si quisiera agregar otro código js para otro propósito, ¿cómo debería empezar el código? Porque todo lo que agrego después del código aparece en gris. Estoy perdido aquí. Quiero que haga lo mismo pero para otra página. ¿Alguna idea será apreciada?
Soporte de WPBeginner
Dependería en gran medida del código que estés usando, pero querrás asegurarte de que el código esté antes de la etiqueta
/scriptAdministrador
Jonathan
Gracias. Este artículo fue de gran ayuda. Elegí la opción de functions.php. Funcionó bien.
Soporte de WPBeginner
Glad our guide was helpful
Administrador
Elise
Eso funcionó. ¡¡¡Muchas gracias!
Soporte de WPBeginner
You’re welcome
Administrador
Martin
Pregunta sobre el Método 3:
Después de ingresar el valor y hacer clic en "agregar campo personalizado", ¿cómo hago para que el código se muestre en el frontend de mi sitio web?
¿Debo insertar "{{CODEmyjscode}}" usando un widget de shortcode o un editor de texto en la página?
Soporte de WPBeginner
por el momento querrás usar el editor de texto o código.
Administrador
Bret Bernhoft
Cuando empecé a trabajar con WordPress, JavaScript me parecía una imposibilidad. Pero si avanzamos rápido hasta hoy, escribo este lenguaje todos los días; a menudo en asociación con WordPress.
Desearía que hubiera sido más claro para mí lo fácil que habría sido escribir JavaScript, cuando comencé este viaje. Gracias por las herramientas y los consejos. Tendré que intentarlo.
Soporte de WPBeginner
Glad we could share some easy methods for adding JavaScript to your site!
Administrador
ibrahim
¡Funcionó y me ayudó mucho. ¡Gracias!
Soporte de WPBeginner
You’re welcome
Administrador
Kat
Intenté agregar JS personalizado en mi publicación, pero no pasa nada. Seguí tus instrucciones exactas para el Método 3, pero cuando voy a previsualizar la página, es solo un espacio en blanco donde se supone que debe estar el JS. ¿Alguna idea de por qué?
Soporte de WPBeginner
Deberías consultar las preguntas frecuentes del plugin para conocer las razones más comunes de ese problema y cómo resolverlo.
Administrador
Samuel
¿Cómo funciona esto con el nuevo sistema de bloques de WordPress?
Estoy intentando incrustar esto en una página, pero solo se muestra como {{code1}} en la vista previa
Soporte de WPBeginner
Dependería del método que estés usando en tu sitio para el plugin, tienen una actualización en su sección de preguntas frecuentes sobre cómo usarlo por el momento.
Administrador
Akash
Gracias por esta información. Publicación realmente increíble y útil.
Soporte de WPBeginner
You’re welcome, glad our article was helpful
Administrador
Alex
¡Hola, excelente guía! El problema es que no tengo "Campos personalizados" en las opciones de pantalla... ¿Alguna idea de por qué?
Soporte de WPBeginner
¿Tu sitio está en WordPress.com?
Administrador
James
Hola. He contratado a un programador para crear una herramienta, lo cual hizo en Javascript. He estado usando Weebly, pero Weebly se ha vuelto poco receptivo a las solicitudes de ayuda, a lo que cientos de blogs dan testimonio. Por lo tanto, estoy buscando alternativas a Weebly. ¿Podría WordPress manejar una herramienta de Javascript de 2 MB?
Gracias,
Soporte de WPBeginner
Tu hosting determinaría si se puede usar una herramienta como esa, no la plataforma de tu sitio web, y dependiendo de cómo se configurara la herramienta, determinaría si puedes transferir la herramienta.
Administrador
Matt
¿Qué pasa si necesito agregar el script solo en una página, pero en el head y no en el body? Estoy intentando agregar un píxel de conversión de Google solo a mi página de agradecimiento por envío de formulario.
Soporte de WPBeginner
You would want to take a look at the section of the article called: Adding JavaScript to a Specific WordPress Post or Page Using Code
Administrador
quy
funciona como magia. Muchas gracias
Soporte de WPBeginner
You’re welcome, glad our article could help
Administrador
Manjeet Chhillar
Gracias por esta publicación tan útil.
Mi pregunta es: ¿Cómo puedo implementar el "Método 2" en múltiples publicaciones? ¿Necesito agregar el ID de publicación de cada publicación individual separada por comas?
Soporte de WPBeginner
sí, necesitarías colocar las comas fuera de las comillas simples y comenzar un nuevo conjunto de comillas para este método
Administrador
Deborah
Gracias por compartir los tres métodos que los usuarios de WordPress pueden usar para agregar JavaScript a publicaciones o páginas. Por lo que leí en la página del plugin Insert Headers and Footers en el repositorio, el plugin no utiliza el método enqueue para agregar los scripts. Que es el método recomendado para agregar scripts en WordPress.
¿Entendí mal? ¿O Insert Headers and Footers está usando enqueue para agregar scripts? Si no está usando enqueue, ¿sabes cuándo se actualizará el plugin para usar enqueue?
Soporte de WPBeginner
El plugin no está haciendo enqueue a los scripts que se le agregan en este momento, ya que no todo lo que se agrega con nuestro plugin puede querer ser enqueued. Si deseas hacer enqueue al código agregado, querrías usar otro método.
Administrador
Dave G
Bien, gracias por eso. Resulta que el ID de publicación exacto en el que necesitaba ejecutar javascript era el número 16. "`if (is_single ('16')) { "`
¿Eres del futuro?
Soporte de WPBeginner
Not yet at least
Administrador
Golu Arjun
Gracias por esta publicación. Es muy útil. Es posible personalizar
Soporte de WPBeginner
You’re welcome
Administrador
Thomas
Necesito agregar un script a todas las publicaciones de mi blog. Tengo el plugin para cada publicación individual. El problema es que hay miles de publicaciones y necesitamos agregar el script a todas ellas. ¿Alguna sugerencia? Gracias de antemano.
Soporte de WPBeginner
La opción Insertar encabezados y pies de página pondrá un código en cada publicación y página para ti si están usando el mismo código.
Administrador
Thomas
Gracias por tu pronta respuesta.
Solo queremos que el script se ejecute en las Publicaciones. No queremos que se ejecute en todas las páginas.
Soporte de WPBeginner
Si tuvieras un widget que solo se agrega a las publicaciones, podrías intentar agregar el código en un widget.
Ann
He intentado usar los scripts de Encabezados y Pies de Página y el jQuery simplemente no parece estar funcionando correctamente.
Soporte de WPBeginner
Dependería del código específico que estés agregando al sitio para las posibles razones por las que podría no estar funcionando. Es posible que desees asegurarte con quien obtuviste el código que el código en sí mismo está funcionando.
Administrador
Andrew Golay
Por favor, arregla tu plugin de Encabezados / Pies de Página o cambia este artículo, gracias.
Soporte de WPBeginner
Nuestro plugin está funcionando actualmente según las pruebas, pero ciertamente le daremos otro vistazo.
Administrador
lynn
¡¡Gracias!! Esto fue muy útil.
Soporte de WPBeginner
Glad it was helpful
Administrador
Remco
¡Gracias por esta excelente publicación!
¿Es posible implementar datos estructurados en páginas de Woocommerce con este método (JSON-LD)?
Soporte de WPBeginner
Probablemente podrías, pero si tienes un plugin de SEO que estás usando actualmente, querrías consultar con ese plugin para ver si el plugin ya hace eso.
Administrador
graham
Una recopilación bien presentada de las opciones más conocidas para lo que se está convirtiendo en una necesidad común. Sin embargo, muchos usuarios de WordPress no son (y no quieren ser) programadores. Para ellos, JavaScript en cualquier forma es demasiado aterrador; es por eso que usan WordPress con su promesa de "no se requiere programación".
Hay otra posibilidad; usar scripts personalizados en lugar de JavaScript, e incrustarlos directamente en la página. Puedes ponerlos en cualquier componente, aunque prefiero .
Todo lo que necesitas entonces es algo que pueda compilar y ejecutar el script. Es difícil encontrar plugins que puedan hacer esto; mis propias búsquedas aún no han encontrado ninguno. Sin embargo, como programador de JavaScript, pude escribir uno y ponerlo en la biblioteca como EasyCoder. Los scripts se parecen al inglés, tienen aproximadamente la misma complejidad que SQL y pueden hacer la mayoría de las cosas que comúnmente se requieren para administrar contenido e interactividad en una página web. EasyCoder también es totalmente integrable, por lo que otros programadores pueden agregar módulos por sí mismos.