Crear una plantilla en WordPress con Bootstrap 4 – conectando archivos CSS y JS a la plantilla
Vamos a seguir avanzando en nuestra plantilla, para lo cual le vamos a decir que tiene que leer nuestro archivo CSS u otros que necesitemos y los archivos javascript que creamos necesarios, de modo que vamos a proceder.
Lo primero que tenemos que hacer es crear un archivo llamado functions.php en la raíz de nuestro tema.
Conectando el CSS
Nuestro archivo style.css de momento no esta mandando información a la plantilla, ahora mismo solo sirve para que WordPress reconozca nuestro tema debido a los comentarios de cabecera.
Para hacer que lo reconozca lo que haremos será hacer introducir la siguiente acción en el archivo functions:
function load_styles(){ wp_register_style('estilo_wpb4', get_stylesheet_uri(), '', '1.0', 'all'); wp_enqueue_style('estilo_wpb4'); } add_action('wp_enqueue_scripts', 'load_styles');
El nombre de la función es arbitrario y podemos poner el que queramos, pero debe de coincidir con la acción add_action que carga la cola de scripts (wp_enqueue_scripts) con el nombre de la función.
Dentro de la función usamos la función nativa de WP llamada wp_register_style() que usa varios parámetros.
- nombre de la hoja de estilo: arbitrario
- ubicación por medio de la función get_stylesheet_uri(): que nos permitirá marcar la localización de donde proviene nuestra hoja de estilo.
- definimos si la hoja de estilos depende de otra
- versión de la hoja de estilos
- medio al que se va aplicar; pantalla, impresión… al querer que sea para todo usamos all
Pero de momento solo lo hemos registrado no lo hemos añadido, para ello se usa la función wp_enqueue_style() que recibe como argumento el nombre que le hayamos puesto a la hoja de estilo.
Ahora bien, aunque WordPress ya sabe lo que tiene que hacer, no sabe donde hacerlo, de modo que necesitamos irnos al archivo header.php y eliminar el enlace a la hoja de estilo para sustituirlo por la siguiente línea:
<?php wp_head();?>
De esta forma WordPress ya sabe que hacer y donde y ya empieza a coger los estilos de style.css
Pero imaginemos que queremos utilizar dos archivos css, uno para los elementos típicos de nuestra plantilla y otro para los específicos de nuestro proyecto, solo tendríamos que añadir un nuevo register y un nuevo enqueue como vemos aquí:
function load_styles(){ wp_register_style('estilo_wpb4', get_stylesheet_uri(), '', '1.0', 'all'); wp_register_style('estilo_wpb4_personalizado', get_template_directory_uri() . '/css/css.css', '', '1.0', 'all'); wp_enqueue_style('estilo_wpb4'); wp_enqueue_style('estilo_wpb4_personalizado'); } add_action('wp_enqueue_scripts', 'load_styles');
Como ves todo muy sencillo, ahora vamos a hacer lo mismo con los scripts de javascript, vamos a añadir dos para que ver como se hace pero si solo quieres uno solo tienes que registrar y poner en cola de carga uno de ellos, y si quieres más pues seguir el mismo procedimiento. Eso sí, no se nos puede olvidar crear nuestros archivos js dentro de la carpeta js.
function leer_scripts(){ wp_register_script( 'js', get_template_directory_uri() . '/js/js.js', array( 'jquery' ), false, true ); wp_register_script( 'js2', get_template_directory_uri() . '/js/js2.js', array( 'jquery' ), false, true ); wp_enqueue_script( 'js' ); wp_enqueue_script( 'js2' ); } add_action( 'wp_enqueue_scripts', 'leer_scripts' );
Pero esto sigue sin hacer que funcionen los scripts que se cargan con la función wp_footer() y que pondremos detrás de la etiquete footer en nuestros archivo footer.php
De esta forma ya tendremos enlazados nuestros archivos css y js.
¿Fácil verdad? pues no te pierdas las siguientes entradas donde aprenderemos mucho más y le daremos dinamismo al pie y a la cabecera…
Si te ha gustado esta entrada, no estaría de más que le des a algún anuncio que te interese de la web… Gracias!