Astra Pro
Actualizado para últimas versiones – 17/05/2020

Ya tenemos tutoriales para reemplazar la imagen de la cabecera de la página de inicio por un vídeo de fondo, tanto en Zerif Lite como en OnePress.

Como habíamos prometido, hoy le toca el turno a Hestia de nuestros amigos de ThemeIsle.

Paso 1: añadir soporte para cabecera multimedia

Antes que nada, y como siempre recalcamos, es necesario usar un tema hijo. Las instrucciones para crear un tema hijo de Hestia se encuentran en esta entrada anterior.

Este primer paso es el mismo para todos los temas: tenemos que 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 esta porción de código:

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

Nada más y guardar los cambios, el panel Cabecera multimedia estará presente en nuestro personalizador.

Hestia - Soporte para cabecera multimedia

Paso 2: imprimir la cabecera multimedia en el tema

El código anterior, como ya vimos en los otros dos tutoriales, no sirve nada más que para decirle al tema que acepte este tipo de cabecera. Para que de hecho la cabecera tome efecto y se visualice en el lugar indicado, hay que agregar el código correspondiente.

En el archivo functions.php pegamos lo siguiente:

function hestia_child_video_header() {
 if ( has_custom_header() ) :
 the_custom_header_markup();
 endif;
}
add_action('hestia_first_front_page_section_content','hestia_child_video_header');

function hestia_child_video_iframe() {
?>	
<script>
jQuery(window).on('load', function() {
 jQuery("iframe#wp-custom-header-video").attr("width", "5120");
 jQuery("iframe#wp-custom-header-video").attr("height", "2880");
});
</script>
<?php
}
add_action( 'wp_footer', 'hestia_child_video_frame' );

El primero es un hook que imprime contenido dentro de la sección de título grande. Para más información sobre los hooks, ver esta entrada. La segunda porción de código nos servirá para que el tamaño del vídeo se ajuste de manera correcta a la pantalla.

El código completo de functions.php quedaría de la siguiente manera:

<?php
if ( !defined( 'ABSPATH' ) ) exit;
if ( !function_exists( 'hestia_child_parent_css' ) ):
 function hestia_child_parent_css() {
 wp_enqueue_style( 'hestia_child_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'bootstrap' ) );
 if( is_rtl() ) {
 wp_enqueue_style( 'hestia_child_parent_rtl', trailingslashit( get_template_directory_uri() ) . 'style-rtl.css', array( 'bootstrap' ) );
 }
 }
endif;
add_action( 'wp_enqueue_scripts', 'hestia_child_parent_css', 10 );
function hestia_child_get_parent_options() {
 $hestia_mods = get_option( 'theme_mods_hestia' );
 if ( ! empty( $hestia_mods ) ) {
 foreach ( $hestia_mods as $hestia_mod_k => $hestia_mod_v ) {
 set_theme_mod( $hestia_mod_k, $hestia_mod_v );
 }
 }
}
add_action( 'after_switch_theme', 'hestia_child_get_parent_options' );
add_theme_support( 'custom-header', array(
 'video' => true,
 'width' => 5120,
 'height' => 2880,
) );
function hestia_child_video_header() {
 if ( has_custom_header() ) :
 the_custom_header_markup();
 endif;
}
add_action('hestia_first_front_page_section_content','hestia_child_video_header');

function hestia_child_video_iframe() {
?>
<script>
jQuery(window).on('load', function() {
 jQuery("iframe#wp-custom-header-video").attr("width", "5120");
 jQuery("iframe#wp-custom-header-video").attr("height", "2880");
});
</script>
<?php
}
add_action( 'wp_footer', 'hestia_child_video_iframe' );

Ahora sí podemos agregar un vídeo a nuestra cabecera multimedia de Hestia, no sin antes hacer este ajuste de estilo necesario, en el caso de que usemos un archivo .mp4 subido a la biblioteca de medios (no se requiere para usar un vídeo de YouTube).

Paso 3: aplicar estilos para la correcta visualización (para archivo .mp4 subido a la biblioteca)

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

.wp-custom-header video {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    top: 0;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    width: 100%;
}

Ahora sí veremos el vídeo de fondo.

Sea que optemos por ocultar el botón de reproducción o no, siempre será recomendable añadir una imagen de fondo para que se muestre durante la carga del vídeo, o en su lugar en los dispositivos móviles.

Para darle estilos al botón de reproducción, primero añadiremos el siguiente código en el archivo functions.php:

function hestia_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', 'hestia_child_video_controls' );

Por último, añadimos el siguiente código CSS (el estilo del botón será similar al del tema predeterminado de WP, Twenty Seventeen):

.wp-custom-header .wp-custom-header-video-button {
 display: initial;
 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: 20px;
 top: 10px;
 -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: 1040;
}

.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;
}

Recordemos que los vídeos de fondo, de manera predeterminada y por una cuestión de compatibilidad, se desactivan en los teléfonos móviles, y 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 hestia_child_video_settings( $settings ) {
  $settings['minWidth']  = 600;
  return $settings;
} 
add_filter( 'header_video_settings', 'hestia_child_video_settings' );

Nota importante: el procedimiento detallado en este tutorial requiere al menos WordPress 4.7 y Hestia 1.1.39 o superiores.

Caribdis.Net
Últimas entradas de Caribdis.Net (ver todo)