Como crear un tema para WordPress 3.x desde cero!
Con la actualización de WordPress a su versión 3.x, muchos themes quedaron con fallas en su funcionalidad o simplemente quedaron obsoletos, pues ésta nueva versión incluye muchas nuevas características que se detallan en este “how to”… Siguiendo algunos tutos que he visto voy a dar algunos pasos con los cuales podríamos dejar funcionando un template básico-minimalista en nuestros blogs con WordPress 3.
Recopilando el material necesario
Lo primero que necesitamos es crear los archivos básicos para nuestro template, definirlos en una carpeta en nuestro equipo para luego subirlos a nuestro servidor como un nuevo template. Yo particularmente soy de la idea de modificar todo “on-the-run”, por lo que simplemente tomaría el template “Sandbox”, alguna extensión para FireBug y con su ayuda comenzaría a trabajar, pero la idea aquí es aprender desde cero a crear un template, así que lo haremos como Dios manda, así que armense de su mejor y preferido editor de código, preparen un café, unas galletitas y comencemos con esto.
Materiales
- Editor de códigos
- Una carpeta en tu desktop con el nombre del theme a crear
- Algunos archivos básicos
- Mucha paciencia y ganas 🙂
Paso 1 – Crear todas las carpetas y archivos básicos
Lo primero que necesitamos hacer es crear una carpeta con el nombre de nuestro template (uno de los materiales que solicité al principio). En este caso, mi carpeta se llama “mi template cerocreativo”, y dentro de ella debemos crear una serie de archivos que serán los que le darán vida a nuestro template; estos son los siguientes:
style.css header.php index.php single.php footer.php archive.php page.php sidebar.php functions.php
además de una carpeta destinada a guardar las imágenes de nuestro template
/images
nos debería quedar todo más o menos como la siguiente imagen:
Paso 2 – El archivo style.css
Ahora, una vez que tenemos creados estos archivos vacíos, lo que tenemos que hacer es definir la información básica de nuestro template, tal como el autor, la url, la descripción y la versión del template. Este archivo es uno de los dos archivos realmente básicos y que no pueden faltar en ningún template; el otro es el index.php.
Agregamos entonces a nuestro archivo style.css las siguientes líneas:
/* Theme Name: Tema Cerocreativo Theme URI: http://www.cerocreativo.cl Description: Un tema creado desde cero siguiendo el tutorial de Cerocreativo.cl Author: Cerocreativo.cl Author URI: http://www.cerocreativo.cl Version: 1.0 */
Estas son las líneas básicas para nombrar y poder identificar nuestro template en la galería de temas, las cuales debemos agregar como un comentario (entre los tags /* */) para que no interfiera la estructura de las declaraciones css que agregaremos más tarde.
Ahora, luego de estas líneas podríamos agregar declaraciones para estilizar el body, enlaces, cabecera, footer, etc, pero por ahora lo dejaremos tal cual.
Paso 3 – Index.php
Para entender el funcionamiento del core de WordPress, y cómo éste genera la estructura del template podríamos darle una revisada a éste enlace al Codex, donde nos explican detalladamente cómo se construye y qué archivos son llamados en determinadas ocasiones.
Sin embargo aquí explicaré con un ejemplo de index.php
<?php get_header(); ?>
<div id="contenido">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="post-contenido">
<?php the_content(); ?>
<p class="post-metadata">
<?php _e('Archivado en:'); ?> <?php the_category(', ') ?> <?php _e('Escrito por:'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('Sin Comentarios', '1 Comentario', '% Comentario'); ?> <?php edit_post_link('Editar', ' | ', ''); ?>
</p>
</div>
</div>
<?php endwhile; ?>
<div class="paginador">
<?php posts_nav_link(); ?>
</div>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Aquí hemos hecho uso de algunas funciones propias de WordPress en las líneas 1, 21 y 22, como son get_header(), get_sidebar() y get_footer(), las cuales tienen por objetivo “llamar” a los archivos header.php, sidebar.php y footer.php respectivamente, los cuales hemos creado en el paso 1. También hicimos un pequeño código (el loop de WP) el cual cargará todos los artículos que hemos escrito.
Paso 4 – Header.php
Siguiendo con la construcción, lo primero (o segundo luego de style.css) es comenzar a estructurar el archivo header.php, con el cual definiremos los meta tags, título y descripción del blog, y porque no mostrar un menú personalizado, el que se mostrará en todas nuestras páginas.
<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php if (is_home()) { ?><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?><?php } else { ?><?php wp_title($sep = ''); ?> - <?php bloginfo('name'); ?><?php } ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="contenedor">
<div id="header">
<h1><a href="<?php echo get_option('home'); ?>" title="<?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>"><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?></a></h1>
<div id="menu-principal"><?php wp_nav_menu( array( 'theme_location' => 'menuprincipal' ) ); ?></div>
</div>
Aquí hemos declarado los meta para el título y descripción de nuestro blog, hemos enlazado a la hoja de estilos, definimos los feeds RSS, imprimimos en pantalla el titulo del blog y de paso insertamos un menú personalizado, el cual será definido más adelante cuando veamos el archivo functions.php.
Paso 5 – Sidebar.php
Ahora crearemos una sidebar personalizada, donde podamos agregar nuestros propios widgets y cargarlos a través del backend.
<div id="sidebar">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
<?php endif; ?>
</div>
Con éste código ya podemos mostrar una sidebar personalizada, el resto del trabajo lo hará el archivo functions.php
Paso 6 – Single.php
Este archivo se utiliza cuando ingresamos a revisar un artículo en particular, ya sea que hayamos ingresado al artículo desde el archivo de categorías, etiquetas, búsqueda o listado general, el archivo single.php será cargado por defecto si no especificamos lo contrario.
La estructura de este archivo es muy similar al index.php, con la diferencia que ahora el código del loop va a mostrar la información de un solo artículo. Va mas o menos así:
<div id="contenido">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="post-contenido">
<?php the_content(); ?>
<p class="post-metadata">
<?php _e('Archivado en:'); ?> <?php the_category(', ') ?> <?php _e('Escrito por:'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('Sin Comentarios', '1 Comentario', '% Comentario'); ?> <?php edit_post_link('Editar', ' | ', ''); ?>
</p>
</div>
<div class="post-comentarios">
<?php comments_template(); ?>
</div>
</div>
<?php endwhile; ?>
<div class="paginador">
<?php previous_post_link('< %link') ?> <?php next_post_link(' %link >') ?>
</div>
<?php endif; ?>
</div>
La única diferencia con el archivo index.php es que aquí hemos incluído los comentarios en la línea 16.
Paso 7 – Comments.php
El archivo comments.php es uno de los más simples de crear, pues wordpress 3.x ha reinventado el sistema de comentarios, haciendolo mucho más fácil de entender, personalizar y estandarizar para plugins externos.
<?php comment_form(); ?>
Sólo esa línea de código es necesaria en nuestro comments.php, ahora si queremos ir más a fondo y personalizar el formulario, podemos revisar el Codex para obtener más ayuda.
Paso 7 – Page.php
Como se podrán imaginar, este archivo page.php se encarga de mostrar el contenido que hayamos definido para cada nueva página en la seccion “Páginas” de nuestro blog. Así es una especie de clon del archivo single.php, pero con la diferencia que éste se encarga de las páginas personalizadas.
<div id="contenido">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="post pagina" id="pagina-<?php the_ID(); ?>">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="post-contenido">
<?php the_content(); ?>
<p class="post-metadata">
<?php _e('Archivado en:'); ?> <?php the_category(', ') ?> <?php _e('Escrito por:'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('Sin Comentarios', '1 Comentario', '% Comentario'); ?> <?php edit_post_link('Editar', ' | ', ''); ?>
</p>
</div>
</div>
<?php endwhile; ?>
<div class="paginador">
<?php posts_nav_link(); ?>
</div>
<?php endif; ?>
</div>
Hemos agregado aquí la clase “pagina” al div contenedor de la información para así luego poder diferenciarlo cuando se trate de trabajar con el CSS estilizando o personalizando nuestro template.
Paso 8 – Archive.php
Lo que hace diferente a este archive.php, es que es utilizado en múltiples instancias, como cuando se selecciona para visualizar una categoría, una etiqueta, los artículos de un autor, los artículos de una fecha determinada y los artículos de una taxonomía personalizada.
Se diferencia, como decía, por una seríe de sentencias condicionales que revisan por el tipo de archivo que se esta visualizando, lo demás es un loop igual al del index.php o page.php
<div id="contenido">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<?php $post = $posts[0]; ?>
<?php /* Si es un archivo para categorías */ if (is_category()) { ?>
<h2>Archivo para la categoría <?php single_cat_title(); ?>:</h2>
<?php /* Si es un archivo para etiquetas */ } elseif( is_tag() ) { ?>
<h2>Artículos etiquetados como: <?php single_tag_title(); ?></h2>
<?php /* Si es un archivo diario */ } elseif (is_day()) { ?>
<h2>Archivo para <?php the_time('F jS, Y'); ?>:</h2>
<?php /* Si es un archivo mensual */ } elseif (is_month()) { ?>
<h2>Archivo para <?php the_time('F, Y'); ?>:</h2>
<?php /* Si es un archivo anual */ } elseif (is_year()) { ?>
<h2>Archivo para <?php the_time('Y'); ?>:</h2>
<?php /* Si es el archivo de autor */ } elseif (is_author()) { ?>
<h2>Archivo del autor</h2>
<?php /* Si el archivo ha sido paginado */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<h2>Archivo del blog</h2>
<?php } ?>
<div class="post pagina" id="post-<?php the_ID(); ?>">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="post-contenido">
<?php the_content(); ?>
<p class="post-metadata">
<?php _e('Archivado en:'); ?> <?php the_category(', ') ?> <?php _e('Escrito por:'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('Sin Comentarios', '1 Comentario', '% Comentario'); ?> <?php edit_post_link('Editar', ' | ', ''); ?>
</p>
</div>
</div>
<?php endwhile; ?>
<div class="paginador">
<?php posts_nav_link(); ?>
</div>
<?php endif; ?>
</div>
Paso 9 – Footer.php
El footer.php es uno de los archivos que comunmente, al igual que sidebar.php, son usados en todas las páginas de nuestro sitio, y no es otra cosa que un par de líneas de código para mostrar algunos creditos al creador del template, enlaces de posicionamiento, o algún widget si es que queremos uno de esos footers de la web 2.0.
Para efectos del template que estamos creando, aquí he de empezar el footer.php con un div de cierre, el cual cierra el div con id=”contenido” declarado en el header.php. Ustedes pueden acomodar su template como mejor les guste.
</div> <div id="piedepagina"> <a href="http://www.cerocreativo.cl" title="Tutorial Creado en Cerocreativo.cl">Tema creado desde cero en Cerocreativo.cl</a> </div> </body> </html>
Paso 10 – Functions.php
Ya finalizando con nuestra construcción, llegamos al tan fantástico archivo functions.php, el cual es un archivo tan poderoso que, cual spiderman, debemos tratar con mucho cuidado, pues todo poder conlleva una gran responsabilidad, y es verdad, porque cometiendo un solo error en nuestro functions.php podemos dar de baja nuestro sitio por unos buenos minutor, teniendo que salvarlo accediendo al ftp, descargar el archivo, repararlo, luego volver a subir y reemplazar por el corrupto… y así una tarea muy tediosa. Así que cuidado.
Para efectos de este tutorial vamos a utilizar nuestro functions.php para dar vida al menú personalizado del header y a la sidebar personalizada declarada en sidebar.php.
<?php
//Agregamos soporte para menus personalizados
add_action('init','registrar_menu');
//Registramos un nuevo menu personalizado
function registrar_menu() {
register_nav_menu('menuprincipal', __('Menu Principal'));
}
// Registro Sidebar
register_sidebar(array(
'name' => 'Sidebar Personalizada',
'id' => 'sidebar-personalizada',
'description' => 'Estos Widgets se mostrarán en la sidebar personalizada.'
));
?>
Con estas líneas de código hemos añadido soporte a nuestro template para que podamos mostrar por lo menos un menú personalizado y una sidebar personalizada, a los cuales tendremos acceso desde el backend de wordpress y podremos modificar a gusto cuando queramos.
Conclusión
A lo largo de este tutorial hemos visto cómo crear una plantilla para wordpress desde cero, la cual es absolutamente básica, pero sirve para comenzar a entender el funcionamiento de los templates, saber que podemos agregar cuantas sidebars como queramos, agregar distintos niveles de menus, y así muchas, pero muchas funciones nuevas, como agregar soporte para miniaturas destacadas en artículos, agregar soporte para multisitio (una característica nueva en wp 3.x), agregar soporte para fondo personalizado, agregar distintas medidas de imagenes miniatura, tipos de post personalizados o custom post types, taxonomias personalizadas, distintos layouts dependiendo de la página la cual estamos revisando, y así un sin fin de etcéteras que podríamos estar listando por mucho tiempo.
La verdad es que este es un template con fines educativos, el cual puede ser utilizado como base para cualquier fin y puede ser complementado en un 100% con muchas funciones nuevas.
Info sobre actualización:
He actualizado el tutorial al día de la fecha 09.2.2012, para ofrecer el proceso completo de creación de un template por lo menos funcional; luego pretendo agregar todo lo que son los estilos CSS para que el template tome forma, y luego de aquello ofrecer los archivos utilizados en este tutorial en descarga directa. Todo en los próximos días.
Saludos.
Enlaces recomendados:
- http://codex.wordpress.org/Template_Hierarchy
- http://codex.wordpress.org/Function_Reference/comment_form
- http://ottopress.com/2010/wordpress-3-0-theme-tip-the-comment-form/