Tutorial WordPress: diseñando nuestro theme

WordPress tutorial

Vamos a ponernos manos a la obra con nuestro theme. Como dije anteriormente, lo primero es plasmar en papel nuestra idea. Hacemos un boceto de nuestro diseño en un folio y luego si queremos podemos digitalizarlo y dejarlo mucho más bonito en Photoshop o en el Gimp o donde queráis.

Nuestro objetivo es conseguir un archivo html simple como este:

Click para ampliar
Tutorial WordPress

Seguir leyendo el resto de la entrada »

Tutorial WordPress: estructura de un theme

WordPress

Llevo un tiempo empezar una serie de posts hablando sobre el CMS favorito de muchos. El hacer un theme para WordPress es un tema que a muchos nos fascina y muchas veces intentamos meterle mano pero quizás nos vemos cohibidos ante toda la información que hay al respecto, mucha de ella confusa.

Es por ello que voy a empezar a hacer unos tutoriales bien sencillitos para comprender un theme de WordPress y de paso, aprender a crearlo desde cero.

Lo primero es tener una idea en mente, el diseño. Si queremos lo podemos plasmar en Photoshop o en una hojita de papel con anotaciones para saber cuánto medirá cada elemento. Esto lo veremos más adelante, ahora lo que vamos a estudiar es la estructura que deberá tener nuestro theme, que constará de los siguientes archivos:

  • header.php – cabecera del blog
  • index.php – sección principal
  • sidebar.php – barra lateral (podremos ponerla donde nos plazca, e incluso crear varias)
  • footer.php – pie de página
  • single.php – diseño para cada post (si no existe, se toma del index.php)
  • page.php – diseño para las páginas creadas en WP (si no existe, se usa el index.php)
  • comments.php – diseño para los comentarios de los posts y páginas
  • search.php – diseño para los resultados de la búqueda
  • searchform.php – módulo para el campo de búsqueda
  • archive.php – diseño para mostrar el archivo (si no existe, se toma del index.php)
  • functions.php – aquí podremos crear nuestras propias funciones en PHP
  • 404.php – página de error
  • style.css – nuestra hoja de estilos

En posteriores posts iremos viendo cómo construir cada uno de los archivos y hacer ese theme que tanto tiempo lleva rondando por nuestra cabeza.