Introdução:
Olá pessoal, hoje eu venho mostra para vocês, como executar um vídeo a partir de um click na thumbnail, em um tema WordPress sem a necessidade der instalar vários plugins.
Nesse tutorial, eu só vou utilizar o plugin Advanced Custom Fields, para simplificar a criação dos campos personalizados e também a biblioteca chamada FitVids.JS para otimizar o seu player de vídeo.
Colocando a mão no código:
Primeiro de tudo, vamos fazer download do FitVids.JS e colocar o mesmo dentro da sua pasta JS do seu tema e agora abra o seu functions.php e adicione o código abaixo, mas tenha muita atenção no caminho do arquivo, se está apontando para a pasta correta.
Agora vamos para a parte da criação dos custom fields, como eu disse antes eu vou utilizar o Advanced Custom Fields para facilitar a criação e aplicação dos campos.
Criação dos campos:
- Clique no Adicionar Novo, para iniciar a criação dos nossos campos:
- Eu vou criar uma regra, de quando o formato do post for igual à Vídeo eu vou adicionar os meus Campos Personalizados:
- Agora vamor criar dois campos, um para o link do vídeo que é um campo simples de texto e outro para imagem que já um pouco mais “chatinho” para configurar, por isso que eu vou deixar logo abaixo um GIF para facilitar a configuração:
- Agora é só publicar o nosso grupo de campos e iniciar o proxímo, passo:
Aplicando o vídeo no post:
Vamos para a aplicação do vídeo em nosso post, mas como eu apliquei uma regra para quando o formato do post for igual à vídeo, então o seu tema tem que ter suporte para Formatos de Post.
Se o seu tema não tiver o suporte é só aplicar no seu functions.php:
Nesse código acima eu deixei o suporte para o formato de vídeo apenas, mas se você desejar para os outros estilos é só remover “//” que ele vai adicionar os outros formatos também.
Agora quando vocês selecionarem o formato de vídeo, automáticamente vai ser adicionado os nossos campos personalizados, que criamos anteriormente.
Criando o arquivo de conteúdo de vídeo:
Vamos para a parte mais “complicada” nesse tutorial, agora vamos fazer a criação do arquivo que vai receber o nosso código para a criação e verificação do vídeo.
Normalmente todos os loops de conteúdo:
a parte mais importante é o get_post_format() que vai fazer a verificação do nosso formato e chamar o nosso arquivo personalizado content-video.php.
No código abaixo eu vou criar e detalhar cada linha, para vocês e ficar simplificada a criação do nosso arquivo content-video.php:
Processos finais do tutorial
Agora é a parte da criação do nosso script e style para fazer tudo funcionar, perfeitamente…
Primeiramente, vamos criar o arquivo chamado script-video.js, ele vai ser o responsável para a aplicação do nosso fitVids e também da criação da função de play.
Como vocês viram toda a função de click foi relacionada com a fitVids, porque a classe .fluid-width-video-wrapper é aplicada automáticamente, através da interação com a galeria aplica por nós.
Agora é o processo mais “simples” que é parte de CSS, vamos para o style-video.css para da um estilo melhor a nossa apresentação.
Agora para finalizar vamos só chamar os nossos arquivos dentro do functions.php, mas como eu já falei antes… Tenha muita atenção com o caminho dos seus arquivos, porque se o mesmo estiver errado nada vai funcionar perfeita… 🙂
Outra coisa, eu apliquei de diferente foi o suporte do Dashicons para o frontend. Não sei todos o conhece, mas é uma galeira de icones padrão do próprio WordPress, mas o mesmo só funciona no frontend se você estiver logado como admin ou outro usuário, mas para “abilitar” ele é só aplicar a chamada dele como foi feito na linha “4” do código logo abaixo:
Ufa!!! Acabamos, heheheheh….
Agora é só verificar como tudo ficou e se está tudo funcionando perfeitamente…
Espero que vocês tenham gostado desse tutorial e até breve 
Por favor, se você gostou deixe seu like e também se possível compartilhe.
