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?
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
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
-
contacto.php
-
about.php
-
location.php
-
whatever.php
El loop o búcle
WordPress determina qué contenido mostrar en base a URL y configuración.
Ejemplos:
- Un sólo post o página.
- Un grupo de posts o páginas.
- 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
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
¿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');
Estilo Underscores
- {slug}.php: template part genérico
- {slug}-{name}.php: template part específico
