Cómo agregar código JavaScript a tu sitio WordPress

Las plantillas de WordPress y los complementos preinstalados no dejan mucho espacio para que los propietarios de sitios web añadan su toque personal a sus sitios, ya que siempre hay opciones y configuraciones limitadas y, por lo tanto, el margen de creatividad en el diseño y preparación del sitio web es muy estrecho. Si deseas salir de la monotonía e imprimir tu sello personal y realizar modificaciones en tu sitio de WordPress de forma profesional, la mejor opción para ti es utilizar JavaScript para realizar modificaciones en el sitio. En este artículo, revisaremos una guía completa sobre cómo usar JavaScript en WordPress y obtener resultados verdaderamente profesionales.

Por supuesto, debes tener pleno conocimiento y experiencia suficiente en el uso de código de programación y en cómo manejarlo dentro de tu sitio de WordPress, ya que los cambios de programación que realices en el sitio tendrán grandes impactos y podrían causar daños significativos si no tienes los conocimientos de programación suficientes. En este artículo, explicaremos los métodos para agregar código JavaScript dentro de tu sitio de WordPress y usarlo para realizar muchas modificaciones dentro de tu sitio y añadir varias opciones que las plantillas y complementos preinstalados no te proporcionan por defecto.

¿Por qué necesitas agregar código JavaScript a tu sitio?

Hay muchas ventajas que obtendrás al agregar y usar código JavaScript dentro de tu sitio de WordPress, y esta estrategia representa la solución ideal para los propietarios de sitios cuando desean agregar formatos o realizar cambios específicos dentro del sitio que no estén disponibles en las opciones limitadas que proporciona la plantilla. Aquí hay algunos casos en los que necesitas agregar código JavaScript de la manera correcta: A veces es necesario agregar código JavaScript de fuentes externas a tu sitio, por ejemplo, cuando deseas vincular tu cuenta de Google Analytics con tu sitio de WordPress, necesitarás agregar código JavaScript para completar la vinculación correctamente. JavaScript permite realizar modificaciones en un sitio que no se pueden hacer usando otros lenguajes como HTML o CSS, por ejemplo, puedes mostrar un cuadro o ventana emergente frente al visitante cuando realiza alguna actividad dentro del sitio, como mostrar una ventana emergente con información u ofertas adicionales cuando el visitante hace clic en un icono específico dentro del sitio.

Puedes usar JavaScript para ejecutar este paso fácilmente. JavaScript no consume muchos recursos de alojamiento ni espacio de alojamiento de tu sitio, ya que funciona directamente desde el navegador del visitante, es decir, su origen es el visitante y no el servidor; lo que conserva el espacio de alojamiento en el servidor de tu sitio. Puedes usar código JavaScript para recopilar datos e información sobre los visitantes de tu sitio, ya que funciona desde el navegador web del visitante, por lo tanto, puedes personalizarlo para recopilar cierta información legal valiosa sobre los usuarios.

Puedes usar JavaScript para agregar muchos elementos útiles dentro del contenido de tu sitio, como un reproductor de audio, un reproductor de video y otros elementos. La diferencia entre agregar código JavaScript y agregar código CSS y HTML se utilizan para crear y configurar las reglas básicas de la página, como insertar textos, imágenes, formatos de colores, fondos y movimientos simples en el sitio. Mientras que JavaScript va más allá de esas funciones para realizar muchas tareas adicionales que añaden cierta distinción al sitio, donde puedes usarlo para personalizar funciones de programación para interactuar con el comportamiento de los visitantes, por ejemplo, puedes programar un respondedor automático que interactúe con el visitante y responda preguntas frecuentes dentro de tu sitio, además de la posibilidad de programar el sitio para realizar ciertas acciones cuando el visitante realiza actividades específicas dentro del sitio.

Puedes agregar código HTML y CSS a tu sitio fácilmente dentro de la página de edición del artículo o página, o a través de la opción "Personalizar" que está disponible en todas las plantillas de WordPress, pero no puedes agregar código JavaScript de la misma manera. Hay dos formas de agregar código JavaScript dentro del sitio, ya sea a través de uno de los complementos especializados o mediante la edición directa del archivo FUNCTIONS.PHP.

Cómo escribir código JavaScript en el lenguaje JavaScript

Como cualquier otro lenguaje de programación, tiene una sintaxis fija que se usa para escribir código y ejecutar los comandos relacionados con él. La siguiente sintaxis es para escribir código JavaScript dentro del sitio:

// Aquí se escribe el código JavaScript

Como puedes ver, comienza con la etiqueta <script> y termina de la misma manera con la etiqueta </script>. Todos los códigos JavaScript requeridos se agregan en lugar de la frase "Aquí se escribe el código JavaScript". Hay otra sintaxis, pero se usa si el código JavaScript está en un archivo externo y se importa para activarlo dentro de tu sitio, y esa sintaxis es la siguiente:

Como puedes ver, la sintaxis es similar a la primera, pero aquí el código JavaScript no se escribe directamente sino que se importa desde un archivo externo, y se coloca el enlace del archivo JavaScript que contiene el código a ejecutar dentro del sitio en lugar de la frase "enlace del archivo". Métodos para agregar código JavaScript a tu sitio de WordPress Como explicamos anteriormente, hay dos formas principales de agregar código JavaScript a tu sitio de WordPress, y en los párrafos siguientes detallaremos ambos métodos de forma simple y práctica para que puedas agregar y aplicar código JavaScript a algunas páginas de tu sitio o incluso a todo tu sitio sin que surjan problemas. 1.

Agregar código JavaScript usando complementos La primera forma de agregar código JavaScript dentro de tu sitio es definitivamente la más fácil, a través de complementos de WordPress. El primer paso es instalar uno de los complementos que adjunta automáticamente el código en el código fuente de tu plantilla de WordPress. Uno de los complementos más famosos y simples es el complemento Insert Header and Footer.

Para usar el complemento, primero debes descargarlo y luego activarlo desde el panel de control de WordPress, desde la opción "Complementos" y luego "Agregar nuevo", luego escribe el nombre del complemento en el cuadro de búsqueda para que aparezca el complemento y lo descargues y actives: Después de instalar y activar el complemento en tu sitio con éxito, pasaremos a la página de configuración del complemento, a través de la cual puedes agregar código JavaScript. Para acceder a esto, iremos al panel de control de WordPress a "Configuración" y encontrarás la pestaña de página del complemento, como se muestra en la imagen: Encontrarás en la configuración de la página del complemento tres cuadros grandes para agregar código de la siguiente manera: Scripts in header Scripts in footer Scripts in body Cuando agregues el código en el cuadro de scripts in header, ese código se agregará dentro del archivo header.php en tu sitio. Pero si agregaste el código en el cuadro Scripts in body, el código se agregará dentro del archivo index.php.

Y cuando escribas el código en el cuadro Scripts in footer, se agregará el código dentro del archivo footer.php en tu sitio. Nota: Es mejor que agregues código JavaScript dentro del pie de página de tu sitio para que se cargue al final de la página, de modo que no afecte la carga y visualización de los elementos básicos visibles en la parte superior del sitio. Ahora probemos un ejemplo práctico de agregar código JavaScript.

Agregaremos un código que muestre un "cuadro de bienvenida" o lo que se llama "alert" directamente tan pronto como el visitante entre al sitio, los pasos detallados son los siguientes: alert("¡Bienvenido a nuestro sitio!"); Como puedes notar, el código anterior se escribió con la misma sintaxis del código JavaScript general que explicamos al principio del artículo.

Y ahora iremos a la página del complemento y colocaremos este código dentro del cuadro de Footer de la siguiente manera: Y ahora después de pegar el código, haremos clic en el botón Guardar, luego abriremos el sitio directamente para ver el cambio nuevo. Notarás que aparece un cuadro de alerta que contiene la frase "Bienvenido a nuestro sitio" directamente tan pronto como entres al sitio, como se muestra en la imagen: Puedes buscar en Internet códigos JavaScript que realicen varias actividades dentro del sitio, y luego copiar estos códigos y pegarlos en el cuadro en la página del complemento y hacer clic en el botón Guardar, como en los pasos anteriores para aplicar y ejecutar el código dentro de tu sitio correctamente y sin problemas. De esta manera, hemos aprendido cómo usar el complemento Insert Header and Footer para agregar código JavaScript dentro de tu sitio.

Es importante mencionar aquí que el código que agregamos en el complemento se aplicará a todas las páginas y secciones del sitio sin excepción. Y aquí podría surgirte la siguiente pregunta: ¿Y si deseo agregar código JavaScript dentro de una sola página o en páginas específicas sin otras páginas del sitio? Bien, en este caso necesitaremos usar otro complemento, cuya función será ejecutar código JavaScript en páginas o enlaces específicos dentro del sitio sin otros.

En este caso, te recomendamos que uses el complemento Code Embed, que es uno de los mejores complementos utilizados para ejecutar y ejecutar código JavaScript en sitios específicos dentro de las páginas de tu sitio sin que se ejecute en otros lugares u otras páginas del sitio. Después de instalar y activar el complemento en tu sitio, puedes insertar código JavaScript en cualquier página que desees y en cualquier ubicación dentro de la página misma. Digamos que deseas insertar el código JavaScript anterior que es responsable de mostrar un cuadro de bienvenida para el visitante dentro de una página específica en el sitio para que este cuadro de bienvenida aparezca cuando el visitante ingrese a esta página y no a otras páginas del sitio.

Para completar esta tarea, primero nos dirigiremos a la ventana de edición de la página en la que queremos insertar el código, y dentro de la página de edición encontrarás 3 puntos en la parte superior junto al botón de configuración, haz clic en ellos para que aparezca este cuadro que se muestra en la imagen, luego haremos clic en la opción "Preferencias", como se muestra en la siguiente imagen: Luego, desde la ventana superior, entra en la pestaña "Paneles" y luego haz clic en el botón para activar los "Campos personalizados" e recarga la página. Ahora notarás la aparición de un cuadro titulado "Propiedades adicionales", que contiene un campo "Nombre" y un campo "Valor" como notarás en la imagen anterior. Para ejecutar código JavaScript, primero debes escribir cualquier nombre que represente el código que deseas insertar en el campo "Nombre", y el nombre debe comenzar con la palabra CODE, por ejemplo, escribiremos el nombre CODEalert. En el campo "Valor", escribiremos el código JavaScript que deseas insertar y ejecutar en la página actual que estamos editando.

En nuestro artículo, pegamos un código que muestra un cuadro de bienvenida que contiene la frase "Código JavaScript de prueba", de la siguiente manera: alert("¡Código JavaScript de prueba!"); Y ahora después de ingresar el nombre y el valor en esos campos, haremos clic en el icono "Guardar", y luego abriremos el enlace de la página actual en cualquier navegador para ver el cambio nuevo.

Notarás que aparece un cuadro de bienvenida directamente al ingresar a la página que contiene la frase "Código JavaScript de bienvenida" como se muestra en la imagen a continuación. Este cuadro no aparecerá en ninguna otra página como mencionamos. Y con el mismo método, puedes agregar código JavaScript más complejo dentro de cualquiera de las páginas de tu sitio, y de esta manera hemos aprendido cómo agregar código JavaScript a todo el sitio, y también cómo agregarlo dentro de una página específica de tu sitio sin otras.

2. Agregar código JavaScript manualmente En los párrafos anteriores, explicamos el método de agregar código JavaScript a tu sitio sin abrir ninguno de los archivos de programación de la plantilla de WordPress que usamos, y ahora destacaremos cómo editar manualmente el código de programación del sitio sin necesidad de instalar complementos externos para realizar esta tarea. Debemos enfatizar nuevamente que editar el código de programación de la plantilla de WordPress es un asunto serio y no debe hacerse a menos que tengas la experiencia y el conocimiento suficientes para manejar el código de programación y la forma correcta de agregarlo a las plantillas de WordPress.

Continuaremos con el ejemplo que explicamos anteriormente, que es el código JavaScript responsable de mostrar un cuadro de bienvenida para el visitante tan pronto como abre el sitio o una de sus páginas internas, pero esta vez agregaremos este código manualmente sin instalar ninguno de los complementos auxiliares. Ahora queremos agregar el siguiente código JavaScript dentro del código de programación del sitio para mostrar un cuadro de bienvenida para los visitantes que contiene la frase "Código JavaScript de forma manual", como sigue:

alert("Código JavaScript de forma manual");

El primer paso es abrir el archivo functions.php, y podemos hacer esto desde dentro del administrador de archivos del sitio o desde el panel de control de WordPress, luego iremos a la opción "Apariencia" y luego "Editar plantilla" y abriremos la página functions.php y agregaremos el código al final del archivo, como se muestra en la imagen: En la imagen anterior, agregamos el código JavaScript que muestra la frase de bienvenida frente a los visitantes cuando ingresan al sitio exactamente como en el método de complementos externos, lo diferente en este método es que debes escribir código adicional para la sintaxis final, que es como sigue: function mynewfuncalert() { ?>