¿Quieres integrar JavaScript y CSS en WordPress? Podemos incluir scripts o reglas CSS en los encabezados o pie de página de nuestro tema. También podemos agregarlos en el archivo functions.php, y en muchas otras formas. El asunto consiste en seleccionar la manera correcta de integrar algún script de JavaScript o alguna regla CSS de nuestro WordPress. Si no lo hacemos correctamente podríamos añadir códigos de manera repetitiva por desconocimiento. También, podríamos tener problemas de mantenimiento en nuestro sitio de WordPress.
En esta oportunidad en Ayuda Hosting, les mostraremos cómo integrar JavaScript y CSS en WordPress de manera fácil y en pocos pasos.
WordPress dispone de una forma particular para incluir JavaScript y CSS. Existe una cantidad de funciones de WordPress que sirven para que nuestros códigos de JavaScript y CSS puedan ser colocados en los sistemas de archivos JS y CSS. Algunas de ellas son las siguientes: wp_register_script(), wp_enqueue_script() y wp_register_style(), wp_enqueue_style().
Estas funciones son bastante completas y pueden aceptar variables tales como nombre y ubicación de un archivo, versión, el destino donde se cargará el script y las dependencias.
Por otra parte, WordPress dispone de un plugin gratuito que integra contenidos en JavaScript y CSS. Simple Custom CSS and JS de WordPress nos permite personalizar la apariencia de nuestro sitio web mediante códigos JS y CSS. Podemos emplearlo sin realizar cambios en nuestro tema o archivos. Puede ser adquirido en versión Pro con todas las opciones disponibles.
Veamos a continuación cómo poder integrar JavaScript y CSS en WordPress correctamente.
¿Cómo integrar JavaScript correctamente?
Veamos entonces cómo integrar un archivo de JavaScript correctamente en nuestro sitio de WordPress. Para hacerlo, añadiremos un código que incluirá un archivo js el cual, nos ayudará a convalidar los campos del formulario de contacto. Este código lo añadiremos en el archivo function.php de nuestro tema. El archivo emplea códigos jQuery lo cual, nos obliga a incluir una dependencia a la librería.
function incluir_javascript() {
wp_register_script('validation_script', plugins_url('validate.js', __FILE__), array('jquery'),'3.3.1', true);
wp_enqueue_script('validation_script');
}
add_action( 'wp_enqueue_scripts', 'incluir_javascript' );Como podremos observar, contamos con muchas variables que son las siguientes:
- $handle: Título del script
- $src: Localización del archivo (opcional)
- $deps: Array o arreglo de dependencias a ejecutar (opcional)
- $ver: Versión del script (opcional)
- $in_footer: El script se colocará en cola del footer (en el caso de ser true). Se colocará en el header (si es false). Esta última es opcional.
¿Cómo integrar CSS correctamente?
A continuación, haremos lo mismo que en el punto anterior pero ahora con un archivo de CSS. En otras palabras, utilizaremos la manera correcta de añadir los nuevos estilos en el tema que estamos empleando en la actualidad. Para lograr esto, y de la misma forma que lo hicimos antes, abriremos el archivo functions.php de nuestro tema y añadimos el siguiente código:
function incluir_css() {
wp_register_style('styles', plugins_url('styles.css', __FILE__));
wp_enqueue_style('styles');
}
add_action( 'wp_enqueue_scripts', 'incluir_css' );Evidentemente, modificaremos las variables de la función wp_register_style de acuerdo con nuestros objetivos específicos. Es importante considerar que las variables que colocaremos son las mismas explicadas en el punto anterior.
Esperamos que este artículo sobre cómo integrar JavaScript y CSS en WordPress, les haya resultado útil. También le puedes echar un vistazo a nuestra guía sobre las mejores bibliotecas de animación de JavaScript.
