94

Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

Embed Size (px)

Citation preview

Page 1: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao
Page 2: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Desarrollo de TemasArchivos y plantillas del tema, Uso de plantillas, El Loop, Custom Post Types,

Metaboxes, Functions.php, Crear tema desde cero, Child Themes, Starter Themes.

Page 3: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

#1

¿Qué es un tema?¿Y cómo crearlo?

Page 4: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

¿Qué es un tema?Un tema es un conjunto de archivos que permite cambiar la apariencia de nuestro gestor de contenidos.

Un tema WordPress nos permitirá personalizar las fuentes de los textos, el tamaño de la letra, los colores del texto, de los links, el fondo de la página; en definitiva, el aspecto del sitio web.

•Blog. •Tienda online. •Sitio web corporativo. • Institucionales. •Educativos. •Comunidad. •Wiki. •Portal. •etc.

Page 5: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

index.phpstyle.css

¿Cómo es un tema?

Page 6: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

style.cssSin style.css no hay tema.

function search_theme_directories(){…if ( $theme_file == ‘style.css’ ) {

$theme_files[$theme_dir] = array( ‘theme_file’ => $theme_dir . ‘/’ . $theme_file, ‘theme_root’ => $theme_root );

$found_stylesheet = true;break;…

}…}

Page 7: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

/*Theme Name: Twenty ThirteenTheme URI: http://wordpress.org/themes/twentythirteenAuthor: the WordPress teamAuthor URI: http://wordpress.org/Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.Version: 1.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-readyText Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.Use it to make something cool, have fun, and share what you've learned with others.*/

Page 8: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

style.css

Page 9: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

style.css

Page 10: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

index.phpPlantilla más genérica.

Se muestra si no hay otra plantilla más específica para el contenido que estamos mostrando.

» home.php index.php

»

Page 11: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

WordPress nos permite modularizar el código; esto es, crear ficheros para jerarquizar el diseño (front-end).

Además, nos permite modularizar funciones (plugins), de manera que podemos reciclar trozos de código en diferentes proyectos.

Modularización

Page 12: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Ficheros habituales de un tema WordPress

header.php footer.php sidebar.php

Page 13: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

header.php

footer.php

index.php sidebar.php

Page 14: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

header.php

Declaración del documento.

Inclusión de los estilos.

Función wp_head();

Page 15: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

wp_head()Función IMPRESCINDIBLE.

Sinónimo de do_action(‘wp_head’); No acepta parámetros. Es dependiente del tema. Todos los plugins vuelcan sobre ella sus estilos y scripts.

add_action('wp_head','hook_css');function hook_css(){$output="<style> .wp_head_example { background-color : #f1f1f1;} </style>";echo $output;

}

Page 16: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

footer.php

Pié de página.

Inclusión de Javascript.

Función wp_footer();

Page 17: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

wp_footer()Función IMPRESCINDIBLE.

Sinónimo de do_action(‘wp_footer’); No acepta parámetros. Es dependiente del tema. Todos los plugins vuelcan sobre ella sus scripts.

add_action('wp_footer','hook_javascript');function hook_javascript(){$output="<script> //Mi función javascript. </script>";echo $output;

}

Page 18: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

sidebar.php

Barra lateral.

Widgets.

Page 19: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Plantillas para contenidos

home.php page.php

single.php archive.php

Page 20: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

page.php y single.php

Page 21: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Más plantillas

404.php category.php

tag.php author.php

Page 22: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

index 404 archive author category tag taxonomy date home

front_page page paged search single text, plain, text_plain (all mime types) attachment comments

Todas las plantillas

Page 23: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Plantillas personalizadas

contacto.php about.php

location.php whatever.php

Page 24: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Página especializada. Para una entrada, autor, página concretos.

1. page-{slug}.php 2. page-{ID}.php 3. category-{ID}.php 4. tag-{ID}.php 5. author-{ID}.php

Plantillas personalizadas

Page 25: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao
Page 26: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

#2

El Loop

Page 27: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

header.php

footer.php

index.php

sidebar.php

Page 28: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

El bucle (Loop)Determina qué contenido debe mostrar WordPress. Un sólo post o página. Un grupo de posts o páginas. Consulta parámetros (URL)

<?phpif(have_posts()) :

while(have_posts()) :the_post();

?><h1><?php the_title() ?></h1><div class='post-content'><?php the_content() ?></div>

<?phpendwhile;

else:?>

Vaya, no hay entradas.<?php

endif;?>

Page 29: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

Objeto $wp_query

El Loop es utilizado para extraer y mostrar contenido de artículos (o posts), páginas y tipos de entrada personalizados (Custom Post Types).

Los datos que obtenemos al consultar (consulta original, query_posts o WP_Query), estos se guardan en $wp_query (un objeto).

Page 30: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Objeto $wp_queryEjemplo - Ver posts o artículos:

<pre><?php print_r($wp_query->posts); ?>

</pre>

Ejemplo - Loop básico:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

Page 31: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Objeto $wp_query

Funciones del objeto $wp_query:

<?phpfunction the_post() {

global $wp_query;

$wp_query->the_post();}

?>

Page 32: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Objeto $wp_queryObjeto automático.

WordPress basa el funcionamiento de $wp_query en la dirección web actual y configuraciones del wp-admin.

WordPress necesita la URL para filtrar parámetros o páginas concretas. Por ejemplo, la URL http://ejemplo.com/etiqueta/pony le dice a WordPress que configure el objeto $wp_query con los artículos etiquetados con pony, exclusivamente. Mientras que http://ejemplo.com/ obtiene todos los artículos.

Page 33: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

<?phpif(have_posts()) :

while(have_posts()) :the_post();

?><h1><?php the_title() ?></h1><div class='post-content'><?php the_content() ?></div>

<?phpendwhile;

else:?>

Vaya, no hay entradas.<?php

endif;?>

Clase que modifica (o crea) el objeto $wp_query Loop por defecto:

Clase WP_Query

Page 34: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

<?php$args = array('cat' => 4);$category_posts = new WP_Query($args);if($category_posts->have_posts()) :

while($category_posts->have_posts()) :$category_posts->the_post();

?><h1><?php the_title() ?></h1><div class='post-content'><?php the_content() ?></div>

<?phpendwhile;

else:?>

Vaya, no hay entradas.<?php

endif;?>

Loop de WordPress con WP_Query

Clase WP_Query

Page 35: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Loop normal vs Loop WP_Query: 1.Construir la consulta: Con WP_Query hay que indicar

qué contenido queremos extraer de la base de datos. 2.Inicializar WP_Query y consultar. 3.Crear el loop. 4.Trabaja como siempre.

Clase WP_Query

Page 36: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

1 - Construir la consulta: Con WP_Query hay que indicar qué contenido queremos extraer de la base de datos.

1. Controla los valores por defecto: • post_per_page • post_type • post_status

• Más información.

Clase WP_Query

Page 37: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

<?php$args = array('cat' => 4);$category_posts = new WP_Query($args);if($category_posts->have_posts()) :

while($category_posts->have_posts()) :$category_posts->the_post();

?><h1><?php the_title() ?></h1><div class='post-content'><?php the_content() ?></div>

<?phpendwhile;

else:?>

Vaya, no hay entradas.<?php

endif;?>

2 - Iniciar WP_Query y consultar.

Clase WP_Query

Page 38: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

<?php$args = array('cat' => 4);$category_posts = new WP_Query($args);if($category_posts->have_posts()) :

while($category_posts->have_posts()) :$category_posts->the_post();

?><h1><?php the_title() ?></h1><div class='post-content'><?php the_content() ?></div>

<?phpendwhile;

else:?>

Vaya, no hay entradas.<?php

endif;?>

3 - Crear el Loop.

Clase WP_Query

Page 39: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

4. Trabaja como siempre. 1. Añade tus etiquetas html, estructura o diseño.

Consejos: No hagas consultas muy pesadas, sobretodo en alojamientos compartidos.

– Más consultas a la base de datos = más consumo del servidor.

– Siempre que puedas, utiliza la consulta por defecto de WordPress y el motor de plantillas.

Clase WP_Query

Page 40: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

/* Restore original Post Data * NB: Because we are using new WP_Query we aren't stomping on the * original $wp_query and it does not need to be reset with * wp_reset_query(). We just need to set the post data back up with * wp_reset_postdata(). */wp_reset_postdata();

5 - Resetea parámetros (evita problemas)

Clase WP_Query

Page 41: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

#3

Añadiendo menúspersonalizados

Page 42: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

Podemos registrar tantos menús como queramos

// Añado un menú sólofunction register_my_menu() { register_nav_menu('header-menu',__( ‘Primary Navigation' ));}// Añado varios menúsfunction register_my_menus() { register_nav_menus( array( 'header-menu' => __( ‘Primary Navigation’ ), 'extra-menu' => __( ‘Top Bar Navigation’ ) ) );}add_action( 'init', 'register_my_menus' );

Añadiendo menús

Apariencia»Menús {

Page 43: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Para mostrarlo en el front-end:

<?php wp_nav_menu(array( 'theme_location' => 'header-menu')); ?>

Añadiendo menús

Más información

<?phpwp_nav_menu(array('theme_location' => ‘extra-menu','container_class' => ‘my_extra_menu_class'));

?>

Page 44: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao
Page 45: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

#4

functions.php

Page 46: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

• Es un fichero de nuestro tema. • Es una de las formas de cambiar las características que

WordPress ofrece por defecto. • El functions.php funciona como un plugin:

• Añade mejoras y funcionalidades a un sitio WordPress. • Puedes utilizarlo para llamar funciones, tanto PHP como de

WordPress.

functions.php

Page 47: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Un plugin: • Requiere una cabecera específica, única • Se guarda en wp-content/plugins (Normalmente en

subdirectorio • Se ejecuta sólo cuando está activado, a través del panel de

plugins • Aplica sus funciones independientemente del tema • Debe tener un propósito; por ejemplo: convertir artículos en

páginas, ofrecer mejoras de posicionamiento o ayudar con los backups

functions.phpDiferencias con un plugin

Page 48: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

El fichero functions.php: • No requiere una cabecera única/propia. • Se guarda en el directorio de cada tema; wp-content/

themes/theme • Sólo se ejecuta cuando el tema al que aplica está activado. • Aplica sus funciones/cambios sólo al tema. Si se cambia el

tema, la funcionalidad se pierde. • Puede tener varios bloques de código utilizados para

diferentes propósitos.

functions.phpDiferencias con un plugin

Page 49: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

¡CUIDADO!: Si un plugin de WordPress llama a la misma función

o filtro que tu functions.php, los resultados pueden ser…

Page 50: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao
Page 51: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao
Page 52: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

#5

Custom Post Types

Page 53: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Custom Post Types

Por defecto: • Entradas • Páginas • Adjuntos • Revisión • Menús de navegación.

Page 54: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Custom Post Types

Utilidades: • Catálogos de productos. • El custom post type es el producto. • Portfolios. • Editorial.

Page 55: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

Custom Post Types1 - Mostrar etiquetas del nuevo Post Type.

// La función no será utilizada antes del 'init'.add_action( 'init', 'my_custom_init' );/* Creamos labels personalizados para nuestro Post Type */function my_custom_init() {

$labels = array(‘name’ => _x( 'Libros', 'post type general name' ),'singular_name' => _x( 'Libro', 'post type singular name' ),'add_new' => _x( 'Añadir nuevo', 'book' ),'add_new_item' => __( 'Añadir nuevo Libro' ),'edit_item' => __( 'Editar Libro' ),'new_item' => __( 'Nuevo Libro' ),'view_item' => __( 'Ver Libro' ),'search_items' => __( 'Buscar Libros' ),'not_found' => __( 'No se han encontrado Libros' ),'not_found_in_trash' => __( 'No se han encontrado Libros en la papelera' ),'parent_item_colon' => ''

);

Page 56: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

Custom Post Types2- Definir propiedades del post type nuevo.

// Creamos un array para $args$args = array(

'labels' => $labels,'public' => true,'publicly_queryable' => true,'show_ui' => true,'query_var' => true,'rewrite' => true,'capability_type' => ‘post','hierarchical' => false,'menu_position' => null,'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' )

);

//Registramos el Post Type register_post_type( 'libro', $args ); /* Registramos y a funcionar */}

Page 57: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Custom Post TypesFunciones para controlar el Custom Post Type:

• post_type_exists() – Revisa si existe un custom post type. • is_post_type_hierarchical( $post_type ) – Cuándo el tipo de

post es jerárquico. Si retorna falso es que no lo es. • get_post_type( $post ) – Recupera el tipo de entrada del

artículo en cuestión o un post específico. • get_post_type_object( $post_type ) – Recupera un objeto del

tipo de entrada por nombre. • get_post_types( $post ) – Obtiene una lista de todos los tipos

de entrada. • register_post_type() – Registra un nuevo tipo de entrada. No

utilizar antes del init. • get_post_type_capabilities() – Crea un objeto con todos los

permisos de los tipos de entrada personalizados.

Más información

Page 58: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

TaxonomíasCustom Post Types

// Lo enganchamos en la acción init y llamamos a la función create_book_taxonomies() cuando arranqueadd_action( 'init', 'create_book_taxonomies', 0 ); // Creamos dos taxonomías, género y autor para el custom post type "libro"function create_book_taxonomies() {

// Añadimos nueva taxonomía y la hacemos jerárquica (como las categorías por defecto)

$labels = array('name' => _x( 'Géneros', 'taxonomy general name' ),'singular_name' => _x( 'Género', 'taxonomy singular name' ),'search_items' => __( 'Buscar por Género' ),'all_items' => __( 'Todos los Géneros' ),'parent_item' => __( 'Género padre' ),'parent_item_colon' => __( 'Género padre:' ),'edit_item' => __( 'Editar Género' ),'update_item' => __( 'Actualizar Género' ),'add_new_item' => __( 'Añadir nuevo Género' ),'new_item_name' => __( 'Nombre del nuevo Género' ),

);

Page 59: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

TaxonomíasCustom Post Types

register_taxonomy( 'genero', array( 'libro' ), array('hierarchical' => true,'labels' => $labels, /* ADVERTENCIA: Aquí es donde se

utiliza la variable $labels */'show_ui' => true,'query_var' => true,'rewrite' => array( 'slug' => 'genero' ),

));

Page 60: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

TaxonomíasCustom Post Types

// Añado otra taxonomía, esta vez no es jerárquica, como las etiquetas.$labels = array(

'name' => _x( 'Escritores', 'taxonomy general name' ),'singular_name' => _x( 'Escritor', 'taxonomy singular name' ),'search_items' => __( 'Buscar Escritores' ),'popular_items' => __( 'Escritores populares' ),'all_items' => __( 'Todos los escritores' ),'parent_item' => null,'parent_item_colon' => null,'edit_item' => __( 'Editar Escritor' ),'update_item' => __( 'Actualizar Escritor' ),'add_new_item' => __( 'Añadir nuevo Escritor' ),'new_item_name' => __( 'Nombre del nuevo Escritor' ),'separate_items_with_commas' => __( 'Separar Escritores por

comas' ),'add_or_remove_items' => __( 'Añadir o eliminar Escritores' ),'choose_from_most_used' => __( 'Escoger entre los Escritores

más utilizados' ));

Page 61: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

TaxonomíasCustom Post Types

register_taxonomy( 'escritor', 'libro', array('hierarchical' => false,'labels' => $labels, /* ADVERTENCIA: Aquí es donde se

utiliza la variable $labels */'show_ui' => true,'query_var' => true,'rewrite' => array( 'slug' => 'escritor' ),

));} // Fin de la función create_book_taxonomies().

Page 62: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

TaxonomíasCustom Post Types

—>

Page 63: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Funciones para controlar el Custom Post Type: • get_taxonomies() – Obtienes una lista de las taxonomías

registradas. • get_object_taxonomies($object_type) – Retorna todas las

taxonomías que pertenecen al $object_type especificado. • get_taxonomy() – Recupera la taxonomia especificada. • taxonomy_exists() – Comprueba que la taxonomía existe.

Falso si no existe. • is_taxonomy_hierarchical() – Nos dice si una taxonomía es

jerárquica. Falso en caso negativo. • register_taxonomy – Crea o modifica un objeto de taxonomía.

No usar antes del init.

TaxonomíasCustom Post Types

Más información

Page 64: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

#6

Metaboxes

Page 65: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Metaboxes¿Qué es?:

• Nos permite añadir campos personalizados en la página de edición de los posts.

• Guardar más información sobre un tipo de entrada (o todos)

¿Cómo se crean?: • Con plugin. • Con código.

Page 66: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Metaboxes<?phpadd_meta_box(

$id,$title,$callback,$page,$context,$priority,$callback_args

);?>

Page 67: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

• $id el el ID html del metabox. Es útil, por ejemplo, si vas a utilizar un CSS custom para darle estilos a este metabox o incluso vas a hacer algo con Javascript; sino, no tiene mucha importancia.

• $title es el título que será mostrado en la parte superior del metabox, como veremos

próximamente. • $callback es la función que dará uso a nuestro metabox, lo veremos en el siguiente punto. • $page es donde queremos que se muestre nuestro metabox; podemos decidir que se

muestre en los post, las páginas o un custom post type (nuestro caso). • $context es dónde queremos que se muestre nuestro metabox. “normal” significará que

se muestre bajo el editor de la entrada o página, “side” coloca el metabox a la barra lateral de la página de edición y “advanced” lo coloca en la misma columna que el editor.

• $priority le dice a WordPress dónde cargar el metabox en el contenido. “high”, “default” o “low” coloca la caja del metabox arriba, en su posición natural o abajo del todo respectivamente. Aunque, desde que todos los metaboxes de WordPress funcionan con

el Drag and drop, $priority no tiene demasiado sentido. • $callback_args es de otra batalla.

Metaboxes

Page 68: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Metaboxes<?phpadd_meta_box(

‘my-meta-box-id’,‘Datos adicionales del libro’,‘dariobf_metabox’,‘libro’,‘normal’,‘high’

);?>

Page 69: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Metaboxesfunction dariobf_metabox( $post ){?>

<p>Aquí pondremos todo el contenido de nuestro metabox</p><?php}

Page 70: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Metaboxes

function dariobf_metabox( $post ){ ?>

<p><label for="my_meta_box_text">ISBN</label><input type="text" name="my_meta_box_text"

id="my_meta_box_text" value="<?php echo $text; ?/>" /> </p><?php}

Añadiendo: Input

Page 71: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Metaboxesfunction dariobf_metabox( $post ){

$values = get_post_custom( $post->ID );$text = isset( $values['my_meta_box_text'] ) ?

esc_attr( $values['my_meta_box_text'][0] ) : '';

// We'll use this nonce field later on when saving. wp_nonce_field( 'my_meta_box_nonce', 'meta_box_nonce' ); ?>

<p><label for="my_meta_box_text">ISBN</label><input type="text" name="my_meta_box_text"

id="my_meta_box_text" value="<?php echo $text; ?/>" /> </p> <?php}

Añadiendo: Input

Page 72: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

MetaboxesAñadiendo: Select

Page 73: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Metaboxes¿Qué hemos hecho?:

• He añadido dos select, como hemos mencionado arriba. • He añadido, también, dos variables más ($select y $select2)

donde recogo los datos de ambos select. Tal y como hicimos con el input del ISBN.

Page 74: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

MetaboxesGuardando los datos:

• Jamás te fíes del usuario. • Antes de guardar los datos vamos a comprobar que no hay

nada malicioso en ellos. • Función esc_attr(). Codifica las comillas simples y dobles así como

los símbolos mayor qué y menor qué en HTML. Más información. • Guardamos con update_meta():

• El ID del post • La “llave” (key) del meta • El valor.

Page 75: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

Metaboxesadd_action( 'save_post', ‘dariobf_metabox_save’ );function dariobf_metabox_save( $post_id ){ // Controla si estamos haciendo un auto-guardado if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return; // Si nuestro nonce no está, o no podemos verificarlo, fuera. if( !isset( $_POST['meta_box_nonce'] ) || !wp_verify_nonce( $_POST['meta_box_nonce'], 'my_meta_box_nonce' ) ) return; // Si el usury actual no puede editar este post, fuera. if( !current_user_can( 'edit_post' ) ) return; // Ahora podemos guardar los datos $allowed = array( 'a' => array( 'href' => array() ) );

Page 76: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

Metaboxes// Nos aseguramos de que la información está definida antes de guardar. if( isset( $_POST['my_meta_box_text'] ) ) update_post_meta( $post_id, ‘my_meta_box_text', wp_kses( $_POST['my_meta_box_text'], $allowed ) ); if( isset( $_POST['my_meta_box_select'] ) ) update_post_meta( $post_id, 'my_meta_box_select', esc_attr( $_POST['my_meta_box_select'] ) );

if( isset( $_POST['my_meta_box_select_2'] ) ) update_post_meta( $post_id, 'my_meta_box_select_2', esc_attr( $_POST['my_meta_box_select_2'] ) ); } // Fin función dariobf_metabox_save

Page 77: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Metaboxes

¿Cómo muestro los datos en el Front-End?

get_post_meta o get_post_custom

// Obtenemos el ISBN del libro con ID 76<?php $isbn = get_post_meta( 76, 'my_meta_box_text' ); ?>

Page 78: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

#7

Post Formats

Page 79: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Post FormatsIntroducido en la versión 3.1

Un Post Format (Formato de publicación) es una información meta que se puede utilizar en un tema para personalizar la forma de presentación de la misma.

En resumen, con un tema que soporte los Post Formats, el usuario final puede decidir la apariencia que tendrá cada publicación.

Page 80: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Post Formats• Aside - Generalmente se muestra sin título. Parecido a una publicación en

el muro de Facebook. • Galería - Galería de imágenes. • Enlace - Un enlace a otro sitio web. • Imagen - Una única imagen. La primera etiqueta img en el artículo se

considerará la imagen. • Cita - Una cita. Probablemente contendrá un blockquote con el contenido

citado. Además, la cita será el contenido, con la fuente o autor como título. • Estado - Actualización de estado, similar a una actualización de Twitter. • Vídeo - Un video o playlist de vídeos. • Audio - Un fichero de audio o lista de reproducción. Puede utilizarse para

Podcasting. • Chat - Transcripción de chat.

Page 81: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Post Formats

¿Cómo añado este soporte a mi tema?

add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );

Page 82: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Post Formats

¿Y a un tipo de entrada concreto?

// Añado post-formats al post_type ‘page' - Páginasadd_post_type_support( 'page', 'post-formats' );

// Añado post-formats al post_type ‘my_custom_post_type'add_post_type_support( 'my_custom_post_type', 'post-formats' );

Page 83: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Post Formats

Para utilizarlos en el front-end:

if ( has_post_format( 'video' )) { echo 'this is the video format';}

Page 84: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

#8

Imagen destacada

Page 85: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Imagen destacadaTambién Post Thumbnail

add_theme_support( 'post-thumbnails' );

has_post_thumbnail() - Pregunta the_post_thumbnail() - Muestra (Loop) get_the_post_thumbnail() - Muestra

Page 86: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

#9

Customizer

Page 87: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Nos permite dejar ciertos valores a configurar por el usuario de nuestro theme.

Por ejemplo: logotipos, fondo, imagen de cabecera, tamaño y características de la fuente…

https://developer.wordpress.org/themes/advanced-topics/customizer-api/

Customizer

Page 88: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

#10

Child ThemesStarter Themes

Page 89: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Un "tema hijo" en WordPress es un tema que hereda la funcionalidad de otro tema, llamado "tema padre”.

Los temas hijos permiten modificar o añadir las funcionalidades del tema padre.

Un tema hijo es la forma más segura y fácil de modificar un tema existente, tanto si se quiere hacer pequeños cambios como otros más amplios.

En lugar de modificar los archivos del tema directamente, crear un tema hijo y hacerlo prevalecer sobre el tema padre.

Child Themes

Page 90: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Si modificas un tema existente y se actualiza, se perderán los cambios. Con un tema hijo, puedes subir el tema padre (que puede ser importante por cuestiones de seguridad o funcionalidad) y seguir manteniendo los cambios.

Puede acelerar el tiempo de desarrollo. Partimos de un tema desarrollado.

Es una buena forma de empezar si se está empezando con el desarrollo de temas WordPress.

Child Themes¿Por qué utilizarlos?

Page 91: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Crea una carpeta para tu tema hijo en wp-content/themes. Recomendable “nombredeltemapadre-child”. Crea un style.css (único fichero obligatorio para crear un tema hijo)

Child Themes

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

Page 92: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

Consejo: no utilizar @import para integrar la hoja de estilos del padre. Utilizar wp_enqueue_style en el functions.php

Child Themes

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

Page 93: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

underscores.me Es un tema sin estilos con el que empezar a trabajar. No utilizar como Parent Theme.

Starter Themes

Page 94: Desarrollo de Themes de WordPress desde cero. @DarioBF en @WPBilbao

dariobf.com

• La cantidad justa de plantillas HTML5, bien comentadas y modernas. • Una plantilla 404 útil. • Una implementación de “header” personalizado (opcional) inc/custom-

header.php • Etiquetas personalizadas de plantilla en inc/template-tags.php que

mantienen tus plantillas limpias y previenen la duplicación de código. • Algunos trucos en inc/extras.php que pueden mejorar tu experiencia

desarrollando temas. • Un script en js/navigation.js que hace tu menú responsive en pantallas

pequeñas. Preparado para tu creatividad CSS. • Dos ejemplos de plantillas CSS en layouts/: Una con barra lateral a la

derecha y otra con barra lateral a la izquierda. • Starter CSS en style.css que te ayudará a empezar tu diseño

rápidamente. • La licencia GPL en license.txt.

Starter Themes