Respuesta rápida
Después de ver todos los templates posibles en WP, para evitar tener código repetido, tenemos los archivos header.php y footer.php que serán llamados al principio y al final de cada template. De todas las páginas, lo único que cambia es el contenido que hay en medio.
Respuesta completa
Requisitos:
- Entendiendo la jerarquía de los archivos templates de un WordPress theme.
- Creando un theme de WordPress (I): Empezando por el principio.
En este post vamos a pasar completamente del diseño -para eso escribiré otro post-, y vamos a ver la estructura del código y así evitar tener código repetido.
El código repetido es el cáncer de un proyecto.
Por lo tanto, para los mas novatos, una página web en HTML5 se estructura de la siguiente manera:
<html> <head> <title>Título de página</title> </head> <body> <header>Título de la web</header> <div>Contenido de la página</div> <footer>Copyright y despedida</footer> </body> </html>
Cada tag -esto <tag> es un tag- puede tener múltiples tags.
Es obvio que todas las páginas son iguales y solo cambia el «Contenido de la página».
Por lo tanto, vamos a crear en nuestro theme el archivo header.php y contendrá el siguiente código:
<?php if(!defined( 'ABSPATH' )) exit; // Exit if accessed directly ?>
<html <?php language_attributes(); ?> >
<head>
<title><?php wp_title( '/', true, 'right' ); ?></title>
<!-- BEG wp_head -->
<?php wp_head(); ?>
<!-- END wp_head -->
</head>
<body <?php body_class(); ?>>
<div class="outer-wrap">
<div class="inner-wrap">
<header class="header" role="banner" >
<h1 class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php echo esc_attr( get_bloginfo( 'name' ) ); ?></a>
</h1>
<h2 class="site-description"><?php echo esc_attr( get_bloginfo( 'description' ) ); ?></h2>
</header>
<div id="page" class="content-wrapper">
Para entender todo lo que existe en el archivo voy a mostrar el código completamente comentado
<?php if(!defined( 'ABSPATH' )) exit; // Exit if accessed directly ?>
<!-- Si se intenta acceder directamente al archivo, éste sale y no muestra nada -->
<html <?php language_attributes(); ?> >
<!-- La función de php devuelve: lang="es-ES", ayuda al SEO y a al accesibilidad. -->
<head>
<title><?php wp_title( '/', true, 'right' ); ?></title>
<!-- Muestra el título de la página -->
<!-- BEG wp_head -->
<?php wp_head(); ?>
<!-- END wp_head -->
<!-- wp_head() es SUPERIMPORTANTE, para cargar metadatos y códigos al head se debe hacer a través del hook wp_head() -->
<!-- +info: http://codex.wordpress.org/Plugin_API/Action_Reference/wp_head -->
</head>
<body <?php body_class(); ?>>
<!-- body_class() añade al body las clases relacionadas al template y al usuario actual. Útil para el diseño. -->
<div class="outer-wrap">
<div class="inner-wrap">
<!-- Tener doble wrap (outer & inner) nos ayudará para hacer diseños responsives -diseños adaptativos. -->
<header class="header" role="banner" >
<!-- Este header es la cabecera principal de la página, el 'role' ayuda a la accesibilidad ARIA -->
<!-- +info sobre ARIA: http://www.w3.org/TR/wai-aria/roles#role_definitions -->
<h1 class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo('name', 'display') ); ?>" rel="home"><?php echo esc_attr( get_bloginfo('name') ); ?></a>
<!-- Las funciones esc_url() y esc_attr() codifican los caracteres correctamente, aportando seguridad. -->
<!-- home_url('/') devuelve el enlace a nuestra página principal y añade un '/' al final. -->
<!-- get_bloginfo('name') devuelve el nombre de nuestra página. -->
<!-- get_bloginfo('name', 'display') devuelve el nombre de nuestra página. Al añadir 'display' nos permite editar el nombre a posteriori a través de otra función con el filtro 'bloginfo'. -->
</h1>
<h2 class="site-description"><?php echo esc_attr( get_bloginfo('description') ); ?></h2>
<!-- get_bloginfo('description') devuelve la descripción de nuestra página. -->
<!-- El nombre y la descripción de nuestra página se puede modificar en el panel de control Apariencia > Personalizar. -->
</header>
<div id="page" class="content-wrapper">
<!-- Este div envolverá todo el contenido. -->
Seguramente los avispados se han dado cuenta de que se abren tags, ¡pero no se cierran!
Los tags se cierran en el footer.php, cuyo contenido es el siguiente:
<?php if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly ?>
</div><!-- /.content-wrapper -->
<footer class="footer" role="contentinfo">
<div class="footer-content">
<p> © 2013 <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php echo esc_attr( get_bloginfo( 'name' ) ); ?></a>.</p>
</div><!-- /.footer-content -->
</footer>
</div><!-- /.inner-wrap -->
</div><!-- /.outer-wrap -->
<!-- BEG wp_footer -->
<?php wp_footer(); ?>
<!-- END wp_footer -->
<?php echo '<!-- Number of Queries:'; echo (get_num_queries()); echo ' Seconds: '; timer_stop(1); echo '-->'; echo "\n"; ?>
</body>
</html>
Y ahora voy a comentarlo para entenderlo mejor:
<?php if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly ?> <!-- Si se intenta acceder directamente al archivo, éste sale y no muestra nada --> </div><!-- /.content-wrapper --> <!-- Cierra el tag content-wrapper --> <footer class="footer" role="contentinfo"> <!-- Este footer es el pie de página, el 'role' ayuda a la accesibilidad ARIA --> <p> © 2013 <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php echo esc_attr( get_bloginfo( 'name' ) ); ?></a>. </p> <!-- frase de copyright, junto con el nombre de la página --> </footer> </div><!-- /.inner-wrap --> <!-- Cierra el tag inner-wrap --> </div><!-- /.outer-wrap --> <!-- Cierra el tag outer-wrap --> <!-- BEG wp_footer --> <?php wp_footer(); ?> <!-- END wp_footer --> <!-- wp_footer() es SUPERIMPORTANTE, para cargar metadatos y códigos al footer se debe hacer a través del hook wp_footer() --> <!-- +info: http://codex.wordpress.org/Plugin_API/Action_Reference/wp_footer --> <?php echo '<!-- Number of Queries:'; echo (get_num_queries()); echo ' Seconds: '; timer_stop(1); echo '-->'; echo "\n"; ?> <!-- Este código muestra a través de un comentario HTML cuantas llamadas se han hecho y cuando a tardado el servidor en mostrar la página --> </body> <!-- Cierra el tag body --> </html> <!-- Cierra el tag html -->
Ya tenemos header.php y footer.php. ¿Y ahora qué?
Ahora nuestro index.php debera llamarlos, de tal modo que se queda:
<?php get_header(); ?> Index! <?php get_footer(); ?>
Y no solo el template index.php, sino tambien los templates 404.php, single.php, page.php, archive.php
Ver Alisios v.0.1.2
