Encabezados dinámicos con OceanWP

En la guía anterior vimos como crear cabeceras personalizadas con OceanWP sin necesidad de escribir una línea de código. Pero, ¿y si necesitamos encabezados dinámicos  en función del contenido de nuestras páginas y entradas?. En ese caso, no queda más remedio que hacerlo a la vieja usanza.

Por suerte los desarrolladores de OceanWP nos han facilitado mucho las cosas, como veremos en este tutorial

Personalizando los encabezados en OceanWP

OceanWP nos permite establecer nuestras preferencias globales directamente desde el personalizador. Estas son opciones globales que definen el encabezado general, el estilo aplicado al título de las páginas y finalmente el aspecto de las entradas individuales del blog.

Al personalizar las entradas individuales tendremos la opción de utilizar la imagen destacada del artículo como fondo del encabezado y configurar todos los detalles correspondientes: posición, tamaño, repetición, etc. Además de ello podemos decidir que metas serán visibles y su distribución con el resto de elementos de la entrada.

Finalmente en cada página y entrada idividual tendremos un metabox que nos permitirá establecer dichas opciones de manera individual. 

Sin embargo, si un plugin agrega un tipo personalizado (un ejemplo lo tenemos en estas guias), no tendremos tantas opciones de personalización. Por un lado el metabox de OceanWP no estará disponible en las entradas individuales y posiblemente no se aplicará el estilo de entrada única definido en el personalizador.

Filtros de OceanWP para crear encabezados dinámicos

La solución es muy sencilla, si seguimos la documentación de OceanWP

Lo primero es crear y activar un tema hijo. Y a continuación solo tenemos que utilizar los hooks disponibles.

En nuestro caso tenemos queremos que las entradas individuales tengan un encabezado transparente y que la imagen de fondo del encabezado sea la que hayamos establecido como imagen destacadas. 

En los siguientes ejemplos tipo_personalizado_1 se refiere al tipo de entrada personalizado que deseamos modificar.

Para los encabezados dinámicos OceanWP define los siguientes filtros:

ocean_page_header_style​ 

Este filtro nos permite establecer el tipo de encabezado que deseamos. Las posibles opciones son "minimal", "transparent", "top","full_screen","medium","vertical"

function rjc_page_header_style( $style ) {
    if ( is_singular( 'tipo_personalizado_1' ) ) {$style = 'background-image';}
    return $style;
}
add_filter( 'ocean_page_header_style', 'rjc_page_header_style' );

ocean_page_header_background_image​ 

Este filtro permite establecer la imagen de fondo. Para nuestro ejemplo, comprobamos primero que exista una imagen destacada y de ser así, la utilizamos

function rjc_page_header_bg_img( $bg_img ) {
   if ( is_singular( 'tipo_personalizado_1' ) ) {
      if ( has_post_thumbnail() ) {$bg_img = wp_get_attachment_url( get_post_thumbnail_id());}
   }
   return $bg_img;
}
add_filter( 'ocean_page_header_background_image', 'rjc_page_header_bg_img' );

Con estos dos filtros ya sería suficiente.  Al añadir estas funciones al function.php de nuestro tema hijo habremos activado los encabezados dinámicos para nuestro tipo de entrada personalizado. 

Sin embargo, podemos modificar todos los parámetro mediante los filtros:

​ocean_post_title_bg_image_position ​

Nos permite establecer la posición de la imagen. Primero se indica la posicion vertical (top, center, bottom) y a continuación la posicion horizontal (left, center, right). Por ejemplo: "top, left". Si usamos "initial" usaremos el valor por defecto del navegador

function rjc_page_header_image_position( $position ) {
     if ( is_singular( 'tipo_personalizado_1' ) ) {$position = 'center center';}
    return $position;
}
add_filter( 'ocean_post_title_bg_image_position', 'rjc_page_header_image_position' );

ocean_post_title_bg_image_attachment ​

Con este filtro definimos el comportamiento del la imagen al desplazarnos. Sus posibles valores son: initial, scroll o fixed

function rjc_page_header_image_attachment( $attachment ) {
     if ( is_singular( 'tipo_personalizado_1' ) ) {$attachment = 'fixed';}
    return $attachment;
}
add_filter( 'ocean_post_title_bg_image_attachment', 'rjc_page_header_image_attachment' );

ocean_post_title_bg_image_repeat ​

Este filtro determina como se repite la imagen de fondo. Podemos establecerlo en: initial, no-repeat, repeat, repeat-x o repeat-y

function rjc_page_header_image_repeat( $repeat ) {
   if ( is_singular( 'tipo_personalizado_1' ) ) {$attachment = 'no-repeat';}
   return $attachment;
}
add_filter( 'ocean_post_title_bg_image_repeat', 'rjc_page_header_image_repeat' );

ocean_post_title_bg_image_size ​

En cuanto al tamaño las opciones posibles son: initial, auto, cover y contain 

function rjc_page_header_image_size( $size ) {
   if ( is_singular( 'tipo_personalizado_1' ) ) {$size = 'cover';}
   return $size;
}
add_filter( 'ocean_post_title_bg_image_size', 'rjc_page_header_image_size' );

Otros filtros para ajustar el estilo de las entradas

ocean_post_layout_class

Permite modificar el diseño de la pagina. Sus posibles valores son: right-sidebar, left-sidebar, full-width, both-sidebars

function rjc_post_layout_class( $class ) {
   if ( is_singular( 'tipo_personalizado_1' ) ) {$class = 'full-width';}
   return $class;
}
add_filter( 'ocean_post_layout_class', 'rjc_post_layout_class', 20 );

ocean_main_metaboxes_post_types

Este filtro nos permite tener disponible la metabox de OceanWP al editar las entradas personalizadas. Si lo usamos podemos personalizar entradas individuales sin necesidad de modificar el código

function oceanwp_metabox( $types ) {
   $types[] = 'tipo_personalizado_1';
   return $types;
}
add_filter( 'ocean_main_metaboxes_post_types', 'oceanwp_metabox', 20 );

​

Conclusión

No hay dudas que OceanWP permite un control exhaustivo sobre todos los aspectos de nuestra web. 

Casi siempre nos permitirá trabajar de forma visual.  

Cuando esto no sea suficiente, bastarán unas pocas líneas de código, para incluir nuestros contenidos personalizados en el ecosistema de OceanWP y aprovecharnos de todo su potencial.

Es la solución que he empleado para mejorar un poco la presentacion de estas guias prácticas

Un buen ejemplo de la versatilidad de OceanWP lo podemos encontrar en sus demos, algunos de los cuales están disponibles en la versión gratuita.