curso de Wordpress completo

Cómo agregar código JavaScript a WordPress, con plugins y sin ellos

Si trabajas con WordPress y necesitas añadir unas líneas de código JavaScript a tu web en esta entrada de CursoWpress.com te decimos cómo.

¿Qué es JavaScript?

JavaScript es un lenguaje de programación muy potente.

Para todas aquellas personas que trabajamos en páginas webs, léase:

  • Bloggers
  • Webmasters
  • Diseñadores web.
  • Especialistas en SEO.
  • Online marketers.
  • Y un largo etc.

El lenguaje JavaScript constituye una excelente herramienta, pues nos permite, entre otras cosas, mejorar la interactividad de nuestros sitios webs.

¿Para qué agregar código JavaScript a WordPress?

En algún punto necesitamos agregar algunas líneas de código JavaScript a nuestras instalaciones de WordPress, porque “el Java” nos permite darles vida a elementos tales como:

  • Sliders, carruseles, y otros diseños, muy típicos de los headers de nuestras webs.
  • Galerías de fotos y portafolios.
  • Botones con respuesta interactiva.

Además, es a través del código JavaScript que nuestras webs basadas en WordPress interactúan con las APIs de otros generadores de contenido, como Google o Facebook.

Pero también es muy posible que ya sepas todo eso, y que todo lo que quieras a estas alturas sea pasar a la acción.

Si ese es tu caso, entonces nos ponemos manos a la obra.

Añadiendo JavaScript a WordPressjavascript

Existen muchas formas de agregar código JavaScript a tu web de WordPress.Org, aunque debes tener cuidado, porque, según que casos podrías meterte en líos.

Y si estás pensando que:

“Es un asunto difícil poner unas líneas de código JavaScript a alguna instalación de WordPress”.

Te equivocas.

Es más bien fácil, solo que toca hacer bien las cosas para no enredar.

Y descuida, en esta entrada compartimos contigo algunos consejos que te ayudarán a completar la tarea sin contratiempos.

¿Cómo agregar código JavaScript a WordPress sin plugins?

Te lo decíamos, existen muchas opciones a la hora de agregar código JavaScript a una web corriendo en WordPress.Org sin necesidad de usar plugins ni herramientas externas, pero debes saber que cada una de las opciones funcionará mejor en casos puntuales.

Aquí vamos con el primer caso.

Advertencia:

A manera de descargo de responsabilidad.

En las siguientes líneas encontrarás instrucciones que te guiarán paso a paso, en el proceso de agregar líneas de código JavaScript a los archivos de tu web.

Por lo que, antes de modificar cualquier fichero o archivo de tu sitio web, en especial si se trata de un sitio en línea y en funcionamiento, debes crear un respaldo.

Puedes crear respaldos siguiendo este tutorial:

Cómo Crear un Backup en WordPress

También recomendamos, antes de hacer cualquier modificación a tu web activa, pruebes haciendo cambios en un clon de tu página.

Aquí te decimos todo sobre los sitios clones para pruebas.

·         Cómo usar XAMPP para instalar WordPress en local

         Agregando JavaScript al Footer o al Header de nuestra web

En muchas ocasiones necesitamos añadir un código a los ficheros .PHP de nuestro theme activo, y en muchos casos se trata de código JS.

Ocurre cuando necesitamos personalizar las características de ciertas suites o herramientas que trabajan con su propia API.

Todo lo que tenemos que hacer es, en nuestro escritorio de WordPress, seguir la siguiente ruta:ruta

            Apariencia > Editor

Allí nos encontraremos con muchos archivos, pero en este caso el que necesitamos es el archivo:

            footer.php

Lo abrimos.

Nosotros agregaremos nuestro código justo después de esta etiqueta:

<?php wp_footer(); ?>

Y antes de:

            </body>

            Guardamos los cambios y listo.

            Hemos añadido código JS a WP.

         Agregando JavaScript a una entrada en nuestro blog

Ahora, si lo que queremos es agregar algunas líneas de código JavaScript a una de nuestras entradas. todo lo que tenemos que hacer es:

  1. Añadir el código, o script de Java, a un fichero JavaScript, o crear un fichero JS.
  2. La gente de WordPress, en el apartado wordpress.org/Using_Javascript nos explican que: todos los scripts deben definirse usando su nombre de función:

function updatepage(){var m=»Page updated «+document.lastMo…….}

  1. Abrir el modo HTML de tu editor, para hacer funcionar el JavaScript dentro de nuestro artículo de blog tenemos que combinar la llamada al script, con la llamada al JavaScript:

<script type=»text/javascript» src=»/scripts/updatepage.js»></script>

<script type=»text/javascript»>

<!–

updatepage();

//–></script>          

¿Cómo agregar código JavaScript a WordPress con plugins?

Ahora también podemos agregar JavaScript a nuestro sitio usando plugins y uno de los mejores para ello es:

         Scripts n StylesScripts n Styles

Scripts n Styles es un plugin de la gente de unFocus Projects que nos permite agregar código CSS y JavaScript a nuestra web de forma sencilla.

Todo lo que tenemos que hacer es buscarlo en el repositorio de plugins o descargarlo a través del siguiente enlace:

            https://wordpress.org/plugins/scripts-n-styles/

Ahora podemos agregar código CSS y funcionalidades de JavaScript en cualquier lugar de nuestro sitio, bien sean: Páginas y artículos.

¿Cómo usar Scripts n Styles?

El funcionamiento de este plugin no puede ser más sencillo, todo lo que tienes que hacer es:

Abrir el editor de tu WordPress, bien sea en un articulo o en una página.

Verás como aparece una pestaña que te permite agregar código JavaScript.

Otros detalles para tener en cuenta a la hora de trabajar con JS en WP

         Protege tu instalación de WordPress y tus códigos personalizados

Como siempre te hemos dicho, nunca trabajes directamente sobre los archivos de tu instalación de WordPress.

¿Por qué?

Porque por una parte estás poniendo en riesgo la salud de tu sitio.

Y por otra, te arriesgas a perder las personalizaciones que vayas añadiendo bien sean líneas de código CSS o funciones JavaScript.

Por ejemplo, si agregas código adicional directamente sobre los archivos de tu web como en el header o en el footer, las posibilidades de que pierdas los agregados con una actualización de tu tema son bastante altas.

Por eso una buena opción es trabajar sobre un tema hijo o child theme, que te permite agregar código y modificar el theme como gustes, sin riesgo de perder tu trabajo.

¿Te ha gustado el articulo?

Y esto es solo el comienzo, hay mucho más para aprender, si quieres saber más apúntate al mejor curso online de WordPress en español.