So fügen Sie Javascript (Dateien oder Skripte) hinzu, ohne Ihre WordPress-Site zu beschädigen (functions.php, template oder plugin)

Fügen Sie Javascript zu WordPress hinzu

Es gibt in der Regel viele Gründe, warum Sie Javascript zu WordPress hinzufügen möchten, entweder eine kleine Optimierung einer Funktion oder vielleicht möchten Sie ein Skript von Drittanbietern hinzufügen. Betrachtenless aus dem Grund, warum Sie es tun möchten, möchten Sie sicherstellen, dass Sie nichts falsch machen - denn Sie könnten Ihre Website ruinieren.

Es gibt eine gute Möglichkeit, Javascript zu WordPress hinzuzufügen. Und dann gibt es die schlechten Wege, die entweder Ihre Website beschädigen oder sich negativ auf die Leistung auswirken können.

In diesem Artikel werden verschiedene Möglichkeiten zum Hinzufügen von Javascript-Code zu Websites vorgeschlagen und welche unter den verschiedenen Umständen verwendet werden sollten.

 

 

WordPress ist so erweiterbar, dass Sie Ihrer Website auf einfache Weise neue Features und Funktionen hinzufügen können, ohne Ihr gesamtes Thema neu gestalten oder ersetzen zu müssen. Anstatt das WordPress-Theme von Grund auf neu zu erstellen, können Sie die Funktionalität durch einfaches Hinzufügen von Plugins hinzufügen.

Und wenn die Funktionalität, die Sie hinzufügen möchten, eher klein ist und Sie kein Plugin erstellen oder installieren müssen, können Sie das verwenden functions.php Datei oder verschiedene andere Möglichkeiten, um Javascript zu WordPress hinzuzufügen, ohne ein separates Plugin erstellen zu müssen.

(Spezielle Notiz: Suchen Sie nach einer Liste von Optimierungen / Tricks, die Sie problemlos auf Ihrer WordPress-Site vornehmen können, ohne ein Plugin zu verwenden? Sie können unseren Leitfaden hier beziehen: 101 WordPress-Tricks, die jeder ernsthafte Blogger kennen muss.)

Das Beste, was über die Funktionsdatei ist, dass es sich wie ein Plugin verhält, mit dem Funktionen hinzugefügt und die Funktionalität sowohl des Themas als auch von WordPress selbst erweitert werden können.

Obwohl Sie leicht hinzufügen können Javascript-Code direkt zu Ihrem header.php Dateigibt es ein Problem mit dieser Methode.

Es kann tatsächlich zu Konflikten mit anderen Plugins führen, wenn diese ihre eigenen JS-Skripte laden.

In diesem Artikel von CollectiveRay, werfen wir einen Blick auf den richtigen Weg, um Javascript zu WordPress-Themes hinzuzufügen. Als WordPress-Entwickler ist dies eines der Dinge, die wir sehr oft tun müssen.

Wenn Sie nicht sicher sind, den Code selbst zu optimieren, sollten Sie sich diesen Artikel ansehen, um zu erfahren, wie Sie den besten WordPress-Entwickler für Ihr Unternehmen finden: https://www.collectiveray.com/wordpress-developers-for-hire, oder sehen Sie sich die folgenden günstigen Entwicklungsoptionen an. 

Wenn Sie sich nicht sicher sind, ob dies für Sie richtig ist und was Sie schnell erledigen können, schauen Sie sich einige Fiverr-Gigs an, die dies schnell für Sie erledigen können

fiverr-Logo

Klicken Sie hier, um günstige Experten für WordPress-Fixes zu finden

 

So fügen Sie WordPress JavaScript hinzu

Es gibt mehrere Möglichkeiten, Ihrer WordPress-Site benutzerdefinierten Javascript-Code hinzuzufügen, von denen jede ihre eigenen Verwendungszwecke hat:

  1. Fügen Sie das Skript einer bestimmten oder einzelnen Seite Ihrer Wahl oder mehreren Seiten mit functions.php hinzu
  2. Fügen Sie ausgewählten Seiten mithilfe von Plugins wie Kopf- und Fußzeilen ein Skript hinzu
  3. Fügen Sie Ihrem Theme-Header eine Javascript-Datei hinzu

1. Verwenden von functions.php

Einzelne Seite oder Post

Diese Code-Optimierung verwendet die Funktionen Datei in Ihrem Vorlagenordner, um eine JS-Datei Ihrer Wahl nur einer einzelnen Seite Ihrer Wahl hinzuzufügen.

Dies verwendet die IS_PAGE-Funktion, die Sie hier finden: https://developer.wordpress.org/themes/basics/conditional-tags/. Sie können verschiedene andere Optionen verwenden, wenn Sie das Skript nur unter bestimmten Bedingungen hinzufügen möchten, z.

  • is_single(),
  • is_front_page(),
  • is_home,
  • is_admin usw. 

Wenn Sie es vorziehen, ein Video auf YouTube zu sehen, wie das geht, ist dieses kurze Video ziemlich gut, wie man Javascript zu einer einzelnen Seite hinzufügt:

Fw6VDOZYqrM

Wir haben detaillierte Anweisungen auf der Seite. Sobald Sie das Video gesehen haben, können Sie diesen Artikel als Referenz verwenden.

Wenn Sie die Datei zu allen Seiten hinzufügen müssen, scrollen Sie weiter, um unten weitere Alternativen zu dieser Methode zu finden.

  • Zunächst müssen Sie die ID der Seite identifizieren, zu der Sie das Skript hinzufügen möchten. Klicken Sie dazu auf die Seite, zu der Sie die Datei hinzufügen möchten, und klicken Sie auf Bearbeiten und holen Sie sich dann die ID der Seite von der URL, wie Sie unten sehen können. Die ID ist die Nummer in der URL der Browserleiste.
  • WordPress-Seiten-ID

  • Nachdem Sie die ID der Seite haben, müssen Sie die .js-Datei an einen Speicherort hochladen. Wir empfehlen, dass Sie die .js-Datei in Ihren Vorlagenordner hochladen, möglicherweise im untergeordneten Verzeichnis.
  • Sobald Sie das hochgeladen haben, müssen Sie genau das Verzeichnis und den Namen der .JS-Datei notieren, die wir anstelle von PATH_TO_JS_FILE unten verwenden. Als Beispiel könnte sich Ihre Datei in Folgendem befinden: https://www.yourwebsite.com/wp-content/themes/twentynineteen/js/myjsfile.js
  • Notieren Sie sich diese vollständige URL und ersetzen Sie die unten stehende PATH_T_JS_FILE. Sie müssen auch die ID ersetzen, die Sie von oben gefunden haben.
  • Fügen Sie den vollständigen Code unten am Ende des Funktionen Datei Ihrer Vorlage.

Funktion collectiveray_load_js_script() {
  if (is_page (ID)) {
    wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', Array ('jquery'), '', false);
    // oder verwenden Sie die folgende Version, wenn Sie genau wissen, wo sich die Datei befindet
    // wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
  }
}

add_action('wp_enqueue_scripts', 'collectiveray_load_js_script');

Wenn Sie genau wissen, wo Sie die JS-Datei abgelegt haben, können Sie eine geringfügige Variation des wp_enqueue_script verwenden: 

wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');

In diesem Fall ist die Datei /js/mysript.js der Speicherort der Datei, die Sie hinzufügen möchten.

Sobald Sie die Seite neu laden, werden Sie feststellen, dass die Datei hinzugefügt wurde. Sie können dies bestätigen, indem Sie auf Quelle anzeigen der Seite klicken.

Wenn Sie die Javascript-Datei nicht zu einer Seite hinzufügen, sondern zu einer einzelnen Seite hinzufügen möchten, können Sie diese Funktion leicht anpassen, damit sie auf einen einzelnen Beitrag angewendet wird. Sie können eine beliebige Variante der folgenden verwenden:

  • is_single ('17') - verwendet die Post-ID
  • is_single ('Mein Beitragstitel') - verwendet den Titel des Beitrags, um zu überprüfen, ob dies der Beitrag ist, zu dem die Datei hinzugefügt werden soll
  • is_single ('mein-post-titel') - prüft gegen die Schnecke des Pfostens
  • is_single (Array (17, 'Mein Post-Titel', 'Mein Post-Titel')) - Hiermit wird überprüft, ob eine der Bedingungen für die Post-ID "17", für den Slug "My-Post-Title" oder für den Titel "My Post Title" lautet.
  • is_single () - andere Variationen der Funktion is_single, die ein Array von Werten verwenden, gegen die geprüft werden soll

Der Code wäre in diesem Fall der folgende oder eine geringfügige Abweichung in Abhängigkeit von den Parametern der Funktion is_single. 

Funktion collectiveray_load_js_script() {
  if (is_single ('17 ')) {
    wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', Array ('jquery'), '', false);
    // oder verwenden Sie die folgende Version, wenn Sie genau wissen, wo sich die Datei befindet
    // wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
  } 
}

add_action('wp_enqueue_scripts', 'collectiveray_load_js_script');

Wenn Sie den Beitragstitel haben, können Sie diesen anstelle des Parameters "17" verwenden. Auch hier kann das wp_enqueue_script angepasst werden an:

wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');

Fügen Sie allen Seiten Javascript hinzu 

Wie wir gesehen haben, ist die einfachste und sauberste Methode, Ihrem WordPress-Theme eine Javascript-Datei hinzuzufügen, die Verwendung von functions.php Datei mit wp_enqueue_script. In diesem Fall wird anstelle einer Bedingung zum Hinzufügen des Inhalts zu bestimmten Seiten eine generische Funktion hinzugefügt.

Hier ist, wie es geht:

Eroeffne einen functions.php Datei und kopieren Sie das folgende Code-Snippet darauf. Stellen Sie sicher, dass Sie die Vorlagen-URL durch Ihre ersetzen, bevor Sie sie speichern.

Funktion collectiveray_theme_scripts_function() {
  wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
}
add_action('wp_enqueue_scripts','collectiveray_thema_scripts_funktion');

Wenn du bist Verwenden eines untergeordneten Themasmüssen Sie get_stylesheet_directory_uri () anstelle von get_template_directory_uri () verwenden. 

2. Plugins verwenden

Wenn Sie einfach ein Plugin zum Einbetten eines Javascript-Verweises in die Kopf- oder Fußzeilendatei des WordPress-Themas verwenden möchten, ist das Plugin "Kopf- und Fußzeilen einfügen" eine einfache Option.

Wie der Name schon sagt, können Sie den Kopf- und Fußzeilendateien Skripte hinzufügen, indem Sie sich einbinden wp_head . wp_footer Funktionen von WordPress. 

Dieses Plugin ist eine gute Option, da Sie damit jedes Skript hinzufügen können, ohne das Risiko einzugehen, dass etwas kaputt geht. Darüber hinaus müssen Sie keinen Code selbst ändern oder optimieren (wenn Sie dies nicht möchten), wie wir es im vorherigen Beispiel getan haben.

Das direkte Ändern von Code ist normalerweise eine bessere Option für Webdesigner. Die Methode mit diesem Plugin ist einfacher.

Anstatt die Dateien des Themas direkt mit dem benutzerdefinierten Javascript-Code zu ändern, können Sie mit dem Plugin den Code einfügen, der je nach den von Ihnen ausgewählten Optionen in die Kopf- oder Fußzeile Ihrer Site eingefügt wird. 

Dieses Plugin unterstützt zwei Optionen:

  1. Hinzufügen des Pfads zu einer bestimmten Javascript-Datei, die Sie hochladen
  2. Direktes Hinzufügen des Skripts (z. B. für Analytics oder andere Skripte von Drittanbietern)

Lass uns anfangen: 

Sie können nur dann  download Kopf- und Fußzeilen einfügen  hier.

Installieren Sie das Plugin:

  • Melden Sie sich beim Backend oder Administrator Ihrer Site an.
  • Gehen Sie zu Plugins> Neu hinzufügen
  • Suchen Sie nach dem Plugin "Kopf- und Fußzeilen" und klicken Sie auf Jetzt installieren.
  • Klicken Sie nach der Installation auf Aktivieren
Kopf- und Fußzeilen
Abhängig von Ihrem Szenario müssen Sie jetzt Option 1 oder 2 folgen. Um beispielsweise Google Analytics hinzuzufügen, müssen Sie Option 2 folgen.

Option 1: Laden Sie eine benutzerdefinierte Javascript-Datei hoch

  • Zunächst müssen Sie die Datei für die Aufnahme vorbereiten
  • Speichern Sie Ihren JavaScript-Code oder Ihre JavaScript-Datei in einer neuen Testdatei mit dem . Js Verlängerung.
  • Laden Sie es in Ihre Site in den folgenden Ordner hoch: wp-content / theme / / js /
  • Gehen Sie zu Einstellungen> Kopf- und Fußzeilen einfügen.

Wir haben jetzt einige Möglichkeiten, unsere Datei zu laden:

  1. Skripte im Header (innen laden Etikett)
  2. Skripte in der Fußzeile (vor dem Schließen laden Etikett)

Verwenden Sie den Ort, der Ihren spezifischen Anforderungen am besten entspricht, am Beispiel. Beachten Sie, dass muss in den Namen des Verzeichnisses des von Ihnen verwendeten Themas geändert werden, z. B. XNUMX

/js/file.js">
 
Skript in den Kopf einfügen
  • Klicken Sie auf die Schaltfläche "Speichern", um den Vorgang abzuschließen und zu speichern.

Option 2: Laden Sie ein benutzerdefiniertes Skript ohne Datei

Die zweite Option, die Sie mit diesem Plugin verwenden können, ist die Option, den Code direkt in WordPress hinzuzufügen, ohne eine bestimmte Datei verwenden zu müssen.

Dies kann verwendet werden, wenn Sie einen Dienst eines Drittanbieters wie Google Analytics, Drip oder ein anderes Tool verwenden, für das ein Skript zu Ihrer Website hinzugefügt werden muss. Nehmen Sie einfach das Skript und legen Sie es in der ab Skripte im Header Fenster:

Skript / Code direkt hinzufügen
 
Klicken Sie erneut auf "Speichern", um den Vorgang abzuschließen.

 

Laden Sie das Front-End neu und überprüfen Sie die Quelle Ihrer Website, um sicherzustellen, dass der Code jetzt angezeigt wird. Es ist auch eine gute Idee, ein paar Seiten zu durchsuchen, um zu bestätigen, dass alles noch gut funktioniert.

 

Auch wenn dies ziemlich einfach erscheint, liegt es möglicherweise außerhalb Ihrer Komfortzone. Wenn Sie dies also schnell erledigen möchten, sehen Sie sich einige an Entwickler auf Fiverr, der das für Sie erledigen kann.

fiverr-Logo

Klicken Sie hier, um günstige Experten für WordPress-Fixes zu finden

 

Wenn Sie diesen Tipp nützlich fanden, können Sie weitere unserer WordPress-Tipps im entsprechenden Menü oben auf der Seite lesen.

3. Fügen Sie Ihrem Theme-Header JavaScript hinzu

In bestimmten Fällen möchten Sie möglicherweise, dass die JavaScript-Datei auf Ihrer gesamten Website verwendet wird, möchten jedoch kein Plugin verwenden, um dies zu tun.

Wenn Sie beispielsweise allen Ihren Seiten ein Skript eines Drittanbieters hinzufügen möchten (z. B. das Skript instantpage.js, um Ihre Website schneller zu machen), können Sie das Skript einfügen oder die Skriptdatei, auf die verwiesen wird, in das Verzeichnis einfügen head Ihrer header.php Vorlagendatei. 

DAS IST NICHT IDEAL. Wenn Sie Ihr Thema aktualisieren, können diese Änderungen verloren gehen. Wenn Sie dies dennoch direkt tun möchten, wird dringend empfohlen, ein untergeordnetes Thema zu erstellen.

In diesem Szenario, in dem dieses Skript überall hinzugefügt werden soll, können Sie die Datei gemäß den folgenden Anweisungen direkt zur Vorlage hinzufügen:

Dieser Aufruf der Datei (oder des Skripts) sollte zwischen den Meta-Tags und dem Stylesheet-Link hinzugefügt werden. Dies ist genau das Gleiche, als würden Sie Javascript-Code in eine HTML-Seite einfügen. 

Um die Javascript-Datei zu Ihrer Site hinzuzufügen, klicken Sie auf headverwenden Sie den folgenden Code:


Stellen Sie sicher, dass Sie die definiert haben type richtig, sonst ist Ihre Seite nicht gültig. Stellen Sie außerdem sicher, dass das Verzeichnis / die Skripte im Thema vorhanden sind und Sie die Datei myscript.js hinzugefügt haben.

Sie können dann einen beliebigen Verweis auf Funktionen hinzufügen, die in der Datei verwendet werden, die Sie gerade zum HTML hinzugefügt haben, wo Sie sie verwenden müssen. 

Dies ist beispielsweise ein Beispiel für die Verwendung der gerade hinzugefügten Funktion.

" >Überschrift geht hier

 

Laden Sie die Liste der 101 WordPress-Tricks herunter, die jeder Blogger kennen sollte

101 WordPress-Tricks

Klicken Sie hier, um jetzt herunterzuladen
 

Häufig gestellte Fragen

Wie füge ich eine Javascript-Datei zu WordPress hinzu?

Der einfachste Weg, eine Javascript-Datei zu WordPress hinzuzufügen, ist das Plugin zum Einfügen von Kopf- und Fußzeilen. 

  • Melden Sie sich bei Ihrer Site an und installieren Sie das Plugin für Kopf- und Fußzeilen.
  • Klicken Sie nach der Installation auf Aktivieren
  • Speichern Sie Ihren JavaScript-Code oder Ihre JavaScript-Datei in einer neuen Datei mit dem . Js Verlängerung.
  • Laden Sie es in Ihre Site in den folgenden Ordner hoch: wp-content / theme / / js /
  • Gehen Sie zu Einstellungen> Kopf- und Fußzeilen einfügen.
  • Fügen Sie den Skripten in der Kopfzeile Folgendes hinzu:  <script src="https://www.website.com/wp-content/themes/<theme-you-are-using>/js/file.js"></script>

 

Kann ich Javascript in WordPress verwenden?

Ja, es gibt viele Möglichkeiten, Javascript in WordPress zu verwenden. Wenn Sie ein einfaches Skript hinzufügen möchten, können Sie das Plugin zum Einfügen von Kopf- und Fußzeilen verwenden, um das Skript zum Header hinzuzufügen, und dann das Skript von einem beliebigen Teil des Themas, Posts oder Plugins aus aufrufen, von dem aus Sie es verwenden möchten.

Wie füge ich meinen eigenen Code zu WordPress hinzu?

Der beste Weg, um Ihren eigenen Code zu WordPress hinzuzufügen, ist über die Datei functions.php. Es wird empfohlen, dass Sie ein untergeordnetes Thema erstellen und dann Ihre eigenen Änderungen am untergeordneten Thema hinzufügen, damit die Aktualisierbarkeit Ihres Themas nicht beeinträchtigt wird.

Wie bearbeite ich Javascript in WordPress?

Der beste Weg, um Javascript in WordPress zu bearbeiten, besteht darin, ein untergeordnetes Thema zu erstellen und dann Ihre Änderungen an Javascript hinzuzufügen oder andere Funktionen im untergeordneten Thema anzupassen. Auf diese Weise können Sie Javascript nach Bedarf bearbeiten, ohne den Rest Ihres Themas oder die Aktualisierbarkeit des Themas zu beeinträchtigen.

Fazit

Die oben genannten drei Methoden sind der sauberste Weg, um Javascript zu WordPress hinzuzufügen. Im Allgemeinen sollten fortgeschrittene Benutzer, die über umfangreiche Codeerfahrung verfügen und sicher sein können, dass sie wissen, wie sie vorgenommene Änderungen rückgängig machen können, den Code direkt optimieren. Ansonsten ist es am besten, sich an Plugins zu halten. Wenn Sie den Code nicht selbst optimieren möchten, können Sie sich gerne an unsere Partner auf Fiverr wenden, die ihn für Sie heute erledigen können

fiverr-Logo

Klicken Sie hier, um günstige Experten für WordPress-Fixes zu finden

 

Über den Autor
David Attard
Autor: David AttardWebsite: https://www.linkedin.com/in/dattard/
David arbeitet seit 18 Jahren in oder um die Online- / Digitalbranche. Er verfügt über umfangreiche Erfahrung in der Software- und Webdesignbranche mit WordPress, Joomla und den sie umgebenden Nischen. Als digitaler Berater konzentriert er sich darauf, Unternehmen durch die Kombination ihrer Website und der heute verfügbaren digitalen Plattformen einen Wettbewerbsvorteil zu verschaffen.

Eine Sache noch... Wussten Sie, dass Leute, die nützliche Dinge wie diesen Beitrag teilen, auch FANTASTISCH aussehen? ;-);
Bitte kontaktieren Sie uns, wenn lass a nützlich Kommentieren Sie mit Ihren Gedanken und teilen Sie dies dann Ihren Facebook-Gruppen mit, die dies nützlich finden würden, und lassen Sie uns gemeinsam die Vorteile nutzen. Vielen Dank für das Teilen und nett zu sein!

Disclosure: Diese Seite enthält möglicherweise Links zu externen Websites für Produkte, die wir lieben und von ganzem Herzen empfehlen. Wenn Sie Produkte kaufen, die wir vorschlagen, können wir eine Empfehlungsgebühr verdienen. Solche Gebühren haben keinen Einfluss auf unsere Empfehlungen und wir akzeptieren keine Zahlungen für positive Bewertungen.

Autor (en) Empfohlen am:  Inc Magazin Logo   Sitepoint-Logo   CSS Tricks Logo    Webdesignerdepot-Logo   WPMU DEV Logo   und viele mehr ...