Presentación del Workshop de Actualización de la Plataforma Tecnológica de la BVS.

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!