Aggiungi frammenti di codice JavaScript personalizzati per il plugin del feed di YouTube

Come aggiungere codice JavaScript personalizzato accanto a un feed di YouTube utilizzando WPCode, invece di modificare i file del tema.

Ti piacerebbe aggiungere del codice JavaScript personalizzato al tuo feed di YouTube?

In questa guida ti mostreremo due modi per farlo. Il primo utilizza la casella “JavaScript personalizzato” integrata nel plugin YouTube Feed. Il secondo utilizza WPCode, un plugin gratuito realizzato dagli stessi sviluppatori di WPForms e All in One SEO. Entrambi gli esempi aggiungono una breve nota alla fine del tuo feed.

Prima di iniziare, assicurati che il plugin YouTube Feed sia installato e attivato sul tuo sito.

• Utilizzo della casella "JavaScript personalizzato"
• Utilizzo di WPCode
• Esecuzione del codice quando vengono caricati altri video
• Domande frequenti

Utilizzo della casella "JavaScript personalizzato"

Per iniziare, apriremo la finestra “JavaScript personalizzato”. È il modo più veloce per aggiungere codice JavaScript, poiché fa parte del plugin.

Nella dashboard di WordPress, vai su Feed YouTube » Impostazioni. Quindi, fai clic sulla scheda Feed.

Nella scheda "Feed", scorri verso il basso fino alla casella "JavaScript personalizzato". A questo punto, incolla il tuo codice al suo interno. In questo esempio, incolleremo un codice che aggiunge una breve nota alla fine del tuo feed.

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

Non è necessario aggiungere alcun tag script. Il plugin inserisce automaticamente il codice nella pagina. Il $ Il segno funge da scorciatoia per jQuery.

In fondo alla pagina, clicca su “Salva modifiche”.

Ora apri una pagina in cui è visualizzato il tuo feed. La nota appare alla fine del feed.

Il plugin esegue il codice una volta caricati i video. Lo esegue nuovamente ogni volta che vengono aggiunti altri video, ad esempio quando un visitatore clicca sul pulsante “Carica altri”. Ecco perché nell’esempio si verifica prima la presenza della nota. Senza tale verifica, la nota verrebbe aggiunta nuovamente ogni volta.

In che modo Box protegge il tuo codice

La casella è ideale per un breve frammento di codice che si salva una sola volta. Quando in seguito torni alla scheda "Feeds", la casella mostra una barra rovesciata davanti a ogni virgoletta presente nel codice. Ogni volta che salvi nuovamente la scheda, ne vengono aggiunte altre, quindi il codice nella casella non corrisponde più a quello che hai digitato.

Se hai intenzione di modificare il codice in un secondo momento, WPCode è la soluzione più adatta. Mantiene il codice esattamente come l'hai scritto.

Utilizzo di WPCode

Puoi anche aggiungere il tuo codice JavaScript con WPCode. Si tratta di un plugin gratuito che ti permette di conservare tutti i tuoi frammenti di codice personalizzati in un unico posto.

Per iniziare, installa e attiva il plugin WPCode. Quindi, vai su Code Snippets » Aggiungi snippet.

Nella pagina "Aggiungi snippet", passa il mouse sulla casella denominata "Aggiungi il tuo codice personalizzato (nuovo snippet)". Quindi, fai clic su "+ Aggiungi snippet personalizzato".

Nella finestra che si apre, seleziona " Snippet JavaScript".

Per prima cosa, digita un titolo per il tuo snippet. Poi, incolla il codice nell'apposita casella.

In questo esempio useremo un codice che aggiunge la stessa breve nota alla fine del tuo feed. A differenza del primo esempio, questo non utilizza jQuery. Ciò lo rende sicuro anche sulle pagine che non lo caricano.

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 );
	} );
} );

Non è necessario aggiungere alcun tag script. WPCode li aggiunge automaticamente. Il riquadro del codice inizia con una riga di script che non è possibile modificare.

A questo punto, individua il campo "Posizione " e cliccaci sopra. Quindi, seleziona " Piè di pagina per tutto il sito". In questo modo il tuo codice verrà inserito in fondo alle pagine.

Nella parte superiore della pagina, fai clic sul pulsante di attivazione/disattivazione per passare dallo stato "Inattivo" a "Attivo".

Quindi, fare clic su “Salva snippet”.

Una volta attivato lo snippet, la nota compare alla fine del tuo feed nelle pagine in cui viene visualizzato, proprio come nel primo esempio.

Se desideri che il codice venga eseguito solo su determinate pagine, WPCode ti permette di limitare l'ambito di esecuzione di uno snippet. Consulta la documentazione di WPCode per sapere come fare.

Esecuzione del codice quando vengono caricati altri video

Uno snippet WPCode viene eseguito una sola volta, al termine del caricamento della pagina. Anche il codice JavaScript personalizzato viene eseguito nuovamente quando vengono aggiunti altri video, ad esempio dopo aver cliccato su “Carica altri”.

Per ottenere lo stesso risultato con WPCode, definire una funzione denominata window.sbyCustomJS nel tuo snippet. Il plugin la chiama dopo il caricamento dei primi video e poi di nuovo ogni volta che ne vengono aggiunti altri. Si tratta della stessa funzione creata dalla casella "JavaScript personalizzato", quindi usa l'una o l'altra, non entrambe.

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 );
	} );
};

Utilizza questo codice al posto dell'esempio precedente con WPCode, seguendo gli stessi passaggi. Se stai modificando lo snippet che hai già salvato, il pulsante "Salva snippet" apparirà invece come "Aggiorna". Il segno di spunta in alto impedisce che la nota venga aggiunta nuovamente ogni volta che la funzione viene eseguita.

Ecco fatto! Ora puoi aggiungere il tuo codice JavaScript al feed di YouTube utilizzando la casella “JavaScript personalizzato” o uno snippet WPCode. Successivamente, potresti voler scoprire come configurare il plugin YouTube Feed Pro.

Domande frequenti

Di seguito abbiamo risposto ad alcune delle domande più frequenti sull'aggiunta di codice JavaScript personalizzato al tuo feed.