Adicionar trechos de código JavaScript personalizados ao plugin do feed do YouTube

Como adicionar código JavaScript personalizado junto com um feed do YouTube utilizando o WPCode, em vez de editar os ficheiros do tema.

Gostaria de adicionar o seu próprio código JavaScript ao seu feed do YouTube?

Neste guia, vamos mostrar-lhe duas formas de o fazer. A primeira utiliza a caixa «JavaScript personalizado» integrada no plugin YouTube Feed. A segunda utiliza o WPCode, um plugin gratuito dos criadores do WPForms e do All in One SEO. Ambos os exemplos adicionam uma breve nota ao final do seu feed.

Antes de começar, certifique-se de que o plugin «YouTube Feed» está instalado e ativado no seu site.

• Utilizar a caixa de JavaScript personalizado
• Utilização do WPCode
• Executar o seu código quando forem carregados mais vídeos
• Perguntas mais frequentes

Utilizar a caixa de JavaScript personalizado

Para começar, vamos abrir a caixa «JavaScript personalizado». É a forma mais rápida de adicionar JavaScript, porque faz parte do plugin.

No painel de controlo do WordPress, aceda a «YouTube Feed» » «Definições». Em seguida, clique no separador «Feeds ».

No separador «Feeds», desça até à caixa «JavaScript personalizado ». Em seguida, cole o seu código nessa caixa. Para este exemplo, vamos colar um código que adiciona uma breve nota ao final do seu feed.

$( '.sb_youtube' ).not( ':has(.my-feed-note)' ).append( '<p class="my-feed-note">Thanks for stopping by!</p>' );

Não é necessário adicionar nenhuma etiqueta de script. O plugin adiciona o seu código à página por si. O $ O sinal funciona como um atalho para o jQuery.

Na parte inferior da página, clique em «Guardar alterações».

Agora, abre uma página que mostre o teu feed. A nota aparece no final do feed.

O plugin executa o seu código assim que os vídeos forem carregados. Executa-o novamente sempre que forem adicionados mais vídeos, por exemplo, quando um visitante clica no botão «Carregar mais». É por isso que o exemplo verifica primeiro se a nota já existe. Sem essa verificação, a nota é adicionada novamente todas as vezes.

Como o Box guarda o seu código

A caixa é ideal para um pequeno trecho de código que se guarda uma única vez. Quando voltar à separador «Feeds» mais tarde, a caixa apresenta uma barra invertida à frente de cada citação no seu código. Sempre que voltar a guardar o separador, são adicionadas mais citações, pelo que o código na caixa deixa de corresponder ao que escreveu.

Se pretender editar o seu código mais tarde, o WPCode é a melhor opção. Mantém o seu código exatamente como o escreveu.

Utilização do WPCode

Também pode adicionar o seu código JavaScript com o WPCode. Trata-se de um plugin gratuito que guarda todos os seus trechos de código personalizados num único local.

Para começar, instale e ative o plugin WPCode. Em seguida, aceda a Code Snippets » Adicionar Snippet.

Na página «Adicionar fragmento de código», passe o cursor sobre a caixa intitulada «Adicionar o seu código personalizado (novo fragmento de código)». Em seguida, clique em «+ Adicionar fragmento de código personalizado».

Na janela que se abre, selecione «Snippet de JavaScript».

Primeiro, escreve um título para o teu snippet. Depois, cola o teu código na caixa de código.

Para este exemplo, vamos utilizar código que adiciona a mesma nota curta ao final do teu feed. Ao contrário do primeiro exemplo, este não utiliza o jQuery. Isto torna-o seguro em páginas que não o carregam.

document.addEventListener( 'DOMContentLoaded', function() {
	document.querySelectorAll( '.sb_youtube' ).forEach( function( feed ) {
		var note = document.createElement( 'p' );
		note.className = 'my-feed-note';
		note.textContent = 'Thanks for stopping by!';
		feed.appendChild( note );
	} );
} );

Não é necessário adicionar nenhuma etiqueta de script. O WPCode adiciona-as automaticamente. A caixa de código começa com uma linha de script que não pode ser editada.

Em seguida, localize o campo «Localização» e clique nele. Depois, selecione «Rodapé em todo o site». Isto irá adicionar o seu código na parte inferior das suas páginas.

Na parte superior da página, clique no botão de alternância para mudar o snippet de «Inativo» para «Ativo».

Em seguida, clique em «Guardar Snippet».

Assim que o snippet estiver ativo, a nota aparece no final do seu feed nas páginas que o exibem, tal como no primeiro exemplo.

Se pretender que o código apareça apenas em determinadas páginas, o WPCode permite limitar os locais onde um snippet é executado. Consulte a documentação do WPCode para saber como fazê-lo.

Executar o seu código quando forem carregados mais vídeos

Um fragmento de código WPCode é executado uma vez, quando a página termina de carregar. A caixa «JavaScript personalizado» também é executada novamente quando são adicionados mais vídeos, por exemplo, após clicar em «Carregar mais».

Para obter o mesmo resultado com o WPCode, defina uma função chamada window.sbyCustomJS no seu fragmento de código. O plugin chama-a após o carregamento dos primeiros vídeos e, novamente, sempre que forem adicionados mais vídeos. Esta é a mesma função que a caixa «JavaScript personalizado» cria, por isso utilize uma ou outra, mas não ambas.

window.sbyCustomJS = function() {
	document.querySelectorAll( '.sb_youtube' ).forEach( function( feed ) {
		if ( feed.querySelector( '.my-feed-note' ) ) {
			return;
		}
		var note = document.createElement( 'p' );
		note.className = 'my-feed-note';
		note.textContent = 'Thanks for stopping by!';
		feed.appendChild( note );
	} );
};

Utilize este código em vez do exemplo anterior do WPCode e siga os mesmos passos. Se estiver a alterar o snippet que já guardou, o botão «Guardar Snippet» passa a exibir «Atualizar». A caixa de seleção na parte superior impede que a nota seja adicionada novamente sempre que a função for executada.

É isso! Agora já podes adicionar o teu próprio código JavaScript ao teu feed do YouTube através da caixa «JavaScript personalizado» ou de um snippet WPCode. A seguir, talvez queiras ver como configurar o plugin YouTube Feed Pro.

Perguntas mais frequentes

A seguir, respondemos a algumas das perguntas mais frequentes sobre como adicionar código JavaScript personalizado ao seu feed.