Cómo agregar fácilmente JavaScript en páginas o mensajes de WordPress (3 métodos)

¿Quieres añadir un JavaScript en tus páginas o posts de WordPress? A veces puede ser necesario añadir un código JavaScript a todo el sitio web o a páginas específicas. Por defecto, WordPress no te permite añadir código directamente en tus mensajes. En este artículo, le mostraremos cómo añadir fácilmente JavaScript en las páginas o mensajes de WordPress.

¿Qué es JavaScript?

JavaScript es un lenguaje de programación que no se ejecuta en su servidor sino en el navegador del usuario. Esta programación del lado del cliente permite a los desarrolladores hacer muchas cosas interesantes sin ralentizar su sitio web.

Si desea incrustar un reproductor de vídeo, añadir una calculadora o algún otro servicio de terceros, a menudo se le pedirá que copie y pegue un fragmento de código JavaScript en su sitio web.

Un fragmento de código JavaScript típico puede tener este aspecto:

123456789 "text/javascript"> // Algún código JavaScript "text/javascript "src="/path/to/some-script.js">)

Ahora, si agregas un fragmento de código javascript a una entrada o página de WordPress, WordPress lo borrará cuando intentes guardarlo.

Dicho esto, veamos cómo puedes añadir fácilmente JavaScript en páginas o posts de WordPress sin romper tu sitio web.

Método 1. Agregar JavaScript en todo el sitio mediante Insertar encabezados y pies de página

A veces se le pedirá que copie y pegue un fragmento de código JavaScript en su sitio web para añadir una herramienta de terceros. Estos scripts suelen ir a la sección de cabecera o en la parte inferior antes de la etiqueta de su sitio web. De esta manera el código se carga en cada página vista.

Por ejemplo, el código de instalación de Google Analytics debe estar presente en todas las páginas de su sitio web, para que pueda realizar un seguimiento de los visitantes de su sitio web.

Puede agregar dicho código a los archivos header.php o footer.php de su tema de WordPress. Sin embargo, estos cambios se sobrescribirán cuando actualice o cambie el tema.

Por eso recomendamos usar un plugin para cargar javascript en su sitio.

Primero, debe instalar y activar el plugin Insertar encabezados y pies de página. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, debe visitar la página Configuración " Insertar encabezados y pies de página . Verá dos cuadros, uno para el encabezado y otro para la sección de pie de página.

Ahora puede pegar el código JavaScript que ha copiado en uno de estos cuadros y, a continuación, hacer clic en el botón Guardar.

Insertar Encabezados y Pies de Página cargará automáticamente el código que usted agregó en cada página de su sitio web.

Método 2. Adición manual de código JavaScript usando código

Este método requiere que añada código a sus archivos de WordPress. Si no lo has hecho antes, consulta nuestra guía sobre cómo copiar y pegar código en WordPress.

Primero, echemos un vistazo a cómo agregar código al encabezado de su sitio WordPress. Necesitará agregar el siguiente código al archivo functions.php de su tema o a un plugin específico del sitio.

12345678functionwpb_hook_javascript() { ?> // su código javscript va <?php}add_action(wp_head, wpb_hook_javascript);

Adición de JavaScript a un mensaje o página específica de WordPress utilizando código

Supongamos que sólo quieres cargar este javascript en un post específico de WordPress. Para hacer eso, necesitará agregar lógica condicional al código. Eche un vistazo al siguiente ejemplo:

12345678910functionwpb_hook_javascript() { if(is_single (16))) { ?> "text/javascript"> // su código javscript va aquí <?php }}}add_action(wp_head, wpb_hook_javascript);

Si echa un vistazo más de cerca al código de arriba, verá que hemos envuelto el código javascript alrededor de la lógica condicional para que coincida con un ID de post específico. Puede utilizarlo sustituyendo 16 por su propio ID de puesto.

Ahora, este código funcionaría para cualquier tipo de mensaje excepto para las páginas. Echemos un vistazo a otro ejemplo, excepto que éste buscará un ID de página específico antes de añadir el código javascript a la sección de cabecera.

12345678910functionwpb_hook_javascript() { if(is_page (10))) { ?> "text/javascript"> // su código javscript va aquí <?php }}add_action(wp_head, wpb_hook_javascript);

En lugar de is_single , ahora estamos usando is_page para comprobar el ID de la página.

Podemos utilizar el mismo código con ligeras modificaciones para añadir código javascript al pie de página de su sitio. Eche un vistazo al siguiente ejemplo.

12345678functionwpb_hook_javascript_footer() { ?> // su código javscript va <?php}add_action(wp_footer, wpb_hook_javascript_footer);

En lugar de enganchar nuestra función a wp_head, ahora la hemos enganchado a wp_footer. También puede utilizarlo con etiquetas condicionales para añadir Javascript a mensajes o páginas específicas.

Método 3. Adición de código Javascript dentro de mensajes o páginas utilizando el plugin

Este método te permitirá añadir código en cualquier lugar dentro de tus posts y páginas de WordPress. También podrás seleccionar en qué parte del contenido quieres insertar el código javascript.

Primero, necesita instalar y activar el plugin Code Embed. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, debe editar el mensaje o la página en la que desea añadir el javascript. En la página de edición de mensajes, haz clic en el botón "Opciones de pantalla" y marca la opción "Campos personalizados".

Ahora desplácese hacia abajo y debajo del editor de mensajes, verá el metaboxCustom Fields donde necesita hacer clic en el enlaceEnter new.

Aparecerán ahora el nombre del campo personalizado y los campos de valor.

Debe proporcionar un nombre para el campo personalizado con un prefijo CODE (por ejemplo, CODEmyjscode) y luego pegar el código javascript en el campo de valor.

No olvide hacer clic en el botón "Añadir campo personalizado" para guardar su campo personalizado.

Ahora puede utilizar este campo personalizado para incrustar el código JavaScript en cualquier lugar de esta entrada o página. Simplemente agrega este código de incrustación en cualquier parte del contenido de tu mensaje.

{{CODEmyjscode}}

Ahora puede guardar su mensaje o página y ver su sitio. Podrá ver el código javascript utilizando la herramienta Inspeccionar o viendo el código fuente de la página.

Punta: Estos métodos son para principiantes y propietarios de sitios web. Si usted está aprendiendo el tema de WordPress o el desarrollo de plugins, entonces usted necesita encolar correctamente JavaScript y hojas de estilo a sus proyectos.

Esperamos que este artículo le haya ayudado a aprender a añadir fácilmente JavaScript en las páginas o mensajes de WordPress. También puedes ver nuestra lista de trucos muy útiles para el archivo de funciones de WordPress.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja una respuesta

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

Subir