So fügen Sie benutzerdefiniertes JavaScript zu WordPress hinzu (3 Methoden)
Eine der besten Möglichkeiten, die Front-End-Funktionalität Ihrer Website zu verbessern, ist das Hinzufügen von benutzerdefiniertem WordPress-JavaScript. Es kann jedoch schwierig sein, herauszufinden, wie das geht, insbesondere wenn Sie es gewohnt sind, mit dem Customizer zu arbeiten, um benutzerdefiniertes CSS einzufügen.
Glücklicherweise können Sie ein paar verschiedene Strategien anwenden, je nachdem, wie viel Erfahrung Sie haben und was Sie erreichen möchten. Sobald Sie wissen, welche Optionen Sie haben, können Sie die benutzerdefinierte JavaScript-Lösung auswählen, die für Sie am sinnvollsten ist.
In diesem Beitrag führen wir Sie durch drei Methoden, mit denen Sie benutzerdefiniertes JavaScript zu Ihrer WordPress-Site hinzufügen können, und diskutieren die Vor- und Nachteile jeder Option. Hier sind die drei Methoden, die wir behandeln werden – Sie können klicken, um direkt zu einer bestimmten Methode zu springen:
- Verwenden Sie das Kopf- und Fußzeilen-Code-Plugin (die einfachste Option für technisch nicht versierte Benutzer)
- Code zur Datei functions.php hinzufügen
- Code zum Header hinzufügen (mit der Funktion wp_enqueue_script oder dem Hook wp_head)
Lass uns einsteigen!
1. Installieren Sie ein Plugin wie Head & Footer Code
Die Verwendung eines Plugins ist eine der einfachsten Möglichkeiten, benutzerdefiniertes WordPress-JavaScript zu Ihrer Website hinzuzufügen. Head & Footer Code ist zum Beispiel ein gutes Werkzeug:
Mit diesem kostenlosen Plug-in können Sie Code auf vielfältige Weise einfügen. Sie können es für Facebook Pixel, Google Analytics, benutzerdefiniertes CSS und mehr verwenden.
Um zu beginnen, fügen Sie das Plugin zu Ihrer Website hinzu, indem Sie zu navigieren Plugins → Neu hinzufügen aus Ihrem Admin-Dashboard und suchen Sie dann nach „Kopf- und Fußzeilencode“.
Sobald Sie auf die klicken Jetzt installieren und aktivieren Sie Schaltflächen finden Sie die Einstellungen des Plugins, indem Sie zu gehen Extras → Kopf- und Fußzeilencode. Auf diesem Bildschirm gibt es drei Felder für die Kopf-, Fuß- und Textbereiche:
Sie können Ihr benutzerdefiniertes WordPress-JavaScript in eines dieser Felder eingeben. Wenn Sie fertig sind, wählen Sie die aus Änderungen speichern Schaltfläche am unteren Rand des Bildschirms. Der Code wird dann auf jeder Seite Ihrer Website geladen.
Vor- und Nachteile der Verwendung eines Plugins
Der Hauptvorteil der Verwendung eines Plugins besteht darin, dass es sich um eine anfängerfreundliche Option handelt. Sie müssen sich keine Gedanken über die Bearbeitung der Dateien Ihres Designs machen. Das Kopf- und Fußzeilen-Code-Plugin könnte auch nützlich sein, wenn Sie nach einer nahtlosen Möglichkeit suchen, andere Arten von Code und benutzerdefiniertes CSS hinzuzufügen.
Der Nachteil dieser Methode ist jedoch, dass sie die Installation eines Plugins eines Drittanbieters beinhaltet, was einige Websitebesitzer zu vermeiden versuchen. Wenn Sie Ihre Erweiterungen auf ein Minimum beschränken möchten, ist es möglicherweise besser, eine der anderen Methoden zu verwenden. Darüber hinaus ist das Plugin eher für seitenweite JavaScript-Änderungen als für bestimmte Seiten oder Beiträge konzipiert.
2. Verwenden Sie Ihre Datei functions.php
Eine weitere Methode zum Hinzufügen von benutzerdefiniertem WordPress-JavaScript zu Ihrer Website ist die Nutzung der integrierten Funktionen und Hooks zum Bearbeiten der Funktionen.php Datei. Bei diesem Ansatz werden die Skripts manuell auf Ihren Server hochgeladen.
Bevor Sie beginnen, empfehlen wir, ein untergeordnetes Thema zu erstellen. Dieser Schritt hilft sicherzustellen, dass Sie das übergeordnete Design weiterhin sicher aktualisieren können. Sie sollten auch ein Backup Ihrer Website erstellen, falls etwas schief geht.
Diese Methode beinhaltet die Verwendung von IS_PAGE Funktion. Sie können bedingte Logik hinzufügen, um Ihr benutzerdefiniertes JavaScript auf einen einzelnen Beitrag oder eine einzelne Seite anzuwenden.
Um zu beginnen, suchen und öffnen Sie Ihre Funktionen.php Datei, kopieren Sie dann das folgende Code-Snippet und fügen Sie es ein:
function ti_custom_javascript() {
?>
<script>
// your javscript code goes here
</script>
<?php
}
add_action('wp_head', 'ti_custom_javascript');Dieser Code fügt JavaScript zu Ihrem Header hinzu. Um es auf einen einzelnen Beitrag anzuwenden, können Sie Folgendes verwenden:
function ti_custom_javascript() {
if (is_single ('3')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'ti_custom_javascript');Beachten Sie, dass Sie die ersetzen müssen 3 im obigen Beispiel mit der Postleitzahl, zu der Sie den Code hinzufügen möchten. Um diese Nummer zu finden, navigieren Sie in Ihrem Admin-Dashboard zu dem Beitrag und klicken Sie dann auf Bearbeiten. In der URL der Browserleiste ist die ID-Nummer die Zahl neben „post=“:
Speichern Sie Ihre Datei, sobald Sie die ID-Nummer ersetzt haben, und fügen Sie Ihr benutzerdefiniertes JavaScript zum gekennzeichneten Bereich hinzu. Sie können diesen Vorgang auch für eine einzelne WordPress-Seite wiederholen.
Vor- und Nachteile der Bearbeitung Ihrer functions.php-Datei
Ein Vorteil der Bearbeitung Ihrer Funktionen.php Datei ist, dass Sie kein weiteres Plugin installieren müssen. Sie können diese Technik auch verwenden, um sowohl Ihrem Design als auch WordPress selbst Features und Funktionen hinzuzufügen. Diese Methode kann beispielsweise JavaScript in einen einzelnen Beitrag oder eine Seite oder alle Seiten einfügen.
Der einzige Nachteil dieser Methode besteht darin, dass Sie mit Code arbeiten und die Dateien Ihrer Website bearbeiten müssen. Daher ist es möglicherweise nicht die beste Option, wenn Sie in dieser Abteilung keine Erfahrung haben.
Es gibt eine Möglichkeit, benutzerdefiniertes WordPress-JavaScript hinzuzufügen, indem Sie die <script> Tag direkt in Ihre header.php Datei. Diese Methode wird jedoch nicht empfohlen. Es kann die Ladereihenfolge von WordPress stören und Konflikte mit anderen Themes und Plugins verursachen.
Wenn Sie benutzerdefiniertes JavaScript über die Kopfzeile Ihrer Website zu allen Ihren Seiten hinzufügen möchten, gibt es zwei Möglichkeiten, dies zu tun. Sie können die bearbeiten Funktionen.php Datei und verwenden Sie die wp_enqueue_script Funktion, die eine generische Funktion erstellt. Alternativ können Sie die verwenden wp_head Aktionshaken.
Schauen wir uns beide Optionen an…
Fügen Sie mithilfe der Funktion wp_enqueue_script JavaScript zu Ihrem Header hinzu
Zunächst sollten Sie Ihre benutzerdefinierte JavaScript-Datei in das Verzeichnis Ihrer Vorlage hochladen. Sie können dies über einen FTP-Client (File Transfer Protocol) oder einen Dateimanager tun.
Navigieren Sie zum Vorlagenordner Ihrer Website (wp_content → Themen → [yourtheme]). Wählen Sie dann aus Hochladen:
Notieren Sie sich den genauen Dateipfad dieser Datei. Zum Beispiel sollte es so etwas wie „
Als nächstes suchen und öffnen Sie Ihre Funktionen.php Datei, kopieren Sie dann das folgende Code-Snippet und fügen Sie es ein:
function ti_custom_javascript() {
wp_enqueue_script( 'example-script', get_template_directory_uri() . '/js/examplescript.js');
}
add_action('wp_enqueue_scripts', 'ti_custom_javascript');Stellen Sie sicher, dass Sie die Vorlagen-URL durch Ihre eigene ersetzen. Speichern Sie abschließend Ihre Datei.
Fügen Sie benutzerdefiniertes JavaScript mit dem wp_head-Hook hinzu
Sie können auch die verwenden wp_head Aktionshaken um benutzerdefiniertes JavaScript per Inline-Skript zu Ihrem Header hinzuzufügen. Auch diese Methode ist nicht vorzuziehen, da sie zu viele Skripts erstellen kann. Es ist jedoch besser, als die Skripte direkt in Ihre einzufügen header.php Datei.
Diese Methode, die Sie auch für die Fußzeile verwenden können, verwendet die Aktionshaken, um Ihrer Website Inline-Skripte hinzuzufügen. Während wp_enqueue_script Funktion stellt benutzerdefinierte Skripte in die Warteschlange, die wp_head Ansatz druckt die Skripte in Ihrer Kopfzeilenvorlage (und Fußzeile, wenn Sie die verwenden wp_footer Haken).
Navigieren Sie zunächst zu Ihrer Funktionen.php Datei, kopieren Sie dann Folgendes und fügen Sie es ein:
function ti_custom_javascript() {
?>
<script>
// your javascript code goes here
</script>
<?php
}
add_action('wp_head', 'ti_custom_javascript');Notiere dass der wp_head Hook wird nur am Frontend Ihrer Website ausgelöst. Das bedeutet, dass benutzerdefiniertes JavaScript, das Sie mit dieser Methode hinzufügen, nicht im Admin- oder Anmeldebereich angezeigt wird. Wenn Sie diesen Bereichen jedoch JavaScript hinzufügen möchten, können Sie die verwenden admin_head und login_head Aktionshaken bzw.
Vor- und Nachteile des Hinzufügens von JavaScript zu Ihrem Header
Die wp_enqueue_script Die Funktion wird von Entwicklern bevorzugt, da sie Konflikte verhindert, die mit anderen Optionen entstehen können, wie z. B. dem direkten Hinzufügen von Skripten zu Ihrer header.php Datei. Außerdem werden mit dieser Methode keine abhängigen Skripts erstellt.
Das Hauptproblem beim Hinzufügen von benutzerdefiniertem WordPress-JavaScript zum Header Ihrer Website besteht darin, dass es Probleme mit anderen Plugins verursachen kann, die ihre eigenen Skripte laden. Dieses Setup kann auch dazu führen, dass mehrere Skripts mehr als einmal geladen werden, was die Gesamtgeschwindigkeit und Leistung Ihrer Website beeinträchtigen kann.
Beginnen Sie mit benutzerdefiniertem WordPress-JavaScript
Standardmäßig lässt WordPress Sie keine JavaScript-Codeschnipsel in Ihre Seiten und Beiträge einfügen. Glücklicherweise können einige Go-Arounds Ihr benutzerdefiniertes WordPress-JavaScript hinzufügen, ohne Ihre Website zu beschädigen. Die beste Methode hängt davon ab, wie gut Sie mit der Bearbeitung Ihrer Site-Dateien vertraut sind und wo Sie die Skripte anwenden möchten.
Wie wir in diesem Beitrag besprochen haben, gibt es drei Möglichkeiten, wie Sie benutzerdefiniertes WordPress-JavaScript zu Ihrer Website hinzufügen können:
- Installieren Sie ein Plugin wie Head & Footer Code.
- Benutze Dein Funktionen.php -Datei, um benutzerdefiniertes JavaScript zu einer einzelnen Seite oder einem einzelnen Beitrag hinzuzufügen.
- Fügen Sie JavaScript zu Ihrem Header hinzu, indem Sie entweder die wp_enqueue_script Funktion bzw wp_head Haken.
Jetzt, da Sie wissen, wie man benutzerdefiniertes JavaScript zu WordPress hinzufügt, interessiert Sie vielleicht unsere andere Anleitung zum Hinzufügen von benutzerdefiniertem CSS zu WordPress.
