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.

Referencias Bibliográficas

No se requiere ninguna

    Chuck Norris entrenando en Matrix.. ¡y sin internet!
    Chuck Norris entrenando en Matrix.. ¡y sin internet!

    Si mi contenido te resultó de utilidad...

    Ayúdame a mantener el proyecto aportando a través de Paypal.

    Me gustaría cubrir los gastos de la propia web, con vuestra inestimable ayuda, el mayor tiempo posible.

    Es algo totalmente voluntario, pero advierto que he contratado a Chuck Norris para pasar el sombrero xD ...

    ¡Gracias por estar ahí!


Quizá te interese leer más sobre Wordpress Inclusivo

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>