¿Desea agregar un JavaScript en sus páginas o publicaciones de WordPress? A veces, es posible que deba agregar un 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 en sus publicaciones. En este artículo, le mostraremos cómo agregar fácilmente JavaScript en 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 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:
<script type="text/javascript"> // Some JavaScript code </script> <!-- Another Example: --!> <script type="text/javascript" src="/path/to/some-script.js"></script>
Ahora, si agrega un fragmento de código 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 en 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 código JavaScript en su sitio web para agregar una herramienta de terceros. Estos scripts suelen ir a la sección del encabezado o en la parte inferior antes de la etiqueta de su sitio web. De esta forma, el código se carga en cada vista de página.
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 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 su tema.
Por eso recomendamos utilizar un plugin para cargar javascript en su sitio.
Primero, debe instalar y activar el Insertar encabezados y pies de página plugin. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un WordPress. plugin.
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.
Ahora puede pegar el código JavaScript que copió en uno de estos cuadros y luego hacer clic en el botón Guardar.
Insertar encabezados y pies de página plugin ahora cargará automáticamente el código que agregó en cada página de su sitio web.
Método 2. Agregar código JavaScript manualmente usando 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, echemos un vistazo a 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 o un sitio específico plugin.
function wpb_hook_javascript() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');
Agregar JavaScript a una publicación o página específica de WordPress usando código
Supongamos que solo desea cargar este javascript en una publicación específica de WordPress. Para hacer eso, necesitará agregar lógica condicional al código. Eche un vistazo al siguiente ejemplo:
function wpb_hook_javascript() {
if (is_single ('16')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
Si observa más de cerca el código anterior, verá que hemos envuelto el código javascript alrededor de la lógica condicional para que coincida con una ID de publicación específica. Puede usar esto reemplazando 16 con su propia ID de publicación.
Ahora, este código funcionaría para cualquier tipo de publicación excepto para las páginas. Echemos un vistazo a otro ejemplo, excepto que este buscará un ID de página específico antes de agregar el código javascript a la sección del encabezado.
function wpb_hook_javascript() {
if (is_page ('10')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
En vez de es soltera, ahora estamos usando is_page para comprobar el ID de la página.
Podemos usar el mismo código con una ligera modificación para agregar código javascript al pie de página de su sitio. Eche un vistazo al siguiente ejemplo.
function wpb_hook_javascript_footer() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');
En lugar de enlazar nuestra función a wp_head, ahora la hemos enlazado a wp_footer. También puede usarlo con etiquetas condicionales para agregar Javascript a publicaciones o páginas específicas.
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 dentro de sus publicaciones y páginas de WordPress. También podrá seleccionar en qué parte del contenido desea incrustar el código javascript.
Primero, debe instalar y activar el Código incrustado plugin. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un WordPress. plugin.
Tras la activación, debe editar la publicación o la página donde desea agregar el javascript. En la página de edición de publicaciones, haga clic en el botón ‘Opciones de pantalla’ y marque la opción ‘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’.
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 ‘Agregar campo personalizado’ para guardar su campo personalizado.
Ahora puede usar este campo personalizado para incrustar el código JavaScript en cualquier lugar de esta publicación o página. Simplemente agregue este código de inserción en cualquier lugar 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 son para principiantes y propietarios de sitios web. Si está aprendiendo el tema de WordPress o plugin desarrollo, entonces necesita poner en cola correctamente JavaScript y hojas de estilo a sus proyectos.
Esperamos que este artículo le haya ayudado a aprender cómo agregar fácilmente JavaScript en páginas o publicaciones de WordPress. Es posible que también desee ver nuestra lista de trucos extremadamente útiles para el archivo de funciones de WordPress.
Si le gustó este artículo, suscríbase a nuestro Canal de Youtube . También puedes encontrarnos en Twitter y Facebook.
Cómo agregar fácilmente JavaScript en páginas o publicaciones de WordPress (3 métodos) .