JavaScript für WordPress

Als WordPress-Benutzer haben Sie sich vielleicht gelegentlich gewünscht, Sie könnten Ihre Seiten oder Beiträge über das hinaus optimieren, was Ihr Thema zulässt, ohne es zu beschädigen. Vielleicht wollten Sie Ihrer Website beispielsweise ein interaktives Element hinzufügen, aber WordPress entfernt Ihre Codierung, wenn Sie Ihre Änderungen speichern.

Da das direkte Einfügen von Code in eine Seite oder einen Beitrag nicht gerade einfach ist, kann dies eine frustrierende Hürde sein. Es gibt jedoch einen Weg, es zu überwinden. JavaScript kann innerhalb der WordPress-Plattform verwendet werden, um dynamische Elemente zu Seiten und Beiträgen oder auf Ihrer gesamten Website hinzuzufügen.

In diesem Artikel werfen wir einen Blick auf JavaScript, was es ist und wie Sie es verwenden können, um Ihre digitalen Erfahrungen mit WordPress zu verbessern. Wir sehen uns auch mehrere Plugins an, mit denen Sie JavaScript auf Ihrer Website implementieren können. Sammeln Sie all Ihre fantastischen Website-Ideen und legen Sie los!

Was ist JavaScript?

JavaScript ist eine der beliebtesten Programmiersprachen. Es kann einer Website eine Ebene dynamischer Funktionalität hinzufügen. Während die Grundelemente der meisten Websites mit HTML und CSS zusammengestellt werden, bietet JavaScript eine ganze Reihe ansprechender Optionen für die Party. Dies kann alles umfassen, von einem interaktiven Taschenrechner bis hin zu einem Echtzeit-Informations-Feed.

Einer der Vorteile von JavaScript ist, dass es normalerweise als clientseitige Programmierung bereitgestellt wird. Das bedeutet, dass das Skript vom Browser des Besuchers ausgeführt wird, während er die Seite betrachtet. Sobald HTML und CSS bereitgestellt und die Struktur der Seite erstellt haben, kann JavaScript über den anderen Elementen ausgeführt werden, um ein dynamisches Ziel zu erreichen.

Was macht JavaScript?

Wir wissen jetzt also, dass JavaScript in erster Linie ein clientseitiges Programmierelement ist, das das vorhandene HTML und CSS einer Website ändern kann. Aber was kann es noch? Es gibt mehrere nützliche Dinge, für die Sie JavaScript verwenden können, darunter:

• Ausführen von Ereignissen auf einer Webseite
• Formularvalidierung, bei der Sie Werte in Variablen speichern müssen
• APIs von Drittanbietern, die auf Seiten oder Beiträgen platziert werden können

Da JavaScript vom Browser des Benutzers ausgeführt wird, kann es auch Daten von diesem Browser sammeln. Dies ist unerlässlich, wenn es darum geht, schnelle und effiziente Websites zu erstellen, die Bilder schnell laden und gut auf mobile Geräte reagieren.

Wann sollten Sie JavaScript zu WordPress hinzufügen?

Das Hinzufügen von JavaScript ist praktisch, wenn Sie Ihrer WordPress-Seite ein Element hinzufügen möchten, das sonst Ihren Server bei der Bereitstellung blockieren würde. Dies kann komplexe Funktionen wie Audio- oder Videoplayer umfassen. Wenn Sie viele Anwendungen von Drittanbietern verwenden, müssen Sie Ihrer Website möglicherweise ein Stück JavaScript hinzufügen, damit sie funktionieren.

Da JavaScript in eine HTML-Seite geschrieben wird, entscheidet der Browser des Benutzers, was damit geschehen soll. Während JavaScript also serverseitig verwendet werden kann, liegt seine eigentliche Superkraft in der clientseitigen Implementierung.

Einige andere Möglichkeiten für die JavaScript-Implementierung umfassen ereignisbasierte Aktionen. Dies ist der Fall, wenn Sie als Reaktion auf die Aktionen eines Benutzers, wie z. B. Mausklicks oder eine Fenstergröße, auf Ihrer Website etwas tun müssen.

6 Top-JavaScript-WordPress-Plugins

Nachdem wir nun die Grundlagen dessen behandelt haben, was JavaScript zu bieten hat, werfen wir einen Blick auf einige WordPress-Plugins, die Ihnen helfen können, Skripte sicher auf Ihrer Website bereitzustellen. Im Folgenden werden wir sechs Plugins für WordPress überprüfen, die eine Vielzahl verschiedener Optionen und Funktionen bieten.

1. Kopf- und Fußzeilen einfügen

Dieses WordPress-Plugin beschreibt sich selbst als die einfachste Möglichkeit, Code zu Ihrer WordPress-Site hinzuzufügen. Kopf- und Fußzeilen einfügen wird Ihnen von WPBeginner zur Verfügung gestellt und kann Ihnen dabei helfen, APIs von Drittanbietern von Social-Media-Plattformen und mehr zu integrieren. All dies ist möglich, ohne dass Sie Ihr WordPress-Theme direkt bearbeiten müssen.

Hauptmerkmale:

• Bietet eine einfache Schnittstelle für das Bearbeiten und Einfügen von Kopf- oder Fußzeilenskripts aus einer Hand
• Ermöglicht Ihnen, zwischen dem Einfügen von JS-Code in die Kopf- oder Fußzeile zu wählen
• Ermöglicht das Hinzufügen von Google Analytics zu jedem Design
• Ermöglicht die Arbeit mit mehreren Arten von Code, einschließlich HTML, CSS und JavaScript

Preis: Dies ist ein kostenloses Plugin.

2. Einfaches benutzerdefiniertes CSS und JS

Das Simple Custom CSS- und JS-Plugin ist praktisch als Entwicklertool und am effektivsten, wenn es auf die Pro-Version aktualisiert wird. Es konzentriert sich hauptsächlich auf Änderungen am Erscheinungsbild Ihrer Website. Darüber hinaus können Sie benutzerdefiniertes CSS und benutzerdefiniertes JavaScript hinzufügen, ohne Ihr WordPress-Design oder Ihre Plugin-Dateien zu ändern. Mit der Möglichkeit, Codeänderungen auf bestimmte Seiten oder URLs anzuwenden, können Sie Elemente testen, bevor Sie sie live schalten.

Hauptmerkmale:

• Enthält einen Texteditor mit Syntaxhervorhebung
• Hiermit können Sie Ihren Code inline oder in einer separaten Datei ausdrucken
• Aktiviert die Codeplatzierung in der Kopf- oder Fußzeile der Website
• Ermöglicht das Hinzufügen beliebig vieler Codes zum Frontend oder zu den Admin-Seiten
• Behält Ihre Änderungen bei, wenn Sie Ihr Design ändern

Preis: Dieses Plugin ist eine kostenlose Option.

3. SOGO-Kopfzeile Fußzeile

SOGO Header Footer eignet sich hervorragend, um die API-Funktionalität von Drittanbietern zu nutzen. Sie können JavaScript zu Kopf- und Fußzeilen auf Seiten hinzufügen, die einen Google-Remarketing-Code enthalten, um nur ein Beispiel zu nennen. Denken Sie nur daran, dass Sie möglicherweise eine Pro-Version kaufen müssen, um Anzeigen zu entfernen oder auf Premium-Optionen zuzugreifen.

Hauptmerkmale:

• Beinhaltet Unterstützung für WooCommerce-Shopseiten
• Ermöglicht es Ihnen, JS-Code auf alle Seiten und Beiträge anzuwenden oder bestimmte festzulegen
• Ist mit Gutenberg kompatibel
• Unterstützt Begriffs- und Kategorieseiten

Preis: Es gibt eine kostenlose Version und eine Premium-Version ab 7,90 $.

4. Skripte zur Fußzeile

Dieses leistungsstarke WordPress-Plugin verschiebt Ihre wichtigen Skripte in die Fußzeile Ihrer Website. Möglicherweise möchten Sie dies tun, um die Ladezeiten zu verkürzen oder Engpässe beim Laden von Bildern zu beseitigen, wenn Ihr Design viele Skripte ausführt. Es sollte beachtet werden, dass Scripts to Footer nur funktioniert, wenn Sie Plugins und ein Theme haben, das wp_enqueue_scripts korrekt verwendet.

Hauptmerkmale:

• Ermöglicht es Ihnen, die Funktionen des Plugins auf bestimmten Seiten und Beiträgen direkt über die Metabox des Beitrags-/Seitenbearbeitungsbildschirms zu deaktivieren
• Ermöglicht das Deaktivieren des Plugins auf bestimmten Archivseiten über die Einstellungsseite
• Ermöglicht die Auswahl der Skripte, die im Header der Website beibehalten werden sollen

Preis: Dieses Plugin ist 100 % kostenlos.

5. CSS- und JavaScript-Toolbox

Als nächstes bietet CSS & JavaScript Toolbox eine Dashboard-Option zum Verwalten aller Codes und Snippets Ihrer Website. Diese Toolbox ist ein leistungsstarkes Tool für Entwickler, die viel Kontrolle über ihren Code haben möchten. Mit dieser Toolbox können Sie Codeblöcke für die Verwendung auf Ihrer Website erstellen. Sie können CSS-, JavaScript-, HTML- und PHP-Code hinzufügen und verwalten, der für Ihre Codeblöcke einzigartig ist, und sie praktisch überall hinzufügen.

Hauptmerkmale:

• Ermöglicht das Hinzufügen von CSS, JavaScript, PHP und HTML zu Seiten, Beiträgen, benutzerdefinierten Beitragstypen, Tags, Kategorien, URLs und mehr
• Ermöglicht das Hinzufügen von Front-End-Stilen, ohne Ihre Designdateien zu ändern
• Beseitigt die Notwendigkeit für überflüssige benutzerdefinierte Plugins oder Hacks, um Funktionen hinzuzufügen
• Hilft Ihnen, Skripte von Drittanbietern für Werbung und Besucherverfolgung oder Social-Media-Kanäle hinzuzufügen
• Ermöglicht die Vermeidung der Verwendung von FTP und die Verwaltung aller Code-Ergänzungen und -Änderungen in Ihrem Dashboard

Preis: Sie können das kostenlose Plugin ausprobieren oder eine Premium-Version für 29 $ erwerben.

6. Skripte und Stile

Schließlich können Sie mit Scripts n Styles benutzerdefiniertes CSS und JavaScript direkt in einzelne Beiträge, Seiten oder andere registrierte benutzerdefinierte Beitragstypen einfügen. Im JavaScript-Bereich verfügt dieses Plugin auch über einige integrierte Sicherheitsfunktionen. Dies ist hilfreich, wenn Sie viele Hände an Ihrer WordPress-Site haben.

Hauptmerkmale:

• Ermöglicht das Hinzufügen von Klassen zum Body-Tag und Post-Container
• Ermöglicht es Ihnen, über eine Seite mit globalen Einstellungen Skripts für die gesamte Website zu erstellen
• Fügt dem Dropdown-Menü TinyMCE-Formate neue Klassen hinzu, um Posts und Seiten direkt zu gestalten
• Bietet die Option, die Verwendung auf bestimmte Benutzertypen zu beschränken

Preis: Für die Verwendung dieses Plugins fallen keine Kosten an.

Einfaches Hinzufügen von JavaScript in WordPress (in 2 Schritten)

Eine der einfachsten Möglichkeiten, JavaScript auf der gesamten Website einzubinden, besteht darin, den Code über ein Plugin in Ihre Kopf- oder Fußzeile einzufügen. Schauen wir uns am Beispiel Kopf- und Fußzeilen einfügen an, wie das funktioniert.

Schritt 1: Installieren und aktivieren Sie das Plugin

Der erste Schritt besteht darin, einfach auf der Registerkarte „Plugin “ Ihrer Website nach dem Plugin zu suchen und es dann zu installieren.

Sobald Sie dies getan haben, sehen Sie eine Schaltfläche Aktivieren . Ihr Plugin ist erst dann voll funktionsfähig, wenn Sie den Vorgang durch Aktivierung abschließen.

Schritt 2: Fügen Sie JavaScript-Code in Ihre Kopf- oder Fußzeile ein

Sobald das Plugin aktiviert ist, finden Sie in Ihrem WordPress-Dashboard unter Ihrem Einstellungsmenü ein neues Element mit der Bezeichnung Kopf- und Fußzeilen einfügen .

Hier können Sie alle Skripts hinzufügen, die Sie entweder in der Kopfzeile, in der Fußzeile oder in beiden ausführen möchten. Dazu gehören Optimierungen an Ihrem Design, die Integration mit APIs von Drittanbietern und CSS-Änderungen.

So einfach ist das! Vergessen Sie nicht, Ihre Änderungen zu speichern, wenn Sie fertig sind, und das Plugin lädt automatisch Ihren JavaScript-Code an den entsprechenden Stellen.

Erfahren Sie mehr Entwicklertricks mit WP Engine

Das Erstellen einzigartiger und benutzerdefinierter Änderungen an Ihrer WordPress-Site mit JavaScript kann zunächst einschüchternd wirken. Sobald Sie jedoch wissen, wie Sie diese wichtige Programmiersprache erfolgreich implementieren, haben Sie die volle Kontrolle über Ihre Themen und Integrationen.

Als Eigentümer oder Entwickler einer WordPress-Website machen hochwertige Ressourcen den Unterschied in Ihrer Arbeit. Bei WP Engine haben wir Pläne und Lösungen für jedes Budget. Wir sind hier, um Ihnen die besten WordPress-Lösungen anzubieten und Ihnen dabei zu helfen, Ihre Websites an neue Grenzen zu bringen!