Sites com vídeos de apresentação ou como background é um recurso muito utilizado em vários sites atualmente, com a versão 4.7 do WordPress agora é possível adicionar um vídeo no custom header(cabeçalho), essa opção já tinha a possibilidade de adicionar imagens ao header. A seguir vemos como habilitar esse recurso no seu tema.
Como adicionar código no WordPress?
Primeiramente, se iremos realizar uma alteração em produção precisamos realizar um backup da nossa aplicação. Especialmente se você não está familiarizado com código.
A opção mais simples é alterando o código do functions.php esse processo é válido quando você possui um tema que não tem atualizações constantes. Caso contrário um tema filho ou um plugin será a melhor opção, porque as suas alterações não serão afetadas caso o tema principal seja atualizado.
Adicionando o suporte a cabeçalhos com vídeo no WordPress?
Primeiramente precisamos fazer os passos normais de adicionar um custom header no nosso tema. Precisamos ir no nosso function.php e adicionar a seguinte linha:
add_theme_support('custom-header', array(
'video' => true,
));
Code language: PHP (php)Isto irá habilitar o suporte de envio de vídeo no WordPress, caso já esteja a utilizar o recurso de custom header você irá precisar 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”.
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 vídeos e imagens.
Este recurso vai adicionar o markup com o vídeo e também carregar o script wp-custom-header.js, com isso o WordPress irá carregar um markup de um player. Caso queira personalizar o seu markup o WordPress da série de funções para adicionar vídeo ao seu tema.
Customizando
- has_header_video() – verifica se o site possui um vídeo 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 vídeo.
- the_header_video_url() – imprime o endereço da URL do vídeo.
- get_custom_header_markup() – resgata o markup, mas no imprime o conteúdo.
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; ?>Code language: HTML, XML (xml)No exemplo acima verificamos se o tema possui algum vídeo cadastrado com a função has_header_video(), em seguida adicionamos o markup da tag vídeo com o source carregando o endereço do vídeo com a função the_header_video_url().
Nesse exemplo só cadastramos e carregamos o vídeo, desse ponto precisamos de um tratamento com CSS para exibir o vídeo de forma personalizada.
Quer saber mais sobre wp criação de temas accesse a página da categoria WordPress.
Deixe um comentário