Diseño, WordPress | 25 de noviembre de 2013

Cómo crear un tema de WordPress (Parte 1)

ACTUALIZACIÓN: La segunda parte ya está disponible en éste link.

En este artículo vamos recorrer el proceso para crear un tema de wordpress, ya que es uno de los temas sobre los cuales más frecuentemente recibo preguntas.

El tema que vamos a crear estará desarrollado desde cero, al menos en cuanto a funcionalidades y para hacernos más sencilla la parte del maquetado HTML y CSS vamos a usar Bootstrap, ya que viene con muchas soluciones de manera predeterminada.

Mi interés es hacer este tutorial lo más detallado posible, por lo que para evitar que sea un artículo interminable lo dividiré en 2 partes. Así que aquí comienza la primera parte:

Instalar WordPress

Como te imaginarás para proceder a crear un tema e ir probándolo necesitamos en primer lugar tener WordPress instalado, ya sea en nuestra máquina local o en nuestro servidor. Si no sabes cómo instalar o usar bien WordPress te sugiero que antes de seguir con este tutorial, te inscribas en Dominando WordPress y aprendas lo básico.

Una vez que tengamos WordPress instalado y corriendo correctamente vamos a importar el contenido de prueba «Test Unit» que podemos bajar desde este enlace. Para importarlo, sólo debemos activar la herramienta de importación de WordPress desde Herramientas > Importar > WordPress. Esta operación instalará un plugin, y luego de instalado deberás importar el archivo XML de test unit.

Con esto nuestro sitio estará poblado de una gran cantidad de artículos y páginas que ponen a prueba nuestro tema en cada situación posible. Claramente para probar un tema esto es mucho mejor que el artículo de ejemplo «Hola Mundo».

Estructura de archivos

Para que un tema de WordPress pueda funcionar, en su nivel más básico, necesita sólo de 2 archivos:

  1. index.php, que será el encargado de llamar a las funciones de WordPress y proveer el maquetado HTML
  2. style.css, que se encargará de asignar el diseño a nuestro tema

No obstante, veremos que para crear un tema realmente completo necesitaremos algunos archivos extra. Mi carpeta luce de la siguiente forma:

Estructura de carpeta

Los archivos destacados de color azul son los que forman parte de bootstrap y harán funcionar el diseño base para nuestro tema, los archivos que están dentro de la carpeta img, son básicamente los favicons que usaremos en nuestro sitio y que se diferencian de acuerdo a tamaños para los diferentes dispositivos (como iPhones con y sin retina display), todas estas imagenes han sido generadas desde Icongen.

El resto de los documentos, son los que usaremos para hacer funcionar nuestro tema. A medida que avancemos veremos las utilidad de cada uno de ellos, y te darás cuenta que en realidad es más simple de lo que parece.

Todos estos archivos están dentro de la carpeta amk-primer-tema que depositamos en la ruta: wp-content > themes

Bien, comencemos con la parte interesante.

Style.css

Para que WordPress entienda que lo que tenemos dentro de la carpeta amk-primer-tema en realidad es un tema, lo primero que debemos hacer es agregar cierto contenido al archivo style.css, esto le dará al sistema cierta información sobre el tema:

/*
Theme Name: AMK Primer Tema
Theme URI: http://franciscoamk.com
Author: Francisco Aguilera G. (@FranciscoAMK)
Author URI: http://franciscoamk.com/
Description: Tema de WordPress creado con propósitos educativos. Porque toda persona tiene derecho a aprender WordPress.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
Text Domain: amk
*/

Veamos de qué se trata esto:

  • Theme name: El nombre del tema
  • Theme URI: La dirección web del tema, si el tema fuera parte del directorio oficial, sería algo como http://wordpress.org/themes/amk-primer-tema
  • Author: Quién es el autor del tema
  • Author URI: La dirección web del autor del tema
  • Description: Una breve descripción del tema.
  • Version: Qué versión del tema estamos trabajando
  • License: Cuál es la licencia que aplica a este tema
  • License URI: La url con los detalles de la licencia
  • Tags: Algunas etiquetas para ser encontrado en el repositorio oficial de WordPress
  • Text Domain: Cual va a ser el texto con el que identifiquemos las frases que están listas para ser traducidas en el tema.

Con esta información, aunque nuestro archivo index.php todavía esté vacío, nuestro tema ya será reconocido por WordPress en la pantalla de apariencia, pero para mejorar la forma en que aparece vamos a crear el archivo de imagen screenshot.png y lo vamos a poner en la carpeta del tema. Esta imagen deberá tener dimensiones de 600x450px y se mostrará en la pantalla de temas de la siguiente forma.

Tema disponible

Para dar un último toque al archivo style.css antes de pasar al resto de los archivos, vamos a importar la hoja de estilos base de bootstrap.

@import url('css/bootstrap.min.css');

Una vez hecho esto podemos activar el tema. Con el tema activado veremos que se presenta el sitio completamente en blanco, eso esta perfecto, porque aún no hemos escrito nada en nuestros archivos index.php, header.php ni footer.php. Pasemos a eso ahora.

Cabecera

Vamos a abrir nuestro documento header.php y vamos a escribir lo siguiente:

<!DOCTYPE html>
<html lang="es_ES">
<head>

	<title>Nombre del sitio | Descripción del sitio</title>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

	<!-- Cargando la Hoja de Estilos  -->
	<link rel="stylesheet" href="style.css" >

	<!-- Cargando los íconos  -->
	<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
	<link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
	<link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon-57x57.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png" />
	<link rel="apple-touch-icon" sizes="144x144" href="img/apple-touch-icon-144x144.png" />
	<link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon-60x60.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-120x120.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-76x76.png" />
	<link rel="apple-touch-icon" sizes="144x144" href="img/apple-touch-icon-152x152.png" />

</head>

<body>

	<!-- #MAIN HEADER  -->
	<header id="main-header">

		<div class="container">
			<div class="row">

				<!-- Título del sitio  -->	
				<div id="logo" class="col-md-6">
					<h1>Nombre del sitio<br>
					<small>Descripción del sitio</small></h1>
				</div>

				<div class="col-md-6">
					<nav>
						<ul class="menu nav nav-pills">
							<li><a href="">Inicio</a></li>
							<li><a href="">Acerca de</a></li>
							<li><a href="">FranciscoAMK</a></li>
							<li><a href="">Volver al tutorial</a></li>
						</ul>
					</nav>
				</div>

			</div>

			<hr />
		</div>

	</header>
	<!-- #MAIN HEADER  -->

Como puedes ver no es nada muy especial, sólo se trata de simple HTML, ahora vamos a insertar algunas funciones de WordPress para hacer el contenido algo más dinámico.

Primero haremos dinámico lo que está en el head.

Lo que haremos acá es reemplazar el lenguaje (es_ES) de html por el lenguaje que estemos usando en WordPress. Si lo usamos en español, se mantendrá como es_ES:

<html <?php language_attributes(); ?>>

Acá reemplazaremos el título de la página. Utilizaremos la función wp_title(), para mostrar el título de la página actual, seguido de bloginfo(‘name’), que mostrará el nombre del sitio, resultando algo como: «Nombre de la página actual | Nombre del sitio»:

<title><?php wp_title('|', true, 'right');?> <?php bloginfo('name'); ?></title>

Igual que con el lenguaje lo que hacemos acá es cambiar el set de caracteres, por aquel que hayamos configurado en WordPress:

<meta charset="<?php bloginfo('charset');?>">

Con esta línea actualizaremos la llamada a nuestro style.css utilizando la función bloginfo(‘stylesheet_url’). Como te darás cuenta, es tercera vez que utilizamos esta función pero pasándole diferentes parámetros:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" >

La función bloginfo() lo que hace es imprimir en el HTML cierta información de nuestro sitio, como el nombre, la descripción, etc. Si quieres saber más puedes darle un vistazo en el codex.

Ahora actualizaremos la ruta para que WordPress encuentre las imágenes que estamos llamando. Usamos la función get_stylesheet_directory_uri() que obtiene la ruta a la carpeta en donde se encuentra nuestra hoja de estilos style.css y la imprimimos usando echo:

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/img/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/img/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="<?php echo get_stylesheet_directory_uri(); ?>/img/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo get_stylesheet_directory_uri(); ?>/img/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo get_stylesheet_directory_uri(); ?>/img/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="<?php echo get_stylesheet_directory_uri(); ?>/img/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="57x57" href="<?php echo get_stylesheet_directory_uri(); ?>/img/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo get_stylesheet_directory_uri(); ?>/img/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo get_stylesheet_directory_uri(); ?>/img/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="144x144" href="<?php echo get_stylesheet_directory_uri(); ?>/img/apple-touch-icon-152x152.png" />

Ahora vamos a ingresar 3 líneas de código que son necesarias para el correcto funcionamiento de WordPress:

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>
<?php wp_head(); ?>

La primera línea integra un link al archivo xml para que los pingbacks puedan funcionar correctamente, la segunda línea carga un script específico cada vez que se esté presentando una página singular (no un listado de artículos). Este script permitirá poder responder a los comentarios de una forma mucho más fluida.

La tercera línea simplemente es un llamado a la función wp_head();. Es una llamada muy simple, pero fundamental para que nuestro tema funcione correctamente, en este lugar se cargarán los script y hojas de estilos que llamemos desde nuestro tema y desde los plugins que tengamos activos.

Pasemos al body.

WordPress genera ciertas clases para el body de nuestro HTML. Aquí estamos cargándolas:

<body <?php body_class(); ?>>

Reemplazamos el título y subtítulo por el nombre y la descripción de nuestro sitio:

<div id="logo" class="col-md-6">
	<h1><?php bloginfo('name');?><br>
	<small><?php bloginfo('description'); ?></small></h1>
</div>

Con la función wp_nav_menu() estamos indicándole a WordPress que en este lugar vamos a cargar un menú, y le damos algo más de información:

  • Vamos a cargar el menú que hayamos asignado al área menu-principal
  • El menú va a estar dentro de un elemento nav
  • Los ítems estarán dentro de un elemento ul con la clase nav nav-pills

 

<div class="col-md-6">
	<?php wp_nav_menu(array(
		'theme_location'  => 'menu-principal',
		'container'       => 'nav',
		'items_wrap'      => '<ul id="%1$s" class="%2$s nav nav-pills">%3$s</ul>'
	)); ?> 
</div>

Para que esta llamada al menú funcione primero deberemos registrar el área de menú ‘menu-principal’. Para ello vamos a abrir functions.php y vamos a escribir lo siguiente:

//---------------------------------------------------------------------
// REGISTRAMOS EL MENU
//---------------------------------------------------------------------

register_nav_menus( array(
	'menu-principal' => __('Area principal de navegación', 'amk')
) );

Utilizamos la función register_nav_menus() para registrar el área de menú ‘menu-principal’ cuya descripción es ‘Área principal de navegación’.

Ahora vamos a poder crear un menú y asignarlo al Área de navegación principal.

tema-wp3

En resumen nuestro header.php quedará de la siguiente manera:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>

	<title><?php wp_title('|', true, 'right');?> <?php bloginfo('name'); ?></title>

	<meta charset="<?php bloginfo('charset');?>">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

	<!-- Cargando la Hoja de Estilos  -->
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" >

	<!-- Cargando los íconos  -->
	<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/img/favicon.ico" type="image/x-icon" />
	<link rel="apple-touch-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/img/apple-touch-icon.png" />
	<link rel="apple-touch-icon" sizes="57x57" href="<?php echo get_stylesheet_directory_uri(); ?>/img/apple-touch-icon-57x57.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="<?php echo get_stylesheet_directory_uri(); ?>/img/apple-touch-icon-72x72.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="<?php echo get_stylesheet_directory_uri(); ?>/img/apple-touch-icon-114x114.png" />
	<link rel="apple-touch-icon" sizes="144x144" href="<?php echo get_stylesheet_directory_uri(); ?>/img/apple-touch-icon-144x144.png" />
	<link rel="apple-touch-icon" sizes="57x57" href="<?php echo get_stylesheet_directory_uri(); ?>/img/apple-touch-icon-60x60.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="<?php echo get_stylesheet_directory_uri(); ?>/img/apple-touch-icon-120x120.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="<?php echo get_stylesheet_directory_uri(); ?>/img/apple-touch-icon-76x76.png" />
	<link rel="apple-touch-icon" sizes="144x144" href="<?php echo get_stylesheet_directory_uri(); ?>/img/apple-touch-icon-152x152.png" />

	<!-- Pingbacks -->
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

	<?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>

	<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

	<!-- #MAIN HEADER  -->
	<header id="main-header">

		<div class="container">
			<div class="row">

				<!-- Título del sitio  -->	
				<div id="logo" class="col-md-6">
					<h1><?php bloginfo('name');?><br>
					<small><?php bloginfo('description'); ?></small></h1>
				</div>

				<div class="col-md-6">
					<?php wp_nav_menu(array(
						'theme_location'  => 'menu-principal',
						'container'       => 'nav',
						'items_wrap'      => '<ul id="%1$s" class="%2$s nav nav-pills">%3$s</ul>'
					)); ?> 
				</div>

			</div>

			<hr />
		</div>

	</header>
	<!-- #MAIN HEADER  -->

 

Pie de página

Ahora abriremos el archivo footer.php y vamos a escribir lo siguiente:

	<div class="container">

		<hr />

		<p>La descripción de mi sitio</p>

	</div>
</body>
</html>

Al igual que lo que hicimos con header.php, acabamos de ingresar simple HTML, ahora vamos a hacerlo dinámico:

	<div class="container">

		<hr />

		<p><?php bloginfo('description'); ?></p>

	</div>

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

Como puedes ver estamos imprimiendo la descripción del sitio y estamos usando la función wp_footer(), que es un símil de wp_head(). En este lugar se cargarán todos los scripts que el tema y los plugins decidan poner en el pie de página.

index.php

Dependiendo de la página del sitio que estemos viendo WordPress cargará uno u otro de los archivos base de nuestro tema, esto se llama la jerarquia de plantilla, es por ello que hemos separado nuestra cabecera y pie de página en 2 archivos separados, de esta manera desde cualquiera de los otros solo debemos insertar una llamada al header y al footer y eso asegurará que cualquier cambio que hagamos en uno de esos 2 archivos se verá reflejado en cualquiera de las páginas del sitio.

Así que lo primero que haremos en nuestro index.php va a ser llamar a nuestra cabecera y pie de página:

<?php get_header(); ?>
<?php get_footer(); ?>

Luego, entre estas 2 llamadas insertaremos algo de HTML:

<?php get_header(); ?>

<section class="container">

	<div class="row">

		<div class="col-md-8">

			<article class="clearfix">

				<header>
					<h2>Título del artículo</h2>
					<div class="meta">15 marzo, 2012 &bull; <a href="">Categoría</a></div>
				</header>

				<img src="http://lorempixel.com/150/150" alt="" class="" />

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

				<p><a href="" title="" class="btn btn-default">Ver más</a></p>

			</article>

			<hr />

			<ul class="pager">
				<li class="previous">
					<a href="">&larr; Anteriores</a>
				</li>
				<li class="next">
					<a href="">Recientes &rarr;</a>
				</li>
			</ul>

		</div>
		<div class="col-md-4">
			Este es el sidebar
		</div>

	</div>

</section>

<?php get_footer(); ?>

Como ves hemos creado un layout de 2 columnas, donde en la columna izquierda se cargará el listado de artículos y en la columna derecha se cargará el sidebar. Hagamos que los contenidos se carguen de verdad, para ello usaremos el loop de WordPress.

<?php //El loop básicamente comprueba si hay posts para mostrar, luego mientras haya posts cargará cada uno de ellos usando el esquema que se ve a continuación
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

	<article <?php post_class('clearfix'); //Carga las clases específicas del post y agrega la clase clearfix ?>>

		<header>
			<h2><?php the_title(); //Muestra el título del post ?></h2>
			<div class="meta">
				<?php the_time(get_option('date_format')); //Muestra la fecha de publicación del artículo ?>
				&bull;
				<?php the_category(', '); //Muestra enlaces a las categorías separados por coma ?></div>
		</header>

		<?php //Verifica si el post tiene una imágen destacada
		if ( has_post_thumbnail() ) {

			//Si tiene imágen destacada entonces carga la imagen en tamaño thumbnail (miniatura), y le añade la clase alignleft
			the_post_thumbnail('thumbnail', array(
				'class' => 'alignleft'
			));
		}?>

		<?php //En esta parte muestra el extracto del post
		the_excerpt(); ?>

		<p>
			<a href="<?php the_permalink(); //Imprime un link al detalle del post ?>" title="<?php the_title_attribute(); //Añade ul título al enlace ?>" class="btn btn-default"><?php _e('Ver más', 'amk'); //El botón dirá Ver más. ?></a></p>

	</article>

	<hr />

<?php endwhile; //Acá termina la estructura con la que se presentará cada post
else: //Ahora bien, si no hay artículos para mostrar entonces cargará lo siguiente  ?>

	<article>

		<header>
			<h2><?php _e('Este contenido no está disponible', 'amk'); //Un simple título ?></h2>
		</header>

		<?php get_search_form(); //Llama un formulario de búsqueda  ?>

	</article>

<?php endif; // Aquí termina el loop?>

EL código tiene varias líneas con la explicación de lo que hace cada una de las funciones, pero lo que hace este código básicamente es buscar si hay posts para mostrar y mientras los haya, mostrará cada uno dentro del elemento article.

Ahora a continuación del loop, vamos a cargar enlaces a los posts más recientes y a los más antigüos:

<ul class="pager">
	<?php if( get_next_posts_link()) { //Si es que hay más posts anteriores ?>
		<li class="previous">
			<?php next_posts_link(__('&larr; Anteriores', 'amk')); //Muestra un enlace a los posts anteriores ?>
		</li>
	<?php } ?>
	<?php if( get_previous_posts_link()) { //Si es que hay más posts más recientes ?>
		<li class="next">
			<?php previous_posts_link(__('Recientes &rarr;', 'amk'));  //Muestra un enlace a los posts más recientes?>
		</li>
	<?php } ?>
</ul>

Según lo que podemos ver en la jerarquía de plantilla dependiendo de la página que estemos viendo se cargará una u otro archivo desde nuestro tema, por ejemplo, si estamos viendo una página de categoría, WordPress buscará dentro de nuestro tema al archivo category.php, si no lo encuentra cargará index.php.

Siguiendo esta lógica deberíamos crear una gran cantidad de archivos para presentar en diferentes circunstancias, sin embargo, si el único cambio que tendrán estos archivos extra es mostrar un mensaje para indicar que estamos viendo una página de categorías o de archivo diario (por ejemplo), es mucho más fácil y elegante usar algunas funciones condicionales e insertar esos mensajes directamente en nuestro archivo index.php de la siguiente forma:

<?php if ( is_category() ) : // Si estamos en una página de categoría?>
	<div class="alert alert-info">
		<p><?php _e('Artículos en la categoría', 'amk');?>: <strong><?php single_cat_title(); //Muestra el nombre de la categoría ?></strong></p>
	</div>
<?php elseif ( is_tag() ) : // Si estamos en una página de etiqueta?>
	<div class="alert alert-info">
		<p><?php _e('Artículos etiquetados como', 'amk');?>: <strong><?php single_tag_title(); //Muestra el nombre de la etiqueta ?></strong></p>
	</div>
<?php elseif ( is_day() ) : // Si estamos en una página de archivo diario?>
	<div class="alert alert-info">
		<p><?php _e('Archivo', 'amk');?>: <strong><?php the_date(); //Muestra la fecha del archivo ?></strong></p>
	</div>
<?php elseif ( is_month() ) : // Si estamos en una página de archivo mensual?>
	<div class="alert alert-info">
		<p><?php _e('Archivo', 'amk');?>: <strong><?php the_date('F Y'); //Muestra la fecha del archivo (mes y año) ?></strong></p>
	</div>
<?php elseif ( is_year() ) : // Si estamos en una página de archivo anual?>
	<div class="alert alert-info">
		<p><?php _e('Archivo', 'amk');?>: <strong><?php the_date('Y'); //Muestra la fecha del archivo (año) ?></strong></p>
	</div>
<?php elseif ( is_search() ) : // Si estamos en una página de resultados de búsqueda?>
	<div class="alert alert-info">
		<p><?php _e('Resultados para', 'amk');?>: <strong><?php echo the_search_query(); ////Muestra el término por el que se ha realizado la búsqueda ?></strong></p>
	</div>
<?php elseif ( is_author() ) : // Si estamos en una página de artículos escritos pur un autor específico?>
	<div class="alert alert-info">
		<p><?php _e('Artículos por', 'amk');?>: <strong><?php $curauth = (isset($_GET['author_name'])) ? get_user_by('slug', $author_name) : get_userdata(intval($author)); echo $curauth->display_name; //Muestra el nombre del autor ?></strong></p>
	</div>
<?php elseif ( is_404() ) : // Si estamos en una página de error 404?>
	<div class="alert alert-danger">
		<p><strong><?php _e('Error 404', 'amk');?>:</strong> <?php _e('Página no encontrada', 'amk');?></p>
	</div>
<?php endif; // Fin de las comprobaciones condicionales ?>

Como puedes ver hemos hecho que WordPress verifique en qué página estamos actualmente y dependiendo de cuál sea el resultado de esa verificación se presentará un mensaje específico.

En resumen nuestro documento index.php ha quedado de la siguiente forma:

<?php get_header(); ?>

<section class="container">

	<div class="row">

		<div class="col-md-8">

			<?php if ( is_category() ) : // Si estamos en una página de categoría?>
				<div class="alert alert-info">
					<p><?php _e('Artículos en la categoría', 'amk');?>: <strong><?php single_cat_title(); //Muestra el nombre de la categoría ?></strong></p>
				</div>
			<?php elseif ( is_tag() ) : // Si estamos en una página de etiqueta?>
				<div class="alert alert-info">
					<p><?php _e('Artículos etiquetados como', 'amk');?>: <strong><?php single_tag_title(); //Muestra el nombre de la etiqueta ?></strong></p>
				</div>
			<?php elseif ( is_day() ) : // Si estamos en una página de archivo diario?>
				<div class="alert alert-info">
					<p><?php _e('Archivo', 'amk');?>: <strong><?php the_date(); //Muestra la fecha del archivo ?></strong></p>
				</div>
			<?php elseif ( is_month() ) : // Si estamos en una página de archivo mensual?>
				<div class="alert alert-info">
					<p><?php _e('Archivo', 'amk');?>: <strong><?php the_date('F Y'); //Muestra la fecha del archivo (mes y año) ?></strong></p>
				</div>
			<?php elseif ( is_year() ) : // Si estamos en una página de archivo anual?>
				<div class="alert alert-info">
					<p><?php _e('Archivo', 'amk');?>: <strong><?php the_date('Y'); //Muestra la fecha del archivo (año) ?></strong></p>
				</div>
			<?php elseif ( is_search() ) : // Si estamos en una página de resultados de búsqueda?>
				<div class="alert alert-info">
					<p><?php _e('Resultados para', 'amk');?>: <strong><?php echo the_search_query(); ////Muestra el término por el que se ha realizado la búsqueda ?></strong></p>
				</div>
			<?php elseif ( is_author() ) : // Si estamos en una página de artículos escritos pur un autor específico?>
				<div class="alert alert-info">
					<p><?php _e('Artículos por', 'amk');?>: <strong><?php $curauth = (isset($_GET['author_name'])) ? get_user_by('slug', $author_name) : get_userdata(intval($author)); echo $curauth->display_name; //Muestra el nombre del autor ?></strong></p>
				</div>
			<?php elseif ( is_404() ) : // Si estamos en una página de error 404?>
				<div class="alert alert-danger">
					<p><strong><?php _e('Error 404', 'amk');?>:</strong> <?php _e('Página no encontrada', 'amk');?></p>
				</div>
			<?php endif; // Fin de las comprobaciones condicionales ?>

			<?php //El loop básicamente comprueba si hay posts para mostrar, luego mientras haya posts cargará cada uno de ellos usando el esquema que se ve a continuación
			if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

				<article <?php post_class('clearfix'); //Carga las clases específicas del post y agrega la clase clearfix ?>>

					<header>
						<h2><?php the_title(); //Muestra el título del post ?></h2>
						<div class="meta">
							<?php the_time(get_option('date_format')); //Muestra la fecha de publicación del artículo ?>
							&bull;
							<?php the_category(', '); //Muestra enlaces a las categorías separados por coma ?></div>
					</header>

					<?php //Verifica si el post tiene una imágen destacada
					if ( has_post_thumbnail() ) {

						//Si tiene imágen destacada entonces carga la imagen en tamaño thumbnail (miniatura), y le añade la clase alignleft
						the_post_thumbnail('thumbnail', array(
							'class' => 'alignleft'
						));
					}?>

					<?php //En esta parte muestra el extracto del post
					the_excerpt(); ?>

					<p>
						<a href="<?php the_permalink(); //Imprime un link al detalle del post ?>" title="<?php the_title_attribute(); //Añade ul título al enlace ?>" class="btn btn-default"><?php _e('Ver más', 'amk'); //El botón dirá Ver más. ?></a></p>

				</article>

				<hr />

			<?php endwhile; //Acá termina la estructura con la que se presentará cada post
			else: //Ahora bien, si no hay artículos para mostrar entonces cargará lo siguiente  ?>

				<article>

					<header>
						<h2><?php _e('Este contenido no está disponible', 'amk'); //Un simple título ?></h2>
					</header>

					<?php get_search_form(); //Llama un formulario de búsqueda  ?>

				</article>

			<?php endif; // Aquí termina el loop?>

			<ul class="pager">
				<?php if( get_next_posts_link()) { //Si es que hay más posts anteriores ?>
					<li class="previous">
						<?php next_posts_link(__('&larr; Anteriores', 'amk')); //Muestra un enlace a los posts anteriores ?>
					</li>
				<?php } ?>
				<?php if( get_previous_posts_link()) { //Si es que hay más posts más recientes ?>
					<li class="next">
						<?php previous_posts_link(__('Recientes &rarr;', 'amk'));  //Muestra un enlace a los posts más recientes?>
					</li>
				<?php } ?>
			</ul>

		</div>
		<div class="col-md-4">
			Este es el sidebar
		</div>

	</div>

</section>

<?php get_footer(); ?>

Como puedes ver desde el loop estamos llamando a la imagen destacada de los posts (si es que la tienen), sin embargo para habilitar la posibilidad de que al escribir un post se le asigne una imagen destacada, necesitaremos activar esta característica mediante la función add_theme_support() desde el archivo functions.php. También vamos a aprovechar de habilitar otras características importantes. Mira los comentarios en el código para entender bien de qué se trata:

//---------------------------------------------------------------------
// CARACTERÍSTICAS DEL TEMA
//---------------------------------------------------------------------

// Ajustar el máximo ancho de las imagenes de acuerdo al diseño de este modo cualquier imagen que insertemos en el contenido de un artículo va a tener como máximo este ancho
if ( ! isset( $content_width ) )
	$content_width = 750; //El ancho máximo será de 750 pixeles

// Creamos una función para registrar algunas características del tema
function amk_theme_features()  {

	// Permitimos que el sitio soporte RSS Automáticos
	add_theme_support( 'automatic-feed-links' );

	// Permitimos qe el tema soporte imagenes destacadas
	add_theme_support( 'post-thumbnails');	
}

// Ejecutamos la función y registra las características
add_action( 'after_setup_theme', 'amk_theme_features' );

Ahora podemos ver que el tema ya va tomando forma y se muestra así:

Avance de tema 1

Siguiente parte

La primera parte de esta serie llega hasta aquí, espero que te haya resultado muy útil y te invito a seguir atento a la segunda parte donde trataremos algunos temas como crear un sidebar para utilizar widgets, cargar javascript y estilos extra y a mejorar la presentación CSS de nuestro tema.

Más abajo encontrarás un formulario en donde puedes registrarte para recibir directamente en tu email los artículos y tutoriales que están por venir en los que trataremos temas muy importantes respecto a WordPress y al diseño web. Además te podré mantener al tanto sobre un nuevo ebook que estoy desarrollando en el cual trataré muy en profundo todo lo relacionado con la creación de temas WordPress.

Si tienes cualquier duda, sólo deja un comentario, nos vemos en el siguiente artículo 😉