Como adicionar vídeo HTML5 ao WordPress usando campos personalizados

De um modo geral, se você perguntar a 10 desenvolvedores do WordPress como fazer algo, você receberá dez respostas diferentes. Mas isso fala tanto da versatilidade do CMS quanto do fato de que há mais de uma solução para qualquer tarefa.

Recentemente, enfrentei o desafio de configurar um vídeo HTML5 dentro de uma página do WordPress. Está em um local estático e precisaria ser substituído de vez em quando. Embora não haja problema em usar o Video Shortcode, neste caso eu queria tornar as coisas ainda mais simples para as pessoas que atualizariam a página. Eu não queria que eles tivessem que aprender o que era um Shortcode ou como usá-lo.

Então, a solução mais simples (na minha cabeça, pelo menos) foi criar alguns campos personalizados onde os arquivos de vídeo relacionados pudessem ser carregados. A partir daí, o template do tema criaria automaticamente o código necessário para exibir o vídeo. Aqui está como eu fiz:

Requisitos do projeto

É claro que você precisará de um site WordPress e acesso para editar seu tema (use um tema filho se ainda não estiver fazendo isso). Alguma familiaridade com PHP e HTML também será de grande ajuda. Além disso, você deve ter:

• Uma maneira de criar campos personalizados. A versão gratuita do Advanced Custom Fields (ACF) fará o trabalho muito bem. Instale e ative-o em seu site WordPress.
• Um vídeo – idealmente em vários formatos. Embora os arquivos MP4 agora sejam suportados em todos os principais navegadores, pode não ser uma má ideia fornecer uma versão WEBM para cobertura extra. E, enquanto você está nisso, um fallback de FLV para aqueles que usam navegadores realmente antigos não faria mal. Você deve certificar-se de que cada versão do seu vídeo esteja configurada para a mesma resolução.
• Uma imagem de 'poster'. Seja uma captura de tela ou um gráfico personalizado feito na resolução mais alta em que seu vídeo será reproduzido.

Etapa 1: criar os campos personalizados

Depois de instalar e ativar a versão gratuita do ACF, vá para o menu Custom Fields dentro do WordPress e clique em Add New.

Dentro do seu novo conjunto de campos (os nossos são chamados de 'Campos de vídeo'), você precisará criar um campo de arquivo ACF para cada formato de vídeo que planeja enviar, além de outro para a imagem do pôster. Em nossa configuração, temos campos para MP4, WEBM, FLV e um Poster. Para cada campo de arquivo, certifique-se de selecionar o botão de opção em Valor de retorno que diz “URL do arquivo”. Além disso, certifique-se de anotar os nomes dos campos – precisaremos deles mais tarde.

Em seguida, dentro da configuração 'Localização' do ACF, atribua seus novos campos a qualquer página ou postagem que desejar e salve seu trabalho. Quando você for editar essa página atribuída, deverá ver os campos (talvez seja necessário rolar um pouco para baixo para encontrá-los).

Etapa 2: carregar arquivos de vídeo

Navegue para editar a página ou postagem onde você atribuiu seus novos campos personalizados. A partir daí, é uma questão de fazer o upload dos arquivos corretos. Depois de enviar os arquivos necessários, salve sua página/postagem.

Etapa 3: editar o modelo

Agora vem a parte divertida – adicionar um pouco de magia PHP ao template do seu tema. Se você não está familiarizado com a hierarquia de templates do WordPress, agora pode ser uma boa hora para estudar sobre ela.

Encontre o arquivo de modelo correto e o local onde deseja colocar o vídeo. Em seguida, copie e cole o seguinte snippet de código e personalize para atender às suas necessidades:

 <?php
// Obter os campos de vídeo
$video_mp4 = get_field('mp4_video'); // Nome do Campo MP4
$video_webm = get_field('webm_video'); // Nome do Campo WEBM
$video_flv = get_field('flv_video'); // Nome do campo FLV
$video_poster = get_field('poster_image'); // Nome do campo da imagem do pôster
                

// Construir o Shortcode
$attr = array(
'mp4' => $video_mp4,
'webm' => $video_webm,
'flv' => $video_flv,
'poster' => $video_poster,
'pré-carregamento' => 'automático'
);

// Mostra o Shortcode
echo wp_video_shortcode($attr);
?>

A primeira seção de código faz referência aos nomes dos campos personalizados que criamos na Etapa 1. Estamos criando uma variável PHP para cada campo (eles produzirão a URL de seu respectivo arquivo), que precisaremos usar no meio seção de código.

Abaixo nessa seção do meio, temos uma matriz de atributos para a função wp_video_shortcode . Observe que há um atributo para cada tipo de arquivo. Também estamos optando por pré-carregar o vídeo, mas isso é totalmente opcional. Aqui você também pode definir largura, altura, loop e até (suspiro) reproduzir automaticamente o vídeo, se desejar.

A seção inferior do código está exibindo o resultado do nosso trabalho em nosso modelo.

Depois de configurar tudo satisfatoriamente, você desejará salvar seu modelo e enviá-lo para o seu site (ou apenas salve se estiver usando o editor de temas do WordPress integrado). Em seguida, verifique sua página no front-end para garantir que o vídeo seja exibido corretamente.

O WordPress tem um player de vídeo HTML5 embutido no CMS e o player padrão parece e funciona muito bem. Mas você pode estilizar várias opções se quiser dar um toque mais pessoal. Inspecione o código de saída com as ferramentas de desenvolvedor do seu navegador e anote as várias classes CSS. Por exemplo, o elemento container tem uma classe de .wp-video . Você também pode dar uma olhada em um tutorial para uma visão mais aprofundada das possibilidades.

Campos personalizados simplificam o processo

O uso de campos personalizados pode trazer muitas novas funcionalidades e possibilidades de design para o WordPress. Mas um elemento central de sua grandiosidade é que eles podem facilitar o gerenciamento de conteúdo. Independentemente de quem irá adicionar e editar conteúdo, os campos personalizados podem agilizar todo o processo. Isso beneficia a todos nós, mas é especialmente bom para usuários que não são desenvolvedores experientes.

Adicionar algumas funcionalidades simples, como os campos de vídeo HTML5 acima, pode reduzir bastante a curva de aprendizado que um novo usuário enfrenta. Em vez de ter que pensar no que eles deveriam fazer, agora é uma questão de enviar alguns arquivos.

No final, esse pouco de trabalho extra inicial pode poupar a todos algum tempo e dores de cabeça durante a vida útil do site.