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

Contenidos

1. Anatomia de Templates

2. Template Hierarchy

3. Child Themes

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.

Contenidos

1. Anatomia de Templates

2. Template Hierarchy

3. Child Themes

WP-Theme /my-WP-Site

/wp-admin /wp-content /languages /plugins /themes /myTheme /uploads /wp-includes

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

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

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

WP-Theme – Anatomia de templates

single.php Corresponde a un loop que es el resultado de una “query” de una única entrada

POST

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:

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

Contenidos

1. Anatomia de Templates

2. Template Hierarchy

3. Child Themes

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

WP-Theme – Template Hierarchy

Page templates

WP-Theme – Template Hierarchy

Post types

WP-Theme – Template Hierarchy

single-{post_type}.php

single.php

index.php

Single post display

WP-Theme – Template Hierarchy taxonomy-{taxonomy_name}-{term}.php

taxonomy-{taxonomy_name}.php

Custom taxonomies display

taxonomy.php archive.php

index.php

Contenidos

1. Anatomia de Templates

2. Template Hierarchy

3. Child Themes

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.

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

WP-ChildTheme – Cómo crear

|_ themes |_ twentyeleven |_ twentytwelve |_ twentythirteen |_ twentyfourteen |_ twentyfourteen-child |_ style.css

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 -------------------------------------------------------------- */

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”

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>

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' ); ?>

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

Ejemplo

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>', ) );

?>

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>

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

Documentación

http://codex.wordpress.org/

https://developer.wordpress.org/reference/

WordPress Codex

WordPress Code Reference

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

Muchas Gracias!