Cómo utilizar múltiples archivos para componer un tema de WordPress con secciones personalizadas
Acabamos (de momento) nuestra serie de artículos sobre la creación de temas propios para WordPress y lo hacemos explicando cómo podemos personalizar cada sección de un sitio web desarrollado con este gestor de contenidos utilizando archivos independientes como plantilla.
Hasta ahora, y tal y como vimos en Primeros pasos para crear temas propios de WordPress, hemos desarrollado un tema gráfico en el que solamente teníamos una plantilla, definida mediante el archivo index.php. Aunque esto es posible, no suele ser recomendable servir todas las páginas del sitio con un único código. Lo más habitual es tener varios archivos donde se puede personalizar el aspecto de páginas o secciones completas.
Por tanto, en WordPress un tema gráfico puede contener varios archivos de plantilla. El fundamental es index.php, pero si existen otros archivos que veremos a continuación, WordPress los tomará como base para construir otras secciones.
Para saber cuál es el archivo PHP que WordPress intentará usar, dependiendo de cada contenido que queremos presentar, existe la denominada jerarquía de temas. Mediante esta jerarquía,WordPress irá intentando acceder a diversos archivos. Y en caso de que no estén disponibles, acabaría siempre usando el index.php.
En la propia documentación de WordPress encontraremos este diagrama que expresa este concepto de la jerarquía de temas. Basta echarle un vistazo, para hacerse a la idea de lo complejo y especializado que puede llegar a ser el uso de cada plantilla dentro de un tema.
Archivos principales de un tema
Quizás el diagrama de la jerarquía de temas pueda asustar a una persona que comienza en el desarrollo con WordPress. No hay que preocuparse demasiado, porque muchas partes no son necesarias desde el principio y siempre hay tiempo de profundizar. No obstante, repasamos una lista de archivos principales que sí conviene empezar utilizando:
- index.php. Un viejo conocido, el archivo principal usado de manera predeterminada si no se encuentra otra plantilla para una página o sección.
- comments.php. Es el template que se usará para mostrar los comentarios.
- single.php. Es el template de un post individual.
- page.php. Es el template que se usa para representar una página individual.
- category.php. Es el template que se usa para visualizar una categoría de entradas.
- 404.php. Es la página de error, cuando se intenta acceder a un post o una página que no existe dentro del sitio.
Desarrollar un template para las páginas
Para poner un ejemplo en el que podamos ver algo de código, vamos a desarrollar un template específico para lo que serían las páginas (recuerda que las páginas en WordPress suelen ser con contenido más estático -quienes somos, privacidad, mapa, etc.- y los post o entradas suelen renovarse con mayor frecuencia). En nuestro serial Primeros Pasos con WordPress encontrarás información más detallada sobre cada uno de estos elementos del CMS.
Tal como estaba nuestro sitio hasta ahora, todo se servía a través de index.php. Ahora vamos a crear un nuevo archivo, dentro del directorio del tema que estamos desarrollando, llamado page.php.
El código de una plantilla para usar como página será muy parecido al que hemos visto en el index.php. Usaremos varias de las funciones del API de WordPress que hemos presentado en otros artículos.
<?php get_header(); ?> <?php while ( have_posts() ) : the_post(); ?> <div class='pagina'> <?php the_title( '<h1 class='titulopagina'>', '</h1>' ); ?> </div> <div class='contenidopagina'> <p>Lo que vas a ver ahora es una página del sitio...</p> <?php the_content(); ?> </div> <?php endwhile ?> <?php get_footer(); ?>
Básicamente, tenemos que extraer el contenido de la página, para lo que usaremos the_post(). Luego podemos mostrar su título y contenido con las funciones the_title() y the_content().
Además, estás viendo que es posible reutilizar parte del código que ya teníamos para este site, el que habíamos definido como cabecera y pie, usando las funciones get_header() y get_footer().
Una vez creado ese archivo puedes visualizar cualquiera de las páginas de tu sitio, creadas mediante el admin de WordPress.
El desarrollo de temas es un área donde podemos soltar nuestra creatividad y ser tan precisos como deseemos, personalizando el sitio según las necesidades de cada proyecto. En éste y los anteriores capítulos de la serie que hemos publicado hemos abordado aspectos muy generales, que te ayudarán a comenzar con buen pie. Por último, queremos entregarte los archivos de código que hemos realizado en este y otros artículos, para que te sirvan de base para comenzar.
La instalación básica de WordPress ya viene con algunos temas de base cuyo código conviene repasar para seguir aprendiendo y experimentando en la creación de temas propios.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.