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 600.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]

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 häufigsten verwendete JavaScript-Framework ist, zeigen wir Ihnen, wie Sie es zu einem WordPress-Theme oder -Plugin hinzufügen.

Aber vorher, wenn Sie WordPress Discover noch nie installiert haben Wie man ein Wordpress-Blog 7 Schritte für die Installation 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.

Finden Sie heraus, ob 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 * / $ ('. Hideable'). On ('click', function () {$ (this) .hide ();}) / * Kompatibilitätsmodus * / jQuery ('. Hideable'). ('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 in die Kopfzeile einfü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.

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]

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

jQuery (document) .ready (function ($) {$ () es ( 'Klick', function () {$ (this) .Hide () 'ausblendbar ..';})});

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 können Sie es machen:

my_theme_scripts function () {wp_enqueue_script ( 'mein Ur-Skript', 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. Zum einen können Sie damit das Skript festlegen, zum anderen den Speicherort der Skriptdatei und zum anderen 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 der Abhängigkeitsliste hinzufügen, damit WordPress weiß, welche Dateien zuerst geladen werden sollen.

entdecken Sie auch JavaScript auf Wordpress zu laden

Der vierte Parameter ist eine Versionsnummer und der fünfte Parameter ermöglicht es WordPress zu wissen, wo das Skript abgelegt werden soll. Standardmäßig werden Skripte in den Header geladen, was keine gute Vorgehensweise ist, da dies das Laden Ihrer Website-Seite verlangsamt (Browser beenden das Laden der Seite jedes Mal, wenn ein <script> -Block auftritt). 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, verwenden Sie einfach 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_scriptsund das wars!

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]

Die Verwendung von bedingten Tags

Verwenden Sie bedingte Tags, um Ihre Skripte nur bei Bedarf zu 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 kürzere 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 WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip Ihres Blogs oder Ihrer Website zu optimieren.

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

1. Interaktive Weltkarten

Interactive World Maps ist ein WordPress-Plugin, mit dem Sie beliebig viele Karten mit interaktiven und farbenfrohen Markierungen, Kontinenten, Ländern oder Regionen erstellen können.

Es ist voll kompatibel mit der neuen Version von WordPress und erhebliche 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.

Download | Demo | Web-Hosting

2. AJAX-Kontaktformular mit Tracking

Mit diesem WordPress-Plugin können Sie ganz einfach Kontakt- oder Kommentarformulare zu Ihrem WordPress-Blog hinzufügen. Es wird mit einem Einstellungsmanager geliefert, auf den direkt über das WordPress-Dashboard zugegriffen werden kann.wp-Ajax-Kontakt-form-Tracking-plugin-Wordpress-to-Sicherheit

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

Download | 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 Hauptfunktionen sind: einfache und schnelle Integration, IPN-Integration, Aktivierung / Deaktivierung des PayPal-Gateways in einzelnen Formularen, Unterstützung für regelmäßige Zahlungen usw.

Download | Demo |Web-Hosting

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]

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.

Fazit

Das war's Das war's für dieses Tutorial. Ich hoffe, dass Sie jetzt wissen, wie man ein Skript in WordPress hinzufügt. Zögern Sie 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.

...

Dieser Artikel enthält 1 Kommentar

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