De vez en cuando, cuando construyo sitios web para clientes, necesito añadir algo de javascript. Por ejemplo, para mostrar un elemento al pulsar un botón, ejecutar cálculos en un formulario, etcétera.
Pero añadir código javascript plano a una página no es la mejor idea. Incluso si se puede añadir, no es el lugar adecuado para añadir scripts. En segundo lugar – jquery requiere llamar a la funcionalidad de jquery en su sitio web, y no todos los temas lo llaman fuera de la caja.
Aquí encontrarás un pequeño tutorial de cómo ejecutar scripts javascript y jquery de una manera que realmente funcione.
Cómo añadir un script jquery a WordPress
Hay muchos plugins que podrías instalar para añadir scripts jquery a WordPress. Pero como no me gusta añadir plugins adicionales para una característica tan pequeña, te mostraré cómo hacerlo sin plugins.
Este es el ejemplo que usamos:
<script>
$(document).on("click", ".showit", function () {
$(".my-element").toggle('slow');
});
</script>Si hace clic en el elemento con la clase showit, entonces se alterna (muestra u oculta) el elemento con la clase my-element.
Si añades este código a un bloque HTML o a la sección head de un sitio web WordPress, probablemente te decepcionará, porque no funcionará. Hay una cosa que falta – jquery necesita ser cargado en primer lugar.
Sólo para una prueba rápida, podemos llamar a jquery desde su CDN así:
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
<script>
<script>
$(document).on("click", ".showit", function () {
$(".my-element").toggle('slow');
});
</script>Ahora, si tienes el script en el lugar correcto, y ambas clases definidas en la página, el script debería funcionar bien. Pero aún no hemos terminado.
Primero – ejecutar scripts desde otro servidor (jquery CDN) tomará algún tiempo, por lo que ralentizará tu sitio web. Eso no es bueno, y tendremos que resolverlo. Segundo – necesitamos poner estos scripts en el lugar correcto – en la sección <head> de su sitio WordPress. Tercero – puede que no necesitemos llamar a estos scripts en cada página. Le mostraré cómo llamar a la secuencia de comandos sólo cuando sea necesario.
Vamos a cubrirlo.
Cómo llamar a jquery desde la carpeta de temas de WordPress
Para cargar jquery lo más rápido posible, descargue el archivo jquery en su ordenador. Puede utilizar este enlace de CDN mencionado anteriormente – haga clic aquí.
Una vez que el archivo esté en su ordenador, súbalo al servidor donde se encuentran los archivos de su sitio web WordPress. Específicamente – suba este archivo al directorio de su tema ( wp-content/themes/[su tema]/). Cree el directorio js si aún no existe, y coloque el archivo allí.
Puede usar la aplicación Filezilla para subirlo, o puede ir a Cpanel o DirectAdmin, y subir el archivo usando el Administrador de Archivos en el panel.
Cómo añadir jquery script a la sección head del tema de WordPress
Es muy fácil. Para llamar a cualquier script de la sección <head> en WordPress, vaya a Apariencia >> Editor de archivos de tema o Herramientas >> Editor de archivos de tema. Abre el archivo functions.php de la derecha, y añade este código al final del archivo:
function rocksolid_script() {
?>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-3.6.1.min.js"></script>
<script>
$(document).on("click", ".showit", function () {
$(".dont-show").toggle('slow');
});
</script>
<?php
}
add_action('wp_head', 'rocksolid_script');Como ves, estamos llamando a la función llamada rocksolid_script en la sección head de WordPress. Hace dos cosas:
- Carga jquery desde el directorio js/ del tema activo actual, por lo que ya no necesitamos el enlace CDN. Puedes obtener la url del tema activo actual usando <?php echo get_template_directory_uri(); ?>.
- Se ejecuta el script jquery real que necesitábamos en primer lugar.
¿Y si necesitamos cargarlo sólo en una página?
Cómo cargar un script jquery personalizado sólo en una página específica
Si desea llamar a la función sólo en la página principal o cualquier otra página específica en WordPress, tenemos que añadir una comprobación adicional en la secuencia de comandos.
Por ejemplo, si quieres cargar el script mencionado anteriormente sólo en la página de inicio, tienes que añadir if is_front_page() a la función, como aquí:
function rocksolid_script() {
if (is_front_page()) { ?>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-3.6.1.min.js"></script>
<script>
$(document).on("click", ".showit", function () {
$(".dont-show").toggle('slow');
});
</script>
<?php }
}
add_action('wp_head', 'rocksolid_script');Para cargar el script sólo en un post específico, necesitarías usar if (is_single(POST ID HERE)).
Para cargar el script sólo en una página específica, necesitarías usar if (is_page(PAGE ID HERE)).
Si no tienes ni idea de dónde encontrar el ID de la página o del post en WordPress, lee este artículo.
