Como crear un tema de WordPress desde cero (sin saber PHP) – 1

Hola a todos y saludos desde el área Web de la Escola Espai. En el artículo de hoy, veremos los primeros pasos para crear un tema de WordPress desde cero sin saber PHP.

El doble filo de los temas de WordPress

Un problema habitual de alguien que sabe HTML5 y CSS3 cuando llega al universo WordPress es la frustración que puede surgir al verse limitado por el tema que elijamos para el proyecto en el que estamos trabajando. ¿Cuantas veces hemos pensado ¡con lo fácil que sería modificar esto si fuera un sencillo HTML5!?

Hay temas de WordPress realmente fantásticos, con un aspecto increíble y muy flexibles. Pero a veces podemos querer el máximo control sobre el aspecto visual de la web que estamos haciendo y modificar el CSS de un tema que desconocemos, por mucha documentación que lleve, puede volverse extremadamente farragoso. Una posible solución, es crear un tema «pelao» de WordPress y personalizarlo desde «cero».

Hay que tener cuidado, ya que aunque crear un tema propio pueda ser una experiencia bastante satisfactoria, va a llevarnos bastante más tiempo que usar un tema ya hecho. La única ventaja real que nos va a ofrecer crear un tema es un mayor grado de control y una mayor comodidad a la hora de realizar ajustes en el aspecto. Por lo que debemos de valorar cuidadosamente hasta que punto un mayor tiempo de desarrollo inicial se puede compensar con ese mayor grado de control.

Crear un tema partiendo de un tema inicial (starter theme)

En realidad ni vamos a empezar del cero del todo, ni vamos a hacerlo sin tocar nada de nada de código PHP, pero la idea de estos artículos es intentar aproximarse lo máximo a lo que sería crear un tema hecho a mano y sin conocimientos de PHP. Obviamente, sin saber PHP no vamos a poder crear un tema típico que luego vayamos a poder vender o compartir para que otros puedan usar en su WordPress, ya que vamos a crear un tema ya de por si muy personalizado y sin muchas capacidades de modificación por parte de usuarios normales.

Vamos a partir de un starter theme, es decir de un tema «en blanco». Existen varios starter themes que nos pueden simplificar mucho el empezar un tema nuevo en WordPress, como por ejemplo; Underscores, Sage, Bones y  HTML5 Blank. Yo voy a usar este último; HTML5 Blank, ya que es el más sencillo en mi opinión (y además el que viene más «pelao»). ACTUALIZACIÓN de Diciembre de 2020: actualmente el tema que recomiendo es el Underscores.

Lo primero que tenemos que hacer es descargar el tema y lo vamos a instalar en nuestro WordPress como si instalásemos cualquier otro tema, con la salvedad que no lo vamos a activar, ya que antes vamos a realizar unas pocas modificaciones estéticas (estas modificaciones son opcionales, no tenéis porque hacerlas);

• Nuestro tema se ha instalado en wp-content/themes/html5blank-stable, vamos a renombrar esta última carpeta por otro nombre que nos guste más, como por ejemplo espai. De forma que el tema estará ahora en wp-content/themes/espai
• Vamos a abrir el archivo style.css que hay en dicha carpeta y en el comentario inicial, vamos a cambiar Theme Name: HTML5 Blank, y vamos a poner Theme Name: Escola Espai (si queremos podemos modificar el resto de información del tema, como el autor, la versión, etc.)
• Finalmente vamos a cambiar la imagen screenshot.png por otra del mismo tamaño con nuestro logo (más adelante cuando tengamos el tema acabado podemos volver a reemplazar esta imagen por una captura de como luce el tema).

Una vez hecho esto, procedemos a activar el tema. Por cierto, hay que tener en cuenta que internamente el tema realmente se sigue llamando html5blank.

Ahora mismo lo que tenemos es un tema «pelao» que luce tal que así:

No muy espectacular que digamos, pero la principal ventaja es que si miramos con detenimiento el archivo style.css veremos que prácticamente está vacío. Casi todo lo que tiene son selectores que no aplican ningún estilo, unas media queries que no hacen nada (y que por supuesto podemos borrar y crear las nuestras propias), etc…

Crear una nueva plantilla para nuestras páginas

Un posible problema que podemos apreciar es que lo que sería la barra lateral del blog (sidebar) sale al final de la página. Obviamente, esto lo podemos arreglar por CSS flotando los elementos y asignando unos anchos adecuados, pero puede que en nuestra home no queramos tener la barra lateral (sidebar).

Para ello vamos a crear una plantilla para aquellas páginas que no queramos que tengan barra lateral. Afortunadamente para nosotros, el tema html5blank ya viene con una plantilla para nuestras plantillas.

Para ello buscamos el archivo template-demo.php en la carpeta de nuestro tema, y creamos una copia para nuestra nueva plantilla. Al nuevo archivo le podemos poner de nombre template-nosidebar.php, por ejemplo. Abrimos el archivo, y al principio cambiamos su nombre cambiando /* Template Name: Demo Page Template */ por /* Template Name: No Sidebar */.

Por ahora solo le hemos cambiado el nombre, ahora vamos a quitar la barra lateral. Para ello al final del archivo, borramos la linea que pone <?php get_sidebar(); ?>. Con esto lograremos eliminar la barra lateral.

Ahora en nuestra página de inicio (y en cualquier otra página que queramos), podemos elegir esta plantilla para que no se muestre la barra lateral tal y como se muestra en la siguiente imagen.

Modificar el footer

Otra cosa que probablemente queramos modificar es el footer. Como podemos ver, actualmente sale un texto de copyright con un texto que puede que no queramos. Para modificarlo, vamos a abrir el archivo footer.php y veremos que hay un elemento p de la clase copyright. Podemos borrar tranquilamente el contenido de dicho elemento y escribir nuestro propio copyright en HTML5 normal y corriente.

[html]
<p class="copyright">
&copy; Copyright <a href="http://www.espai.es">Escola Espai</a>.
</p>
[/html]

Por cierto, ya que estamos en este archivo, si somos usuarios de Google Analytics, podemos modificar el script que hay al final del mismo para indicar nuestro código de Analytics.

Tal y como se puede observar, según la parte de la web que queramos modificar, tendremos que tocar un archivo PHP u otro. WordPress para construir el archivo HTML que enviará al navegador del usuario, combina el resultado de varios archivos PHP. De ese modo, tenemos que en el archivo footer.php, tal y como hemos visto, está el código necesario para generar el footer, en el archivo header.php está el código necesario para generar la cabecera, index.php contiene el código para generar un listado de entradas, single.php el código para mostrar una única entrada, etc. Para más detalles de la jerarquia de archivos que usan los temas de WordPress, podeís consultar la documentación oficial.

Los archivos PHP combinan código HTML normal y código PHP. Así que si entendemos un mínimo en funcionamiento de PHP podemos introducir código HTML de forma normal. Obviamente, antes de tocar cualquier archivo conviene sacar copia por si rompemos algo poder volver a restaurarlo. El «truco» es que cualquier cosa entre <?php y ?> es código PHP que no deberíamos de tocar si no comprendemos. El resto es HTML normal y corriente (y por lo tanto, lo podemos modificar y también podemos añadir o quitar código HTML).

Modificar el CSS

En esencia ya estaríamos listos para empezar a meter código CSS en el archivo style.css hasta lograr el aspecto deseado, que en realidad es el motivo por el cual queríamos crear un tema desde cero. En mi caso, lo primero que voy a hacer es borrar las propiedades CSS de la clase wrapper, de forma que la página ya no saldrá centrada ocupando un máximo de 1280px. Para ello busco .wrapper en el archivo CSS y borro todos los estilos asignados.

Después, voy a modificar un poco el header y footer usando los selectores que ya vienen en el archivo style.css y añadiendo según vaya necesitando. El resultado es el siguiente fragmento de código CSS.

[css]
/*————————————*\
STRUCTURE
\*————————————*/

/* wrapper */
.wrapper {
}

/* header */
.header {
padding: 10px;
color: white;
background: #123456;
}
/* logo */
.logo {
float: left;
}
.logo-img {

}
/* nav */
.nav {
float: right;
}
.nav a {
color: gray;
padding: 10px;
display: inline-block;
}
.nav a:hover {
color: white;
}
.nav ul {
padding: 0;
list-style: none;
}
.nav ul>li {
display: inline-block;
position: relative;
}
.nav ul>li>ul {
display: none;
background: black;
position: absolute;
left: 0;
top: 32px;
}
.nav ul>li:hover>ul {
display: block;
}
/* sidebar */
.sidebar {

}
/* footer */
.footer {
color: white;
background: #123456;
padding: 10px;
}
.footer a {
color: gray;
}
[/css]

Y visualmente podemos ver lo siguiente;

Puede que no resulte muy espectacular (no pretende serlo), pero es el embrión de nuestro tema personalizado de WordPress (obviamente aún estamos lejos de haber terminado).

En el próximo artículo haremos algunas modificaciones más y comprenderéis el motivo por el cual hemos eliminado las propiedades CSS de la clase wrapper.

Y bueno, por ahora, nada más. Espero que este artículo os haya sido de interés y os haya ayudado un poco a comprender cómo funcionan los temas de WordPress y como crear un tema. En el próximo artículo intentaré arrojar algo de luz a las dudas que seguro aún tendréis.