Aprende

Creando tu primer tema de WordPress

Publicado el .

Creando tu primer tema de WordPress

Introducción

Aprende

Creando tu primer tema de WordPress

Publicado el .

Hola, Soy Nico Alliaume, profe de Coderhouse en Uruguay, y en este post les voy a contar como crear su propio tema para WordPress. Comencemos!

WordPress

Si estás leyendo esto probablemente ya sabes qué es WordPress, pero nunca está de más un poco de palabrería más técnica. WordPress es un gestor de contenido. Esto quiere decir que te permite, bueno, gestionar tu contenido. Pero cuando hablamos de contenido hablamos de algo bastante amplio. ¿Toda página web es contenido? Podríamos decir que si, aunque en muchos casos hay, además de contenido, lógica, procesamiento, validaciones, estilos.

WordPress puede dividirse en dos partes principales: el frontend y el backend (o administración). El frontend es lo que verán los visitantes del sitio, y el backend es lo que usará el administrador para gestionar los contenidos (subir nuevos textos, fotos, videos, gestionar usuarios, entre otras muchas cosas).

Ahora, ¿qué es un tema de WordPress?

Temas

Un tema de WordPress es un conjunto de archivos que definen CÓMO se ve tu sitio. Antes dije que WordPress era un gestor de contenido. Vamos a decir que el contenido es el QUÉ (qué se ve en la página: fotos, texto, etc.), y el tema es el CÓMO (con un cabezal, un footer y una barra lateral, fondo gris, letra Roboto negra, etc.).

WordPress permite instalar nuevos temas y activarlos o desactivarlos. Solamente puede haber un estilo activo a la vez, pero se puede cambiar cuando quieras. Hay una galería de diseño con muchos diseños para elegir y tiendas donde puedes compar diseños que te gusten e instalarlos en tu WordPress.

Pero en esta ocasión, vamos a crear uno bien siemple desde cero.

La estructura de un tema

Un tema de WordPress se compone esencialmente de archivos PHP y CSS, aunque muy comunmente también se incluyen JS, imágenes, SASS, entre otros. Hoy veremos un tema súper simple como punto de partida.

La estructura más básica de un tema es la siguiente:

mi_tema
   \_ style.css
   \_ index.php

Una carpeta para el tema, con un archivo CSS llamado style.css (el nombre es muy importante), que define el nombre del tema y los estilos, y un archivo index.php (lo mismo, el nombre es fundamental), que servirá el contenido de la página.

Veamos un ejemplo concreto.

style.css

/*
Theme Name: Mi Tema
Theme URI:
Author: Yo
Author URI:
Description: Un tema para aprender
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
*/

index.php

<?php

echo 'Hola Mundo!';

Ahora, ¡activémoslo!

 

Lo sé, nuestro tema de prueba no tiene una thumbnail. No es lo mas hermoso del mundo, pero para esta prueba es suficiente 😀

Veamos cómo se ve ahora nuestro sitio.

¡Nuestro tema está activo! Ahora, no está muy bueno, ¿verdad? Vamos a hacer que funcione realmente como un tema.

Posts y Páginas

WordPress se basa en Posts y Páginas. Los Posts (o entradas) son contenido con historia, que siguen una linea de tiempo. Como este mismo post. Las Páginas son contenido estático, atemporal, como una página de inicio o una página de contacto. WordPress maneja las páginas y los posts de una forma muy similar, pero a la hora de desarrollar un tema hay diferencias entre ellas.

En este ejemplo mostraremos posts. Para eso, debemos modificar nuestro index.php para que se vea algo así:

index.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>" />
  <title><?php wp_title(); ?></title>
  <?php wp_head(); ?>
</head>

<body>

  <?php while ( have_posts() ) : the_post(); ?>

  <article>
    <?php the_content(); ?>
  </article>

  <?php endwhile; ?>

  <footer>
    <?php wp_footer(); ?>
  </footer>
</body>
</html>

¡Eso fueron varios cambios! ¿Funciona?

Veamos lo que hemos hecho por partes.

Primero, pusimos como corresponde el doctype, head y body. Utilizamos algunas funciones de PHP que nos provee WordPress como
language_attributes(), bloginfo( ‘charset’ ) y wp_title() para obtener valores que están configurados en nuestro panel de administración, en vez de hardcodearlos. Estas son características de un tema bien hecho.

wp_head() incluye scripts y CSSs de WordPress, al igual que wp_footer(). Luego veremos esto en más detalle.

Dentro del body se encuentra la parte principal de nuestra página. El Loop.

El Loop

El Loop es un mecanismo que usa WordPress para que accedamos al contenido. Es un bucle while que, mientras hayan posts, irá tomando cada uno de los posts para mostrarlo y luego pasar al siguiente. La función the_content() muestra el contenido del post que se escribió en el panel de administración. Ahora, si hay más de un post, ¿de cuál muestra el contenido?

Ahí es donde entra la función mas extraña de esa parte del código: the_post(). Puedes imaginar el Loop como una lista de posts, y una flecha que apunta a uno de ellos. En cada iteración del while, la flecha se mueve al siguiente post de la lista. De ahí en adelante, todas las funciones que operen sobre un post, como the_content(), usarán el post apuntado por la flecha en ese momento.

Veamos cómo funciona este tema con más de un post.

Creé un post con tags, pero los tags no se muestran. Cambiemos el tema para que muestre esos tags, y el título de nuestras entradas.

index.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>" />
  <title><?php wp_title(); ?></title>
  <?php wp_head(); ?>
</head>

<body>

  <?php while ( have_posts() ) : the_post(); ?>

  <article>
    <h1><?php the_title(); ?></h1>
    <?php the_content(); ?>
    <?php
      $tags = get_the_tags();
      foreach ($tags as $tag) {
        echo '<span>' . $tag->name . '</span>';
      }
    ?>
  </article>

  <?php endwhile; ?>

  <footer>
    <?php wp_footer(); ?>
  </footer>
</body>
</html>

Ahora si. Los posts muestra el título y los tags. No es extremadamente lindo, pero funciona.

¿Pero cómo puedo ver un solo post en mi página? Quizás así…

http://misitio.com/?p=1

¡Funciona! Incluso WordPress cambió la URL para mostrarla más linda. Pero, ¿qué fue lo que pasó?

Cuando usamos el parámetro ?p=1, le dijimos a WordPress que queremos ver el post con ID 1. En mi caso, ese post existe, y el  Hola Mundo que viene con WordPress por defecto. Por detrás, WordPress filtró los posts que llegan al Loop, poniendo solamente los que tienen ID 1 (en este caso un sólo post). El bucle while de nuestro index.php solamente tiene un post para mostrar: el que queremos ver.

¿Pero qué pasa si quiere que el estilo de mi página sea distinto cuando vemos un único post? Veamos uno de los temas fundamentales de WordPress. El ruteo, o también llamado Jerarquía de Templates.

Ruteo

Cuando un visitante entra a una URL de un sitio hecho en WordPress, WordPress intentará buscar la forma más apropiada de mostrar el contenido. Para esto utiliza una convención de nombres de archivos que permite mostrar de distintas formas el contenido dependiendo de varios factores (si es de una categoría particular, el slug, si tiene un template particular seleccionado, si es un post o una página, entre otras cosas).

La siguiente imagen muestra la lógica que utiliza WordPress para determinar esto.

A pesar de parecer magia negra al principio, es bastante sencillo de ver con el paso del tiempo y la práctica. La foto muestra qué camino sigue la lógica de WordPress para mostrar un archivo .php dependiendo de qué tipo de página se necesite mostrar. En nuestro caso, en la última prueba donde mostramos un sólo post, era de tipo Singular Page.

Como verás en la foto, todos los caminos terminan en index.php. Esa es la razón por la cual nuestro tema, a pesar de tener solamente el index.php, va a funcionar para todos los casos. Ahora, ¿qué pasa si creamos un single.php, que está antes de index.php en el camino de routeo? Vamos a probar.

single.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>" />
  <title><?php wp_title(); ?></title>
  <?php wp_head(); ?>
</head>

<body>

  <header>
    <h1>Este es single.php</h1>
  </header>

  <?php while ( have_posts() ) : the_post(); ?>

  <article>
    <h1><?php the_title(); ?></h1>
    <?php the_content(); ?>
    <?php
      $tags = get_the_tags();
      foreach ($tags as $tag) {
        echo '<span>' . $tag->name . '</span>';
      }
    ?>
  </article>

  <?php endwhile; ?>

  <footer>
    <?php wp_footer(); ?>
  </footer>
</body>
</html>

Ahora, probemos entrar a un post usando el id, como lo hicimos antes.

¡Funciona!

Incorporando estilos

Hay un archivo más que es muy importante en los temas de WordPress: el functions.php. Este archivo es cargado automáticamente por WordPress cada vez que se visita una página, y permite hacer montones de cosas, entre ellas, cargar archivos de estilo.

Todo comienza por un css.

custom.css

body {
  background: #ededed;
  color: red;
}

¡Unos estilos super complejos!

Ahora, la magia. Creemos el functions.php

functions.php

<?php

function agregar_estilos() {
  wp_enqueue_style( 'custom', get_stylesheet_directory_uri () . '/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'agregar_estilos' );

Veamos el resultado

En este sencillo functions.php utilizamos 3 utilidades muy importantes de WordPress: un hook, el enqueue de un estilo, y una función de ruta.

Hooks

Los hooks son una parte fundamental de WordPress. No entraré en mucho detalle en esta oportunidad, pero básicamente permiten incrustar código en el proceso de carga de la página. Hay muchos hooks, que se dividen en filtros y acciones. En este caso es un hook de acción, que llama a nuestra función “agregar_estilos” cuando WordPress está en el proceso de encolar scripts.

Enqueue de scripts

El encolado de scripts permite que wordpress genere el código necesario y optimizado para agregar estilos y scripts a nuestra página. Con la función wp_enqueue_style le indicamos a WordPress que queremos cargar un CSS en el head de nuestro sitio y el se encargará de agregarlo al html que se genera. WordPress agrega estos scripts y estilos cuando llamamos a wp_head() en nuestro PHP.

Funciones de ruta

WordPress provee varias funciones que permite obtener rutas en el servidor y URLs para no hardcodearlas. En este caso usamos una de las más utilizadas: get_stylesheet_directory_uri(), que retorna la URL a la carpeta de nuestro tema. A eso le concatenamos el nombre de nuestro archivo CSS, y listo. Si mañana movemos nuestro sitio a otro server no habrá ningún problema de direccionamiento de nuestros estilos.

Comentarios finales

El tema que hemos creado aquí es super sencillo, y funciona como punto de partida para construir otros más detallados y estilizados. Espero que te ayude a entender más sobre el funcionamiento de WordPress y que crees temás fantásticos para tu sitio, o personalices el tema que estás usando ahora, para darle un toque más personal y único.

Puedes encontrar m’qs recursos interesantes en la documentación de WordPress (que por cierto, es MUY buena), comenzando por aquí.

profile

Nicolas Alliaume

Navigation
Menú
×