lunes, 18 de julio de 2016

Crear tema para Wordpress - Header, Footer y Sidebar

Hasta el momento en nuestra página no se ve nada, claro después de activar nuestro tema y eso es por que en realidad nuestro tema no hace nada, en nuestro archivo de css lo único que tenemos es un comentario y en el index.php pues no tenemos nada.

Vamos a comenzar a escribir unas cuantas lineas de código en el index.php, vamos a rellenarlo con un html básico, así como sigue:



Con Sublime Text + EMMET es fácil de rellenar, solamente escribes el símbolo de admiración (!) y presionas el tabulador y la mayoría del código se rellena solo.

Ahora veamos que ha pasado en nuestro navegador:



Ahora nos aparece algo como en la imagen de arriba, sin embargo no es nada grandioso... y claro no lo será hasta que nuestro tema evolucione un poco más.

El archivo header.php
Hacer un sitio en WP sería más complicado si no pudiéramos realizar inclusiones de archivos o separar nuestro código, imagina por un momento escribir todo el código de un sitio web en un solo archivo... seria desastroso, difícil de mantener y escalar.

Es por esto que WP nos facilita un poco la tarea con algunas funciones propias, para probar esto vamos a crear un nuevo archivo llamado header.php con el siguiente contenido:



Si te fijas es el mismo contenido que el que teníamos en el index.php, pero hemos eliminado algunas lineas.

Luego debemos modificar el archivo index.php y nos debe quedar de la siguiente manera:



Si te fijas en el index.php hemos eliminado las lineas que ahora tenemos en el header.php y además hemos incluido unas pocas lineas de código PHP, ahora tenemos el llamado a una función, la función get_header(), esta función nos permite incluir el archivo header.php que creamos anteriormente.

Al visitar el sitio en el navegador en realidad no notamos ninguna diferencia, pero a la larga esto nos va a servir para no estar repitiendo el mismo código del header en cada plantilla que hagamos.

Si creamos una nueva plantilla y necesitamos el header lo único que tenemos que hacer es llamar a la función get_header() y ya tendremos nuestro header en esa nueva plantilla.

Lo mismo sucede con el footer, vemos:

El archivo footer.php

Vamos a realizar el mismo procedimiento que hicimos con el header, hagamos un nuevo archivo llamado footer.php con el siguiente contenido:


Ahora modificamos nuevamente el index.php, debe quedarnos así:


Si te fijas un poco, notarás que ahora en el index.php hemos eliminado las tags de cierre del body y del documento y hemos agregado una nueva función encerrada dentro de las etiquetas de PHP, la función get_footer().

La función get_footer hace lo mismo que get_header, busca un archivo llamado footer.php y lo incluye en la plantilla.

El caso es el mismo para el sidebar, prácticamente todos los sitios tienen un sidebar, hagamo nuevamente el procedimiento.

El archivo sidebar.php
Hagamos el archivo sidebar.php con el siguiente contenido:



Modifiquemos el archivo index.php nuevamente:


Nuevamente, tenemos una función en este caso la función get_sidebar(), esta función nos ayuda a incluir el archivo sidebar.php en nuestra plantilla, veamos el resultado de todo esto en el navegador.

Bueno, hemos llegado al final de este post y todavía nuestro sitio se ve realmente mal, no es nada de lo que esperábamos, pero a penas estamos comenzando.

Aquí el código completo que llevamos hasta el momento.

3 comentarios:

  1. Muy interesando teacher, yo uso WordPress y me parece muy buena su web y la info.

    ResponderEliminar
    Respuestas
    1. Gracias por el feedback, pronto estaré publicando mas contenido de WordPress, saludos!

      Eliminar
    2. Hay un curso de FalconMaster, muy excelente también si lo quieres ver

      Eliminar