Si trabajas con WordPress y necesitas añadir unas líneas de código JavaScript a tu web en este artículo 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 posibilita, 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, debido a que “el Java” nos posibilita darles vida a items 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.
A la vez, 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 al mismo tiempo es muy posible que ya sepas todo eso, y que todo lo que desees 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 WordPress
Existen muchas posibilidades para agregar código JavaScript a tu web de WordPress.Org, aunque debes tener cuidado, debido a que, 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 este artículo 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 conocer 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
Al mismo tiempo 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 varios 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:
Apariencia > Editor
Allí nos encontraremos con muchos archivos, pero en esta circunstancia 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 deseamos es agregar algunas líneas de código JavaScript a una de nuestras entradas. todo lo que tenemos que hacer es:
- Añadir el código, o script de Java, a un fichero JavaScript, o crear un fichero JS.
- 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…….}
- 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 al mismo tiempo podemos agregar JavaScript a nuestro sitio usando plugins y uno de los mejores para ello es:
Scripts n Styles
Scripts n Styles es un plugin de la gente de unFocus Projects que nos posibilita agregar código CSS y JavaScript a nuestra web de forma simple.
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 posibilita 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é?
Debido a que por un lado 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.
A modo de 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.
Es por ello que una buena opción es trabajar sobre un tema hijo o child theme, que te posibilita 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 buscas saber más apúntate al mejor curso online de WordPress en español.
