Hace unas semanas aprendimos a usar la nueva característica de WordPress 4.7, cabecera multimedia, en el tema gratuito Zerif Lite.

Como habíamos prometido, en esta oportunidad vamos a hacer lo mismo, pero con OnePress, otro tema de una sola página de los más populares del último año.

He aquí las instrucciones:

Paso 1: añadir soporte para cabecera multimedia

Como siempre que hagamos modificaciones o agreguemos nuevas funcionalidades, será necesario crear un tema hijo. Las instrucciones se encuentran en esta entrada.

Lo primero que haremos será agregar el soporte para la cabecera multimedia en el archivo functions.php. A continuación del código existente y antes del cierre de la etiqueta ?> (si lo hubiere), pegaremos lo siguiente:

add_theme_support( 'custom-header', array(
 'video' => true,
 'width' => 1920,
 'height' => 1080,
) );

Con lo cual, el código completo de functions.php quedaría de la siguiente manera:

<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles',99 );
function child_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'onepress-style' ), wp_get_theme()->get('Version') );
}
if ( get_stylesheet() !== get_template() ) {
    add_filter( 'pre_update_option_theme_mods_' . get_stylesheet(), function ( $value, $old_value ) {
         update_option( 'theme_mods_' . get_template(), $value );
         return $old_value; // prevent update to child theme mods
    }, 10, 2 );
    add_filter( 'pre_option_theme_mods_' . get_stylesheet(), function ( $default ) {
        return get_option( 'theme_mods_' . get_template(), $default );
    } );
}
add_theme_support( 'custom-header', array(
 'video' => true,
 'width' => 1920,
 'height' => 1080,
) );
?>

Tendremos, entonces, el panel Cabecera multimedia en nuestro personalizador.

OnePress - Cabecera multimedia

Paso 2: imprimir la cabecera multimedia en el tema

Vale aclarar una vez más que  el código anterior por sí solo no hace ninguna diferencia y es necesario “llamar” a la cabecera multimedia desde el tema. Con OnePress haremos algo distinto de lo que probamos con Zerif Lite, ya que si bien OnePress también incluye hooks para extender la personalización mediante funciones, en el caso del vídeo de fondo necesitamos modificar un par de cositas en la plantilla de la sección Héroe.

Vamos a copiar entonces el archivo section-hero.php de la carpeta /section-parts/ del tema padre, a una carpeta (previamente creada) /section-parts/ en el tema hijo. Luego, lo abriremos con un editor de texto y buscaremos la siguiente porción de código:

<section id="<?php if ( $onepress_hero_id != '' ){ echo esc_attr( $onepress_hero_id ); } ?>" <?php if ( ! empty ( $images) && ! $is_parallax ) { ?> data-images="<?php echo esc_attr( json_encode( $images ) ); ?>"<?php } ?>
             class="hero-slideshow-wrapper <?php echo ( $onepress_hero_fullscreen == 1 ) ? 'hero-slideshow-fullscreen' : 'hero-slideshow-normal'; ?>">

Y la reemplazaremos por lo siguiente:

<section id="<?php if ( $onepress_hero_id != '' ){ echo esc_attr( $onepress_hero_id ); } ?>" class="hero-slideshow-wrapper <?php echo ( $onepress_hero_fullscreen == 1 ) ? 'hero-slideshow-fullscreen' : 'hero-slideshow-normal'; ?>">
<?php if (has_custom_header()) :
echo '<div class="custom-header-media">';
the_custom_header_markup();
echo '</div>';
endif; ?>

Ahora sí, estamos en condiciones de agregar un vídeo de fondo en nuestro OnePress. Por supuesto que primero tendremos que aplicar los estilos correspondientes.

Paso 3: aplicar estilos para la correcta visualización

En el archivo style.css del tema hijo (recomendado) o en el recuadro CSS adicional del Personalizador, pegamos lo siguiente:

.custom-header-media video,
.custom-header-media iframe {
    position: fixed;
    left: 50%;
    width: 1920px;
    top: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.custom-header-media video {
    height: auto;
}
.custom-header-media img {
    position: fixed;
    width: 1920px;    
}
.hero-slideshow-wrapper:after,
.hero-slideshow-wrapper {
    background: transparent;
}
.section-about,
.section-counter,
.section-news {
    background: #fff;
}
.site-footer {
    position: relative;
    margin-bottom: -24px;
}
@media (max-width:639px) {
.custom-header-media img {
    max-width: 180%;    
}
}

Ahora sí podremos ver el vídeo de fondo, pero nos falta darle estilos al botón de reproducción.

En el archivo functions.php del tema hijo pegaremos el siguiente código:

function onepress_child_video_controls( $settings ) {
    $settings['l10n']['play'] = __('<i class="fa fa-play"></i><span>Reproducir</span>');
    $settings['l10n']['pause'] = __('<i class="fa fa-pause"></i><span>Pausar</span>');
    return $settings;
}
add_filter( 'header_video_settings', 'onepress_child_video_controls' );

Con esto usaremos los iconos de Font Awesome que también están integrados en OnePress, y una etiqueta span que nos permitirá ocultar el texto pero dejarlo disponible para que lo reconozcan los lectores de pantalla.

Por último, añadimos el siguiente código CSS:

.wp-custom-header .wp-custom-header-video-button {
    background-color: rgba(34, 34, 34, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: rgba(255, 255, 255, 0.6);
    height: 45px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 30px;
    top: 112px;
    -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
    width: 45px;
    z-index: 99;
}
.wp-custom-header .wp-custom-header-video-button:hover,
.wp-custom-header .wp-custom-header-video-button:focus {
    border-color: rgba(255, 255, 255, 0.8);
    background-color: rgba(34, 34, 34, 0.8);
    color: #fff;
}
.wp-custom-header .wp-custom-header-video-button span {
    position: absolute;
    top: -9999px;
}

Así tendremos el vídeo de fondo y el botón para mejorar la accesibilidad.

Nota importante: Para una visualización óptima, la imagen de cabecera siempre debe estar presente (ya que se muestra en dispositivos móviles en lugar del vídeo), y debe tener unas dimensiones mínimas de 1920×1080 píxeles.

También recordemos que los vídeos de fondo se muestran en resoluciones que superen los 900px. Si necesitamos que se visualicen en una resolución menor (por ejemplo en una tablet), tendremos que agregar el siguiente código en el archivo functions.php:

function onepress_child_video_settings( $settings ) {
  $settings['minWidth']  = 600;
  return $settings;
} 
add_filter( 'header_video_settings', 'onepress_child_video_settings' );

Caribdis.Net

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una Vizsla loca.
Caribdis.Net

Últimas entradas por Caribdis.Net (ver todas)