Blog

WordPress como debe ser: Capítulo 3, empezando por lo básico

Como mil historias cuentan (que es cierto) WordPress empezó como un sistema para blog, ahora existen alternativas como Ghost, que regresan a lo básico. Y no hay mejor forma de entender algo sino yendo a lo esencial.

Entonces construyamos nuestro blog.

Esencial

Lo único que necesitamos para empezar nuestro tema son 2 cosas:

  • index.php
  • style.css

index.php

En el index.php, que es nuestro template base, encontraremos 2 funciones importantes, que se repetirán y todos y cada uno de nuestros templates:

  • get_header()
  • get_footer()

Que no son más que el header.php y el footer.php, que son archivos que como en todo CMS o sitio que hacemos, se repite. Ambos tienen los encabezados y finalización de nuestros templates.

Y más que eso también tienen importante:

wp_head(): Este hook, contiene todos los scripts que agregamos a WordPress, también agrega contenido (por ejemplo tags de og de Facebook, estilos, meta tags) y demás y es imprescindible que exista en header.php, entre las etiquetas <head></head>

wp_footer(): Este es muy parecido a wp_head(), con la diferencia que este es colocado antes de </html> y cumple la misma función, pues hay scripts que vamos a querer agregar en el footer o en el header.

Recuérden que es un tutorial para WordPress, no para PHP, ni HTML ni alguna otra herramienta que utilizo

Por que estamos utilizando el wp-theme the 10UP, en vez de modificar style.css que está en la base del folder de nuestro tema, modificaremos el que debe ser, el que está en /assets/css/less/nombre_de_tema.less

Lo modificamos, con cualquier cosa y… no pasa nada! ¿Por qué? Simple, no activamos nuestra rutina de watch en grunt.

Activando grunt

Recuerdan el capítulo 2, entonces vamos a nuestra carpeta raíz del tema, y ya estando allí (con la terminal) simplemente, tecleamos:

grunt watch

Esto creará una tarea que cada vez que modifiquemos algún archivo .less o .js, se compile y mignifique. Ya corriedo el proceso veremos que si existe cambio en nuestro tema.

Ahora, si estamos desubicados, entendamos que pasa… Como les comentaba, anteriormente, existe un archivo que hace la magia, y este se llama functions.php

Entonces, regresando a nuestro blog… Como les comentaba la base de WordPress son los loops, hagamos el nuestro:

Este es un simple loop, el cual por defecto en archivos como:

  • index.php
  • category.php
  • archives.php
  • taxonomy.php
  • tags.php

Está presente, como el loop principal, y por lo mismo no hay necesidad de alguna configuración del loop, pues WordPress ya lo hace por nosotros. Seguido encontramos algo muy importante: the_post(), función que hace que todas nuestras funciones siguientes, que están relacionadas con un post en específico (el actual en el loop) funcionen correctamente, no olvides colocarlo.

Luego de ello, pasamos al post

El post o publicación consta de una serie de etiquetas, en este momento solo es necesario conocer algunas:

  • the_title() – título
  • the_content() – contenido
  • the_excerpt() – extracto
  • the_time() – fecha de publicación
  • the_permalink() – link a nuestro artículo

Comúnmente un artículo de blog, tiene header.php Ahora, que estamos empezando el proyecto con nuestro scaffold, el archivo viene vacío, y más que tomar uno de un tema existente es bueno saber como buenos desarrolladores web que es necesario y que no, en nuestro header debemos agregar nuestro title, y los meta tags necesarios, además de donde empieza nuestro body. Algo así:

Además de un footer:

Entonces ya mostramos nuestros último artículos, es hora de hacer que se puedan leer completos, con ello hacemos otro archivo llamado single.php, este archivo como su nombre será el singular de nuestro artículo.

El single es un loop, pero de un solo elemento y WordPress se encarga de todo, siempre que usemos la famosa función the_post().

Y con ello podremos utilizar las mismas WordPress tags que les mostré anteriormente, y nos quedaría algo así:

Agregando un thumbnail a nuestro blog

Ya tenemos nuestro blog y es un poco aburrido, agregemos un thumbnail, para ello primero debemos agregar la “capacidad” del tema para hacer eso, agregamos la siguiente línea a functions.php

add_theme_support( 'post-thumbnails' );

Esto le dirá a WordPress que nuestro tema tiene thumbnails, y ahora veremos que tenemos un nuevo metabox en la pantalla de edición de los artículos:

Ahora tenemos opción para subir el thumbnail
Ahora tenemos opción para subir el thumbnail

Y el single queda así:

Recapitulando

  • index.php es el archivo principal, y nos sirve para mostrar las “últimas noticias” o categorías, etiquetas cuando estos archivos no estén presentes
  • single.php es el archivo que muestra el artículo en su “plantilla única”
  • grunt watch – siempre debe estar en nuestra línea de comandos para que los cambios en estilos tengan efecto en la plantilla

Hint:

body_class() – la función que colocamos en el header es de mucha ayuda para estilar casos específicos, pues agrega las clases dependiendo en que sección estemos en nuestro sitio.