Springe zum Hauptinhalt

Wie man richtig die jQuery-Code auf Wordpress hinzufügen

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

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 dies eine der am häufigsten verwendeten JavaScript-Bibliotheken ist, diskutieren wir heute, wie Sie Ihren WordPress-Themes oder -Plugins jQuery-Skripte hinzufügen können.

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:

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

( 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 Sie ihn unserer Website hinzu.

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 eine klassische HTML-Website würden wir die 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:

  1. $ handle - Ein eindeutiges Handle, mit dem Sie auf das Skript verweisen können.
  2. $ src - der Speicherort der Skriptdatei.
  3. $ deps - Gibt ein Array von Abhängigkeiten an.
  4. $ ver - die Versionsnummer Ihres Skripts.
  5. $ 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.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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 in der Verwaltung verwendet, wenn Sie ein Skript nur auf einer bestimmten Seite verwenden möchten (und nicht in der gesamten Verwaltung). Dies spart außerdem Bandbreite und Verarbeitungszeit, was schnellere Ladezeiten für Ihre Website bedeutet.

Schauen Sie sich das an Dokumentation von Warteschlangenskripten  Weitere Informationen finden Sie im WordPress-Codex.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

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 WordPress-Publikationen, -Seiten oder -Themen einfügen können.

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.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
2 Aktien
Aktie2
tweet
Registrieren