Este documento presenta una introducción al desarrollo de temas en WordPress. Explica la anatomía de los templates de WordPress, incluyendo templates comunes como header.php, index.php y footer.php. También describe la jerarquía de templates de WordPress y cómo funciona. Finalmente, introduce los temas hijos de WordPress, que permiten personalizar temas existentes de una manera segura y fácil.

1. Desarrollo de Temas en
WordPress
Personalización de sitios BVS
Taller de Actualización de la Plataforma Tecnológica de la BVS
3 a 6 de Noviembre de 2014
Julio Takayama | takayama@paho.org
Diseño Gráfico e Interfaces - DGI | MTI

2. Contenidos
1. Anatomia de Templates
2. Template Hierarchy
3. Child Themes

3. WP-Theme
Definición
Conjunto de archivos destinados a
manejar la capa de presentación de un
sitio WP. Ej: templates, hojas de estilo,
scripts e imágenes.

4. Contenidos
1. Anatomia de Templates
2. Template Hierarchy
3. Child Themes

5. WP-Theme
/my-WP-Site
/wp-admin
/wp-content
/languages
/plugins
/themes
/myTheme
/uploads
/wp-includes

6. WP-Theme
/myTheme
Templates
index.php
single.php
page.php
archive.php
category.php
tag.php
taxonomy.php
search.php
author.php
image.php
404.php
Stylesheets
style.css
editor-style.css
rtl.css
editor-style-rtl.css
/css
Funciones
functions.php
Scripts
/js
Template parts
header.php
footer.php
sidebar.php
content.php
comments.php

7. WP-Theme – Anatomia de templates
footer.php
Define la exhibición de la información
de pie de página. Incluye cierre de las
tags HTML
HOME
sidebar.php
Define y controla la exhibición de las
barras de contenidos complementarios
header.php
Define la presentación del encabezado,
y del menu. Incluye las definiciones
de la tag head de HTML
index.php
LOOP
Define el contenido principal de una página

8. WP-Theme – Anatomia de templates
LOOP
Un loop es iniciado con una query que determina que contenidos van a ser
cargados en memoria
Query
Start loop
(Everything between
this and the
endwhile gets
repeated until all
posts are output)
the_title
(Outputs the title of
the post)
the_excerpt
(Outputs the post
excerpt)
the_content
(Outputs the post
content)
the_category
(Outputs the
post categories)
the_author
(Outputs the post
author)
the_date
(Outputs the
post date)
other tags
(there are a variety of other template tags
you can also insert into the loop)
EndWhile
(Start loop over or
exit if all queried
posts have been
output)
Exit

9. WP-Theme – Anatomia de templates
single.php
Corresponde a un loop que es el resultado
de una “query” de una única entrada
POST

10. WP-Theme – Anatomia de templates
page.php
Controla cómo seran exhibidas las páginas.
PÁGINA
<?php
/*
Template Name: Modelo de página inicial
*/
?>
Para un nuevo “page template”, crear un
nuevo archivo incluyendo en el inicio:

11. WP-Theme – Anatomia de templates
archive.php
category.php
tag.php
Controla la aparencia de las listas de
entradas marcadas con determinada
tag, categoria o taxonomia
personalizada
LISTAS
search.php
Controla la aparencia de las listas de
entradas relacionadas a los
resultados de búsqueda

12. Contenidos
1. Anatomia de Templates
2. Template Hierarchy
3. Child Themes

13. Wordpress Template Hierarchy http://codex.wordpress.org/Template_Hierarchy

14. WP-Theme – Template Hierarchy
Page templates

15. WP-Theme – Template Hierarchy
Post types

16. WP-Theme – Template Hierarchy
single-{post_type}.php
single.php
index.php
Single post display

17. WP-Theme – Template Hierarchy
taxonomy-{taxonomy_name}-{term}.php
taxonomy-{taxonomy_name}.php
Custom taxonomies display
taxonomy.php
archive.php
index.php

18. Contenidos
1. Anatomia de Templates
2. Template Hierarchy
3. Child Themes

19. WP-ChildTheme – Definición
Es un tema que hereda las funcionalidades
de otro tema (parent theme) y permiten
modificar o añadir nuevas funcionalidades al
sitio.
Es la forma mas segura y fácil de modificar
un tema existente.

20. WP-ChildTheme – Porqué usar
1. Preservar el “parent theme” manteniendo
aisladas las modificaciones
2. Acelera el desarrollo
3. Garantiza la disponibilidad de
funcionalidades para la red de sitios

21. WP-ChildTheme – Cómo crear
|_ themes
|_ twentyeleven
|_ twentytwelve
|_ twentythirteen
|_ twentyfourteen
|_ twentyfourteen-child
|_ style.css

22. WP-ChildTheme – Cómo crear
style.css
/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Fourteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfourteen
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fourteen-child
*/
@import url("../twentyfourteen/style.css");
/* =Aquí empieza la personalización de tu tema
-------------------------------------------------------------- */

23. WP-ChildTheme – Cómo crear
templates
Sobrescriben los archivos del “parent theme”.
functions.php
NO sobrescriben los archivos del “parent theme”.
Se carga en adición a functions.php del “parent theme”

24. WP-ChildTheme – Cómo crear
Template tags
• código php
• funcciones WP
• Parámetros opcionales
<h1><?php bloginfo('name'); ?></h1>
Información adicional
http://codex.wordpress.org/Template_Tags
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php
bloginfo('name'); ?></a>

25. WP-ChildTheme
Internacionalización
1. Adicionar la carpeta /languages al “child theme”
2. Incluir los archivos de traducción.
Ej: pt_BR.po y pt_BR.mo
3. Add the textdomain in functions.php
<?php
/**
* Setup My Child Theme's textdomain.
*
* Declare textdomain for this child theme.
* Translations can be filed in the /languages/ directory.
*/
function my_child_theme_setup() {
load_child_theme_textdomain( 'my-child-theme',
get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );
?>

26. WP-ChildTheme
Internacionalización
4. “strings” traducibles
$hello = __( 'Hello, dear user!', 'my-text-domain' );
Para traducir expresiones
_e( 'Your Ad here', 'my-text-domain' )
Para “echo” una expresión traducida
printf( _n( 'We deleted one spam message.', 'We deleted %d spam messages.', $count,
'my-text-domain' ), $count );
Plural
Para información adicional
http://codex.wordpress.org/I18n_for_WordPress_Developers

27. Ejemplo

28. WP-ChildTheme - Ejemplo
Adicionar “sidebar”
1. Registrar sidebar en functions.php
<?php
register_sidebar( array(
'name' => ’my-new-sidebar',
'id' => ’ my-new-sidebar',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h1 class="widget-title">',
'after_title' => '</h1>',
) );
?>

29. WP-ChildTheme - Ejemplo
Adicionar “sidebar”
2. Incluir sidebar en el template
<section id="primary" class="site-content">
<div id="content" role="main">
<?php dynamic_sidebar( ’ my-new-sidebar' ); ?>
</div>
</section>

30. WP-ChildTheme - Ejemplo
Adicionar “sidebar”
3. Gestión de “widgets”

31. Documentación
http://codex.wordpress.org/
https://developer.wordpress.org/reference/
WordPress Codex
WordPress Code Reference

32. Julio Takayama
takayama@paho.org
Diseño Gráfico e Interfaces - DGI|MTI
BIREME | OPS | OMS
Muchas Gracias!