Logo DarioBF Experto en WordPress

Anatomía de un tema de WordPress

Si no sabes cómo es un tema por dentro,
¿Cómo piensas crearlo?

@DarioBF

¿Qué es un tema de WordPress?

Un conjunto de ficheros que nos permite cambiar la apariencia y funcionalidad de nuestro sitio hecho con WordPress; en definitiva, el aspecto del sitio web.

Tipos de temas

Muchos más: Wikis, Redes sociales, Portales...

¿Cómo es un tema de WordPress?

Que no te engañen, el tema mínimo de WordPress es este:

  • style.css

    Se encarga de la apariencia o diseño de nuestro sitio web.

    Colores, tamaños, tipografías, layouts...

  • index.php

    Recoge la información que le hemos solicitado a WordPress y la imprime.

style.css

Sin este fichero no hay tema.

Se encarga de los estilos, como en cualquier sitio web, pero además lleva los metadatos del tema.

function search_theme_directories(){
  …
  if ( $theme_file == ‘style.css’ ) {
    $theme_files[$theme_dir] = array( ‘theme_file’ => $theme_dir . ‘/’ . $theme_file, ‘theme_root’ => $theme_root );
    $found_stylesheet = true;
    break;
    …
  }
  …
}

Comentario declarativo del tema

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

            

index.php

Es la plantilla más genérica.

Se muestra sólo si no hay una plantilla más específica para el contenido a mostrar.

Ficheros habituales de un tema de WordPress

  • style.css

  • index.php

Ficheros habituales de un tema de WordPress

  • header.php

  • footer.php

  • sidebar.php

Plantillas para contenidos

  • home.php

  • page.php

  • single.php

  • archive.php

Todas las plantillas

  • index
  • 404
  • archive
  • author
  • category
  • tag
  • taxonomy
  • date
  • home
  • front_page
  • page
  • paged
  • search
  • single
  • text, plain, text_plain (all mime types)
  • attachment
  • comments
Más información

Plantillas específicas

Plantilla especializada. Para una entrada, autor, página concretos.

  • page-{slug}.php
  • page-{ID}.php
  • category-{ID}.php
  • tag-{ID}.php
  • author-{ID}.php

Plantillas personalizadas

  • Icono php

    contacto.php

  • Icono php

    about.php

  • Icono php

    location.php

  • Icono php

    whatever.php

El Loop

WordPress determina qué contenido debe mostrar en base a URL y configuración.

Ejemplos:

  • Un sólo artículo o página
  • Artículos de una determinada categoría

Ejemplo de Layout estándar
Ejemplo de Layout estándar con Loop

El loop o búcle

WordPress determina qué contenido mostrar en base a URL y configuración.

Ejemplos:

  1. Un sólo post o página.
  2. Un grupo de posts o páginas.
  3. Consulta parámetros (URL)
<?php
  if(have_posts()) :
    while(have_posts()) :
      the_post(); ?>

      <h1><?php the_title() ?></h1>
      <div class='post-content'><?php the_content() ?></div>
<?php

    endwhile;
  else:
?>
    Vaya, no hay entradas.
<?php
  endif;
?>

functions.php

Es un fichero que nos permite añadir funcionalidad a nuestro tema.

functions.php

Fichero de nuestro tema.

  • Una de las formas de cambiar las características que WordPress ofrece por defecto
  • Funciona como un plugin
    • Añade mejoras y funcionalidades a un sitio WordPress
    • Puedes utilizarlo para llamar funciones, tanto PHP como de WordPress.
  • Sólo se ejecuta cuando el tema al que aplica está activado

OJO: No llamar a funciones con el mismo nombre que lo hacen en plugins

Modularización

WordPress nos permite modularizar nuestro diseño; esto es, crear ficheros para jerarquizar el front-end.

Además, nos permite modularizar funciones (plugins), de manera que podemos reciclar trozos de código en diferentes proyectos.

¿Modu-qué?

  • Reutilización de código en diferentes plantillas
  • Template parts + get_template_part()
  • Como includes, pero sin problemas de compatibilidad en temas hijo

Uso de Template Parts

Nomenclatura:

  • {slug}.php: template part genérico
  • {slug}-{name}.php: template part específico

Ejemplo: Supongamos que tenemos diferentes visualizaciones de artículos.

Podemos tener articulo.php como genérico y luego los siguientes específicos: articulo-home.php, articulo-categoria.php, articulo-single.php

Uso de Template Parts

Utilizando get_template_part ( string $slug, string $name = null )

  • $slug: Nombre del template part genérico
  • $name: Nombre del template part específico

Ejemplo: Para llamar a un template específico del ejemplo anterior utilizaríamos get_template_part('articulo', 'home');

Organización de ficheros eficiente

Recomendación personal sobre cómo organizar los ficheros.

Estilo Underscores

  • {slug}.php: template part genérico
  • {slug}-{name}.php: template part específico

Gracias #WCMadrid.

Compartir conocimiento es la base para que la Comunidad crezca, espero que hayas aprendido algo con esta ponencia.

Un saludo, @DarioBF.

slides.dariobf.com/WCMadrid2017