Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo añadir fácilmente JavaScript en páginas o entradas de WordPress (2 métodos)

¿Quieres añadir JavaScript en tus páginas o entradas de WordPress?

A veces puede que necesite añadir código JavaScript a todo su sitio web o a páginas y entradas específicas. Por defecto, WordPress no permite añadir código directamente en las entradas.

En este artículo, le mostraremos cómo añadir JavaScript en páginas o entradas de WordPress fácilmente.

How to easily add JavaScript in WordPress pages or posts (3 methods)

¿Qué es JavaScript?

JavaScript es un idioma de programación que se ejecuta en el navegador / explorador del usuario, no en su servidor. Esta programación del lado del cliente permite a los desarrolladores hacer un montón de cosas interesantes sin ralentizar su sitio web.

Si desea incrustar un reproductor de vídeo, añadir calculadoras o algún otro servicio de terceros, a menudo se le pedirá que copie y pegue un fragmento de código JavaScript en su sitio web WordPress.

Un fragmento de código JavaScript típico puede tener este aspecto:

<script type="text/javascript"> 
// Some JavaScript code
</script>

<!-- Another Example: --!>  
<script type="text/javascript" src="/path/to/some-script.js"></script>

Pero, si añade un fragmento de código JavaScript a una entradas o página de WordPress, entonces será borrado por WordPress cuando intente guardarlo.

Dicho esto, vamos a ver cómo se puede añadir fácilmente JavaScript a las páginas o entradas de WordPress sin romper su sitio web. Puede utilizar los enlaces rápidos a continuación para saltar directamente al método que desea utilizar.

Método 1. Añadir JavaScript en cualquier parte de su sitio WordPress usando WPCode (Recomendado)

A veces, un plugin o herramienta necesitará que copies y pegues un fragmento de código JavaScript en tu sitio web para funcionar correctamente.

Por lo general, estas secuencias de comandos irán en la cabecera o en el pie de página de su blog de WordPress, de modo que el código se carga en cada vista de página.

Por ejemplo, cuando instala Google Analytics, el código debe ejecutarse en todas las páginas de su sitio web, para que pueda realizar un seguimiento de los visitantes de su sitio web.

Puede añadir manualmente el código a sus archivos header.php o footer.php, pero estos cambios se sobrescribirán cuando actualice o cambie su tema.

Por eso recomendamos usar WPCode para añadir JavaScript en cualquier parte de todo tu sitio WordPress.

WPCode es el plugin de fragmentos de código más potente disponible para WordPress. Le permite añadir fácilmente código personalizado a cualquier área de su sitio, y lo mejor de todo, es gratis.

En primer lugar, debes 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, debe ir a Fragmentos de código ” Cabeceras y pie de página.

Aquí verá tres campos separados denominados ‘Cabecera’, ‘Cuerpo’ y ‘Pie de página’.

Adding header & footer code snippets with WPCode

Ahora puedes añadir tu código JavaScript a una de estas casillas, y luego simplemente hacer clic en el botón ‘Guardar’. WPCode cargará automáticamente el código que has añadido en cada página de tu sitio web.

También puede añadir fragmentos de código a cualquier otro lugar de su sitio, como dentro de entradas o páginas.

Para ello, basta con ir a Fragmentos de código ” + Añadir fragmento y, a continuación, hacer clic en “Crear el suyo propio”.

Create your own code snippet with WPCode

Ahora verá una página “Crear fragmento de código personalizado” en la que puede añadir un título para su código y pegarlo en el cuadro “Vista previa del código”.

A continuación, seleccione “Fragmento de código JavaScript” en el menú desplegable “Tipo de código”.

Enter a jQuery/JavaScript snippet into WPCode

A continuación, desplácese hasta encontrar la sección “Inserción”.

Todo lo que tienes que hacer ahora es seleccionar una ‘Ubicación’ para el código en el menú desplegable. Busca ‘Página, entrada, tipo de contenido personalizado’ y elige en qué parte de la página o entrada quieres que aparezca el código.

Insert snippet before post in WPCode

Si eliges que WPCode inserte el fragmento de código antes o después de un párrafo, podrás elegir qué párrafo específico de la entrada aparecerá antes o después.

Por ejemplo, si pone 1 en el campo “Insertar número”, el fragmento de código aparecerá antes o después del primer párrafo. Utilice 2 para el segundo párrafo, y así sucesivamente.

Después, sólo tiene que hacer clic en el conmutador situado cerca de la parte superior de la pantalla para cambiar a “Activo” y, a continuación, hacer clic en el botón “Guardar fragmento” situado al lado.

Activate and save snippet in WPCode

Eso es todo lo que necesitas para que tu fragmento de código aparezca en el sitio.

Método 2. Añadir código JavaScript a WordPress manualmente usando código (Avanzado)

Con este método, necesitas añadir código a tus archivos de WordPress. Si no has hecho esto antes, entonces marca / comprueba nuestra guía sobre cómo copiar y pegar código en WordPress.

En primer lugar, le mostraremos cómo añadir código a la cabecera de su sitio WordPress. Tienes que copiar el siguiente código y añadirlo a tu functions.php.

function wpb_hook_javascript() {
    ?>
        <script>
          // your javscript code goes
        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

Cómo añadir JavaScript a una entrada específica de WordPress mediante código

Si solo desea añadir JavaScript a una sola entrada de WordPress, tendrá que añadir lógica condicional al código.

Eche un vistazo al 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 de arriba solo ejecutará el JavaScript si el ID de la entrada coincide con ‘5’. Asegúrese de sustituir el ‘5’ por el ID de su propia entrada.

Para encontrar el ID de la entrada, abra la entrada en la que desea que se ejecute el JavaScript. A continuación, en la URL de la página, encontrará el ID de la entrada.

Find WordPress post ID

Cómo añadir JavaScript a una página específica de WordPress mediante código

Si solo desea añadir JavaScript a una sola página de WordPress, tendrá que añadir lógica condicional al código, tal y como se indica más arriba.

Eche 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 de arriba solo ejecutará el JavaScript si el ID de la página es ’10’. Asegúrese de sustituir “10” por el ID de su página.

Puede encontrar el ID de la página utilizando el mismo método anterior. Simplemente abra la página que desea que ejecute el JavaScript y anote el ID de la página en la URL.

Cómo añadir JavaScript a una entrada o página específica de WordPress utilizando código en el pie de página

Si desea que JavaScript se ejecute en el pie de página de su sitio en lugar de en la cabecera, puede añadir el siguiente fragmento de código a su 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 en wp_footer en lugar de wp_head. También puede añadir etiquetas condicionales para añadir JavaScript a entradas y páginas específicas como en los ejemplos anteriores.

Nota: Estos métodos son para principiantes y propietarios de sitios web. Si usted está aprendiendo WordPress tema o plugin de desarrollo, entonces usted necesita para poner en cola correctamente JavaScript y hojas de estilos a sus proyectos.

Esperamos que este artículo te haya ayudado a aprender cómo añadir fácilmente JavaScript a páginas o entradas de WordPress. También puedes consultar nuestra guía sobre cómo elegir la mejor plataforma de blogs y nuestra selección de expertos sobre el mejor software de chatbot de IA para tu sitio web.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

58 comentariosDeja una respuesta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. wing

    i wonder why not use the most simple method, just directly use the wordpress “Custom HTML” block to insert Javascript code to a post or page. I have try it and test it. No problem. very very very simple method.

    • WPBeginner Support

      It would depend on the specific code, the methods we show in this guide are to add the code to the head section as most JavaScript wants to be run in the head section.

      Administrador

  3. Rejane

    I have an active child theme and I used the “Insert Headers and Footer” plugin to add a JavaScript code for an email marketing service. It worked out! But unfortunately, I had to cancelled my account with this service and now I would like to remove the JavaScript code. How do I do this when I am using a child theme? Is there any easy way or another plugin for this?

    • WPBeginner Support

      You would remove the code from the Insert Headers and Footers plugin and it would remove the code from your site :)

      Administrador

  4. Paul Liles

    I cannot find the three-dot menu anywhere? Need some help.

    • WPBeginner Support

      It should be at the top of the edit page. if you are using the classic editor then it would be under Screen Options.

      Administrador

  5. Eleni

    I’m not getting the Custom Fields option in the Screen Options tab. I’m using a self-hosted website and have installed and activated the Code Embed plugin

    • WPBeginner Support

      If you’re using the Block editor then the setting has moved under the preferences area.

      Administrador

  6. Ashley

    This site is AMAZING!!! This is the third post in a row where I’ve hit the jackpot getting what I needed and did it in the easiest way possible. Thank you!!

    • WPBeginner Support

      Glad our guides were helpful :)

      Administrador

  7. Dude

    Hey, great stuff WPbeginners! The second method worked like a charm. I did have a question though. If I wanted to add another js code for another purpose, how should the code start. Because anything I add after the code is greyed out. I’m at a loss here. I want it to do the same but for another page. Any ideas will be appreciated.

    • WPBeginner Support

      It would heavily depend on the code you are using but you would want to ensure the code is before the /script tag

      Administrador

  8. Jonathan

    Thanks. This article was exceedingly helpful. I went with the functions.php option. Worked well.

    • WPBeginner Support

      Glad our guide was helpful :)

      Administrador

  9. Elise

    That worked. Thank you so much!

    • WPBeginner Support

      You’re welcome :)

      Administrador

  10. Martin

    Question on Method 3:

    After inputting the value and clicking on the “add custom field”, how do I get the code to display on my website frontend?

    Should I insert “{{CODEmyjscode}}” using a shortcode widget or text editor on the page?

    • WPBeginner Support

      for the moment you would want to use the text or code editor.

      Administrador

  11. Bret Bernhoft

    When I first began working with WordPress, JavaScript seemed like an impossibility for me. But fast forward to today and I’m writing the language every day; often in association with WordPress.

    I wish it had been clearer to me how easy it would have been to write JavaScript, when I first began this journey. Thank you for the tools and tips. I’ll have to give this a try.

    • WPBeginner Support

      Glad we could share some easy methods for adding JavaScript to your site! :)

      Administrador

  12. ibrahim

    It worked and helped me a lot. Thank you!

    • WPBeginner Support

      You’re welcome :)

      Administrador

  13. Kat

    I tried adding custom JS in my post, but nothing happens. I followed your exact directions for Method 3, but when I go to preview the page it’s just blank space where the JS is supposed to be. Any idea why?

    • WPBeginner Support

      You would want to take a look at the plugin’s FAQ for the most common reasons for that issue and how to resolve it.

      Administrador

  14. Samuel

    How does this work with the new WordPress block system?

    I’m trying to embed this in a page, but it just shows as {{code1}} on the preview

    • WPBeginner Support

      It would depend on the method you are using on your site for the plugin, they have an update in their FAQ section for how to use it at the moment.

      Administrador

  15. Akash

    Thank for this information. Really amazing and helpful post.

    • WPBeginner Support

      You’re welcome, glad our article was helpful :)

      Administrador

  16. Alex

    Hey, great guide! The problem is I don’t have “Custom Fields” under screen options… Any idea why?

    • WPBeginner Support

      Is your site on WordPress.com?

      Administrador

  17. James

    Hi. I have employed a programmer to create a tool, which he did in Javascript. I have been using Weebly but Weebly has become unresponsive to requests for help, to which hundreds of blogs testify. So, I’m looking at alternatives to Weebly. Could WordPress handle a 2 MB javascript tool?

    Thanks,

    • WPBeginner Support

      Your hosting would determine if a tool like that could be used not the platform for your website and depending on how the tool was set up would determine if you can transfer the tool.

      Administrador

  18. Matt

    What if I need to add the script just on a single page but in the head not the body? I am trying to add a google conversion pixel just to my form submit thank you page.

    • WPBeginner Support

      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

  19. quy

    it works like magic. Thanks very much

    • WPBeginner Support

      You’re welcome, glad our article could help :)

      Administrador

  20. Manjeet Chhillar

    Thank you for this very helpful post.

    My query is: How can I implement “Method 2” on multiple posts. Do i need to add Post ID of every single post separated by comma?

    • WPBeginner Support

      yes, you would need to place the commas outside the single quotes and start a new set of quotes for this method

      Administrador

  21. Deborah

    Thank you for sharing the three methods WordPress users can use to add JavaScript to posts or pages. From what I read on the Insert Headers and Footers plugin page in the repository, the plugin doesn’t use the enqueue method to add the scripts. Which is the recommended method to add scripts in WordPress.

    Did I misunderstand? Or is Insert Headers and Footers using enqueue to add scripts? If it’s not using enqueue, do you know when the plugin will be updated to use enqueue?

    • WPBeginner Support

      The plugin is not enqueueing scripts added to it at the moment as not everything added with our plugin may not want to be enqueued. If you would like to enqueue the added code you would want to use another method.

      Administrador

  22. Dave G

    Nice, thanks for that. It so happen that the exact post ID I needed to run javascript on was number 16. “`if (is_single (’16’)) { “`

    Are you from the future?

    :)

    • WPBeginner Support

      Not yet at least :)

      Administrador

  23. Golu Arjun

    Thank you for this post. It’s very helpful. It is possible to customize

    • WPBeginner Support

      You’re welcome :)

      Administrador

  24. Thomas

    I need to add a script to all posts in my blog. I have the plugin to each individual post. Thing is, there are thousands of posts and we need to add the script to all of them. Any suggestions? Thank you in advance.

    • WPBeginner Support

      The Insert Headers and footers option will put a code on every post and page for you if they are using the same code.

      Administrador

      • Thomas

        Thank you for your quick reply.

        We only want the script to run on Posts. We do not want it to run on all pages.

        • WPBeginner Support

          If you had a widget that is only added to posts you could try adding the code in a widget.

  25. Ann

    I’ve tried using the Headers and Footers scripts and the jQuery just doesn’t seem to be working properly.

    • WPBeginner Support

      It would depend on the specific code you are adding to the site for the possible reasons it could not be working. You may want to ensure with who you took the code from that the code itself is working.

      Administrador

  26. Andrew Golay

    Please fix your Headers / Footer plugin or change this article, thank you.

    • WPBeginner Support

      Our plugin is currently working from testing but we will certainly take another look at it.

      Administrador

  27. lynn

    thank you!! This was very helpful .

    • WPBeginner Support

      Glad it was helpful :)

      Administrador

  28. Remco

    Thank you for this great post!
    Is it possible to implement Structured Data on Woocommerce pages with this method (JSON-LD)?

    • WPBeginner Support

      You likely could but if you have an SEO plugin you are currently using you would want to check with that plugin to see if the plugin does that already.

      Administrador

  29. graham

    A well-presented roundup of the better-known options for what is becoming a common need. However, many WordPress users are not (and do not want to be) programmers. For them, JavaScript in any form is too frightening; that’s why they use WordPress with its promise of “no programming required”.

    There’s another possibility; to use custom scripts instead of JavaScript, and embed them directly in the page. You can put them in any component, though I prefer .

    All you need then is something that can compile and run the script. It’s hard to find plugins that can do this; my own searches haven’t yet turned up any. However, as a JavaScript programmer myself, I was able to write one and put it in the library as EasyCoder. The scripts resemble English, have about the same complexity as SQL and can do most of the things commonly required to manage content and interactivity in a web page. EasyCoder is also fully pluggable so other programmers can add modules themselves.

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.