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 | [email protected] Diseño Gráfico e Interfaces - DGI | MTI
Jul 06, 2015
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 | [email protected] 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 [email protected] Diseño Gráfico e Interfaces - DGI|MTI BIREME | OPS | OMS
Muchas Gracias!