Interaktive Seitenelemente wie dynamische Suchleisten, erweiterte Produktfilter und Slider können deine Website benutzerfreundlicher und ansprechender machen. Doch ohne JavaScript oder die Installation von WordPress-Plugins lassen sich diese Funktionen nicht erstellen.
Glücklicherweise kannst du mit jQuery in WordPress ganz einfach JavaScript-Designelemente erstellen. Du kannst dies manuell tun oder ein Plugin verwenden, um den Vorgang zu beschleunigen.
In diesem Beitrag stellen wir dir jQuery vor und erklären, warum du es möglicherweise verwenden möchtest. Anschließend zeigen wir dir zwei Möglichkeiten, benutzerdefinierte jQuery-Skripte zu deiner WordPress-Website hinzuzufügen, und beantworten einige häufig gestellte Fragen.
Was ist jQuery? (und warum du es möglicherweise verwenden möchtest)
Bevor du lernst, wie du jQuery-Skripte in WordPress hinzufügst, brauchst du ein grundlegendes Verständnis von jQuery selbst.
Kurz gesagt, jQuery ist eine leichtgewichtige Open-Source-JavaScript-Bibliothek, die das Schreiben und Verwenden dieser Programmiersprache vereinfacht.
Damit kannst du WordPress-Themes und -Plugins mithilfe von JavaScript ganz einfach ändern und erweitern. Diese Funktion kann äußerst hilfreich sein, da JavaScript für viele Funktionen unverzichtbar ist.
Beispielsweise benötigt man JavaScript für Ajax, die Ereignisbehandlung und das Durchlaufen bzw. Manipulieren des DOM. Die Ajax-Funktionalität ist insbesondere praktisch und beliebt. Webentwickler verwenden sie, um das sofortige Laden von Suchergebnissen und erweiterte Produktfilter im E-Commerce zu erstellen.
Eine Benutzeraktion, etwa ein Klick oder eine Suche, löst diese JavaScript-Funktionen häufig aus. Außerdem benötigst du jQuery, um zusätzliche clientseitige Funktionen wie Slider, Lightbox-Pop-ups und vieles mehr zu erstellen.
Ist jQuery standardmäßig in WordPress enthalten?
jQuery ist eine so nützliche und beliebte Ressource, dass es standardmäßig in deiner WordPress-Installation enthalten ist. Du musst nur wissen, wie du es verwendest! In den nächsten Abschnitten zeigen wir dir, wie das geht.
Was du vor dem Hinzufügen von jQuery-Skripten zu WordPress tun solltest
Wir erklären dir gleich, wie du jQuery-Skripte in WordPress hinzufügen kannst. Zuvor solltest du jedoch einige Maßnahmen ergreifen, um deine Website zu schützen, bevor du versuchst, ihre Kerndateien zu ändern.
Am wichtigsten ist, dass du stets ein Backup deiner Website erstellst. Denn selbst der kleinste Codierungsfehler in wichtigen Website-Dateien kann großen Schaden anrichten. Mit Backups kannst du deine Website im Notfall ganz einfach in ihren vorherigen Zustand zurückversetzen.
Wenn du nicht sicher bist, wie du ein Backup deiner WordPress-Website erstellst, oder einfach nach einem Tool suchst, das den Vorgang vereinfacht, Jetpack VaultPress Backup ist eine hervorragende Option.
Jetpack VaultPress Backup speichert automatisch jede Änderung auf deiner Website. Anschließend kannst du deine Inhalte mit Wiederherstellungen per Mausklick schnell zurückholen. Jetpack ermöglicht es dir sogar, deine Website über die Jetpack mobile App wiederherzustellen. Außerdem erhältst du bei Problemen Unterstützung vom erstklassigen Kundensupport – den Happiness Engineers!
Um deine Website zusätzlich zu schützen, lohnt es sich auch, eine WordPress-Staging-Website zu erstellen. Anschließend kannst du deine Änderungen testen, bevor du sie live schaltest.
So fügst du benutzerdefinierte jQuery-Skripte zu WordPress hinzu
Nachdem du nun mehr über jQuery und die Vorbereitung deiner Website auf größere Änderungen weißt, sehen wir uns zwei Möglichkeiten an, benutzerdefiniertes jQuery in WordPress hinzuzufügen!
Methode 1: jQuery manuell hinzufügen
Zuerst zeigen wir dir, wie du jQuery manuell zu WordPress hinzufügst. Diese Methode ist möglicherweise für dich geeignet, wenn du über etwas Entwicklungserfahrung verfügst und den Vorgang vollständig kontrollieren möchtest.
Es lohnt sich, ein Child-Theme zu verwenden, damit deine Änderungen beim Aktualisieren des Themes nicht überschrieben werden.
Schritt 1: In den Kompatibilitätsmodus wechseln
Das Tolle an jQuery ist, dass du beim Programmieren einige vertraute Kurzschreibweisen verwenden kannst. Besonders hervorzuheben ist das $-Symbol, das du stellvertretend für jQuery verwenden kannst. Das kann dir viel Zeit sparen, aber einige andere Bibliotheken verwenden diese Kurzschreibweise für etwas anderes.
Daher solltest du in den Kompatibilitätsmodus wechseln und einen eindeutigen Alias für jQuery erstellen. Auf diese Weise kannst du Konflikte mit anderen Bibliotheken vermeiden.
Dazu kannst du den folgenden Code verwenden:
<!-- Putting jQuery into no-conflict mode. -->
http://prototype.js
http://jquery.js
<script>
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
$j(document).ready(function() {
$j( "div" ).hide();
});
// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv darunter ist ein DOM-Element und kein jQuery-Objekt.
window.onload = function() {
var mainDiv = $( "main" );
}
</script>Wenn du das obige Skript ausführst, kannst du $j anstelle von $ als Kurzschreibweise verwenden. Alternativ kannst du Folgendes verwenden:
<!-- Loading jQuery before other libraries. -->
http://jquery.js
http://prototype.js
<script>
// Verwende den vollständigen Namen der jQuery-Funktion, um auf jQuery zu verweisen.
jQuery( document ).ready(function() {
jQuery( "div" ).hide();
});
// Use the $ variable as defined in prototype.js
window.onload = function() {
var mainDiv = $( "main" );
};
</script>Dieser Codeausschnitt verhindert lediglich Konflikte. Du musst weiterhin den vollständigen Namen jQuery anstelle einer Kurzschreibweise verwenden.
Schritt 2: Eine Skriptdatei erstellen
Nachdem du den benötigten Code hast, kannst du eine Skriptdatei erstellen. Erstelle eine Datei und gib ihr einen aussagekräftigen Namen wie „my_new_script_file.js“. Achte darauf, die .js-Erweiterung zu verwenden und deinen bevorzugten Kompatibilitäts-Codeausschnitt am Anfang hinzuzufügen.
Nun musst du auf deine Theme-Dateien zugreifen und sie bearbeiten. Diese befinden sich in eigenen Ordnern innerhalb deiner Website-Dateien.
Beginne damit, eine Verbindung zu deiner Website über deinen Dateimanager oder einen kostenlosen File Transfer Protocol (FTP)-Client wie FileZilla.
Öffne dann dein Stammverzeichnis. Es sollte etwa public_html oder einfach public heißen. Alternativ könnte es einfach der Name deiner Website sein.
Suche als Nächstes den Ordner deines aktiven Themes und erstelle einen neuen Unterordner. Nenne ihn /js/.
Füge schließlich deine neue Skriptdatei zu diesem Unterordner hinzu. Ihr Inhalt hängt von der Funktion ab, die du implementieren möchtest.
Schritt 3: Ein jQuery-Skript zu deiner functions.php-Datei hinzufügen
Als Nächstes musst du die functions.php-Datei deines Themes finden. Sowohl übergeordnete als auch untergeordnete Themes sollten eine haben. Hier finden alle manuellen Anpassungen statt.
Da JavaScript das Einreihen, musst du die wp_enqueue_script()-Funktion verwenden. Dein Code könnte etwa so aussehen:
function my_theme_scripts() {
wp_enqueue_script( 'my_new_script_file', get_template_directory_uri() . '/js/my_new_script_file.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );Achte darauf, den Namen deiner eindeutigen Skriptdatei einzusetzen und sie der functions.php-Datei hinzuzufügen. Dadurch wird deiner Theme-Datei mitgeteilt, dass sie die im vorherigen Schritt erstellte Skriptdatei verwenden soll.
Methode 2: jQuery mit einem WordPress-Plugin hinzufügen
Wie wir gerade gesehen haben, kann das manuelle Hinzufügen von jQuery zeitaufwendig und etwas riskant sein, besonders, wenn du nicht vertraut bist mit dem Bearbeiten von Code in WordPress. Daher zeigen wir dir jetzt, wie du jQuery mit einem WordPress-Plugin hinzufügen kannst.
Schritt 1: Ein jQuery-Plugin installieren
Zuerst musst du ein jQuery-Plugin auswählen. Zwei der beliebtesten Optionen sind Simple Custom CSS und JS und Advanced Custom Fields.
Für dieses Tutorial verwenden wir Advanced Custom Fields. Mit diesem Tool kannst du ansprechende, interaktive Funktionen mit benutzerdefinierten Blocktypen erstellen.
Die kostenlose Version bietet zahlreiche nützliche Blocktypen zum Hinzufügen von Elementen wie Schaltflächengruppen, Google Maps, Farbwählern, oEmbed und vielem mehr. Wenn du jedoch alle 30 benutzerdefinierten Blöcke nutzen möchtest, musst du auf die kostenpflichtige Version von Advanced Custom Fields upgraden.
Nachdem du deinen bevorzugten Tarif ausgewählt hast, installiere und aktiviere das Plugin einfach wie gewohnt. Füge in den Plugin-Einstellungen alle erforderlichen Lizenzschlüssel hinzu.
Schritt 2: Ein neues benutzerdefiniertes Feld erstellen
Nachdem du das Plugin installiert und aktiviert hast, gehe zu Benutzerdefinierte Felder → Neu hinzufügen.
Hier musst du deine erste Feldgruppe erstellen. Gib ihr neben Neue Feldgruppe hinzufügen einen Titel. Klicke dann auf Änderungen speichern.
Jetzt kannst du mit der Bearbeitung des neuen Feldes beginnen. Erweitere die Optionen, indem du unter der Bezeichnung auf Bearbeiten klickst.
Öffne zunächst das Dropdown-Menü für Feldtyp, und wähle einen aus.
Fülle dann die Feldbezeichnung, den Feldnamen, usw. Wenn du weiter nach unten scrollst, kannst du zusätzliche Einstellungen wie Standortregeln und Darstellung.
Je nach dem von dir ausgewählten Ort kannst du dort deinen neuen benutzerdefinierten Block anzeigen. Im Block-Editor kannst du den Block anhand der Bezeichnung identifizieren, die du unter Feldlabel festgelegt hast.
Klicke abschließend auf Änderungen speichern. Du kannst die + Feld hinzufügen-Schaltfläche auswählen und diesen Vorgang wiederholen. Gehe danach einfach zu einem der für dein Feld ausgewählten Orte und beginne mit der Anpassung!
So kannst du jQuery in WordPress verzögert laden
Wie bereits besprochen, gibt es zahlreiche Gründe, JavaScript und jQuery in WordPress zu verwenden. Tatsächlich sind sie für bestimmte interaktive Funktionen unverzichtbar, die viele Nutzer als selbstverständlich betrachten.
Der Nachteil ist jedoch, dass diese anspruchsvollen clientseitigen Elemente deine Website verlangsamen könnten. Daher möchtest du vielleicht automatisch JavaScript verzögert laden (und damit auch jQuery), wenn deine WordPress-Website geladen wird.
Wenn du JavaScript verzögert lädst, werden alle wichtigen Elemente deiner Website geladen, bevor die weniger wichtigen JavaScript-Funktionen geladen werden. Natürlich werden deine Website-Besucher dies wahrscheinlich nicht bemerken, aber es verbessert vermutlich ihre Nutzererfahrung (UX), da die Seite scheinbar schneller geladen wird.
Wenn du jQuery auf deiner Website automatisch verzögert laden möchtest, kannst du Jetpack Boost verwenden, um dies zu tun.
Dieses Plugin kann die Gesamtleistung deiner Website deutlich verbessern. Dadurch kannst du alle deine bevorzugten JavaScript-Funktionen beibehalten, ohne die Ladegeschwindigkeit der Seite zu beeinträchtigen.
Zusätzlich zum verzögerten Laden nicht erforderlicher JavaScript kann Jetpack Boost das Laden von CSS optimieren und verzögertes Laden von Bildern anwenden (neben weiteren Leistungsoptimierungen). Mit diesem Tool kannst du deine Core Web Vitals-Werte verbessern und die Sichtbarkeit deiner Website in den Suchergebnissen erhöhen.
Häufig gestellte Fragen zu jQuery in WordPress
Hoffentlich konnten wir die meisten deiner Fragen zu jQuery in WordPress klären. Falls wir dennoch etwas übersehen haben, findest du hier einige häufig gestellte Fragen!
Kannst du die in WordPress verwendete jQuery-Version ändern?
Manchmal können Themes und Plugins jQuery-Versionen auf deiner Website ersetzen oder hinzufügen. Daher ist es wichtig sicherzustellen, dass deine Version immer aktuell ist. Du kannst dies ganz einfach mit einem Plugin wie jQuery Updater oder Version Control for jQuery tun.
Wo kann ich die jQuery-Version auf meiner WordPress-Website überprüfen?
Du kannst deine jQuery-Version normalerweise in einem Browser überprüfen. Öffne in Google Chrome einfach deine Website im Frontend. Gehe dann zu Anzeigen → Entwickler → JavaScript-Konsole.
Gib jQuery.fn.jquery ein. Die Konsole sollte dann die aktuelle Version deiner Website zurückgeben.
Kannst du jQuery vollständig aus WordPress entfernen?
Die kurze Antwort lautet: ja. Wenn du feststellst, dass die Verwendung von JavaScript auf deiner Website ihre Leistung beeinträchtigt, möchtest du jQuery möglicherweise entfernen oder „deregistrieren“.
Füge dazu einfach den folgenden Code in deine functions.php-Datei ein:
// Remove jQuery
function vpsb_remove_jquery() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', false);
}
}
add_action('init', 'vpsb_remove_jquery');Beachte, dass du jQuery nur dann vollständig von deiner Website entfernen solltest, wenn es deine Seiten deutlich verlangsamt. Dies wird jedoch wahrscheinlich nicht passieren, da jQuery bereits umfangreicheren JavaScript-Code optimiert.
Wenn sich die Geschwindigkeit deiner Website nach dem Hinzufügen von jQuery verschlechtert hat, wäre eine bessere Alternative die Verwendung einer Lösung wie Jetpack Boost. Es kann nicht essenzielles JavaScript verzögert laden.
Kannst du jQuery durch reines JavaScript ersetzen?
Es ist möglich, jQuery durch reines JavaScript zu ersetzen. Das könnte sich jedoch als schwierig erweisen, wenn du nicht viel Erfahrung in der Entwicklung hast. Daher solltest du einen Entwickler beauftragen, wenn du dies tun musst.
Noch einmal sei darauf hingewiesen, dass das Ersetzen von jQuery durch reines JavaScript wahrscheinlich unnötig ist, da jQuery bereits optimalen JavaScript-Code bereitstellt. Meistens sind die geringfügigen Leistungseinbußen durch jQuery den Aufwand wert, und verzögertes Laden ist in der Regel die bessere Option.
Wenn du dich für diesen Weg entscheidest, solltest du dir diesen Leitfaden zum Hinzufügen von JavaScript zu WordPress ansehen. Er kann dich bei diesem Vorgang unterstützen.
jQuery in WordPress verwenden
Die Verwendung von komplexem JavaScript für ansprechende Funktionen auf deiner Website kann die UX deutlich verbessern und dich beim Erreichen deiner Ziele unterstützen. Leider hast du möglicherweise nicht die Zeit oder die erforderlichen Entwicklungskenntnisse, um diese interaktiven Elemente von Grund auf zu erstellen. Die gute Nachricht ist, dass du jQuery-Skripte verwenden kannst, um diesen Prozess zu vereinfachen.
Zusammenfassend gibt es zwei Möglichkeiten, jQuery zu WordPress hinzuzufügen. Zunächst können Sie dies manuell tun, indem Sie in den Kompatibilitätsmodus wechseln und eine Skriptdatei erstellen. Fügen Sie dann Ihr neues Skript in Ihre functions.php-Datei ein. Alternativ können Sie ein Plugin wie Advanced Custom Fields verwenden, um den Vorgang zu beschleunigen und manuelle Programmierung überflüssig zu machen.
Wenn Sie jQuery verwenden, um anspruchsvolle Designelemente zu Ihrer Website hinzuzufügen, können Sie die UX verbessern und Ihre Besucher beeindrucken. Mehrere interaktive Funktionen könnten jedoch die Leistung Ihrer Webseiten beeinträchtigen. Glücklicherweise kann Jetpack Boost dabei helfen, die Geschwindigkeit Ihrer Website zu optimieren.
Jetpack 