So fügen Sie externes CSS oder Javascript zu Ihrer WordPress-Website hinzu

Es ist ein bisschen schwierig zu bestimmen, wie man externes CSS oder Javascript zu WordPress hinzufügt, wenn Sie nur ein Anfänger WP-Benutzer sind. Bevor wir also einige Anweisungen zum Hinzufügen von externem CSS / Javascript zu Ihrer Website geben, möchte ich die beiden Hauptbereiche erläutern, in denen Sie möglicherweise externes CSS verwenden müssen:

1) Website-Anpassungen

Die Verwendung von externem CSS und Javascript ist eine gute Wahl für die Anpassung Ihrer Website, da Sie den Code einfach verwalten, bearbeiten und die Dateien und / oder Codes aufbewahren können. Wir müssen diese Anpassungen jedoch in zwei Haupttypen aufteilen – Mini-Anpassungen und größere Anpassungen. Ich werde später auf diese Typen zurückkommen und erklären, welche Möglichkeiten zum Hinzufügen von CSS / JS-Codes für verschiedene Situationen besser sind.

2) Integrationen von Diensten von Drittanbietern

Wie wir alle wissen, bieten einige der Dienste CSS- und JS-Dateien an, die zu Ihrer Website hinzugefügt werden müssen, z. B. Formulardienste, Chatboxen, Hinzufügen von Facebook-Pixelcode und sogar Google Analytics. Als Beispiel unterstützen wir Google Analytics und tatsächlich ist der Integrationsprozess in unseren Themenoptionen sehr einfach und unkompliziert, aber wenn Sie verschiedene Analysen und auf andere Weise verfolgen möchten, müssen Sie die externen Codes verwenden, die von Google generiert wurden.

3 Möglichkeiten zum Hinzufügen von externem CSS / JavaScript

Verwenden der Themenoptionen

Wenn Sie andere Codes hinzufügen oder ein schnelles und kleines CSS und Javascript hinzufügen müssen, um Ihre Website anzupassen, sind die Themenoptionen die geeignetere Lösung. Es ist eine integrierte Funktion und über Ihr WordPress-Dashboard leicht zugänglich.

Gehen Sie zum Abschnitt > Themenoptionen > Erweitert > Benutzerdefiniertes CSS oder benutzerdefiniertes JS.

Beachten Sie, dass Sie beim Hinzufügen von externem CSS oder JavaScript in den Designoptionen keinen Code hinzufügen können, der mit <script></script> im Abschnitt Benutzerdefiniertes JS beginnt. Sie müssen das <script></script> in Ihrem Code entfernen, da der Code, den Sie im Abschnitt Custom JS schreiben, bereits mit einem <script></script> -Tag veröffentlicht wird.

VORTEILE:

• Beste Möglichkeit, kleine Dinge mit CSS und Javascript in Jupiter anzupassen
• Beste Möglichkeit, kleine bis mittlere CSS- und Javacscript-Codes in Jupiter hinzuzufügen
• Keine Einrichtung / Installation erforderlich – es ist bereits integriert!

NACHTEILE:

• Schwieriger zu pflegen und zu aktualisieren
• Sie können keine Dateien direkt hinzufügen (.css oder .js-Dateien extern), es sei denn, Sie kennen die AJAX-Codierung.
• Sie können nicht auswählen, ob der Code in wp_header oder wp_footer verschoben werden soll.

Verwendung eines Plugins

Plugins sind unsere treuen Helfer bei der Verwendung von WordPress. Sie können Ihre Codes auch mit einem Plugin wie Kopf- und Fußzeilen einfügen hinzufügen. Es ist eine großartige Möglichkeit, Ihre Codes zu Ihrer Website hinzuzufügen, und es funktioniert genauso wie unsere integrierte Funktion. Das Gute an diesem Plugin ist, dass Sie auswählen können, ob Sie Ihren Code in die Fußzeile oder in den Kopfbereich einfügen möchten, was für einige Integrationen manchmal entscheidend ist.

Im Gegensatz zu unserer integrierten Lösung können Sie <script></script> -Tags im Plugin Kopf- und Fußzeilen einfügen hinzufügen.

PROS:

• Sie können den Codeort auswählen
• Großartige Alternative zu unserer integrierten Lösung
• Schnelle und einfache Möglichkeit, Facebook Pixel oder benutzerdefinierte Google Analytics-Codes hinzuzufügen.
• Gute Möglichkeit für Integrationen von Drittanbietern

NACHTEILE:

• Benötigt Plugin-Installation / Setup
• Schwer zu warten und zu aktualisieren
• Sie können keine Dateien direkt wie unsere integrierte Lösung hinzufügen.

Verwenden des untergeordneten Themas und des Enqueqe-Stils

Wir empfehlen die Verwendung des untergeordneten Themas, wenn Sie einige Anpassungen im mittleren bis großen Bereich vornehmen möchten, da dies der sicherste Weg ist, um Ihre Website anzupassen. Mit dem untergeordneten Thema können Sie Ihre Codes verwalten und Ihre Kernthemendateien problemlos aktualisieren.

Sie können unser offizielles untergeordnetes Thema installieren oder Ihr eigenes erstellen. Sie können dann mit dem Hinzufügen Ihrer CSS-Codes beginnen und Ihre Website sofort im > -Editor anpassen. Wenn Sie jedoch externe CSS-Dateien und Javascripts-Dateien hinzufügen möchten, müssen Sie sie aufrufen und einige Codes in Funktionen schreiben.PHP.

So geht’s:

1. Bereiten Sie Ihre CSS- oder Javascript-Datei vor oder bereiten Sie den Link vor, wenn es sich um eine Remote-Quelle handelt.
2. Erstellen Sie eine Datei mit dem Namen functions.php
3. Fügen Sie den folgenden Code in Funktionen hinzu.php

<?php

Funktion add_theme_codes() {

wp_enqueue_style( ‚Stil‘, get_stylesheet_directory_uri().’/myexternalcode.css‘, ‚alle‘);

}

add_action( ‚wp_enqueue_scripts‘, ‚add_theme_codes‘ );

?>

Mit diesem Code erstellen Sie eine neue Aktion für Ihr Stylesheet und rufen sie aus dem untergeordneten Themenverzeichnis auf. Angenommen, Sie haben einen „Brauch.css“ -Datei, die Ihrer Website hinzugefügt werden muss.

Fügen Sie diese Datei in wp-content / themes /jupiter-child über FTP hinzu und erstellen Sie dann eine Funktion.PHP-Datei. Fügen Sie dann den obigen Code hinzu und ändern Sie den ‚/ myexternalcode.css‘ zu ‚benutzerdefiniert.css‘ oder was auch immer Ihr Dateiname ist. Zuletzt müssen Sie Ihre Funktionen hinzufügen.php zu Ihrem Kind Thema zu.

Hier ist ein weiteres Beispiel, wenn Sie keine Datei haben, aber eine Remote-Quelle hinzugefügt werden muss:

<?php

Funktion add_theme_codes() {

wp_enqueue_style( ‚Stil‘, ‚https://code.jquery.com/jquery-3.2.1.js‘, ‚alle‘);

}

add_action( ‚wp_enqueue_scripts‘, ‚add_theme_codes‘ );

?>

Im obigen Beispiel haben wir get_stylesheet_directory_uri() nicht verwendet, da die Quelldatei remote ist. Sie können auch verschiedene Dateien von Ihrem Server aus aufrufen, indem Sie Links wie die oben genannten verwenden.

VORTEILE:

• Am besten für alle Arten von Anpassungen
• Am besten für Drittanbieter und komplexe Integrationen
• Einfach zu warten und zu bearbeiten
• Sie können lokale oder Remote-Dateien direkt hinzufügen
• Eine der sichersten Methoden für Updates

:

• Benötigt ein wenig Einrichtung
• Erfordert ein wenig Programmierkenntnisse (oder zumindest sollten Sie bereit sein zu lernen)
• Nicht der schnellste Weg für kleine Anpassungen

Welches ist die beste Option für verschiedene Situationen?

Wenn Sie schnelle Änderungen oder Anpassungen vornehmen möchten, sind die Themenoptionen die beste Option für Sie. Wenn Sie jedoch mehr Flexibilität und Kontrolle über Ihren Code und Ihren Code-Speicherort wünschen und dennoch Anpassungen im kleinen bis mittleren Bereich vornehmen möchten, sind Kopf- und Fußzeilen einfügen für Sie geeignet.

Wenn Sie jedoch große Anpassungen, Integrationen von Drittanbietern oder eine wartbare Entwicklungsumgebung vornehmen möchten, ist das untergeordnete Thema die beste Wahl. Wenn Sie weitere Hilfe beim Hinzufügen von externem CSS oder Javascript zu Ihrer Website benötigen, können Sie jederzeit die Hilfe von Artbees Care in Anspruch nehmen.