Möchten Sie lernen, wie Sie jQuery-Code zu WordPress hinzufügen? Lesen Sie also weiter, um mehr zu erfahren.

Trotz der Tatsache, dass WordPress schon seit einiger Zeit verfügbar ist und es auch schon seit einiger Zeit Themenskripte und Plugins gibt, gibt es immer noch einige Unklarheiten darüber, welche Methode verwendet werden soll. Verwenden Sie diese Option, um Skripte in WordPress hinzuzufügen.

Also werden wir versuchen, die Dinge zu klären.

Da jQuery das am weitesten verbreitete JavaScript-Framework ist, zeigen wir Ihnen, wie Sie es zu einem Thema oder einem hinzufügen WordPress Plugin.

Aber vorher, wenn Sie WordPress Discover noch nie installiert haben So installieren Sie eine Wordpress-Blog in 7 Schritten et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Dann zurück zu warum wir hier sind.

JQuery-Kompatibilitätsmodus

Bevor wir mit dem Hinzufügen von Skripten in WordPress beginnen, untersuchen wir den Kompatibilitätsmodus von jQuery. WordPress enthält eine Kopie von jQuery, die Sie mit Ihrem Code verwenden können. Wenn WordPress jQuery geladen wird, wird der Kompatibilitätsmodus verwendet, mit dem Konflikte mit anderen Bibliotheken vermieden werden.

Finde heraus, ob er Sollte jQuery aus Ihren Themes und Plugins entfernt werden WordPress ?

Dies bedeutet, dass Sie das Dollarzeichen nicht direkt wie in anderen Projekten verwenden können. Wenn Sie jQuery in WordPress schreiben, müssen Sie stattdessen jQuery verwenden.

Werfen Sie einen Blick auf den folgenden Code, um zu sehen, was ich meine:

/ * Normaler Modus * / $ ('. Versteckt'). Ein ('click', function () {$ (this) .hide ();}) / * Kompatibilitätsmodus * / jQuery ('. Hideable'). On ('click', function () {jQuery (this) .hide ();})

Was Sie wissen müssen, ist, dass Sie mit ein paar Änderungen das Dollarzeichen wieder verwenden können. Wenn Sie jedes Mal "jQuery" für Ihren gesamten Code verwenden, wird das Schreiben erheblich erschwert.

überprüfen 10 Code-Editoren für Entwickler Wordpress

Um es noch einmal zusammenzufassen: Wenn Sie jQuery kennen, ist das $ -Zeichen nur ein Alias ​​für jQuery () und dann ein Alias ​​für eine Funktion. Die grundlegende Syntax lautet: $ (Selector) .Action () :

• Ein Dollarzeichen zur Definition von jQuery
• A (Selektor) zum "Finden" von HTML-Elementen
• Eine jQuery () - Aktion, die für diese Elemente ausgeführt werden soll

Wenn Sie Ihr Skript in die Fußzeile laden, können Sie Ihren Code in eine anonyme Funktion einschließen. So geht's:

(function ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})}) (jQuery);

Wenn Sie Ihr Skript zum Header hinzufügen möchten (was du vermeiden solltest wenn möglichSie können es in eine Funktion einschließen, die ausgeführt wird, wenn das Dokument fertig ist.

Entdecken Sie auch nebenbei Wie zu leicht Code auf WordPress ohne Ihre Website zu brechen

jQuery (document) .ready (function ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})});

So verknüpfen Sie Ihre Skripte mit jQuery

Nachdem Sie in WordPress gültigen jQuery-Code schreiben können, werden wir unsere Arbeit mit unserer Website verknüpfen. In WordPress heißt der Prozess ' Einreihen "(Hecksystem). Für eine normale HTML-Website sollten wir das Tag verwendenSkript> um Skripte hinzuzufügen.

WordPress kann dasselbe tun, aber wir werden die speziellen Funktionen von WordPress nutzen, um dies zu erreichen. Auf diese Weise verwaltet WordPress alle unsere Abhängigkeiten für uns.

Wenn Sie an einem Thema arbeiten, können Sie die Funktion verwenden wp_enqueue_script () in Ihrer Datei functions.php Datei. So geht's:

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

Die Funktion akzeptiert fünf Argumente. Mit dem ersten können Sie auf das Skript verweisen, der zweite ist der Speicherort der Skriptdatei, der dritte Parameter ist ein Array von Abhängigkeiten.

Ich habe jQuery als Abhängigkeit hinzugefügt, weil das Skript es verwendet. Wenn Sie ein Skript erstellen, das von "mein Ur-Skript Sie müssen es zur Abhängigkeitsliste hinzufügen, damit WordPress weiß, welche Dateien zuerst geladen werden müssen.

entdecken Sie auch JavaScript auf Wordpress zu laden

Der vierte Parameter ist eine Versionsnummer und der fünfte ermöglicht WordPress zu wissen, wo das Skript abgelegt werden soll. Standardmäßig werden Skripte in den Header geladen, was eine schlechte Praxis ist, da dies das Laden Ihrer Website-Seite verlangsamt (Browser stoppen das Laden aller Seiten, wann immer ein Block est rencontré). Sie müssen alle Ihre Skripte in die Fußzeile laden, wenn möglich, indem Sie den fünften Parameter " was immer dies auch sein sollte. ".

Wie ein Skript auf dem Dashboard hinzufügen

Sie können auch Skripte hinzufügen Armaturenbrett. Die verwendeten Funktionen sind genau die gleichen, Sie müssen nur ein " Haken " anders. Schauen Sie sich das folgende Beispiel an:

function 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 zu benutzen wp_enqueue_scripts wir müssen verwenden admin_enqueue_scripts, und das ist alles !

Die Verwendung von bedingten Tags

Verwenden Sie bedingte Tags, damit Sie Ihre Skripte nur bei Bedarf laden. Dies wird am häufigsten im Dashboard verwendet, wo Sie ein Skript nur auf einer bestimmten Seite verwenden möchten. Dies spart Bandbreite und Verarbeitungszeit, was schnellere Ladezeiten für Ihre Website bedeutet.

Entdecken Sie auch unsere 10 WordPress-Plugins zur Verbesserung der Ladegeschwindigkeit Ihres Blogs

Schauen Sie sich an die Dokumentation admin_enqueue_scripts Weitere Informationen finden Sie im WordPress-Codex.

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere verwenden Wordpress-Plugins um ein modernes Erscheinungsbild zu geben und die Handhabung Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. Interaktive Weltkarten

Interaktive Weltkarten ist ein WordPress Plugin Damit können Sie so viele Karten erstellen, wie Sie möchten, mit interaktiven und farbigen Markierungen, Kontinenten, Ländern oder Regionen.

Es ist voll kompatibel mit der neuen Version von WordPress und Visual Composer. Dank dieses Plugins können Sie verschiedene Arten von Regionen anzeigen, z Land geteilt durch seine Regionen, ein Staat der Vereinigten Staaten, die Vereinigten Staaten geteilt durch Ballungsräume, ein Staat der Vereinigten Staaten geteilt durch Ballungsräume.

Herunterladen | Demo | Web-Hosting

2. AJAX-Kontaktformular mit Tracking

Ce WordPress Plugin ermöglicht Ihnen das einfache Hinzufügen von Kontakt- oder Kommentarformularen zu Ihrem Wordpress-Blog. Es wird mit einem Einstellungsmanager geliefert, auf den direkt über das WordPress-Dashboard zugegriffen werden kann.

Seine Hauptmerkmale sind unter anderem: a ffür E-Mail die Unterstützung von CAPTCHA-Mathematik zu Formularen, Anpassung und Konfiguration Über das WordPress-Dashboard besteht die Möglichkeit, dDefinieren Sie einen benutzerdefinierten Autoresponder, Unterstützung für benutzerdefiniertes CSS und mehr

Herunterladen | Demo | Web-Hosting 

3. PayPal Standard-Zahlungsportal für Ninja-Formulare

Mit PayPal Standard Gateway für Ninja Forms können Sie Formulare erstellen, die sich nahtlos in das PayPal-Zahlungsgateway integrieren lassen. 

Sie können personalisierte Bestellformulare erstellen und Zahlungen über Standard-Paypal-Konten erhalten. Die Hauptmerkmale sind: einfache und schnelle Integration, IPN-Integration, die Möglichkeit, das PayPal-Gateway in einzelnen Formularen zu aktivieren / deaktivieren, Unterstützung für regelmäßige Zahlungen usw.

Herunterladen | Demo |  Web-Hosting

Andere empfohlene Ressourcen

Wir laden Sie außerdem ein, die unten aufgeführten Ressourcen zu konsultieren, um die Kontrolle und Kontrolle Ihrer Website und Ihres Blogs zu verbessern.

• Wie Kategorien und Tags effektiv auf Wordpress zu verwenden
• Wie eine ansprechende Menü für mobile Wordpress erstellen
• So erstellen Sie ein WordPress Intranet für Ihre Organisation
• Wie ein Plugin in Wordpress zu installieren

Zusammenfassung

Hier ! Das war's für dieses Tutorial. Ich hoffe, Sie wissen jetzt, wie Sie WordPress ein Skript hinzufügen. Zögere nicht zu Teilen Sie den Tipp mit Ihren Freunden in Ihren sozialen Netzwerken.

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung.

Aber erzählen Sie uns in der Zwischenzeit von Ihrem commentaires und Vorschläge im entsprechenden Abschnitt.

...