Checklist para crear un tema de Wordpress y no morir en el intento

  • Posted on: 13 March 2012
  • By: dani

Preparando clases se me ha ocurrido escribir un "check-list", un listado de los pasos de decisiones que debemos tomar antes de crear un tema en Wordpress a partir de una propuesta de diseño y navegación del proyecto.

La creación de temas para Wordpress es tan compleja como queramos por eso es importante tomar los pasos menos costosos antes de ir por los más complejos.

La guia puede ser perfectamente aplicable a otros CMS como Drupal, aunque no en los detalles.

Básicamente tenemos 3 maneras de crear un tema

  • Crear un tema child de cualquier otro ya existente que se adapte a nuestro diseño y modificar (sólo) el css
  • Crear un tema child de un tema "framework", como puede ser Toolbox, y modificar el css
  • Crear un tema desde cero. No derivar el tema de ningún otro y crear todas las plantillas desde cero (expertos)


Nuestro diseño define una serie de pantallas con un layout y contenidos determinado
Primero es necesario tener clara la estructura de contenidos (tipos de contenido, etiquetas, categorias)
Por tanto el checklist seria, partiendo de nuestro diseño
- Existe algún tema disponible con el mismo layout que mi diseño?

  • si -> crear un tema "child" y personalizar el css como queramos. FIN
  • no -> pasar al siguiente punto

- ¿Existe algún framework que se pueda adaptar a la estructura de mi diseño?
Un framework es un tema que sólo tiene "layout" pero no tiene "presentación", está "en blanco". Cada uno define regiones dinámicas diferentes (para arrastrar widgets) y además algunos permiten configurar opciones de la presentación directamente desde el panel de WP
Posibles frameworks:
   Toolbox, Thematic, otros frameworks: http://www.1stwebdesigner.com/wordpress/wordpress-theme-frameworks-and-s...

  • si -> crear un tema "child" y personalizar el css. FIN
  • no -> pasar al siguiente punto


- ¿Es posible conseguir el layout creando algunas plantillas especiales?.
Una plantilla especial nos permite: añadir contenidos que no teniamos y necesitamos, añadir divs o elementos de html que nos permitan modificar el aspecto mediante css
Para tener una plantilla especial crear un archivo con cualquier nombre y añadir un comentario dentro del php:
<?php
/*
Template Name: Mi plantilla
*/
?>

.. resto de código
dentro de la plantilla podemos poner lo que queramos a parte del "Loop"

  • si -> crear las plantillas especiales que queramos. FIN
  • no -> pasar al siguiente punto


- ¿Es posible conseguir el layout de pantallas que queremos modificando algunas plantillas de la jerarquia?
http://codex.wordpress.org/Template_Hierarchy, por ejemplo; Category templates en el Codex http://codex.wordpress.org/Category_Templates
Las plantillas de la jerarquia se utilizan automáticamente si existen

  • si -> crear las plantillas necesarias.FIN
  • no -> pasar al siguiente punto

Cuidado. Si existen en la plantilla “madre” deberemos copiar primero esa plantilla a nuestro “sub-tema”
- ¿Podemos añadir funciones especiales en functions.php, o código especial dentro de alguna plantilla para solucionarlo? O incluso algún plugin?
Algunas llamadas a la "api" de wordpress nos permiten añadir funcionalidades como zonas activas, activación de funcionalidades de
WP, funciones propias para lo que queramos (avanzado, aqui si que necesitamos php)

  • si -> personalizar el código de functions.php o de alguna de las plantillas
  • no -> pasar al siguiente punto

- Crear un tema desde cero. FIN

Plantilla típica de wordpress, el loop

de http://codex.wordpress.org/The_Loop
Cualquier plantilla debe (o puede) utilizar el loop
El loop muestra los contenidos que corresponden a la pantalla actual
Un loop muy simple seria el siguiente
<!-- Start the Loop. -->
<?php
while ( have_posts() ) : the_post(); ?>
<!-- Display the Title as a link to the Post's permalink. -->
<h2><a href="<?php the_permalink() ?>" ><?php the_title();?></a></h2>
<!-- Display the Post's Content in a div box. -->
<div class="entry">
<?php the_content(); ?>
</div>
<?php endwhile;  ?>


Pero podemos ir añadiendo más cosas, un loop más completo:

<?php get_header(); ?>
<!-- Start the Loop. -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<!-- The following tests if the current post is in category 3. -->
<!-- If it is, the div box is given the CSS class "post-cat-three". -->
<!-- Otherwise, the div box will be given the CSS class "post". -->

<?php if ( in_category('3') ) { ?>
 <div class="post-cat-three">
<?php } else { ?>
 <div class="post">
<?php } ?>

<!-- Display the Title as a link to the Post's permalink. -->
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title();?></a></h2>


<!-- Display the date (November 16th, 2009 format) and a link to other posts by this posts author. -->
<small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>
<!-- Display the Post's Content in a div box. -->
<div class="entry">
<?php the_content(); ?>
</div>
<!-- Display a comma separated list of the Post's Categories. -->
<p class="postmetadata">Posted in <?php the_category(', '); ?></p>
</div> <!-- closes the first div box -->
<!-- Stop The Loop (but note the "else:" - see next line). -->
<?php endwhile; else: ?>
<!-- The very first "if" tested to see if there were any Posts to -->
<!-- display.  This "else" part tells what do if there weren't any. -->

<p>Sorry, no posts matched your criteria.</p>
<!-- REALLY stop The Loop. -->
<?php endif; ?>

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


Si queremos excluir del loop algunas categorias añadir antes del loop
<?php query_posts($query_string . '&cat=-3,-8'); ?>

Requisitos para ser un buen "themer"

  • Saber algo de php (no mucho), lo necesario para poder utilizar las variables y funciones de WP
  • Saber html. En las plantillas propias deberemos añadir el html que creamos conveniente
  • Saber mucho CSS. Es la herramienta principal que usaremos para modificar el aspecto de nuestra plantilla.

Problemas típicos y su solución

La plantilla personalizada no funciona. Verificar que el contenido realmente está usando esa plantilla, por ejemplo añadiendo un mensaje de texto dentro.
<strong>plantilla blah</strong>. Si no aparece este mensaje en el navegador es porqué WP no está usando la plantilla que suponemos.
Tener en cuenta la jerarquia de plantillas (sino es una plantilla personalizada con "template name")
Error de php. Observar que archivo y que linea especifica el mensaje de error. Puede ser porqué los delimitadores de php no están bien cerrados, por ejemplo abrir <?php sin cerrarlo  con ?> dará un error. O que existe una condición if sin cerrar. O que hay una función que no está definida. etc.

Error 500. Muy a menudo se debe a errores en el servidor causados por el .htaccess (archivo que se encarga de reescribir las urls "limpias" entre otras cosas (complejo)

Contenido relacionado

10 motivos por los cuales Wordpress es mejor que Drupal

  • Posted on: 6 June 2014
  • By: dani
Tendencia Wordpress Drupal Joomla

Ya hace más de 7 años que hicimos en pimpampum nuestro primer proyecto en Drupal, http://antropologia.cat/ (un Drupal versión 4 que todavia funciona).

En aquella época valoramos que CMS escoger para los proyectos de nuestros clientes, nos pareció una buena alternativa, y por tanto fué el elegido. Todavia lo seguimos utilizando hoy en dia, y nos parece la mejor alternativa para cierto tipo de aplicaciones.

Como crear un campo de video (youtube) a medida en Drupal 7

  • Posted on: 4 October 2011
  • By: dani
Definición del campo de texto que guarda la dirección del video
Resultado del contenido en formato "página única"

Vamos a ver paso por paso como podemos crear un campo personalizado en un tipo de contenido de Drupal, de manera que traduzca el enlace de un video de youtube en la miniatura del video (en formato teaser) y el player de vídeo (en el formato de página única)

Conceptualmente lo que hay que hacer es traducir el contenido del campo:

http://www.youtube.com/watch?v=AhM4tyL5d6I&feature=feedwll&list=WL