Insertar Javascript en WordPress

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í:

Una vez creado simplemente tienes que «llamarlo» desde el editor así:

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)

¿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. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)