Temas (IV) Crear un tema en WordPress, haciendo DRY en el header, footer y sidebar
Una vez que ya tenemos pensada como va a ser la estructura de la web, debemos de convertir nuestro archivo index.html a index.php de este modo ya podremos ir comenzando a trabajar tranquilamente.
De hecho una de las cosas que debemos de pensar es…
Eh! según el concepto de DRY, en la web hay secciones que se repiten como el header, el nav, el footer y el aside… de modo que podré sacarlos en diferentes archivos y utilizarlos siempre que los necesite.
Y es cierto, de hecho de ese concepto ya os hablé en otro articulo donde hablaba de las sesiones, los header… de PHP, pero WordPress le da un giro más a este concepto, de modo que es el momento de tomar la estructura de nuestra web e ir empezando a desmenuzarla para poder trabajar con ella, aunque los resultados finales de esta técnica aun no sean los esperados, este es solo el primer paso del camino para llegar a hacer nuestra plantilla.
Para ello vamos a tomar todo el encabezado, desde el doctype hasta donde abrimos nuestra etiqueta section y vamos ha cortar el código de index.php pegándolo en nuestro archivo header.php, dejándolo de la siguiente forma:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Voyager</title> <link rel="stylesheet" href="style.css"> </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">
Este archivo incluye el encabezado HTML y también parte del inicio de documento de navegación, introduciendo el logo y el menú generalmente. Aunque puede tener más elementos.
Vamos a hacer lo mismo con el footer, cortando de index.php todo el código desde el cierre de main hasta el fin del archivo, y lo pegamos en footer.php quedándonos de la siguiente forma:
</main> <footer>El footer!!!</footer> </body> </html>
El footer suele tener muchos elementos, desde el copyright, los derechos, el autor, información de contacto, áreas de widgets, redes sociales… es una zona de la web que resulta muy importante y que es muy fácil de trabajar.
Y finalmente repetimos la operación con el aside, cortándolo entero y pegándolo en el archivo sidebar.php quedando de la siguiente forma:
<aside> <h3>widget 1</h3> <h3>widget 2</h3> <h3>widget 3</h3> </aside>
Ahora debemos de hacer las llamadas a estos archivos desde el archivo plantilla index.php, para lo cual vamos a utilizar tres funciones:
- get_header()
- get_sidebar()
- get_footer()
Lo cual hará que se nos reorganice la plantilla, pero debemos de poner dichas funciones donde encajaría su código, de modo que nuestro archivo index.php nos va a quedar así de momento:
<?php get_header(); ?> <article> <h3>Articulo 1</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum iure perspiciatis animi sit temporibus accusantium, culpa aut inventore doloremque? Illo culpa tempora voluptatibus aliquam expedita molestias vitae, quaerat aliquid tempore. </article> <article> <h3>Articulo 2</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam modi quo molestiae, dolorem amet. A maiores quae sed, adipisci provident quis rem possimus perspiciatis ut corporis qui cum dolore odit! </article> <article> <h3>Articulo 3</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos esse assumenda totam officia dicta rerum temporibus laudantium, consequuntur! Odio deserunt est, fuga aspernatur ratione voluptatum voluptates. Aspernatur itaque modi, aperiam. </article> </section> <?php get_sidebar(); get_footer(); ?>
Se puede observar como hemos haciendo las llamadas a estas funciones, WordPress automáticamente llama a los archivos determinados header.php, footer.php y sidebar.php, pero si miramos nuestra web veremos que sigue siendo estática (cosa que vamos a ir cambiando poco a poco) y que además no lee el CSS. Pero no nos preocupemos por ello, ya que en la siguiente entrada vamos a ver como se enlaza el CSS para que WP lo entienda utilizando un nuevo archivo llamado functions.php
