Executar um vídeo a partir de um click na thumbnail

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: