ENGÁNCHATE A LOS HOOKS DE GENESIS FRAMEWORK

Nahuai Badiola

@nahuaibadiola

¿Qué es Genesis Framework?✦ Entorno de trabajo

✦ Theme Framework (GPL)

✦ Child themes

@nahuaibadiola

SPOILER!

@nahuaibadiola

VENTAJAS@nahuaibadiola

1. Código limpio/calidad 2. SEO friendly 3. Actualizaciones 4. Soporte 5. Comunidad

@nahuaibadiola

“Make the Genesis community one of the fastest-growing and most open communities in WordPress.”

— Genesis Team (WP Engine)

@nahuaibadiola

1. Código limpio/calidad 2. SEO friendly 3. Actualizaciones 4. Soporte 5. Comunidad 6. Child themes y plugins

@nahuaibadiola

7. Developer friendly✦ Consistencia -> reusar snippets

✦ Inversión razonable

✦ Salto de implementar a desarrollar

@nahuaibadiola

DESVENTAJAS@nahuaibadiola

1. Conocimientos mínimos 2. Aprender nuevos hooks

@nahuaibadiola

@nahuaibadiola

¿Qué son los hooks/ganchos?

@nahuaibadiola

✦ Son «lugares» o «ubicaciones» donde puedes añadir/quitar o modificar código

✦ Clave para: ✦ Actualizar sin perder modificaciones ✦ Extensibilidad de WordPress, plugins y temas

¿Qué son los hooks/ganchos?

@nahuaibadiola

¿Tipos de hooks/ganchos?

@nahuaibadiola

1. Action hooks (Acciones) Añadir o quitar 2. Filter hooks (Filtros) Modificar

@nahuaibadiola

¿Cómo localizar los hooks de Genesis?✦ Genesis Visual Hook Guide•genesis_before_while •genesis_before_entry •genesis_entry_header •genesis_before_entry_content •genesis_entry_content •genesis_after_entry_content •genesis_entry_footer •genesis_after_entry

¿Cómo localizar los hooks de Genesis?

@nahuaibadiola

Ejemplos prácticos✦ Mostrar/ocultar o reposicionar elementos:

✦ Menús ✦ Metainformación (autor, fecha, categorías…) ✦ Imagen destacada ✦ Caja de autor

@nahuaibadiola

Ejemplos prácticos✦ Agregar un widget/block área ✦ Añadir un CTA/avisos ✦ Mostrar/ocultar sidebar ✦ Cambiar los créditos del footer

@nahuaibadiola

Anatomía de los hooksadd_action( 'nombre_action_hook', 'nombre_funcion', 10);

add_filter( 'nombre_filter_hook', 'nombre_funcion', 10);

Action hooks

Filter hooks

remove_action( 'nombre_action_hook', 'nombre_funcion', 10);

@nahuaibadiola

Ejemplos prácticos

@nahuaibadiola

Ejemplos prácticos// Mostrar la imagen destacada bajo el título de la entrada add_action( 'genesis_entry_content', 'featured_post_image', 8 ); function featured_post_image() { the_post_thumbnail('post-image'); }

// Mostrar la imagen destacada sobre el título de la entrada add_action( 'genesis_before_entry', 'featured_post_image', 10 ); function featured_post_image() { the_post_thumbnail('post-image'); }

@nahuaibadiola

Ejemplos prácticos

@nahuaibadiola

Ejemplos prácticos // Eliminar metainformación superior de las entradas remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );

@nahuaibadiola

Ejemplos prácticos // Eliminar categorías y etiquetas del pie de las entradas remove_action( 'genesis_entry_footer', 'genesis_post_meta' );

@nahuaibadiola

Ejemplos prácticosCajetín de suscripción tras post

Utility bar cabecera (ofertas/avisos…)

@nahuaibadiola

Ejemplos prácticos// Registrar la nueva widget area genesis_register_sidebar( array( 'name'=>'Widget area personalizada', 'id' => 'custom-widget', 'description' => 'Widget area personalizada localizada en...', 'before_widget' => '<div id="%1$s" class="widget %2$s"><div class="widget-wrap">', 'after_widget' => "</div></div>", 'before_title' => '<h4 class="widgettitle">', 'after_title' => "</h4>" ) );

@nahuaibadiola

Ejemplos prácticos// Añadir el widget area al hook deseado add_action( 'genesis_after_content', 'cg_custom_widget' ); function cg_custom_widget() { genesis_widget_area( 'custom-widget', array( 'before' => '<div id="custom-widget">', 'after' => '</div>' ) ); }

@nahuaibadiola

Dónde colocar las modificaciones✦ Fichero functions.php

✦ Específico del diseño tema ✦ Plugin de funcionalidades (after_setup_theme)

✦ Comunes diseño + funcionalidades

@nahuaibadiola

Ejemplos prácticos// Encapsular la función y engancharla al hook after_setup_theme add_action( 'after_setup_theme', function() { // Eliminar metainformación superior de las entradas remove_action( 'genesis_entry_header', 'genesis_post_info', 12 ); // Eliminar categorías y etiquetas del pie de las entradas remove_action( 'genesis_entry_footer', 'genesis_post_meta' ); // Mostrar la imagen destacada en la parte superior de la entrada add_action( 'genesis_entry_content', 'featured_post_image', 8 ); function featured_post_image() { if ( ! is_singular( 'post' ) ) return; the_post_thumbnail('post-image'); } });

@nahuaibadiola

Dónde colocar las modificaciones✦ Fichero functions.php

✦ Específicos del tema ✦ Plugin de funcionalidades (after_theme_setup)

✦ Comunes ✦ Ficheros de plantilla (single.php, archive.php…)

@nahuaibadiola

Ejemplos prácticos<?php /** * Tema molón. * * Este fichero añade las personalizaciones a las páginas de archivo. * * @package * @author StudioPress * @license GPL-2.0-or-later * @link https:// */

// Runs the Genesis loop. genesis();

@nahuaibadiola

Resumen hooks✦ QUÉ ➟ Ubicaciones donde modificar código ✦ TIPOS ➟ Acciones y filtros ✦ PARA QUÉ ➟ Modificar aspecto del child theme ✦ CÓMO ➟ Herramientas para localizar hooks ✦ DÓNDE ➟ functions.php, plugin o fichero plantilla

La nueva era Genesis Framework✦ Configuración guiada (Genesis onboarding) (2.8) ✦ Integración con el editor de bloques (Atomic Blocks) ✦ Personalizar créditos del footer desde el personalizador de WordPress (3.1) ✦ Nueva sidebar en el editor (quitar título, migas de pan e imágenes) (3.1) ✦ Integración de las traducciones en el core (no Genesis Translations) ✦ Starter theme

@nahuaibadiola

Recursos Genesis Framework✦ Esther Solà (esthersola.com) ✦ David Perálvarez (silicodevalley.com) ✦ Joan Boluda (boluda.com)

@nahuaibadiola

✦ Código Genesis (codigogenesis.com)

✦ Sridhar Katakam (sridharkatakam.com) Inglés ✦ Tonya Mork (knowthecode.io) Inglés

Código Genesis

@nahuaibadiola

Evento GenesisBCN

@nahuaibadiola

23 de noviembre 2019 Movistar Centre

https://www.freelandev.com/evento-genesis/

@nahuaibadiola

Sobre míDesarrollador WordPress especializado en Genesis Framework

codigogenesis.com

freelandev.com

nbadiola.com

¡Muchas gracias! ¡Moltes gracies!

@nahuaibadiola

Recursos Genesis Framework (II)✦ Genesis Visual Hook Guide: https://es.wordpress.org/plugins/genesis-visual-hook-guide/ (plugin) ✦ Genesis Hook Reference: https://carriedils.com/genesis-hook-reference/ (post) ✦ Genesis Explained: https://designsbynickthegeek.com/ (tutoriales y libro) ✦ Actualizaciones Genesis: https://codigogenesis.com/actualizaciones-genesis/ (listado) ✦ Child themes Genesis adaptados: https://codigogenesis.com/child-theme-genesis/ (listado)

@nahuaibadiola