How To Easily Add Javascript In Wordpress Posts And Pages

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

¿Desea agregar JavaScript a sus páginas o publicaciones de WordPress? A veces, es posible que deba agregar código JavaScript a todo el sitio web o en páginas específicas. De forma predeterminada, WordPress no le permite agregar código directamente a sus publicaciones. En este artículo, le mostraremos cómo agregar fácilmente JavaScript a las páginas o publicaciones 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 insertar un reproductor de video, agregar una calculadora u otro servicio de terceros, a menudo se le pedirá que copie y pegue un fragmento de JavaScript en su sitio web. Un fragmento de JavaScript típico podría verse así:

Ahora, si agrega un fragmento de JavaScript a una publicación o página de WordPress, WordPress lo eliminará cuando intente guardarlo. Dicho esto, veamos cómo puede agregar fácilmente JavaScript a las páginas o publicaciones de WordPress sin romper su sitio web.

Método 1. Agregar JavaScript en todo el sitio mediante la inserción de encabezados y pies de página

A veces se le pedirá que copie y pegue un fragmento de JavaScript en su sitio web para agregar una herramienta de terceros. Estos scripts suelen ir en la sección de cabecera o en la parte inferior antes de la etiqueta de su sitio web. De esta forma, el código se carga en cada página visitada. 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 rastrear a los visitantes de su sitio web. Puede agregar este 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 su tema. Es por eso que le recomendamos que utilice un complemento para cargar javascript en su sitio. En primer lugar, debe instalar y activar el complemento Insertar encabezados y pies de página. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress. Tras la activación, debe visitar Configuración »Insertar encabezados y pies de página página. Verá dos cuadros, uno para el encabezado y otro para la sección del pie de página.
Insertar La Configuración Del Complemento Encabezados Y Pies De Página Ahora puede pegar el código JavaScript que copió en uno de estos cuadros y hacer clic en el botón Guardar. El complemento Insertar encabezados y pies de página ahora cargará automáticamente el código que agregó en cada página de su sitio web.

Método 2. Agregar manualmente código JavaScript mediante código

Este método requiere que agregue código a sus archivos de WordPress. Si no lo ha hecho antes, consulte nuestra guía sobre cómo copiar y pegar código en WordPress. Primero veamos cómo agregar código al encabezado de su sitio de WordPress. Deberá agregar el siguiente código al archivo functions.php de su tema oa un complemento específico del sitio. Función wpb_hook_javascript () {?> Agregar JavaScript a una publicación o página específica de WordPress usando código Suponga que solo desea cargar este javascript en una publicación específica de WordPress. Para hacer esto, necesitará agregar lógica condicional al código. Eche un vistazo al siguiente ejemplo: function wpb_hook_javascript () {if (is_single ('16')) {?> es soltero, ahora estamos usando is_page para verificar el ID de la página. Podemos usar el mismo código con ligeras modificaciones para agregar código javascript al pie de página de su sitio. Eche un vistazo al siguiente ejemplo. Función wpb_hook_javascript_footer () {?>

Método 3. Agregar código JavaScript dentro de publicaciones o páginas usando un complemento

Este método le permitirá agregar código en cualquier lugar de sus publicaciones y páginas de WordPress. También puede seleccionar en qué parte del contenido desea incrustar el código javascript. En primer lugar, debe instalar y activar el complemento Code Embed. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress. Al activar, debe editar la publicación o la página donde desea agregar javascript. En la página de edición del artículo, haga clic en el botón "Opciones de pantalla" y marque la opción "Campos personalizados". Mostrar Meta-Cuadro De Campos Personalizados Ahora desplácese hacia abajo y debajo del editor de publicaciones verá el metabox "Campos personalizados" donde debe hacer clic en el enlace "Ingresar nuevo". Agregar Un Nuevo Campo Personalizado 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. Agregar Código Javascript A Un Campo Personalizado No olvide hacer clic en el botón "Agregar un campo personalizado" para guardar su campo personalizado. Ahora puede usar este campo personalizado para incrustar código JavaScript en cualquier lugar de esta publicación o página. Simplemente agregue este código de inserción en cualquier parte del contenido de su publicación. {{CODEmyjscode}} Ahora puede guardar su publicación 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. Consejo: Estos métodos están destinados a principiantes y propietarios de sitios web. Si está aprendiendo sobre el desarrollo de plugins o temas de WordPress, necesita poner en cola correctamente JavaScript y hojas de estilo en sus proyectos. Esperamos que este artículo le haya ayudado a aprender cómo agregar fácilmente JavaScript a las páginas o publicaciones de WordPress. También puede consultar nuestra lista de consejos extremadamente útiles para el archivo de funciones de WordPress. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.

Leave a Reply