Upload
comunidadreddes
View
747
Download
4
Embed Size (px)
DESCRIPTION
Presentación del Workshop de Actualización de la Plataforma Tecnológica de la BVS.
Citation preview
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!