Temas (II) La estructura del tema

Posted by On noviembre 13, 2015 2 Comments

Una vez que ya sabemos como se instala, vamos a estudiar la estructura del tema, este se basa en dos archivos primordiales, sin los cuales WordPress no dirá que no puede trabajar.

El primero es un archivo llamado style.css que es el archivo principal del estilo del tema y que debe de tener un encabezado similar al siguiente:

/*
NOMBRE DEL TEMA: mitema
THEME URI: -
DESCRIPTION: tema de prueba para tutorial
VERSION: 1.0
AUTHOR: Miguel A. López Torralba
AUTHOR URI: http://mialtoweb.es/
LICENSE: GNU General Public License v2 or later
LICENSE URI: http:/www.gnu.org/licenses/gpl-2.0.html
TAGS: -
TEXT DOMAIN: ;
*/

Este archivo contiene la información del tema, desde el nombre, la dirección de descarga, una descripción básica la versión, el autor, su dirección, la licencia y las etiquetas que pueden usarse para buscar el tema por los filtros de WordPress en el buscador de temas.

Hay algún código que necesitarás añadirle ya que las clases utiliza wordpress para trabajar de forma automática deben de estar en el archivo, como por ejemplo:

El segundo consiste en un archivo index.php el cual nos va servir de plantilla oficial para el sitio, en él, es donde se crean los bucles, se presentan las partes estáticas…  convirtiéndose en la plantilla que escoge WordPress cuando no tiene otra a la que acudir. De modo que lo veremos de nuevo más detenidamente, de momento nos basta con decir que debe de tener al menos un bucle básico.

<?php if (have_posts()): while (have_posts()): the_post(); ?>

<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

        <?php the_excerpt(); ?>
        <?php endwhile; endif; ?>

Dentro de nuestro directorio del tema, debemos de crear algunas carpetas como:

  • css
  • js
  • img

y todas aquellas que creamos que podemos utilizar, así como una serie de archivos importantes que iremos viendo poco a poco:

  • comments.php
  • footer.php
  • fullwidth.php
  • functions.php
  • header.php
  • page.php
  • sidebar.php
  • single
  • una imagen del tema para que aparezca en la selección dentro del escritorio

De este modo nos quedaría un directorio de la siguiente forma…

estructura

Hay que tener en cuenta que WordPress trabaja creando las páginas por secciones y que muchas de estas secciones se repiten continuamente haciendo lo que se conoce como DRY (Don’t Repeat Yourself). De este modo podemos seguir la siguiente jerarquía de trabajo en la plantilla donde vemos las peticiones del usuario y como reacciona WP buscando archivos .php y hacia donde va acudiendo si no los encuentra:

template-hierarchy

Una vez que tenemos esto claro, ya podemos ir empezando a crear nuestros propios temas WordPress tal y como veremos en las siguientes entradas…