En esta ocasión vamos a añadir CSS y Javascript a un child theme de WordPress utilizando el archivo functions.php.
En primer lugar debemos subir o crear los archivos .css y .js a una carpeta en nuestro child theme.
Podemos hacerlo mediante el control panel de nuestro hosting o vía FTP con Filezilla, pero para este tutorial usaremos un plugin llamado File Manager para WordPress.
Para instalarlo, nos vamos al menú de administración de WordPress y hacemos clic en la sección de Plugins y Añadir Nuevo.
Y en el buscador escribimos «File manager», le damos clic a «Instalar», luego en «Activar» y listo.
Aparecerá la opción «Administrador de archivos WP» y le hacemos clic. Una vez cargue nos mostrará las carpetas de nuestra instalación de WordPress.
En el Administrador de archivos buscamos la carpeta «wp-content» y dentro de ella la carpeta «themes» que es donde estará nuestro tema y su Child theme.
Abrimos la carpeta del child-theme y dentro hacemos clic derecho para crear la carpeta «tu-js-o-css» (puedes ponerle el nombre que desees).
Dentro de la carpeta «tu-js-o-css» creamos los archivos donde incluiremos nuestro CSS y JS que para este tutorial los llamaremos «Ejemplo.css» y «Ejemplo.js»:
Hacemos clic derecho sobre el archivo «Ejemplo.css» y hacemos clic en «Code Editor», se abrirá una nueva ventana y pegamos o escribimos el código CSS en ella y le damos a Guardar y Cerrar («SAVE & CLOSE»):
Luego en WordPress nos vamos a «Apariencia» y en «Editor de temas» y hacemos clic en functions.php:
Para incluir los códigos que hemos creado en la carpeta «tu-js-o-css» a las funciones de WordPress , pegaremos el siguiente código en functions.php:
/*
* Llamando CSS y JS adicional a WordPress
*/
function ejemplo_scripts() {
wp_register_style('ejemplo-style-css', get_stylesheet_directory_uri().'/tu-js-o-css/Ejemplo.css', '', '1.0','all');
wp_register_script('ejemplo-script-js', get_stylesheet_directory_uri().'/tu-js-o-css/Ejemplo.js','','1.0', false);
wp_enqueue_style('Ejecutar-CSS', get_stylesheet_directory_uri(), array('ejemplo-style-css'), '1.0');
wp_enqueue_script('Ejecutar-JS', get_stylesheet_directory_uri(), array('ejemplo-script-js'), '1.0', false);
}
add_action( 'wp_enqueue_scripts', 'ejemplo_scripts' );Los colores en el texto del código no tienen ninguna función, solo sirven para resaltar que puedes cambiar los nombres coloreados en tomate y naranja de la función.
Pero en wp_enqueue_style y wp_enqueue_script debes usar los mismos nombres coloreados en tomate que usaste en wp_register_style y wp_register_script.
Para agregar más hojas de estilo y códigos javascript a WordPress, primero debemos crear una función principal donde ubicaremos las rutas de los archivos usando wp_register_style para el CSS y wp_register_script para los Javascript.
Una vez que localicemos su ruta, llamaremos a los archivos con dos funciones adicionales dentro de nuestra función principal: wp_enqueue_style para los estilos y wp_enqueue_script para los Javascript.
Finalmente ejecutamos la función principal con add_action usando el hook ‘wp_enqueue_scripts’.
wp_register_style: Para registrar la ruta de nuestros archivos CSS.
wp_register_script: Para registrar la ruta de nuestros archivos Javascript.
get_stylesheet_directory_uri(): Para obtener el directorio principal de la carpeta donde colocaremos nuestros assets.
wp_enqueue_style: Para ejecutar los archivos CSS registrados con wp_register_style.
wp_enqueue_script: Para ejecutar los archivos Javascript registrados con wp_enqueue_script. usa true o false al final para determinar si el archivo estará ubicado en la cabecera de la página o en el pie.
Más información en la documentación de WordPress sobre estas funciones.
Quedando como en la imagen más abajo. Para guardar los cambios le damos «Actualizar archivo»:
Una vez incluidos los códigos debemos llamarlos al html, para eso nos creamos una nueva página de WordPress (o también puedes hacerlo en una página existente) y colocas el HTML, y las clases requeridas para que funcione:
Y listo nuestros archivos JS y CSS son llamados y ejecutados por WordPress:
Si no funciona asegúrate que los incluiste bien, revisando el inspector de código de tu navegador los archivos, en este caso «Ejemplo.css» y «Ejemplo.js» deben parecer:
Y eso sería todo en cuanto a este tutorial para añadir CSS y Javascript al Child theme de WordPress utilizando functions.
Puedes leer otras entradas en mi blog o seguirme en mis redes sociales para mantenerse actualizado:
Facebook Linked InEspero tengas un buen día :D.
