Evidentemente por cuestiones de espacio y tiempo, esto no será un tutorial extenso o sumamente completo para crear plantillas de WordPress, sino más bien pretende dar una información básica para motivar luego a que quienes estén interesados a investigar un poco más por su cuenta al respecto de lo que hablaremos. Además quiero al finalizar compartir un par de recursos útiles a la hora de comenzar a crear temas para WordPress.

Composición básica de un tema para WordPress:

  • index.php, archivo central de todo tema desde el cuál se llamarán a los otros archivos del tema y (en general) contiene el “WordPress Loop” que es el medio para traer la información desde la base de datos (en el Loop podemos presentar categorías, posts, páginas, etc).
  • header.php, dónde se abre la página ( y en general incluimos allí también el titular de la página y/o el menú horizontal si tuviera), para llamar este archivo desde el index.php usamos la función de WordPress: get_header();
  • footer.php, en este archivo iría el pie de nuestra web, los créditos (si los hubiera), el fin del HTML (</body></html>) y dónde opcionalmente podemos incluir la función wp_footer() que nos permite realizar tareas o imprimir código HTML al final de la página, es muy utilizada por plugins para modificar o agregar código una vez toda la página está cargada.
  • style.css, es la hoja de estilo principal, es obligatoria, además de para definir la información de estilos para la web, es dónde se ubica la información sobre el tema.

Así que ya podemos crearnos una carpeta /prueba_wp/ dentro de la cuál crearemos estos 4 archivos. Vayamos primero al contenido de style.css, en las primeras lineas y como comentario definiremos los datos del tema que vamos a crear:

/*
Theme Name: Nombre de nuestro Tema
Theme URI: http://nuestraweb.com/
Description: Una breve descripción que puede <strong>incluir html</strong>.
Author: Tu nombre
Autor URI: http://lawebdelautor.com/
Version: 0.1
*/

Luego de esa primera parte con datos del theme, este archivo contendrá todos los datos de estilos CSS para nuestro diseño.

El archivo index.php conceptualmente será algo así:

<?php get_header(); ?>
 <div id="contenido">
  [...]
 </div>
<?php get_footer(); ?>

Teniendo a get_header(); y get_footer(); como funciones internas de WordPress que lo que hacen es simplemente incluir los archivos header.php y footer.php respectivamente.

Luego en el header.php incluimos el inicio de la web, por ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <title><? bloginfo('name'); ?></title>
 <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
 <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
 <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed” href="<?php bloginfo('rss2_url'); ?>" />
 <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
 <?php wp_head(); ?>
</head>

<body>
 <div id="contenedor">
  <div id="titular">
   <h1><?php bloginfo('name'); ?></h1>
   <h2><?php bloginfo('description'); ?></h2>
  </div>
  <div id="menu">
   [...]
  </div>

Expliquémoslo de a partes:

  1. En primer lugar definimos el DOCTYPE y abrimos el HTML.
  2. Luego utilizamos la función bloginfo(‘name’); para mostrar el nombre del sitio en el <title> de la web.
  3. Luego definimos el charset y el generator también utilizando funciones de WP (resaltadas en negritas).
  4. Después de eso especificamos el canal RSS y la dirección de la hoja de estilos principal (style.css) por medio de bloginfo(‘stylesheet_url’);
  5. Por último dentro del <head> llamamos a la función wp_head(); que lo que hace es permitir a WordPress (y particularmente a los plugins) agregar información en el header.

Y en el footer.php el cierre, por ejemplo algo así:

  <?php wp_footer(); ?>
 </div><!-- cerramos la capa id=”contenedor” -->
</body>
</html>

Luego en nuestro index.php dónde hoy poníamos […] simbolizando el contenido, es donde ejecutaremos el Loop de WordPress para mostrar (por ejemplo) los últimos posts:

<!-- Inicio del Loop -->
<?php if (have_posts()) : ?>
 <?php while (have_posts()) : the_post(); ?>

  <!-- Inicio del post -->
  <div id="post-<?php the_ID(); ?>">
   <h3><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a</h3>

   <span id=”post-data”> Publicado en: <?php the_category(', ') ?> por: <?php the_author(); ?> y hay: <?php comments_popup_link('0 comentarios', '1 comentario', '% comentarios'); ?></span>
   <div class="entry">>
    <?php the_content('Continuar leyendo &raquo;'); ?>
   </div>
  </div>
  <!-- Fin del post -->

 <?php endwhile; ?>
<!-- Fin del Loop -->

Dónde las 2 primeras lineas preguntan si hay posts para mostrar y luego itera entre ellos mostrando para cada uno un título [the_title();], la categoría [the_category();], autor [the_author();], sus comentarios [comments_popup_link();] y el contenido [the_content();].

Bueno, esto sería lo más extremadamente básico del funcionamiento de un tema para WordPress, se que todo esto que hemos visto es sumamente simple y básico; pero la propuesta es que si hay interés en este tema de desarrollo sobre WordPress sería genial poder volver a abordar esta temática en próximos viernes y aprender juntos al respecto, ustedes dirán! 😉

Algunos recursos útiles:

  • Codex WordPress: (aquí encontrarás la más completa información sobre todo el funcionamiento de WP desde la fuente oficial – info en Inglés).
  • Videotutorial sobre creación de themes: (un videotutorial realizado por Emilio García – Piensaenpixel – explicandocomo crear un theme WordPress paso a paso).
  • SandBox theme: (es un tema para WP ya programado pero absolutamente sin estilos CSS para que nos sirva para aprender navegando el código y/o para adaptar a nuestro diseño).