Möchten Sie herausfinden, wie Sie JavaScript in WordPress laden können?

Alle Wordpress-Theme besteht normalerweise aus PHP-, HTML-, CSS- und JavaScript-Dateien. JavaScript ist eine beliebte Programmiersprache unter Entwicklern. Wordpress-Theme. Es ist eine Sprache, die eine HTML-Seite interaktiv macht und es Ihnen auch ermöglichen kann, mit dem Server zu interagieren.

Zu wissen, wie man es auf Ihrer Website verwendet, ist ein großer Vorteil.

Um JavaScript tatsächlich verwenden zu können, müssen Sie wissen, wie es auf Ihrer Website geladen wird.

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.

JavaScript Wordpress laden

Machen wir einen Schritt zurück und werfen einen ersten Blick darauf, wie WordPress Skripte und Stile lädt. Sie haben gelernt, dass Sie beim Erstellen der JavaScript-Dateien diese in der Kopfzeile oder in der Fußzeile zu Ihrer Seite hinzufügen können.

Entdecken Sie auch unser Tutorial auf So komprimieren Sie Ihre CSS-, HTML- und Javascript-Dateien

WordPress macht genau das Gleiche, aber Sie können diese Skript-Tags nicht einfach in die Header-Datei oder Fußzeile Ihres WordPress-Kontos einfügen Wordpress-Theme. WordPress verwendet einen intelligenten Lademechanismus namens „ Einreihen ".

Dieser Mechanismus ist notwendig, um Abhängigkeiten einen Sinn zu geben. Wenn Sie jQuery-Code für Ihr WordPress-Design schreiben, muss zuerst jQuery selbst geladen werden.

Sie schreiben Code, der auf einem jQuery-Plugin basiert. In diesem Fall muss zuerst jQuery geladen werden, dann das jQuery-Plugin und dann Ihr Code.

Skripte "einreihen" (Zur Warteschlange hinzufügen)

Sie können Skripte in Ihrem WordPress-Designordner oder in Ihrer Warteschlange einreihen WordPress Plugin. Hier ist der vollständige Code zum Einfügen eines Skripts, das auf jQuery basiert:

my_theme_scripts of function () {

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

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Zuallererst muss eine Funktion " gehakt Auf WordPress (Mit Haken Wordpress). Das erste Argument der Funktion add_action () teilt WordPress mit, wo diese Skripte platziert werden sollen:

  • Im öffentlichen Raum
  • Auf dem Armaturenbrett

Wenn Sie " wp_enqueue_scripts Sie werden in den öffentlichen Raum geladen, wenn Sie " admin_enqueue_scripts Sie werden im Dashboard geladen.

In der Funktion « add_action Sie können " wp_enqueue_script Zum Hinzufügen der Skripte, die Sie benötigen. Die Funktion akzeptiert einen erforderlichen Parameter und vier optionale Parameter:

  • Der erste Parameter ist der Name Ihres Skripts. Sie können wählen, was Sie möchten, aber achten Sie darauf, einen eindeutigen Namen zu verwenden.
  • Der zweite Parameter sollte den Speicherort der Datei in Ihrem WordPress-Theme oder enthalten WordPress Plugin.
  • Der dritte Parameter enthält ein Array von Abhängigkeiten. Im obigen Beispiel habe ich gesagt, dass jQuery eine Abhängigkeit ist. Alle Abhängigkeiten werden vor dem betreffenden Skript geladen.
  • Der vierte Parameter ist eine Versionsnummer
  • Der fünfte und letzte Parameter gibt an, ob Sie das Skript in die Kopf- oder Fußzeile laden möchten. Verwenden Sie "true", um in die Fußzeile zu laden, oder "false", um das Skript in die Kopfzeile zu laden (Sie können diesen Parameter auch nicht füllen).

Abhängigkeiten

WordPress bietet eine Kopie von jQuery an, weshalb Sie sie problemlos als Abhängigkeit hinzufügen können. Es gibt eine große Anzahl anderer jQuery-Skripte und -Plugins, die WordPress anbietet. Wenn Ihr Code von einer davon abhängt, müssen Sie keine Ihrer Kopien verwenden. Fügen Sie sie einfach als Abhängigkeit hinzu. hier ist ein Liste von Skripten, die Angebote Wordpress.

Wenn Sie mehrere unabhängige Skripte einschließen, können Sie diese auf genau dieselbe Weise als Abhängigkeiten hinzufügen. Schauen Sie sich das folgende Beispiel an:

my_theme_scripts of function () {

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

 wp_enqueue_script ("my-script-extension", get_template_directory_uri (). '/js/my-script-extension.js', array ("my-script-base '),' 1.0.0 ', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Da das erste Skript von jQuery abhängt, hängt auch das nächste Skript davon ab. Sie müssen jQuery also nicht als Abhängigkeit für beide hinzufügen. Dies erleichtert das Abhängigkeitsmanagement.

bedingter Laden

Manchmal möchten Sie Ihr Skript auf jeder Seite verwenden, aber oft möchten Sie ein Skript auf einer bestimmten Seite laden. Dies gilt insbesondere dann, wenn Sie das Hinzufügen von Skripten zum Dashboard in Betracht ziehen. Ein gutes Beispiel ist die Verwendung von Shortcodes. Mit Shortcodes können Benutzer mithilfe einiger einfacher Tricks erweiterte Anzeigen im visuellen Texteditor erstellen.

my_theme_scripts of function () {

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

 wp_enqueue_script ('mein-Skript');

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Wir haben das Skript gespeichert, damit WordPress etwas über das Skript erfährt. enqueue “. Auf diese Weise wird das Skript nur dann zur Seite hinzugefügt, wenn der Shortcode auf dieser Seite verwendet wird.

Eine andere Methode zum Laden von Skripten mit Bedingungen ist die Verwendung von bedingten Funktionen. Wenn Sie ein Skript auf alle Archivseiten der Kategorie laden möchten, können Sie die Funktion verwenden is_category ().

Sie können beispielsweise ein Karussell mit Bildern erstellen, die Benutzer dem Artikel wie folgt hinzufügen können: [Karussell-IDs = '42,124,123,331,90, XNUMX ′]. Auf der Artikelseite wird ein Karussell mit den durch ihre IDs gekennzeichneten Bildern erstellt.

Dazu müssen Sie eine Datei erstellen " carousel.js Welches basiert auf jQuery. Hier ist ein Code, um dorthin zu gelangen (es wird kein Karussell erstellt, aber Sie können sehen, wie der Ladevorgang abläuft):

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

my_theme_scripts of function () {

 wp_register_script ('my-carousel', get_template_directory_uri (). '/js/my-carousel.js', array ('jquery'), '1.0.0', true);

}

add_shortcode ('carousel', 'my_carousel');

my_carousel-Funktion ($ args) {

 $ atts = shortcode_atts (array (

 'Ids' => ",

 ), $ Atts, 'Karussell');

 wp_enqueue_script ('mein Karussell');

 // Code zum Anzeigen des Karussells hier

}

Entfernen und Ersetzen-Skripts

Dies ist bei weitem ein verbreitetes Szenario, aber manchmal müssen Sie möglicherweise ein Skript entfernen oder ersetzen. Ich bin in Situationen geraten, in denen ein Skript von einem Plugin hinzugefügt wurde (aber nicht vom Thema verwendet) verursachte Kompatibilitätsprobleme. "Zurückziehen" war die beste Option, da der Fehler vollständig verschwand.

Sie können jQuery auch durch eine neuere Version ersetzen, wenn Sie etwas testen, um sicherzustellen, dass es mit neueren Versionen kompatibel ist.

In diesen Situationen funktionieren die Funktionen wp_deregister_script () "Und" wp_dequeue_script () Sind nützlich. So bearbeiten Sie Code, der bereits in WordPress hinzugefügt wurde.

my_theme_scripts of function () {

 wp_deregister_script ('jquery');

 wp_enqueue_script ('jquery', get_template_directory_uri (). '/js/jquery3.0.0.js', array (), '3.0.0', true);

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

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

abschließende Gedanken

Diese Methode zum Hochladen auf WordPress ist großartig, da Sie Ihre Skripte modular hinzufügen können. Auf diese Weise können Sie sicherstellen, dass Abhängigkeiten modular hinzugefügt werden.

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. Premium SEO Pack

Premium-SEO-Paket ist ein WordPress Plugin Dies optimiert Ihre SEO und komprimiert CSS, um die Ladegeschwindigkeit Ihrer Website zu verbessern.

Mit dem Plugin können Sie auch das Design Ihrer Website mit wenigen Klicks verwalten. Zu den Funktionen gehören unter anderem: CSS- und JS-Komprimierung, Integration von Video- und Snippet-Sitemaps, Formatierung von HTML- und XML-Dateien, Umleitung von 404- und 301-Seiten, gemeinsame Nutzung in sozialen Netzwerken, Bereitstellung von 'ALT-Label, hochgradig anpassbares Layout

Herunterladen | Demo | Web-Hosting

2. Woocommerce Delivery Time Picker für den Versand

Woocommerce Delivery Time Picker für den Versand ist eine WooCommerce-Erweiterung, mit der Kunden das Lieferdatum und die Lieferzeit auf der Checkout-Seite auswählen können. 

Kunden können die Lieferzeit des Pakets zu Hause auswählen. Die Lieferzeit ist für die Administratoren der Website sichtbar und wird auch per E-Mail an die Administratoren der Website oder des Onlineshops gesendet.

Herunterladen | Demo | Web-Hosting

3. Menü-Held

Mit diesem Plugin können Sie in wenigen Schritten Ihr eigenes WordPress-Menü erstellen. Insbesondere können Sie damit einfach und intuitiv ein elegantes und professionelles WordPress-Menü erstellen. 

Vom komplexesten Mega-Menü voller Funktionen bis zum einfachsten Menü mit Dropdown-Menü, dem WordPress-Plugin HeroMenu richtet jede Art von Menü ein und bringt es in wenigen Minuten zum Laufen.

In punkto Ausstattung bietet es unter anderem: perfekte Bedienung auf PC, Tablet und Smartphone, ab Benutzerdefiniertes CSS Sie können dem Menü eigene Stile hinzufügen, einen Megamenü-Generator und mehrere unterstützte Browser: Chrome, Firefox, Safari, Opera, IE9 und mehr.

Herunterladen | Demo | Web-Hosting

Empfohlene Ressourcen

Schauen Sie sich andere empfohlene Ressourcen an, mit denen Sie andere häufig auftretende WordPress-Fehler beheben können. 

Konklusion

Hier ist ! Das war's für dieses Tutorial. Ich hoffe, es hat Ihnen geholfen zu verstehen, wie man JavaScript auf WordPress lädt. Zögern Sie nicht, es mit Ihren Freunden auf Ihrem zu teilen soziale Netzwerke bevorzugt. 

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.

...