Benutzerdefinierte JavaScript-Schnipsel für das YouTube-Feed-Plugin hinzufügen

So fügen Sie mit WPCode benutzerdefiniertes JavaScript neben einem YouTube-Feed ein, ohne die Theme-Dateien bearbeiten zu müssen.

Möchten Sie Ihrem YouTube-Feed eigenes JavaScript hinzufügen?

In dieser Anleitung zeigen wir Ihnen zwei Möglichkeiten, wie Sie dies umsetzen können. Bei der ersten Methode nutzen Sie das Feld „Benutzerdefiniertes JavaScript“, das im YouTube-Feed-Plugin integriert ist. Bei der zweiten Methode kommt WPCode zum Einsatz, ein kostenloses Plugin von den Entwicklern von WPForms und All in One SEO. In beiden Beispielen wird am Ende Ihres Feeds ein kurzer Hinweis hinzugefügt.

Bevor Sie loslegen, stellen Sie sicher, dass das YouTube-Feed-Plugin auf Ihrer Website installiert und aktiviert ist.

• Verwendung des Felds „Benutzerdefiniertes JavaScript“
• Verwendung von WPCode
• Deinen Code ausführen, wenn weitere Videos geladen werden
• Häufig gestellte Fragen

Verwendung des Felds „Benutzerdefiniertes JavaScript“

Zunächst öffnen wir das Feld „Benutzerdefiniertes JavaScript“. Das ist der schnellste Weg, JavaScript hinzuzufügen, da es Teil des Plugins ist.

Gehen Sie in Ihrem WordPress-Dashboard zu „YouTube Feed“ » „Einstellungen“. Klicken Sie anschließend auf die Registerkarte „Feeds “.

Scrollen Sie auf der Registerkarte „Feeds“ nach unten zum Feld „Benutzerdefiniertes JavaScript “. Fügen Sie dort anschließend Ihren Code ein. In diesem Beispiel fügen wir einen Code ein, der am Ende Ihres Feeds eine kurze Notiz hinzufügt.

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

Sie müssen keine Skript-Tags hinzufügen. Das Plugin fügt Ihren Code automatisch in die Seite ein. Das $ Das Zeichen „sign“ dient als Abkürzung für jQuery.

Klicken Sie unten auf der Seite auf „Änderungen speichern“.

Öffne nun eine Seite, auf der dein Feed angezeigt wird. Die Notiz erscheint am Ende des Feeds.

Das Plugin führt Ihren Code aus, sobald die Videos geladen sind. Es führt ihn jedes Mal erneut aus, wenn weitere Videos hinzugefügt werden, beispielsweise wenn ein Besucher auf die Schaltfläche „Mehr laden“ klickt. Aus diesem Grund wird im Beispiel zunächst geprüft, ob die Notiz bereits vorhanden ist. Ohne diese Prüfung würde die Notiz jedes Mal erneut hinzugefügt werden.

Wie die Box Ihren Code schützt

Das Feld eignet sich am besten für kurze Codeausschnitte, die Sie einmalig speichern. Wenn Sie später zur Registerkarte „Feeds“ zurückkehren, zeigt das Feld vor jedem Zitat in Ihrem Code einen Backslash an. Jedes Mal, wenn Sie die Registerkarte erneut speichern, werden weitere hinzugefügt, sodass der Code im Feld nicht mehr mit dem übereinstimmt, was Sie eingegeben haben.

Wenn Sie vorhaben, Ihren Code später zu bearbeiten, ist WPCode die bessere Wahl. Es bewahrt Ihren Code genau so, wie Sie ihn geschrieben haben.

Verwendung von WPCode

Sie können Ihren JavaScript-Code auch mit WPCode einfügen. Dabei handelt es sich um ein kostenloses Plugin, das alle Ihre benutzerdefinierten Code-Schnipsel an einem Ort zusammenfasst.

Installieren und aktivieren Sie zunächst das WPCode-Plugin. Gehen Sie anschließend zu „Code-Schnipsel“ » „Schnipsel hinzufügen“.

Bewegen Sie auf der Seite „Snippet hinzufügen“ den Mauszeiger über das Feld „Benutzerdefinierten Code hinzufügen (neues Snippet)“. Klicken Sie anschließend auf „+ Benutzerdefiniertes Snippet hinzufügen“.

Wählen Sie im sich öffnenden Fenster „JavaScript-Snippet“ aus.

Geben Sie zunächst einen Titel für Ihren Codeausschnitt ein. Fügen Sie anschließend Ihren Code in das Codefeld ein.

In diesem Beispiel verwenden wir einen Code, der denselben kurzen Hinweis am Ende Ihres Feeds hinzufügt. Im Gegensatz zum ersten Beispiel wird hier kein jQuery verwendet. Dadurch funktioniert er auch auf Seiten, auf denen jQuery nicht geladen wird.

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

Sie müssen keine Skript-Tags hinzufügen. WPCode fügt diese automatisch für Sie ein. Das Code-Feld beginnt mit einer Skriptzeile, die Sie nicht bearbeiten können.

Suchen Sie als Nächstes das Feld „Position“ und klicken Sie darauf. Wählen Sie anschließend „Site-weite Fußzeile“ aus. Dadurch wird Ihr Code am Ende Ihrer Seiten eingefügt.

Klicken Sie oben auf der Seite auf den Schalter, um den Ausschnitt von „Inaktiv“ auf „Aktiv“ umzuschalten.

Klicken Sie anschließend auf „Snippet speichern“.

Sobald das Snippet aktiv ist, erscheint die Notiz am Ende Ihres Feeds auf den Seiten, auf denen dieser angezeigt wird – genau wie im ersten Beispiel.

Wenn Sie den Code nur auf bestimmten Seiten anzeigen möchten, können Sie mit WPCode festlegen, wo ein Snippet ausgeführt wird. Wie das geht, erfahren Sie in der WPCode-Dokumentation.

Deinen Code ausführen, wenn weitere Videos geladen werden

Ein WPCode-Snippet wird einmal ausgeführt, und zwar sobald die Seite vollständig geladen ist. Das Feld „Benutzerdefiniertes JavaScript“ wird zudem erneut ausgeführt, wenn weitere Videos hinzugefügt werden, beispielsweise nach einem Klick auf „Mehr laden“.

Um mit WPCode das gleiche Ergebnis zu erzielen, definieren Sie eine Funktion mit dem Namen window.sbyCustomJS in Ihrem Codeausschnitt. Das Plugin ruft diese Funktion auf, nachdem die ersten Videos geladen wurden, und jedes Mal erneut, wenn weitere hinzugefügt werden. Dies ist dieselbe Funktion, die das Feld „Benutzerdefiniertes JavaScript“ erstellt. Verwenden Sie daher entweder die eine oder die andere Funktion, nicht beide.

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

Verwenden Sie diesen Code anstelle des vorherigen WPCode-Beispiels und befolgen Sie die gleichen Schritte. Wenn Sie das bereits gespeicherte Snippet ändern, lautet die Beschriftung der Schaltfläche „Snippet speichern“ stattdessen „Aktualisieren“. Das Häkchen oben verhindert, dass die Anmerkung bei jeder Ausführung der Funktion erneut hinzugefügt wird.

Das war’s schon! Sie können nun über das Feld „Benutzerdefiniertes JavaScript“ oder einen WPCode-Schnipsel Ihr eigenes JavaScript zu Ihrem YouTube-Feed hinzufügen. Als Nächstes möchten Sie vielleicht erfahren, wie Sie das YouTube Feed Pro-Plugin einrichten.

Häufig gestellte Fragen

Im Folgenden haben wir einige der häufigsten Fragen zum Hinzufügen von benutzerdefiniertem JavaScript zu Ihrem Feed beantwortet.