Insertar Javascript en WordPress

javascript

El otro día se preguntaba un usuario del foro cómo se inserta Javascript en WordPress y la verdad es que es algo no tan obvio cómo podría parecer. Eso si, afortunadamente es fácil de hacer.

Sin especificar si era para un WordPress.org alojado en tu propio servidor o en WordPress.com, habría inicialmente dos respuestas posibles, a saber …

  1. No se puede insertar Javascript en sitios de WordPress.com debido a una limitación de seguridad por defecto, así que si es tu caso olvídate, no podrás insertar Javascript en WordPress.com ni en entradas ni en widgets de texto ni en ninguna otra parte.
  2. Si tienes tu propio WordPress la cosa cambia, ahí tienes total libertad para insertar, añadir, instalar lo que quieras

Otra aclaración que hay que hacer es que en este artículo no se explica cómo añadir un código Javascript en el código de un tema WordPress, pues es algo tan simple cómo copiarlo y pegarlo. Un ejemplo típico sería el código de Google Analytics.

Tampoco se trata de cómo insertar un script externo, cómo el de los vídeos de YouTube, una fan box de Facebook y otros, que ya ofrecen un código con la «llamada» al Javascript externo necesario para mostrar el vídeo o lo que sea. Aquí ya sabes, pasas a la pestaña de Texto (HTML) del editor y pegas el script que se te ofrezca.

De lo que aquí se trata es de cómo insertar un Javascript propio en una entrada o página en WordPress, en el contenido ¿vale?

… Cómo insertar Javascript en una entrada o página WordPress …

Para un uso ocasional o de una sola vez de Javascript tienes que poner el script en un fichero JavaScript y luego «llamarlo» desde dentro de la entrada o página. Eso si, asegúrate de que cada script esté definido por su nombre de función, por ejemplo:

function miscript(){var m="Page updated "+document.lastMo.......}

Para incluir el JavaScript dentro de la entrada o página tienes, a continuación, que combinar la llamada al script con la llamada al mismo JavaScript. O sea, algo así:

<script type="text/javascript" src="/scripts/miscript.js"></script>
<script type="text/javascript">
<!--
miscript();
//--></script>

Si el atributo src de tu etiqueta Javascript se corta o trunca tendrás que desactivar el editor visual de WordPress completamente o tener cuidado de no cambiar a la pestaña del editor visual, porque a veces pasa y no funcionará.

Otra opción muy interesante, y sencilla, es añadir Javascript mediante un shortcode, cómo el que ofrece el plugin embed javascript. Simplemente, cuando quieras insertar un Javascript en una entrada o página lo haces así:

[ javascript src="http://dominioquesea.com/el_fichero_que_sea.php?zone_id=xxxxx" ]

… Insertar JavaScript en widgets …

Aquí no nos vamos a complicar, pues aparte de insertar directamente el código facilitado por el servicio que nos ofrezca el contenido, tenemos el maravilloso plugin HTML Javascript adder que hace todo el trabajo.

Esta pequeña maravilla permite insertar HTML, javascripts, shortcodes, anuncios, códigos flash, texto plano y casi lo que se te ocurra en una barra lateral mediante widgets ILIMITADOS que puedes mostrar en entradas o páginas, a elegir.

… Insertar JavaScript en WordPress con shortcode …

Otra manera, que personalmente me ha gustado mucho, de insertar JavaScript en WordPress, alternativa a la primera, es crear un shortcode mediante un campo personalizado.

Primero creas un nuevo campo personalizado al que llamas, por ejemplo «js«, y en el campo de «Valor«, pegas el código Javascript que quieras, algo así:
insertar javascript wordpress con campo personalizado

Una vez creado simplemente tienes que «llamarlo» desde el editor así:
shortcode insertar javascript en wordpress

El efecto conseguido será el mismo que metiéndolo «a capón» pero con la ventaja de que puedes usarlo también en la pestaña Visual del editor de WordPress, algo bastante interesante por si mismo.

Y ya está, si sabes algún modo más nos lo cuentas en los comentarios.

Referencias:

  1. Using JavaScript (WordPress Codex)
  2. Javascript in WordPress (Labnol)
VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(13 votos, promedio: 4)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

16 comentarios en “Insertar Javascript en WordPress”

  1. Solo mencionar que a veces añadir un código Javascript en WordPress, no es tan simple cómo copiarlo y pegarlo. La mejor forma (y recomendada) para agregar Javascript a un tema o plugin es usando wp_register_script() wp_enqueue_script().

    1. Eso mismo iba a comentar, aún así doy por hecho que Fernando se refiere a meterlo en una página o entrada de forma puntual.

      Para todo lo de máswp_register_script() y wp_enqueue_script() y para cosas algo más complejas, un «page template» directamente en el theme para tener más posibilidades.

  2. Mil gracias 😀 ¿En serio este post es de hace dos días? Qué oportuno entonces Fernando, que lo he necesitado para integrar la caja de tweets para la gala de esta noche (los Oscar). Un abrazo 😀

  3. No me quedo claro, entonces si compro el dominio y tengo mi blog en wordpress me da libertad para poner script y codigos? que en cambio si tengo (ej misitio.wordpress.com) no te deja? o como es?

  4. Joder que mal te explicas… Lo del campo personalizado no funciona básicamente por lo mal que te explicas.

    Nada de tu blog me funciona nunca, siempre pones mal la información y tengo que buscar cuál es la forma correcta.

    1. Por cierto lumbreras, lo de campos personalizados con shortcode no funciona si no te instalas un plugin. El que usa el autor de tu fuente es uno desactualizado de hace 2 años.

      Al menos podrías probar los consejos que das no? En vez de plagiar otras fuentes sin ni siquiera leerlas.

  5. Hola, estoy intentando enlazar unos .js en un widget de wordpress pero no me lo permite al parecer no los reconoce el tema, estoy usando el «Kallyas» ya intente instalando el plugin «HTML Javascript adder» y tampoco me funciona. sabes de alguna solucion que me pueda funcionar?

    Gracias

  6. No me ayudo nada el post..sobre todo cuando indica : javascript src= «»
    Aparece como Texto..y no funciona …uso wordpress..gratis…alguien q podria ayudar de hacerlo mas facil….

  7. Pingback: Aplazar la carga de JavaScript en WordPress | Ayuda WordPress

  8. David García-Pascual Albares

    Hola Fernando, no se si podrías ayudarme con un tema.

    Necesito incluir en el archivo functions.php del child theme de Avada un script que llama a un motor de reservas externo

    El script sería este:

    Iría en una página en especial (nos se debe cargar en todas, ya que el motor todavía no esta realmente optimizado para wordpress.

    El nº de página es: 15370

    Si pudieses ayudarme indicándome cual es el código que he de colocar en el archivo functions.php, te lo agradecería enormemente

    Un saludo
    David Garcia

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido