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:

  1. Clique no Adicionar Novo, para iniciar a criação dos nossos campos:
    Adicionar Custom Fields
  2. Eu vou criar uma regra, de quando o formato do post for igual à Vídeo eu vou adicionar os meus Campos Personalizados:
    Regra de Formato
  3. 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:
    Campo de Imagem
  4. Agora é só publicar o nosso grupo de campos e iniciar o proxímo, passo:
    Campos do Vídeo

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.

Post Formats

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.

select-format

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…

Vídeo Rodando

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.

César Ribeiro
Written by

Hi, my name’s Cesar H. Ribeiro, I’m Brazilian and I live in São Paulo country town. I’ve been working with Web Development since 2006, I’m Web Developer Freelancer, my main specialty is deploying custom Web Sites using the WordPress platform with base, transforming PSD/Layouts for Custom Themes. In feel years with Developer Freelancer, I worked with many agencies around the world like: Brazil, Australia, USA, Germany and Austria.

Related Posts