En este tutorial vamos a ver cómo crear tu propio tema para WordPress desde cero y paso a paso. Los temas (o themes en inglés), nos sirven para personalizar y darle un aspecto visual a nuestro blog o página con WordPress.
PASO 1
EMPEZANDO A CREAR EL TEMA
Lo primero de todo vamos a crear una carpeta con el nombre de nuestro nuevo Tema de WordPress:
A continuación vamos a crear los dos únicos archivos obligatorios y necesarios para que nuestro tema funcione y WordPress pueda reconocerlo: index.php y style.css:
Más adelante veremos que podemos crear más tipos de archivos, pero de momento estos dos son los básicos y necesarios.
style.css
Este archivo es la hoja de estilos en cascada, donde iremos escribiendo cada uno de nuestros estilos de nuestro nuevo tema. El código que deberá de llevar, tiene que empezar de esta forma:
/*
Theme Name: Mi Primer Tema
*/
Aunque lo ideal es que detalles una cabecera en dicho archivo, con un resumen de la información de nuestro tema de la siguiente manera:
/*
Theme Name: Mi Primer Tema
Theme URI: https://tutorialeswp.com
Author: Javier Crego
Author URI: https://tutorialeswp.com/javier-crego/
Description: Tutorial sobre cómo crear Mi Primer Tema
Version: 1.0
License:
License URI:
Tags:
Text Domain:
*/
index.php
Este archivo será el que cargará la página principal de nuestro blog o página en WordPress. Estará formado por las siguientes partes diferenciadas:
Vistas las diferentes partes esenciales del archivo index.php, este sería un ejemplo del código más básico usado para este archivo:
<?php
/*
**** MAIN TEMPLATE ****
*/
/*--------- HEADER --------------*/
get_header();
/*--------- CONTENT -------------*/
// loop.
while ( have_posts() ) :
the_post();
the_title();
the_content('Continua leyendo...', get_the_title());
// Fin loop.
endwhile;
/*--------- SIDEBAR -------------*/
get_sidebar();
/*--------- FOOTER -------------*/
get_footer();
?>
Más adelante veremos cómo podremos modificar el apartado del content, e incluir dentro las llamadas templates parts para cada tipo de contenido. De momento, esto simplemente es para ver cómo crear el tema de manera sencilla, sin apenas diseño.
PASO 2
INSTALAR EL TEMA
Una vez, creados los archivos style.css e index.php, ya tenemos nuestro tema listo para poderlo subir a nuestro WordPress. Podemos hacerlo de dos maneras:
- Subiendo nuestra nueva carpeta que creamos con nuestro primer tema, que llamamos en su momento miprimertema, por ejemplo subiéndola vía ftp a nuestro servidor donde tengamos alojado nuestro WordPress, y siempre dentro de la siguiente ruta: /wp-content/themes
- Subiendo el tema de manera manual a través del panel de administración de nuestro WordPress. Pero para poder hacer esto, previamente tendremos que haber empaquetado en un archivo .zip, la carpeta que creamos con nuestro nuevo tema. Por ejemplo, creamos nuestro archivo miprimertema.zip, el cual contendrá la carpeta miprimertema que contendrá los dos archivos anteriores, el index.php y el style.css. Una vez que tengamos el archivo .zip, añadimos un nuevo tema en WordPress, lo subimos y lo instalamos:
Ahora si vamos al listado de temas que tenemos en nuestro WordPress, ya nos aparecerá nuestro tema:
Y si hacemos clic encima para ver los detalles, podremos apreciar los datos que en su momento pusimos en el archivo style.css:
PASO 3
ACTIVAR EL TEMA
Una vez que tenemos instalado el tema, bien habiéndolo subido de manera manual a nuestro hosting, o a través del archivo zip en el panel de administración de WordPress, solo nos queda activarlo y comprobar que funciona.
Cuando lo activamos, y vamos a ver nuestra página con WordPress, veremos que es muy fea y nos mostrará algo parecido a esto:
Pero no te asustes, es debido a que como ya hemos dicho, es un primer tema sin apenas diseño, únicamente para que vieras que funciona perfectamente.
A continuación, lo que vamos a ver en el siguiente paso es cómo mejorar este diseño, para que se muestre algo más vistoso.
PASO 4
MEJORAR EL DISEÑO
Para mejorar el diseño, lo que vamos a hacer es añadir CSS a nuestra hoja de estilos, y modificar el archivo index.php.
Modificando index.php
El archivo index.php lo vamos a modificar de la siguiente manera:
<?php
/*
**** MAIN TEMPLATE ****
*/
?>
<!-- Cabecera -->
<header>
<?php get_header(); ?>
</header>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
// loop.
while ( have_posts() ) :
the_post();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1><?php the_title(sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>');?></h1>
<div class="entry-content">
<?php the_content();?>
</div><!-- entry-content -->
</article>
<?php
// Fin loop.
endwhile;
?>
</main><!-- .site-main -->
</div><!-- .content-area -->
<aside class="sidebar">
<?php get_sidebar();?>
</aside>
<!-- Pie de pagina -->
<footer>
<?php get_footer(); ?>
</footer>Modificando el archivo style.css
Al archivo style.css vamos a añadir lo siguiente:
/*
Theme Name: Mi Primer Tema
Theme URI: https://tutorialeswp.com
Author: Javier Crego
Author URI: https://tutorialeswp.com/javier-crego/
Description: Tutorial sobre como crear Mi Primer Tema
Version: 1.0
License:
License URI:
Tags:
Text Domain:
*/
html,body {
height:100%;
}
header {
display:block;
background:#8bc34a;
padding:10px 0px;
}
#header h1{
color: #686868;
font-family: Montserrat, "Helvetica Neue", sans-serif;
font-size: 36px;
font-weight: 700;
line-height: 1.25;
}
.content-area {
width: 79%;
float: left;
overflow: auto;
padding-bottom: 60px;
padding-top:30px;
}
aside {
float: right;
width: 19%;
background-color:#ccc;
}
.sidebar h2{
border-top: 4px solid #1a1a1a;
margin-bottom: 1.5em;
padding-top: 0.75em;
}
.sidebar ul{
list-style:none;
}
.entry-title {
font-family: Montserrat, "Helvetica Neue", sans-serif;
font-size: 28px;
font-size: 1.75rem;
font-weight: 700;
line-height: 1.25;
margin-bottom: 1em;
}
a {
color: #007acc;
text-decoration: none;
}
.description {
color: #686868;
font-size: 18px;
font-weight: 400;
}
footer {
position: relative;
margin-top: -50px;
height: 40px;
padding:5px 0px;
clear: both;
background: #8bc34a;
text-align: center;
color: #fff;
}Ahora si vamos a ver nuestra página o blog con WordPress, lo veremos con un diseño algo más mejorado que el inicial:
Por supuesto, hay aún mucho que mejorar en cuanto al diseño, pero es un punto de partida para que sepas cómo empezar.
PASO 5
PLANTILLAS DEL TEMA
Como bien has visto en los pasos anteriores, únicamente hemos creado un tema, con dos archivos (index.php y style.css). Pero un tema un poco más profesional, tiene que estar bien estructurado y debería de contener otros tipos de archivo llamados plantillas (o templates).
Plantillas comunes de WordPress
Las plantillas más comúnmente usadas para crear temas con WordPress, son las siguientes:
https://example.com/blog/2020/
https://example.com/blog/2020/01/
https://example.com/blog/2020/01/17/
Partes de plantilla (o template parts)
Las partes de plantilla o template parts son piezas de código más pequeñas, con las cuales organizaremos mejor los templates comunes de WordPress que hemos visto anteriormente al incluir unas dentro de las otras. Por ejemplo podemos crear estas partes de plantilla:
- content.php: la incluimos en el archivo index.php y llevará todo el código que queramos que tenga el apartado content.
- content-none.php: la incluimos en el archivo index.php, con el código en caso de que no existan entradas.
- content-single.php: la incluimos en el archivo single.php, para mostrar el código del contenido si es una entrada.
- content-page.php: la incluimos en el archivo page.php, para mostrar el código del contenido si es una página.
- content-search.php: la incluimos en el archivo search.php, para mostrar el código del contenido si es una búsqueda.
Ahora para incluirlas, únicamente tendremos que utilizar el siguiente código cuando se trate de una plantilla de tipo {slug}.php:
<?php get_template_part( 'nombre-del-slug' ); ?>
O el siguiente código cuando se trate de una plantilla de tipo {slug}-special.php:
<?php get_template_part( 'nombre-del-slug', 'nombre-especial' ); ?>
Por ejemplo:
<?php get_template_part( 'content' ); ?>
<?php get_template_part( 'content', 'none' ); ?>
Veamos ahora cómo podría quedar el archivo index.php que creamos en un inicio:
<?php
/*
**** MAIN TEMPLATE ****
*/
?>
<!-- Cabecera -->
<header>
<?php get_header(); ?>
</header>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
if ( have_posts() ) :
// loop.
while ( have_posts() ) :
the_post();
//incluimos el template content.php
get_template_part( 'content' );
// Fin loop.
endwhile;
else :
//incluimos el template content-none.php
get_template_part( 'content', 'none' );
endif;
?>
</main><!-- .site-main -->
</div><!-- .content-area -->
<aside class="sidebar">
<?php get_sidebar();?>
</aside>
<!-- Pie de pagina -->
<footer>
<?php get_footer(); ?>
</footer>Y este sería el código que debería de contener nuestra parte de plantilla content.php:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1><?php the_title(sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>');?></h1>
<div class="entry-content">
<?php the_content();?>
</div><!-- entry-content -->
</article>La parte de plantilla content-none.php pues tendría otro código diferente para mostrar el contenido que queramos mostrar cuando no haya ninguna entrada publicada, y así con todas los demás template parts que queramos crear.
Plantillas de página personalizadas para uso global
Otra posibilidad que tenemos al crear un tema de WordPress, es crear nuestras propias plantillas personalizadas, para ser utilizada globalmente por cualquier página o por varias páginas, cuando las vayamos a publicar desde la administración de WordPress.
Bien, pues para poder crear este tipo de plantillas, simplemente tenemos que escribir un comentario PHP de apertura en la parte superior del archivo que indique el nombre de la plantilla:
<?php /* Template Name: mi plantilla personalizada */ ?>
Un método rápido y seguro, es hacer una copia del archivo page.php, y darle al nuevo archivo un nombre de archivo distinto, por ejemplo template-personalizado.php. Así, mantiene la estructura HTML de las demás páginas (con el mismo header, el mismo footer,...), y podemos editar la nueva plantilla cómo más nos convenga.
Una vez que hemos creado este archivo (¡recuerda!, siempre tiene que comenzar con el comentario del código PHP anterior), pues cuando vayamos a publicar una página en WordPress, pues ya nos saldrá listada esta plantilla dentro de nuestros atributos de página, para poder elegirla en el desplegable:
PASO 6
ORGANIZAR LOS ARCHIVOS DEL TEMA
Podemos crear más tipos de archivos para nuestro tema, como pueden ser imágenes, otras hojas de estilo, scripts de javascript, fuentes, archivos de lenguaje,...e incluirlos cuando los necesitemos en nuestras plantillas. Lo ideal es que vayan organizados cada uno en su carpeta correspondiente: css, js, images, fonts, languages, template-parts,...
Por último, tengo que mencionar otro archivo fundamental para darle un poco de profesionalidad a nuestro tema, que es el que hará que de imagen de portada. Este archivo simplemente será una imagen que tendrá que llamarse: screenshot.png, el cual estará siempre en la carpeta raíz de nuestro tema.
PASO 7
JERARQUÍA DE PLANTILLAS
Para poder comprender dicha jerarquía, podemos verlo en el siguiente diagrama gráfico:
Si queremos verlo de manera interactiva, donde al hacer clic en cada plantilla nos llevará al codex de WordPress, lo podremos ver visualmente en esta página:
