WordPress ist seit über 16 Jahren Teil unseres Lebens, aber die Methode zum Hinzufügen von Skripten zu Themen und Plugins bleibt vielen Entwicklern ein Rätsel. In diesem Artikel haben wir der Verwirrung endlich ein Ende gesetzt.
Da es sich um eine der am weitesten verbreiteten JavaScript-Bibliotheken handelt, diskutieren wir heute, wie Sie jQuery-Skripte zu Ihren Designs hinzufügen oder Wordpress-Plugins.
Informationen zum jQuery-Kompatibilitätsmodus
Bevor Sie mit dem Hinzufügen von Skripten zu WordPress beginnen, müssen Sie den Kompatibilitätsmodus von jQuery kennen.
Wie Sie wahrscheinlich wissen, ist in WordPress jQuery bereits enthalten.
Die Version von jQuery unter WordPress hat auch eine " Kompatibilitätsmodus Dies ist ein Mechanismus, um Konflikte mit anderen Javascript-Bibliotheken zu vermeiden.
Ein Teil dieses Abwehrmechanismus bedeutet, dass Sie kann nicht benutze die $Unterschreiben Sie direkt wie in anderen Projekten.
Wenn Sie jQuery-Code für WordPress schreiben, sollten Sie stattdessen verwenden jQuery.
Hier ist ein Beispiel für diesen Code:
/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})
Das Problem ist, dass das millionenfache Schreiben von jQuery länger dauert, das Lesen erschwert und Ihr Skript belasten kann.
Die guten Nachrichten?
Mit ein paar Modifikationen können Sie wieder unser niedliches kleines Dollarsymbol verwenden.
Übrigens, wenn Sie sind neu bei jQuery Das $ -Zeichen ist nur ein Alias für jQuery (), dann ein Alias für eine Funktion.
Die Grundstruktur sieht folgendermaßen aus: $(selector).action(). Das Dollarzeichen definiert jQuery… der „(Selektor)“ fragt oder findet HTML-Elemente… und schließlich ist „jQuery () action“ die Aktion, die für die Elemente ausgeführt werden soll.
Zurück zur Umgehung unseres Kompatibilitätsproblems ... Hier einige praktikable Optionen:
1.Rufen Sie den Stealth-Modus von jQuery auf
Der erste Weg, um den Kompatibilitätsmodus zu umgehen, besteht darin, den Code einzugeben.
Wenn Sie beispielsweise Ihr Skript in die Fußzeile laden, können Sie Ihren Code in eine anonyme Funktion einschließen, die jQuery zuordnet $.
Wie im folgenden Beispiel:
( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);
Wenn Sie Ihr Skript in die Kopfzeile einfügen möchten (was Sie nach Möglichkeit vermeiden sollten, mehr dazu weiter unten), können Sie alles in eine dokumentbereite Funktion einschließen und die übergeben $auf dem Weg.
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2. Wechseln Sie in den Modus "Kein Konflikt"
Eine andere einfache Möglichkeit, die Rechtschreibung von jQuery zu vermeiden, besteht darin, in den Modus zu wechseln "Konfliktfrei" und verwenden Sie eine andere Verknüpfung.
In diesem Fall: $janstelle der Standardeinstellung $.
Alles, was Sie tun müssen, ist, es oben in Ihrem Skript zu deklarieren:var $j = jQuery.noConflict();
Okay, jetzt wissen Sie mehr über das Schreiben von gültigem jQuery-Code für WordPress, fügen wir ihn unserer hinzu Website.
So fügen Sie WordPress jQuery-Skripte hinzu
Eine der einfachsten Möglichkeiten, jQuery-Skripte zu WordPress hinzuzufügen, ist ein Prozess namens "Einstellung" Warteschlange ".
Für Website Klassisches HTML würden wir verwenden <link> Element zum Hinzufügen von Skripten. Am Ende macht WordPress dasselbe, aber wir werden spezielle WP-Funktionen verwenden, um dies zu erreichen.
Auf diese Weise werden alle unsere Abhängigkeiten für uns verwaltet (danke WP!).
Wenn Sie an einem Thema arbeiten, können Sie die Funktion verwenden wp_enqueue_script() in Ihrem functions.php Datei.
So sieht es aus:
function my_theme_scripts () {
wp_enqueue_script('mon-grand-script', get_template_directory_uri(). '/js/my-great-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
Diese Funktion dauert fünf Argumente:
- $ handle - Ein eindeutiges Handle, mit dem Sie auf das Skript verweisen können.
- $src – der Speicherort der Skriptdatei.
- $ deps - Gibt ein Array von Abhängigkeiten an.
- $ ver - die Versionsnummer Ihres Skripts.
- $ in_footer - teilt WordPress mit, wo das Skript abgelegt werden soll.
* Eine Sache zu beachten $in_footer bedeutet, dass standardmäßig Skripte in den Header geladen werden.
Dies ist eine schlechte Praxis und kann Ihre Website erheblich verlangsamen. Wenn Sie Ihr Skript in der Fußzeile platzieren möchten, stellen Sie daher sicher, dass dieser Parameter auf true gesetzt ist.
Hinzufügen von Skripten zum WordPress-Administrator
Sie können dem Administrator auch Skripts hinzufügen. Die verwendeten Funktionen sind genau die gleichen, Sie müssen nur einen anderen Haken verwenden.
Zum Beispiel:
Funktion my_admin_scripts () {
wp_enqueue_script ('my-great-script', plugin_dir_url (__FILE__). '/js/my-great-script.js', Array ('jquery'), '1.0.0', true);
}
add_action ('admin_enqueue_scripts', 'my_admin_scripts');
Anstatt sich anzumelden, wp_enqueue_scriptswir müssen verwenden admin_enqueue_scripts.
Wie man jQuery von WordPress abmeldet
Aber was ist, wenn Sie eine andere Version von jQuery als die von WordPress vorinstallierte verwenden möchten?
Sie können es in die Warteschlange stellen. Dies bedeutet jedoch, dass die Version zwei Versionen von jQuery enthält.
Um dies zu vermeiden, müssen wir die Registrierung der WP-Version aufheben.
So sieht es aus:
// enthält benutzerdefinierte jQuery
shapeSpace_include_custom_jquery () Funktion {
wp_deregister_script ('jquery');
wp_enqueue_script(
'jquery',
'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js',
array(),
null,
true);
}
add_action ('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');Es ist so einfach wie die wp_deregister_script () befolgen für deregistrieren jQuery aus WP, dann einschließlich des jQuery-Skripts, das Sie hinzufügen möchten.
Im obigen Beispiel haben wir die verwendet Von Google gehostete jQuery-Bibliothek , aber Sie werden es natürlich durch die URL Ihres eigenen Skripts ersetzen.
Sollten Sie Skripte nicht speichern, bevor Sie sie in die Warteschlange stellen?
Wenn Sie Ihre Skripte nach Bedarf laden möchten, anstatt sie direkt in Ihre Seiten zu laden, können Sie das Skript früher speichern.
Zum Beispiel auf wp_loaded:
add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}
Sobald Sie dies getan haben, können Sie die Skripte bei Bedarf in die Warteschlange stellen:
| add_action ('wp_enqueue_scripts', 'enqueue_front_scripts'); |
| add_action ('admin_enqueue_scripts', 'enqueue_back_scripts'); |
Denken Sie daran, dieselben Namen zu verwenden, um Kollisionen mit anderen Skripten zu vermeiden.
Bedingte Tags verwenden
Verwenden Sie bedingte Tags, um Ihre Skripte nur bei Bedarf zu laden.
Dies wird häufiger im Admin-Bereich verwendet, wo Sie ein Skript nur auf einer bestimmten Seite (und nicht im gesamten Admin-Bereich) verwenden möchten. Es spart außerdem Bandbreite und Verarbeitungszeit, was für Sie schnellere Ladezeiten bedeutet Website.
Schauen Sie sich das an Dokumentation von Warteschlangenskripten Weitere Informationen finden Sie im WordPress-Codex.
Fügen Sie jQuery mithilfe von Plugins zu WordPress hinzu
Das WP-Plugins-Verzeichnis enthält auch viele interessante Plugins, mit denen Sie Skripte in Ihre Beiträge, Seiten oder einfügen können WordPress-Themes.
Hier einige Beispiele für bekannte JavaScript / jQuery-Plugins: erweiterte benutzerdefinierte Felder , Einfaches benutzerdefiniertes CSS und JS , Skriptstile n et Ressourcenreinigung.
Erstellen Sie Ihr eigenes jQuery-Projekt
Ein besseres Verständnis von jQuery macht Ihre Arbeit nur noch effektiver. Ob für Ihre eigene Website oder für Kundenprojekte.
jQuery ist bekannt für seine Einfachheit. Wie Sie (hoffentlich) in diesem Artikel erfahren haben, ist das Hinzufügen einfacher jQuery-Skripte zu WordPress kinderleicht, sobald Sie wissen, wie.
Ja, es gibt ein wenig Overhead im Vergleich zur Verwendung von Vanille-HTML, aber es gibt auch den zusätzlichen Vorteil des Abhängigkeitsmanagements und der Klarheit.
Darüber hinaus sparen Sie sich mit kleinen Tricks wie der Umgehung der Standardkompatibilität von jQuery WP viel Zeit, Mühe und aufgeblähten Code.
