Springe zum Hauptinhalt

JavaScript auf Wordpress zu laden

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 701.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]

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

Jedes WordPress-Theme besteht normalerweise aus PHP-, HTML-, CSS- und JavaScript-Dateien. JavaScript ist eine sehr bekannte Programmiersprache unter WordPress-Theme-Entwicklern. In dieser Sprache wird eine HTML-Seite interaktiv und Sie können auch mit dem Server 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 Kopf- oder Fußzeilendatei Ihres WordPress-Themas einfügen. 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 zur Warteschlange Ihres WordPress-Themas oder des WordPress-Plugins hinzufügen. Hier ist der vollständige Code für ein Skript, 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 WordPress-Plugin enthalten.
  • 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);

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]

 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 (

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]

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

Premium SEO Pack ist ein WordPress-Plugin, das Ihre SEO optimiert und CSS komprimiert, 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

Download | 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.

Download | 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. 

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]

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.

Download | Demo | Web-Hosting

Empfohlene Ressourcen

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

Fazit

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.

...

Dieser Artikel enthält 1 Kommentar

  1. Vielen Dank für die Infos auf dieser Seite:
    <>

    Ich hatte lange Zeit mit pcq zu kämpfen. Ich habe meine JS-Skripte nie in meinem Dashboard gesehen, da das erste Argument von add_action () auf wp und nicht auf admin gesetzt war.

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
13 Aktien
Aktie8
tweet2
Registrieren3