Header y Footer en wordpress

Header y Footer en Wordpress (2/N)

Hugui Dugui

Para ir paso a paso en la creación de un tema vamos a hacer una tarea recurrente en todo proyecto web que es la separación del Header y Footer que es la parte que repite en cada página que se visita. Para esto, wordpress usa dos funciones get_header() y get_footer()

Una estructura HTML básica es la siguiente:

La parte verde es el Header y la parte azul el Footer y todo lo que está en medio es lo que cambiará de acuerdo a la página que se esté visitando.

Las funciones get_header() y get_footer() obtendrán lo que haya en dos archivos de nuestro tema con nombre header.php y footer.php respectivamente. Entonces, vamos a crearlos dentro de nuestro template wp-content/themes/huguidugui


Dentro de header.php vamos a colocar la parte verde:

<!DOCTYPE html>
    <html lang="es">
	<head>
		<title>Hugui Dugui Template Example</title>
	</head>
	
	<body>


En el footer ponemos la parte de azul que solo son los cierres de los tags:

	</body>
</html>


Ahora vamos a index.php y usaremos las funciones de wordpress get_header() y get_footer() para ver que todo funciona correctamente de la siguiente forma:

<?php
/**
 * index.php es el template más genérico que usará wordpress 
 * sino encuentra ninguno de los archivos con nombre clave como:
 * category.php, page.php, sinle.php y otros...
 *
 * @package Hugo
 * @subpackage HuguiDugui
 * @since Hugui Dugui 1.0
 */
?>

<?php get_header(); ?>

    <div>
	Aqui estará el contenido de cada página
    </div>

<?php get_footer(); ?>


Ahora que ya tenemos esto, abrimos en el navegador y abrimos el código fuente para ver que ya está la estructura de HTML que acabamos de escribir:

De este modo es que podemos ir agregando en header.php, por ejemplo, cargar los CSS y en footer.php cargar los archivos js. Cabe mencionar que aunque se pueden poner directamente los CSS y js, wordpress tiene otra forma de agregar éstos archivos con los llamados Hooks que ya veremos más adelante en el tutorial. Al principio los hooks parece que complica más pero la verdad es que hace más llevadero el cargar archivos dentro <head>

Para el siguiente parte del tutorial vamos a cargar los archivos CSS y js de un template directamente en el header.php, sin usar aún los hooks para que después se comprenda mejor cómo funcionan.

Recuerda que vamos paso a paso en este tutorial, tal vez parezca lento pero a mí lo que me sirvió para comprender la estructura de wordpress fue hacer un tema tal cual ahora lo estoy haciendo en este tutorial. Cuando se tenga todo lo que se requiere ya es más fácil comprender cómo funciona un tema y se facilita editarlos o crearlos desde cero.


Si quieres puedes escribirme a ringhugos@gmail.com o al whatsapp para cualquier comentario o duda que tengas sobre este tutorial.

Muchas gracias por leerme :)