Sites com videos de apresentação ou como background é um recurso muito utilizado em vários sites atualmente, com a versão 4.7 do WordPress agora e possível adicionar um video no custom header(cabeçalho), essa opção já tinha a possibilidade de adicionar imagens ao header. A seguir vamos ver como habilitar esse recurso no seu tema:
Adicionando o suporte
Primeiramente precisamos fazer os passos normais de adicionar um custom header em nosso tema. precisamos ir no nosso function.php e adicionar a seguinte linda:
add_theme_support('custom-header', array( 'video' => true, ));
Isto irá habilitar o suporte de envio de videos, caso já esteja utilizando o recurso de custom header você precisa achar a linha que adiciona suporte ao custom header e adicionar o atributo ‘video’ => true, na tela de customização a função irar mudar de “Header Image” para “Header Media como na imagem abaixo”:
Exibindo o header
Nas versões anteriores para exibir o header nos utilizávamos a função the_header_image_tag(), nesta nova versão do WordPress utilizamos the_custom_header_markup() esta função tem suporte para videos e imagens.
Este recurso vai adicionar o markup com o video e também carregar o script wp-custom-header.js, com isso o WordPress irá carregar um markup de um player. Caso queira customizar seu markup o WordPress da uma série de funções para adicionar video ao seu tema.
Customizando
- has_header_video() – verifica se o site possui um video para ser exibido.
- is_header_video_active() – verifica se a funcionalidade está disponível no tema.
- get_header_video_url() – resgata o valor que contem a url do video.
- the_header_video_url() – imprime o endereco da url do video.
- get_custom_header_markup() – resgata o markup mas no imprime o conteudo.
Vamos realizar um exemplo utilizando the_header_video_url():
<?php if(has_header_video()): ?> <video class="bgvid" playsinline autoplay muted> <source src="<?php the_header_video_url() ?>" type="video/mp4"> </video> <?php endif; ?>
No exemplo acima verificamos se o tema possui algum video cadastrado com a função has_header_video(), em seguida adicionamos o markup da tag video com o source carregando o endereco do video com a função the_header_video_url().
Nesse exemplo só cadastramos e carregamos o video, desse ponto precisamos de um tratamento com css para exibir o video de forma customizada.
Quer saber mais sobre wp criação de temas tem um curso online no Imediabrasil.com.br: https://www.imediabrasil.com.br/cursos/curso-wordpress-temas.cfm