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!