InicioTutoriales de WordPressCómo crear un Tema para WordPress

Cómo crear un Tema para WordPress


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:

carpeta miprimertema

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:

archivos miprimertema

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:

  • Header: es la cabecera WordPress, y para mostrarla tendremos que hacer una llamada a la función get_header()
  • Content: aquí irá el cuerpo de nuestra web, llamadas a partes de plantillas, y donde se realizará el loop de WordPress.
  • Sidebar: si deseamos que nuestro blog tenga la típica barra lateral o sidebar, donde suele ir el archivo de entradas y otros bloques característicos, lo haremos en este apartado haciendo una llamada a la función get_sidebar()
  • Footer: es el final o pie de nuestro blog o página de WordPress. Lo llamaremos con la función get_footer()

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:

  1. 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
  2. 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:
instalar miprimertema

Ahora si vamos al listado de temas que tenemos en nuestro WordPress, ya nos aparecerá nuestro tema:

listado temas

Y si hacemos clic encima para ver los detalles, podremos apreciar los datos que en su momento pusimos en el archivo style.css:

detalles miprimertema


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:

miprimertema diseno basico

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:

miprimertema diseño mejorado

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:


rtl.css
La hoja de estilo de derecha a izquierda se incluye automáticamente si la dirección del texto del idioma de nuestra página web es de derecha a izquierda.
comments.php
La plantilla de comentarios.
front-page.php
La plantilla de la página principal siempre se usa como página principal de la web si existe, independientemente de la configuración de los ajustes de lectura en la administración de nuestro WordPress.
home.php
La plantilla de la página de inicio es la página principal de forma predeterminada. Si no configuramos WordPress para usar una página principal estática, esta plantilla se usa para mostrar las últimas entradas.
header.php
Esta es la plantilla del encabezado donde pondremos el logo, las etiquetas metas, los enlaces a hojas de estilo y scripts, y otros datos.
sidebar.php
Esta es la plantilla para la barra lateral (o sidebar).
footer.php
Esta es la plantilla del pie de nuestra web.
singular.php
La plantilla singular se usa cuando las plantillas single.php o page.php no se encuentran. Si singular.php no se encuentra, entonces se utilizará directamente el archivo index.php.
single.php
Esta plantilla es la usada para mostrar una entrada de nuestro blog (o posts).
single- {post-type} .php
Esta plantilla la usaremos para mostrar una entrada personalizada (o custom post). Por ejemplo, single-book.php se usaría para mostrar publicaciones individuales de un tipo de publicación personalizado llamado libro . En caso de que una entrada o publicación personalizada no tenga plantilla creada, se utiliza index.php.
archive.php
Esta plantilla se utiliza queremos mostrar un archivo de entradas o publicaciones por categoría, autor o fecha. Pero se anulará si más plantillas específicas están presentes como category.php, author.php y date.php.
archive- {post-type} .php
Esta plantilla la usaremos para mostrar un archivo de entradas personalizadas (o custom post). Por ejemplo, archive-books.php se usaría para mostrar un archivo de entradas o publicaciones personalizadas denominadas librosEn caso de que no exista la plantilla archive-{post-type}.php, se utiliza la plantilla archive.php.
page.php
Esta plantilla se usa cuando vemos una página de WordPress.
page- {slug} .php
La plantilla de página con slug, se usa cuando queremos ver una página específica, por ejemplo, una con el slug "about" (page-about.php).
category.php
Esta es la plantilla para mostrar un archivo de entradas por categoría.
tag.php
Esta es la plantilla para mostrar un archivo de entradas por etiqueta.
taxonomy.php
Esta es la plantilla para mostrar un archivo de entradas por taxonomía.
author.php
La plantilla de página de autor se usa cuando queremos cargar una página de autor.
date.php
La plantilla de fecha / hora se utiliza cuando las entradas queremos listarlas por fecha u hora. Por ejemplo, las páginas generadas con estas fechas:
https://example.com/blog/2020/
https://example.com/blog/2020/01/
https://example.com/blog/2020/01/17/

search.php
Cuando realizamos una búsqueda, usaremos esta plantilla.
attachment.php
La plantilla de archivo adjunto se utiliza al ver un archivo adjunto único como una imagen, pdf u otro archivo multimedia.
image.php
Esta plantilla es una versión más específica de la plantilla attachment.phpy se utiliza cuando se visualiza un archivo adjunto de imagen. Si no la tenemos creada, WordPress usará attachment.php por defecto.
404.php
La plantilla 404 se usa cuando WordPress no puede encontrar una entrada, página u otro contenido.
functions.php
Esta plantilla es la que comúnmente usaremos para crear funciones personalizadas, ganchos (o hooks), filtros, configuraciones, ajustes,...


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.phpy darle al nuevo archivo un nombre de archivo distinto, por ejemplo template-personalizado.phpAsí, 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:

mi plantilla personalizada



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:

jerarquía de plantillas en WordPress


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:

¿TE HA GUSTADO ESTE TUTORIAL?
[ Valoración: 5 - Votos: ‎6 ]
Ir arriba