So fügen Sie ganz einfach jQuery-Skripte zu WordPress hinzu

WordPress begleitet uns nun seit mehr als einem Jahrzehnt. Obwohl die Plattform weithin für ihren einfachen Zugriff bekannt ist, ist das Hinzufügen von jQuery in WordPress-Designs und -Plugins für viele Entwickler ein Problem.

Wir haben bereits Anleitungen zur Behebung von Problemen wie dem weißen WordPress-Bildschirm des Todes und zum Versetzen Ihrer WordPress-Site in den Wartungsmodus geschrieben. Und in diesem Stück werden wir erklären, wie man jQuery zu WordPress hinzufügt, aber bevor wir darauf eingehen, hier ein kurzer Überblick über den Kompatibilitätsmodus von jQuery.

Kompatibilitätsmodus von jQuery

Es ist ebenso wichtig zu verstehen, was der Kompatibilitätsmodus von jQuery ist, bevor Sie mit der Verwendung von jQuery in WordPress beginnen.

jQuery in WordPress ist vorinstalliert und Sie können es in Ihrem Code verwenden. Der Punkt hier ist jedoch, dass es auch mit dem Kompatibilitätsmodus von jQuery ausgestattet ist, der Konflikte mit anderen Bibliotheken anderer Programmiersprachen vermeidet.

Auch wenn dies ganz normal klingen mag, gibt es ein kleines Problem mit diesem Abwehrmechanismus. Wenn Sie jQuery in WordPress verwenden, müssen Sie statt unseres guten alten $ -Zeichens den Begriff „ jQuery “ verwenden.

Schauen Sie sich dieses Beispiel an.

/* Normale jQuery */

$('.hideable').on('click', function() {

$(dies).hide();

})

/* Kompatibilitätsmodus */

jQuery('.hideable').on('click', function() {

jQuery(this).hide();

})

Nun ist das Problem hier nicht so groß, aber es ist eher nicht sehr angenehm. Erstens müssen Sie jedes Mal die „ jQuery “ schreiben, was ziemlich viel Zeit in Anspruch nimmt, und zweitens sieht Ihr Skript dadurch unübersichtlich und schwerer lesbar aus.

Aber keine Sorge, mit ein paar Modifikationen können Sie das Kompatibilitätsproblem umgehen und das gute alte $-Zeichen verwenden.

Als Referenz ist $ ein Alias ​​für jQuery() und ein Handle für eine Funktion.

So sieht eine Grundstruktur aus.

$(Selektor).Aktion()

Hier bezieht sich das $ -Zeichen auf jQuery, $(selector) findet HTML-Elemente und action() definiert die Aktion, die für diese Elemente ausgeführt werden soll.

Hier sind einige Techniken, die Sie nutzen können, um das Kompatibilitätsproblem von jQuery zu umgehen.

Wie kann man das Kompatibilitätsproblem von jQuery überwinden?

1. Wechseln Sie in den „jQuery Stealth“-Modus
2. Wechseln Sie in den „Kein Konflikt“-Modus

Rufen Sie den Stealth-Modus von jQuery auf

Bildquelle: Podfeet

Der erste und gebräuchlichste Weg, um das Kompatibilitätsproblem zu umgehen, besteht darin, in den Stealth-Modus zu wechseln (mit Ihrem Code heimlich zu werden).

Angenommen, Sie versuchen, das Skript in die Fußzeile zu laden. Wickeln Sie den Code in eine anonyme Funktion ein, die jQuery schließlich $ zuordnet.

Siehe dieses Beispiel

(Funktion($) {

$('.hideable').on('click', function() {

$(dies).hide();

})

})(jQuery);

Wenn Sie nun das Skript in den Header einfügen möchten, packen Sie alles in eine dokumentbereite Funktion und übergeben Sie dabei $.

Hier ist ein Beispiel.

jQuery(Dokument).ready(Funktion( $ ) {

$('.hideable').on('click', function() {

$(dies).hide();

})

});

Wechseln Sie in den Modus „Kein Konflikt“.

Nun, dies ist eine ziemlich einfache Möglichkeit, Kompatibilitätsprobleme zu umgehen. Alles, was Sie tun müssen, ist, diese Codezeile über Ihrem Skript zu deklarieren, und Sie können $j anstelle des standardmäßigen $-Zeichens verwenden.

var $j = jQuery.noConflict();

Nachdem Sie nun wissen, wie man jQuery in WordPress verwendet, lassen Sie uns zu unserem Hauptthema übergehen – wie Sie jQuery-Skripte zu Ihrer WordPress-Site hinzufügen.

So fügen Sie jQuery zu WordPress-Sites hinzu

Bildquelle: fl1digital.com

Das Hinzufügen von jQuery zu WordPress könnte einfach durch einen Prozess namens Enqueueing erfolgen .

Wir verwenden das Element <link> , um Skripte in normale HTML-Websites einzufügen. Das Gleiche können wir auch in WordPress tun. Allerdings müssen wir einige der speziellen Funktionen von WordPress spielen, um darauf eingehen zu können. Beachten Sie, dass dies alle Abhängigkeiten für Sie erledigen würde.

Angenommen, Sie arbeiten an einem WordPress-Theme. Verwenden Sie diese Funktion in Ihrer Datei functions.php .

wp_enqueue_script()

So sieht es aus.

Funktion my_theme_scripts() {

wp_enqueue_script( 'my-great-script', get_template_directory_uri() . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Hier sind fünf Argumente, die diese Funktion annehmen würde.

1. $handle: Ein eindeutiges Handle, das verwendet werden kann, um auf ein Skript zu verweisen
2. $src: Speicherort Ihrer Skriptdatei
3. $deps: Wird verwendet, um ein Array von Abhängigkeiten anzugeben
4. $ver: die Versionsnummer des Skripts
5. $in_footer: um WordPress anzuweisen, wo das Skript platziert werden soll

Standardmäßig wird das Skript in den Header Ihrer Website geladen, was nicht empfohlen wird, da es die Geschwindigkeit Ihrer Website erheblich beeinträchtigt.

Siehe auch: Ihr ultimativer Leitfaden zum Bearbeiten von WordPress – HTML, CSS, PHP, JavaScript

So fügen Sie jQuery-Skripts zu WordPress Admin hinzu

Sie können jQuery mit den gleichen Funktionen zum WordPress-Admin hinzufügen. Alles, was Sie hier tun müssen, ist, einen anderen Haken zu verwenden.

Hier ist ein 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' );

Tauschen Sie jetzt einfach wp_enqueue_scripts gegen admin_enqueue_scripts aus und schon kann es losgehen.

So deregistrieren Sie jQuery in WordPress

Sie müssen jQuery von WordPress abmelden, wenn Sie bereit sind, eine andere Version von jQuery als die vorinstallierten zu verwenden.

Hier ist ein Beispiel dafür, wie Sie jQuery in WordPress abmelden können.

// benutzerdefiniertes jQuery einschließen

Funktion shapeSpace_include_custom_jquery() {

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 einfach. Alles, was Sie tun müssen, ist, jQuery von WordPress mit wp_deregister_script() abzumelden und das gewünschte Skript einzufügen.

Eine Sache, die Sie hier beachten sollten, ist, dass wir in diesem Beispiel eine von Google gehostete jQuery-Bibliothek hinzugefügt haben. Sie müssen es mit der URL Ihres eigenen Skripts wechseln.

Sollten Sie Skripte vor dem Einreihen registrieren?

Sie können das Skript zu einem früheren Zeitpunkt im Prozess registrieren, wenn Sie möchten, dass es nur geladen wird, wenn es auf Ihren Seiten benötigt wird.

Hier ist ein Beispiel

add_action( 'wp_loaded', 'register_all_scripts' );

Funktion register_all_scripts()

{

wp_register_script(…);

}

Wenn Sie damit fertig sind, stellen Sie die Skripts in die Warteschlange, wenn Sie sie benötigen. Hier ist wie.

add_action( 'wp_enqueue_scripts', 'enqueue_front_scripts' );

add_action( 'admin_enqueue_scripts', 'enqueue_back_scripts' );

Bedingte Tags verwenden

Sie können auch bedingte Tags verwenden, um Ihre jQuery nur bei Bedarf in WordPress zu laden.

Auch wenn diese Methode normalerweise im Admin-Bereich verwendet wird, wo Sie sie nur auf bestimmten Seiten wünschen, spart sie viel Bandbreite und Verarbeitungszeit und erhöht letztendlich die Ladegeschwindigkeit Ihrer Website.

Weitere Informationen zur Verwendung zusätzlicher Tags finden Sie in der Dokumentation zu den Admin-Enqueuer-Skripten von WordPress.

So fügen Sie jQuery mithilfe von Plugins zu WordPress hinzu

WordPress rühmt sich seines Plugin-Verzeichnisses mit mehr als 45000 Plugins. Du kannst ein Plugin für jede gewünschte Funktionalität auf deiner WordPress-Seite finden.

Dasselbe gilt für das Hinzufügen von jQuery zu Seiten, Themen und Beiträgen von WordPress-Sites usw.

Hier sind einige der beliebtesten Plugins zum Hinzufügen von jQuery zu WordPress.

• Erweiterte benutzerdefinierte Felder
• Einfaches benutzerdefiniertes CSS und JS
• Skripte N Stile
• Asset-Bereinigung

Fazit

Hier bitteschön. Jetzt wissen Sie, wie Sie WordPress jQuery hinzufügen und verwenden.

Die Anwendung dieses Wissens auf Ihre Projekte würde Ihnen helfen, großartige Projekte zu erstellen. Sie können auch unsere definitiven Leitfäden zu Themen wie JPG vs. JPEG und WordPress White Label lesen, um Ihr Wissen zu erweitern.