La Plantilla Newsup permite personalizar la fotografía de la cabecera y añadir títulos pero no contempla la posibilidad de mostrar una sola fotografía escalable que ocupe toda la cabecera.
Llevaba tiempo investigando como conseguirlo hasta que encontré un shortcode en Guía completa de los widgets de WordPress (El qué, el cómo y los fragmentos de código) (kinsta.com) que permitía crear una nueva barra de widgets en las secciones de que dispone la plantilla. Pensé en crear un área de widgets en la parte alta de la cabecera y añadir un widgets de imagen de los que trae la platilla newsup.
Probé esta función en function.php y sorpresa: apareció una nueva área de widgets con el nombre que había elegido Area de Widget del encabezado. El problema es que cuando se actualiza el tema esta function.php se actualiza y se pierde el añadido
- function kinsta_register_widgets() {
register_sidebar( array(
‘name’ => __( ‘Area de Widget del encabezado’, ‘kinsta’ ),
‘id’ => ‘barra-superior-encabezado’,
‘description’ => __( ‘Area de Widget en la barra superior del encabezado’, ‘kinsta’ ),
‘before_widget’ => ‘<div id=”%1$s” class=”widget-container %2$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3 class=”widget-title”>’,
‘after_title’ => ‘</h3>’,
) );
}
add_action( ‘widgets_init’, ‘kinsta_register_widgets’ );
El Plugins de creación de fragmentso de código Code Snippets está para eso, cree el ShortCodeWidgetArea y la función está disponible para siempre.
Ya tenía la posibilidad de añadir widgtes en el area superior del encabezado pero no se mostraban. Faltaba decir donde tenía que aparecer este código. El fichero header.php de la plantilla Newsup tenía la culpa. Lo edité y añadí este código php bajo la línea de TOP BAR teniendo cuidado de las aperturas y cierres de php <?php, ?>
<!–==================== TOP BAR ====================–>
<?php if ( is_active_sidebar( ‘barra-superior-encabezado’ ) ) { ?>
<aside class=”in-header widget-area full-width” role=”complementary”>
<?php dynamic_sidebar( ‘barra-superior-encabezado’ ); ?>
</aside>
<?php }
Probé con un widget de imagen a tamaño original muy grande y funcionaba, pero quedaban restos de la la imagen de fondo de la cabecera y un espacio muerto debido a los <div> que usa la cabecera:
Anulé éste: <!– <div class=”clearfix”></div> Me cargo este div –>
y este otro: <!–==================== anulo el bloque div que empieza en 39 y acaba en 65 ====================–>
<!– <div class=”mg-nav-widget-area-back” style=’background-image: url(“<?php echo esc_url( $background_image ); ?>” );’> –>
mi <div> empezaba en la linea 39 y se cerraba en 65.
<!– </div> –>
y se acabó imagen a tamaño completo rellenando el encabezado y escalable para verlo bien en el móvil.
Guardé el fichero header.php y, tras la primera actualización de la plantilla me tocó sobreescribir el fichero header.php nuevo por el que había guardado. Gajes del oficio.