Cómo añadir JavaScript a las páginas y entradas de WordPress

JavaScript es un lenguaje de programación que añade funcionalidad interactiva a los sitios web. Aprender a utilizar JavaScript en un sitio web WordPress, incluyendo secciones específicas, puede ayudarte a utilizar el código de forma más eficaz. Hay muchas formas de añadir JavaScript a las páginas y entradas de WordPress, ya sea mediante plugins, funciones y ganchos, o editando los archivos del tema para conseguir la personalización que deseas.

¿Puedo utilizar JavaScript en WordPress? 

JavaScript es un lenguaje de programación que puede utilizarse para mejorar la experiencia de usuario (UX) de un sitio web, haciéndolo más interactivo y receptivo. Por ejemplo, JavaScript puede utilizarse para crear una ventana emergente cuando un visitante pulsa un botón. También se puede mostrar un mensaje cuando alguien pasa el ratón por encima de un elemento de la página.

JavaScript puede añadir calculadoras, reproductores de vídeo y otras herramientas a las páginas y entradas de WordPress. Aunque añadir JavaScript a WordPress requiere algunos conocimientos básicos de HTML y CSS, es un proceso relativamente sencillo.

Aspectos a tener en cuenta antes de añadir código JavaScript a WordPress

Al añadir código JavaScript a su sitio de WordPress, es importante recordar que los errores en el código pueden romper todo el sitio. La mejor manera de hacerlo es tener el sitio antes de hacer cualquier cambio.copia de seguridad. De este modo, si surge algún problema, siempre podrá restaurar el sitio.

Antes de añadir cualquier personalización, es necesario realizar una copia de seguridad de dos partes de su sitio de WordPress:

1. base de datos exhaustivaUbicación donde se almacenan todas las entradas, páginas, ajustes y configuraciones.
2. Documentación:Imágenes, vídeos, temas y plugins.

Hacer una copia de seguridad de tu sitio WordPress puede hacerse rápida y fácilmente usando un plugin como Jetpack. Otra opción es hacer una copia de seguridad manual de los archivos. También hay que tener en cuentaCrear un tema secundariopara añadir código personalizado.

Un tema hijo es una copia del tema actual y puede personalizarse sin afectar al código original. Si está mal, basta con activar el tema original para revertir cualquier cambio. Esto también te permite actualizar el tema padre sin perder los cambios de código realizados.

Cómo añadir JavaScript a todo su sitio web WordPress

Si quieres añadir JavaScript a todo tu sitio WordPress, hay varias formas de hacerlo. Una forma es añadir un archivo HTML personalizado al tema y luego insertar código JavaScript en ese archivo.

Otra opción es crear un plugin de WordPress que contenga código JavaScript. También puedes simplemente editar el archivo functions.php e insertar el código en él.

Alternativamente, hacer cambios en todo un sitio de WordPress puede añadir JavaScript a la cabecera o pie de página. La forma más sencilla de hacerlo es instalar y activar el plugin Insertar encabezado y pie de página.

Cuatro formas de añadir JavaScript personalizado a WordPress

Hay muchas maneras de añadir JavaScript personalizado de WordPress a su sitio web:

Método 1: Utilizar plug-ins

La forma más sencilla de añadir JavaScript a WordPress es utilizar un plugin. Este método es más flexible y fácil de gestionar que añadir código directamente en el tema.

Si la programación no es lo tuyo, o quieres una solución más fácil de usar, es recomendable utilizar uno de los muchos plugins disponibles para añadir JavaScript a WordPress.

En este artículo, utilizaremos la funciónInserción de encabezados y pies de página.

Después de activar el plugin, vaya a"Ajustes" → "En el panel de WordPressInsertar encabezado y pie de página".

Verá dos casillas denominadasGuiones en la cabeceraresponder cantandoScripts en el pie de página. Cualquier código añadido a estas dos casillas se insertará en la cabecera o en el pie de página del sitio. Aquí es donde añadirá el JavaScript.

Si desea añadir unCuadro de confirmación JavaScript. En"Guión en el título" inserte el siguiente código:

<!DOCTYPE html>
<html>
<body>
<h2>Cuadro de confirmación JavaScript</h2>
<button onclick="myFunction()">Pruébalo</button>
<p></p>
<script>
function myFunction() {
 var txt;
 if (confirm("Press a button!")) {
  txt = "You pressed OK!";
 } else {
  txt = "You pressed Cancel!";
 }
 document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

Este código mostrará un "intentos "Botón". Al seleccionar el botón, se confirma que lo ha pulsado.

Puede conectarse a su sitio web y hacer clic en "Juicio "para probar esta función.

Método 2: Añadir JavaScript al tema

Añadir JavaScript directamente al tema es una de las formas más sencillas de hacerlo. Crea un nuevo archivo en el directorio de tu tema y nómbralo "custom.js".

A continuación, añada el código JavaScript al archivo y guárdelo. Por último, edita el archivo header.php y añade una línea de código para cargar el nuevo archivo JavaScript:

?php%20bloginfo('template_directory');%20?/custom.js

Recuerda sustituir "custom.js" por el nombre del archivo. Después de añadir esta línea de código, guarda el archivo header.php y súbelo al servidor. Ahora, tu código JavaScript debería estar listo para ejecutarse en todo tu sitio WordPress.

Método 3: Uso de funciones y ganchos de WordPress

También es posible utilizarFunciones y ganchos de WordPressAñadir código personalizado. Una función es un fragmento de código que realiza una acción específica. Por ejemplo, la función wp_enqueue_script() se utiliza para cargar archivos JavaScript.

Los hooks son una funcionalidad de WordPress que permite añadir código sin editar ninguno de los archivos del núcleo. Existen dos tipos de hooks: acciones y filtros.

Las acciones son funciones PHP que se activan en puntos específicos durante la carga de la página. Por ejemplo, la acción wp_head se conecta al temaheader.phpSe activa antes de la etiqueta del archivo. Se puede añadir código personalizado o scripts a la cabecera utilizando este gancho.

Los filtros pueden modificar el código o los datos existentes. Por ejemplo, el filtro_content puede modificar el contenido de una entrada antes de mostrarla. Para añadir JavaScript personalizado a un sitio de WordPress mediante funciones y ganchos, es necesario insertar el código en el archivo functions.php del tema hijo.

Cree un tema hijo añadiendo una nueva carpeta en su directorio de WordPress. A continuación, cree un archivo style.css que contenga los estilos del tema hijo. A continuación, debe añadir el siguiente código al archivo style.css:

/*
Nombre del tema: Twenty Twenty-Two Child
Plantilla: twentytwentytwo
*/

Tras crear el tema hijo, puedes activarlo yendo a Apariencia → Editor de archivos de temas desde el panel de WordPress. Navega hasta el archivo functions.php y añade el siguiente código:

function ti_custom_javascript() {
    ?  Ti_custom_javascript() { ?
        <script
          // tu código javascript va aquí
        </script
    <?php
}
add_action('wp_head', 'ti_custom_javascript');

Cuando haya terminado, guarde los cambios. 

Método 4: Crear un plug-in

Si desea mantener el código JavaScript separado del tema, puede crear un plugin de WordPress para incluir el código JavaScript. Crear un plugin requiere más trabajo que añadir el código directamente al tema. Sin embargo, este método es más flexible y fácil de gestionar.

Para crear un plugin, primero debe crear un nuevo directorio en el directorio wp-content/plugins de su instalación de WordPress. Nombra el directorio "my-javascript-plugin".

A continuación, cree un nuevo archivo en ese directorio y nómbrelo "my-javascript-plugin.php". El contenido de este archivo debe ser como el siguiente:

<?PHP 
/* 
Plugin Name: My JavaScript Plugin 
Plugin URI: http://example.com/ 
Description: This plugin contains my JavaScript code. 
Version: 1.0 
Author: Jane Doe 
Author URI: http://example.com/ 
*/  
?>

Cambie el nombre del plugin poryURI del pluginyDescripciónyAutorresponder cantandoAutor URIse sustituyen por sus valores. Estos son sólo campos de información general que describen el plugin.

A continuación, es necesario añadir código JavaScript al archivo. El código debe colocarse debajo de la información inicial del plugin, pero antes de la etiqueta PHP de cierre (? >). Después de añadir el código, guarda el archivo y súbelo al servidor.

El plugin debería estar instalado y activado. Usted puede verificar que el plugin está funcionando por ir a la página de plugins en el panel de administración de WordPress. Debería ver su plugin en la lista.

Cómo añadir JavaScript a una página o entrada específica de WordPress

Si quieres añadir JavaScript a una página o entrada específica de WordPress, puedes insertar el código directamente en el editor del tema. Busca el archivo functions.php y añade el siguiente código:

function ti_custom_javascript() { if (is_single ('1')) {
  if (is_single ('1')) {
    if (is_single ('1')) { >if (is_single ('1') { ?
        
          // tu código javascript va aquí
        </script
    <?php
  }
}
add_action('wp_head', 'ti_custom_javascript');

El "1" del código anterior debe cambiarse por un ID de entrada o página. Abra la entrada desde el panel de control y busque la URL en la barra del navegador para encontrar este número. El número de ID está justo al lado de "post=":

Recuerde guardar el archivo después de sustituir el número y añadir el JavaScript personalizado. 

Cómo añadir JavaScript al menú de WordPress

Para añadir JavaScript al menú de WordPress, debe crear un elemento de menú personalizado. En primer lugar, utilice las Herramientas de desarrollo para encontrar el número de ID del elemento de menú y, a continuación, utilice jQuery para apuntar con ese ID. Esto activará el script cuando un visitante haga clic en el elemento del menú.

Cómo añadir JavaScript al pie de página de WordPress

La forma más sencilla de añadir JavaScript al pie de página de WordPress es utilizar un plugin como Insert Header and Footer. Esta herramienta inserta código en el encabezado y pie de página de tu sitio web WordPress sin tener que editar ninguno de los archivos del tema.

Para utilizar Insertar encabezado y pie de página, sólo tiene que instalar y activar el plugin. A continuación, vaya aestablecer→Inserción de encabezados y pies de página. En la página de configuración, verá tres casillas para añadir código a la cabecera, el cuerpo y el pie de página de su sitio web. Sólo tiene que pegar el código JavaScript en la casillapies de página en el guión correspondiente y, a continuación, haga clic en el botón"Guardar".es suficiente.

Otra forma es editarfunciones.phpDocumentación. JavaScript puede ejecutarse insertando el siguiente código en el pie de página de su sitio web:

function wpb_hook_javascript_footer() {
    function wpb_hook_javascript_footer() {  <script
        <script
          // tu código javascript va aquí
        </script
    <?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');

Este código se enganchará en wp_footer. recuerde guardar el archivo cuando haya terminado para actualizar los cambios.

Cómo añadir JavaScript a los widgets de WordPress

Para añadir JavaScript a un widget de WordPress, debe editar el código del widget. Haga clic en el menú del widget y seleccione"Editar en HTML".

En el editor de código del bloque, añade la etiqueta y el código JavaScript. Cuando haya terminado, seleccione la etiqueta"Renovación"Botón.

Cómo añadir JavaScript "onclick" a los botones de WordPress

Añadir eventos "onclick" a los botones de WordPress es una buena forma de añadir funcionalidad extra a tu sitio web. Puede utilizar el evento onclick para activar una ventana emergente o mostrar un mensaje cuando se hace clic en el botón.

conecteSe añade el evento onclickPara llegar al botón de WordPress, debe editar el código del botón y añadir el siguiente atributo: onclick="your_function()". Asegúrese de sustituir "su_función()" por el código JavaScript que se ejecutará al hacer clic en el botón. Después de añadir el atributo onclick, haga clic en el botón"Guardar".botón. El botón debería tener ahora el evento onclick añadido.

Cómo encontrar y depurar errores de JavaScript en páginas de WordPress

Para encontrar y depurar errores de JavaScript, puede añadir lo siguiente al archivowp-config.phppara habilitar la depuración de scripts. 

Abra el archivo mediante un cliente de Protocolo de Transferencia de Archivos (FTP) o un gestor de archivos. A continuación, inserte el siguiente código:

define('SCRIPT_DEBUG', true);

Recuerda colocar este código en la línea "¡Ya está, deja de editar! Diviértete blogueando".

Para encontrar y depurar errores de JavaScript en las páginas de WordPress, puede utilizar su navegador. En Google Chrome, haz clic en el icono de menú (tres puntos verticales) situado en la esquina superior derecha. A continuación, en el menú desplegable, seleccioneMás herramientas → Herramientas para desarrolladores.

También se puede cambiar pulsando la teclaCtrl + Turno + J (Windows/Linux) oCmd + Opción + J (Mac) para acceder a las herramientas de desarrollo.

Herramientas abiertas para desarrolladoresA continuación, pulse"Consola".Pestaña. Aquí verá todos los errores de JavaScript que se producen en su sitio de WordPress.

Si no estás seguro de lo que significa el error o de cómo solucionarlo, puedes buscar en Internet. Simplemente copia y pega el mensaje de error en un motor de búsqueda para encontrar algunos resultados útiles. Prueba también a desactivar todos los plugins de WordPress para ver si este método resuelve el problema. Si lo hace, significa que uno de los plugins está causando el problema. Los plugins se pueden reactivar uno a uno hasta encontrar el plugin problemático, reduciendo así las herramientas que están causando el problema.

alcanzar un veredicto

Al añadir JavaScript a un sitio web WordPress se crean funciones interactivas que mejoran la experiencia de usuario (UX) de la página. Existen varias formas de añadir JavaScript. El método que mejor le funcione dependerá de sus preferencias y de la naturaleza del código que vaya a añadir. Si sólo estás insertando una pequeña cantidad de código, puede ser más fácil utilizar el tema directamente. Pero si estás añadiendo mucho código, usar un plugin o editar functions.php puede ser mejor.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres