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.
| <?php | |
| function add_enqueue_scripts() { | |
| wp_enqueue_script( 'fitvids', get_template_directory_uri() . '/assets/js/jquery.fitvids.js', array(), null, true ); | |
| } | |
| add_action( 'wp_enqueue_scripts', 'add_enqueue_scripts', 1 ); |
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:
| <?php | |
| /** | |
| * Add support for Post Formats. | |
| */ | |
| add_theme_support( 'post-formats', array( | |
| 'video', | |
| // 'aside', | |
| // 'gallery', | |
| // 'link', | |
| // 'image', | |
| // 'quote', | |
| // 'status', | |
| // 'audio', | |
| // 'chat' | |
| ) ); |
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:
| <?php | |
| if ( have_posts() ) : | |
| // Start the Loop. | |
| while ( have_posts() ) : the_post(); | |
| /* | |
| * Include the post format-specific template for the content. If you want to | |
| * use this in a child theme, then include a file called called content-___.php | |
| * (where ___ is the post format) and that will be used instead. | |
| */ | |
| get_template_part( 'content', get_post_format() ); | |
| endwhile; | |
| // Post navigation. | |
| posts_nav_link(); | |
| else : | |
| // If no content, include the "No posts found" template. | |
| get_template_part( 'content', 'none' ); | |
| endif; | |
| ?> |
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:
| <?php | |
| /** | |
| * The video content template. | |
| * | |
| */ | |
| ?> | |
| <article id="post-<?php the_ID(); ?>" <?php post_class('loop-videos'); ?>> | |
| <header class="entry-header"> | |
| <?php | |
| if ( is_single() ) : | |
| the_title( '<h1 class="entry-title">', '</h1>' ); | |
| else : | |
| the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); | |
| endif; | |
| ?> | |
| </header><!-- .entry-header --> | |
| <div class="entry-content"> | |
| <?php | |
| // Apresenta o conteúdo somente dentro da single com o formato de vídeo | |
| if ( is_single() ) : | |
| the_content(); | |
| // Pega o link do vídeo | |
| $link_do_video = get_field('link_do_video'); | |
| // Pega o link da imagem personalizada | |
| $thumbnail_personalizada = get_field('thumbnail_personalizada'); | |
| // Verifica se existe o link cadastrado | |
| if( !empty( $link_do_video )) : ?> | |
| <div class="video-featured"> | |
| <?php | |
| // https://codex.wordpress.org/Function_Reference/wp_oembed_get | |
| echo wp_oembed_get( $link_do_video ); | |
| // Veririfica se existe a imagem cadastrada | |
| if( !empty($thumbnail_personalizada)) : ?> | |
| <button id="play-video" style="background-image: url(<?php echo $thumbnail_personalizada; ?>);"> | |
| <span class="dashicons dashicons-controls-play"></span> | |
| </button> | |
| <?php endif; ?> | |
| </div> | |
| <?php | |
| endif; | |
| // Apresenta o conteúdo na listagem dos post's junto com a função wp_trim_words() limitando em 40 caracteres | |
| else : | |
| echo wp_trim_words( get_the_content(), 40, '...' ); | |
| endif; | |
| ?> | |
| </div><!-- .entry-content --> | |
| </article><!-- #post-## --> |
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.
| jQuery(document).ready(function($) { | |
| // Adiciona o fitVids no frame de vídeo dentro da class = video-featured | |
| $( '.video-featured' ).fitVids(); | |
| // Adiciona o icone de video no título com post-format = video | |
| $( '.loop-videos .entry-title').prepend('<span class="dashicons dashicons-video-alt"></span> '); | |
| // Função do click com autoplay | |
| $('#play-video').on('click', function(event) { | |
| $('.fluid-width-video-wrapper iframe')[0].src += '&autoplay=1'; | |
| event.preventDefault(); | |
| $(this).fadeOut('slow', function(){ | |
| $(this).remove(); | |
| }); | |
| }); | |
| }); |
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.
| .loop-videos .entry-title{ | |
| display: table; | |
| vertical-align: middle; | |
| } | |
| .loop-videos .entry-title .dashicons{ | |
| display: table-cell; | |
| font-size: 33px; | |
| padding-right: 0.1em; | |
| vertical-align: middle; | |
| } | |
| .loop-videos .video-featured{ | |
| position: relative; | |
| } | |
| .loop-videos .video-featured > #play-video{ | |
| cursor: pointer; | |
| position: absolute; | |
| background-position: top center; | |
| background-size: cover; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 0; | |
| border: none; | |
| z-index: 1; | |
| } | |
| .loop-videos .video-featured > #play-video .dashicons-controls-play{ | |
| display: table; | |
| font-size: 8em; | |
| margin: 0 auto; | |
| position: relative; | |
| text-shadow: 4px 4px 2px rgba(150, 150, 150, 1); | |
| color: #333333; | |
| border-radius: 50%; | |
| border: 5px solid #333333; | |
| -moz-transition: all 1s ease-in; | |
| -webkit-transition: all 1s ease-in; | |
| -o-transition: all 1s ease-in; | |
| transition: all 1s ease-in; | |
| } | |
| .loop-videos .video-featured > #play-video:hover .dashicons-controls-play{ | |
| color: #ffffff; | |
| border-color: #ffffff; | |
| } |
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:
| <?php | |
| function odin_enqueue_video() { | |
| // Adiciona Suporte a galeira de icones do proprio WordPress | |
| wp_enqueue_style( 'dashicons' ); | |
| // Aplicação do Script de Vídeo | |
| wp_enqueue_script( 'script-video', get_template_directory_uri() . '/assets/js/script-video.js', array(), null, true ); | |
| // Aplicação do Estilo de Vídeo | |
| wp_enqueue_style( 'style-video', get_template_directory_uri() . '/assets/css/style-video.css', array(), null, 'all' ); | |
| } | |
| add_action( 'wp_enqueue_scripts', 'odin_enqueue_video', 1 ); |
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.
