El funcionamiento del WordPress Themes y las posibilidades de personalización
- 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
- 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”
- 32. Julio Takayama takayama@paho.org Diseño Gráfico e Interfaces - DGI|MTI BIREME | OPS | OMS Muchas Gracias!