Como usuarios de WordPress, puede ser algo tedioso encontrar un tema visual que sea atractivo, agradable o que incluso cumpla con nuestras expectativas. También puede ser frustrante encontrar el tema casi perfecto, al que solo le falta algún detalle para ser la perfección encarnada. Pensando en ello y en lo mucho que a veces necesitamos un tema con características muy específicas, hemos decidido crear esta serie enfocada totalmente en la creación de un tema de WordPress desde cero.
ADVERTENCIA: WordPress puede ser algo complicado a veces, y crear un tema para esta plataforma es cosa seria. Necesitarás conocimiento sólidos de CSS (Hojas de estilo), lenguaje de programación PHP y programación básica en general e incluso manejo de base de datos o JavaScript si quieres hacer algo más avanzado. Como puedes ver no es sólo acomodar HTML y escribir un poco de CSS, pero haremos lo posible por guiarte de manera sencilla y fácil.
Tabla de Contenido
Creación de la carpeta base del tema
Normalmente, encontramos los temas en nuestra instalación de WordPress dentro de la sección Apariencia en el Escritorio.
No obstante, físicamente los hallaremos en la subcarpeta themes dentro de la carpeta wp-content en nuestra instalación (carpeta) de WordPress.
Así que, para comenzar nuestra travesía, es necesario crear una nueva carpeta.
Esta carpeta, deberá llevar el nombre (preferentemente sin espacios) que le pondremos a nuestro tema.
Creación de los archivos necesarios para el tema
Un tema de WordPress contiene un conjunto mínimo de archivos para su funcionamiento. Estos archivos van desde una hoja de estilos básica, un conjunto de archivos PHP con nombres específicos y una captura de pantalla. Los archivos mínimos para su funcionamiento son:
- screenshot.png : Un archivo en formato PNG con una captura de pantalla del tema. El archivo debe ser de 1200×900 píxeles y es recomendable crearlo al final cuando el tema ya se encuentre terminado.
- index.php : Es el archivo principal del tema. Es decir, la mayor parte del contenido va en este archivo.
- header.php : Contiene el encabezado de nuestro tema
- footer.php : Contiene el pie de página del tema
- sidebar.php : Contiene las barras laterales del tema, si es que las tiene.
- single.php : Es la estructura de una publicación, artículo o post.
- page.php : Es la estructura de una página adicional en nuestro sitio.
- functions.php : Este archivo contiene las funciones básicas que hace que todo trabaje bien dentro del tema. Se puede usar algunas ya predefinidas o crearlas desde cero.
- style.css: Es la hoja de estilos inicial del tema. Se pueden crear más, pero es recomendable que al menos exista esta hoja.
De manera personal, yo prefiero crearlos todos en blanco desde el editor de código y ya después utilizarlos según los necesite.
Aunque esta es la estructura básica, normalmente se puede alterar o incluso añadir archivos nuevos dependiendo de lo que necesitemos hacer en nuestro tema, por ahora, nos apegaremos a la estructura clásica.
Etiquetas de plantilla y ganchos de acción
En WordPress, existen dos tipos de funciones que serán necesarios cuando estamos trabajando con nuestro tema. Aunque algunos pueden confundirlos, no son exactamente lo mismo.
Etiquetas de plantilla: Son funciones internas que invocan archivos de plantilla como los que hicimos al principio o ejecutan acciones típicas de WordPress. Los más importantes son:
- get_header() : Invoca el archivo header.php
- get_sidebar() : Integra el archivo sidebar.php
- get_footer() : Añade el archivo footer.php
- get_search_form() : Permite incluir el archivo searchform.php que esla plantilla que invoca la caja de búsqueda default de WordPress.
- bloginfo() : Permite obtener cierta información del sitio como el título principal del sitio, descripción, versión de WordPress que utiliza, idioma, etc.
- the_author() : Muestra el nombre del autor de una entrada.
- the_content() : Muestra el contenido completo de una entrada
- the_excerpt() : Muestra un extracto de la publicación.
- the_post() : Muestra una publicación completa, no sólo el contenido.
- have_post() : Es un boolean que muestra si hay entradas (true) o no (false)
Ganchos de acción: Son acciones que cambian la manera en como WordPress trabaja. Normalmente se utilizan para realizar acciones para las que normalmente se necesitaría editar algún archivo PHP del código de WordPress. Son tantos que mejor colocaré un enlace a la lista oficial.
El bucle (loop) de WordPress
El bucle de WordPress es el código apropiado para determinar lo que debe hacer nuestro tema dependiendo si tiene contenido o no. Este loop, como mínimo va dentro del archivo index.php, así toca editarlo.
<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
Colocar aquí lo necesario para definir todo el contenido del tema
<?php endwhile; else : ?>
<p><?php _e( 'Lo sentimos. Por el momento no hay contenido en este sitio.' ); ?></p>
<?php endif; ?>
Por supuesto, ahora es el momento de usar la etiqueta de plantilla get_header(), misma que nos servirá para cargar la información básica de la página y el encabezado.
Podemos obervar, el loop consta de un ciclo while que va mostrando cada entrada del blog – the_post() – mientras haya disponibles – have_posts() – En caso contrario, con la función _e que es la salida estándar de WordPress, mostramos una notificación.
Si todo salió bien, así debe verse nuestro código.
Cargando la información básica del tema
Nuestro tema necesita cierta información básica para ser reconocido. Esta información, la cargaremos al principio del archivo style.css. Aunque la guía oficial proporciona una lista bastante nutrida de elementos, aquí utilizaremos los más importantes.
- Theme Name: Es el nombre completo del tema.
- Theme URI: La dirección Web donde se alojan los archivos para su descarga
- Author: Nombre del autor
- Author URI: Dirección Web del autor
- Description: Una breve descripción del tema.
- Version: El número de versión
- License: Tipo de licencia a utilizar
- License URI: Dirección web del acuerdo de licencia
Por ejemplo, los datos de nuestro tema son los siguientes:
/*
Theme Name: Mi Temita
Theme URI: https://www.cablenearanja.com
Author: CableNaranja
Author URI: https://twitter.com/cablenaranja7
Description: Mi Temita es un tema creado para demostrar el proceso de creación de temas de WP
Version: 0.1
License: Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)
License URI: https://creativecommons.org/licenses/by-nc/4.0/
*/
Y al momento, el archivo style.css, debería quedar así:
Previsualizando nuestro tema
Aunque no hemos hecho realmente mucho. A estás alturas, nuestra tema ya se puede previsualizar. Para ello, ingresamos a la sección Apariencia de nuestro Escritorio de WordPress. Ahí, encontraremos nuestro tema junto a los que previamente tengamos instalados.
Si le pasamos el ratón encima, podremos ver los Detalles del tema con un click.
Al ingresar a los detalles, veremos una ficha con los datos que cargamos en el archivo style.css.
Y si le damos click al botón Vista previa, podremos ver nuestro avance al momento.
Por supuesto, de momento no se hay realmente mucho que mostrar.
Por el momento, eso es todo. En futuras entregas, continuaremos editando los demás archivos hasta conseguir un tema completo. NO TE LO PIERDAS.
¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.
Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.
