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 Medios del encabezado en nuestro personalizador.
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 ( $id != '' ) {
echo esc_attr( $id ); } ?>" <?php if ( ! empty( $images ) && ! $is_parallax ) {
?> data-images="<?php echo esc_attr( json_encode( $images ) ); ?>"<?php } ?>
class="hero-slideshow-wrapper <?php echo ( $fullscreen == 1 ) ? 'hero-slideshow-fullscreen' : 'hero-slideshow-normal'; ?>">Y la reemplazaremos por lo siguiente:
<section id="<?php if ( $id != '' ) {
echo esc_attr( $id ); } ?>" <?php if ( ! empty( $images ) && ! $is_parallax ) {
?> data-images="<?php echo esc_attr( json_encode( $images ) ); ?>"<?php } ?>
class="hero-slideshow-wrapper <?php echo ( $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' );
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.
- Guía para WordPress 6.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
Hola! quería saber si es posible y cómo poner texto también unos botones sobre el video para hacer más atractivo el hero. Ya que no me da las opciones y quería saber si había otra opción para hacerlo. Gracias de antemano.
Hola, Yami.
Gracias por tu comentario.
Actualicé el código que va en el archivo
section-hero.php, ya que difiere en las últimas versiones.De todas maneras, deberías poder editar los elementos de la sección Héroe de la misma manera que si tuviera una imagen o slider de fondo. Desde Personalizar > Sección: Hero > Diseño del contenido Hero.
Saludos.
Hola,
He hecho todo lo anterior para poner el vídeo en ese tema, pero en tablet no funciona si el vídeo es de Youtube. También me encuentro con el problema de que cuando voy a poner un vídeo de la galería, esta aparece vacía. ¿A alguien más le ha pasado? ¿Alguna solución?
Hola, Verónica.
La verdad, no sabría decirte la causa, podría ser algún conflicto con un plugin (probá desactivándolos uno por uno).
Saludos.
Hola que tal, necesito tu ayuda por favor
llevo como todo el dia xD pero bueno espero no haber desperdiciado mi tiempo ok aqui va
buscando en todos lados, me toque con este blog, realmente hoy lo encontre, asi que es un descaro pedir este favor pero bueno, espero me perdones
por lo que lei en los anteriores post (si es que no me he saltado nada) esto se puede aplicar para cualquier tema? creo que eso lo entendi, lei tanto los articulos de zeraf, como los de onepress y queria intentar hacer lo mismo que tu haz hecho pero con otro tema llamado https://wordpress.org/themes/squarex-lite/
este tema lo ame, y he estado trabajando sobre el, despues de cambiar algunas cosillas queria poner el header como los que estas poniendo tu, pero al intentar, trate de cambiar ciertos nombres y usar otros datos para acomodar pero nada parece funcionar
es posible usar el mismo procedimiento que estas usando para poner videos en el header, con otros temas? esa seria mi pregunta, perdona si no me entiendes, es mas de media noche y no se ni quien soy yo xD
Saludos
Hola, Jaime.
Sí es posible, pero tendrás que adaptarlo al código del tema, y seguramente hacer bastantes ajustes en el CSS.
Saludos.