Temas (V) Crear un tema, Conectar el CSS y el JS con WordPress

Posted by On noviembre 14, 2015 10 Comments

Ya hemos diseccionado nuestra plantilla, pero aun no lee el CSS que le tenemos preparado, es más ahora mismo no podríamos leer tampoco ningun archivo javascript, pero no nos preocupemos, en esta parte vamos a aprender a Conectar el CSS y el JS con WordPress.

Cargando archivos CSS

Lo primero que tenemos que hacer es crear un archivo llamado functions.php y ponerlo en la raíz de nuestro tema, este archivo nos permite insertar todo el contenido que queramos ejecutar al modo programación php.

De este modo lo primero que vamos a hacer en él va a ser unir la nuestra hoja de estilo, style.css con nuestro tema, ya que de momento lo único que está haciendo es que wordpress reconozca el tema.

Para cargar nuestra hoja de estilos debemos de introducir el siguiente fragmento de código dentro de nuestro archivo functions.php

function load_styles(){
	wp_register_style('estilo_tema', get_stylesheet_uri(), '', '1.0', 'all');
	wp_enqueue_style('estilo_tema');
}

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();?>

Esta función le dice a WordPress que es aquí donde tiene que cargar los scripts.

También podemos aprovechar que hemos usado esta función para incluir en footer.php la siguiente línea antes del cierre del body.

<php wp_footer();>

Estas dos funciones indican donde tienen que cargar funciones de cabecera o de jquery…

De este modo nuestro archivo header.php quedaría así:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Voyager</title>
	<?php wp_head();?>
</head>
<body>
<header>
    <img src="http://www.creabytes.com/media/servicios-logo.png" atl="logo">
    <h3>Slogan</h3>
</header>
<nav>
    aqui viene el navegador
</nav>
<main>
<section id="cuerpo">

Y el archivo footer.php de esta forma:

    </main>
    <footer>El footer!!!</footer>
    <?php wp_footer(); ?>
</body>
</html>

Con esto ya podemos ver como se ha cargado nuestra hoja de estilos, y como aparece la barra superior de administración si estamos logueados en el sistema, dando la primera funcionalidad de WordPress…

Cargando archivos JS

Una vez que ya hemos visto como se cargan los archivos css es muy fácil entender como se cargan los archivos js, de hecho vamos a cargar dos archivos dentro de una carpeta llamada js para poder extrapolarlo a la inclusión de más archivos o incluso introducir archivos de frameworks de JavaScript…

Lo primero que debemos de hacer es crear nuestros archivos dentro del tema, tal y como vimos en la entrada de la estructura del tema, de este modo vamos a crear una carpeta llamada js y dos archivos llamados js.js y js2.js (Sí, ya lo se, no me he quebrado la cabeza con los nombres…)

Bien una vez que tenemos nuestros archivos creados, lo que haremos será irnos a nuestro archivo functions.php y añadir el siguiente código:

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' );

Como de costumbre ya en WP vemos que debemos de añadir nuestra acción introduciendo esta vez el parámetro wp_enqueue_scripts que se encarga de poner en la cola de carga los scripts que necesitemos y como segundo argumento le pasamos el nombre de la función que va a registrar y poner en la cola los archivos.

Una vez dentro de la función de carga (leer_scripts())  registramos los scripts por medio de la funciones wp_register_script que acepta varios parámetros como anteriormente vimos, pero a nosotros nos interesan ahora mismo los dos primeros:

  • El nombre que le vamos a dar al archivo para registrarlo
  • La dirección relativa de donde se encuentra nuestro archivo, utilizando get_template_directory_uri() para colocarnos en el directorio del tema y desde ahi, por medio del encadenamiento de cadenas llegar hasta el archivo en cuestión. 
    

    • 



Finalmente debemos de poner en cola los scripts por medio de wp_enqueue_script() que recibe como argumento el nombre del archivo que queremos poner en la cola tal y como ha sido registrado más arriba.


Esto puede parecer muy complejo, pero una vez se entiende es algo mecánico, además de permitirnos agregar de forma sencilla tantos archivos como deseemos e ir haciendo nuestro tema dinámico.


En la siguiente entrada vamos a ir haciendo que nuestra cabecera y nuestro pie se vayan volviendo dinámicos, tomando ahora sí ya datos desde nuestro WordPress!!!