Theme WordPress Inclusivo 4: Header y Footer

En el capítulo anterior estuvimos trabajando con el loop básico de wordpress, en esta ocasión abordaremos la base del header y footer de nuestra plantilla.

Aunque por el momento estamos trabajando con index.php para ver cómo se construye una página completa, tanto el header como el footer serán comunes a la web, a fin de evitar tener que codificarlos una y otra vez en cada plantilla del site. Esto lo veremos claro más adelante cuando hagamos diferentes plantillas, por ahora simplemente sean conscientes de que es así.

El Header

Ya comentamos en el capítulo dedicado a la jerarquía de templates, que habia “un fichero para cada tarea”. En esta ocasión el fichero es “header.php”.

Lo creamos, e incluiremos el siguiente código de prueba:

<h2>El Heaer</h2>

Para que la plantilla “index.php” use ese header, hemos de agregar get_header() de modo que el código quede del siguiente modo:

 <?php
	get_header();
	while (have_posts()): the_post();
?>
	<h1><?php the_title(); ?></h1>
	<?php the_content(); ?>
<?php
	endwhile;
?>

Al refrescar el navegador veremos que carga el texto en la página

El Footer

Para el pie, usaremos un método equivalente, esta vez el fichero se llama “footer.php”, y debe contenter el código siguiente:

<p>El Footer</p>

Para que se use, debemos incluir get_footer() en la plantilla, de forma que quede del siguiente modo:

<?php
	get_header();
	while (have_posts()): the_post();
?>
	<h1><?php the_title(); ?></h1>
	<?php the_content(); ?>
<?php
	endwhile;
	get_footer();
?>

Refrescamos e voilá ahí tenemos nuestro footer. En el proximo capítulo empezaremos a incluir la estructura html y algunos elementos básicos de la cabecera.

Quizá te interese ...

Dejar una Respuesta

XHTML: Usted puede usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>