Die effektivste Methode zum Hinzufügen von Inline-Skripten in WordPress

Veröffentlicht: 2022-06-16

The Most Effective Method for Adding Inline Scripts in WordPress

Inline-Skripte sind zwei einfache Wörter, die Entwicklern Schauer über den Rücken jagen. Inline-Skripte sind eine einfache Möglichkeit, JavaScript (JS), CSS und HTML in den Text Ihres WordPress-Beitrags einzufügen. Während sie für viele Zwecke verwendet werden können, besteht eine allgemeine Verwendung darin, Änderungen im Handumdrehen vorzunehmen, wenn Sie einen neuen WordPress-Artikel veröffentlichen. Einige mögen argumentieren, dass dies nicht notwendig ist, aber dadurch wird sichergestellt, dass Ihre Website reibungslos und effizient läuft.

Eine Sache, die die meisten WordPress-Benutzer übersehen, ist das Ergänzen von Skripten auf ihren Websites. Egal, ob Sie einen Inline-Text auf einer einzelnen Seite oder auf Ihrer gesamten Website implementieren möchten, es gibt viele Möglichkeiten, dies mit WordPress zu erreichen. Das Hinzufügen von Inline-Skripten zu Ihrer WordPress-Website kann so einfach sein, wenn Sie die richtigen Methoden verstehen, um es richtig zu machen. In diesem Blogbeitrag werden die effektivsten Möglichkeiten zum einfachen Hinzufügen von Inline-Skripten in WordPress erörtert. Lesen Sie weiter, um mehr zu erfahren.

Hinzufügen über Wp_print_scripts

Wenn Sie WordPress-Inline-Texte hinzufügen möchten, dann ist die WordPress-Funktion wp_print_scripts oder/und admin_print_scripts Ihre Antwort. Die wp_print_scripts von WordPress können Text-Tags im Kopf eines Dokuments anzeigen, was normalerweise beim Einbinden von JS- oder CSS-Dateien geschieht. Mit dieser WordPress-Funktion können Sie Ihre Website interaktiver gestalten oder neue Funktionen hinzufügen. Wie bei jeder WordPress-Funktion gibt es einige einfache Regeln, die Sie befolgen müssen, bevor Sie sie auf Ihrer Website verwenden.

Diese Funktion richtet drei Variablen basierend auf den Optionen des WordPress-Plugins ein und gibt sie mithilfe des Hooks admin_print_scripts am Frontend (dem Head-Bereich) aus. Um die Inline-Zeichen zum Admin-Bereich hinzuzufügen, können Sie auch wp_print_scripts durch die Funktion admin_print_scripts ersetzen und damit Schluss machen.

Wenn WordPress zum ersten Mal installiert wird, enthält es viele Texte, die automatisch zur Website hinzugefügt werden. Dies kann zu einer Erhöhung der Ladezeit und der CPU-Auslastung auf Ihrem Server führen. Eine Möglichkeit, dem entgegenzuwirken, ist die Verwendung der Funktion wp_print_scripts, sodass Sie Texte nur dann laden, wenn sie benötigt oder gewünscht werden. Lassen Sie uns einen kurzen Blick auf einige Vor- und Nachteile der Verwendung der wp_print_script-Funktion werfen, um Inline-Zeichen in Ihren WordPress-Beitrag einzufügen:

Vorteile:

  • Es ist immer einfach, beliebigen Inline-Text zum „Head-Bereich“ von Seiten von WordPress hinzuzufügen;
  • Der Code, den Sie hinzufügen, hat keine Einschränkungen, was bedeutet, dass Sie JS-Variablen, Funktionen, Methoden, Bedingungen oder alles, was Sie Ihrer Website hinzufügen möchten, hinzufügen können.

Nachteile:

  • Es gibt keine spezielle Möglichkeit, Ihren hinzugefügten Code mit registrierten Skripts zu verknüpfen;
  • In den meisten Fällen ist der Ausgabecode für verschiedene Faktoren möglicherweise keine echte und konsistente Möglichkeit, die Position des Ausgabecodes zu steuern. Sie können jedoch immer den Parameter <priority> unter <add_action> verwenden, um den Speicherort Ihres hinzugefügten Codes zu steuern.

Verwenden Sie die Funktion wp_add_inline_script()

Vor kurzem hat WordPress eine neue Funktion eingeführt, die angewendet wird, um Inline-JavaScript zu WordPress-Beiträgen hinzuzufügen. Diese neue Integration ist jedoch ab der WordPress-Version 4.5 kompatibel und bietet im Vergleich zu anderen verfügbaren Optionen eine prominentere Möglichkeit, Inline-Texte hinzuzufügen. Wir definieren die Funktion wp_add_inline_script() und Sie erwarten, dass sie die Arbeit fehlerfrei erledigt. Selbst der erfahrenste WordPress-Entwickler da draußen kann diese Tatsache bestätigen.

Die Funktion wp_add_inline_script() ist eine Möglichkeit, Ihrer Website Inline-Zeichen hinzuzufügen, ohne Code auf der WordPress-Seite zu bearbeiten. Auf diese Weise können Sie Änderungen in Echtzeit vornehmen, ohne einen FTP-Zugriff zu benötigen oder ein Plugin verwenden zu müssen. Diese Funktion ist auch eine der wesentlichen Integrationen, mit denen Sie Ihre WordPress-Site anpassen können. Mit diesem Verfahren können Sie Inline-Texte in den Code Ihrer Website einfügen, was bedeutet, dass sie direkt in die HTML-Tags auf Ihrer Webseite eingefügt werden. Dies ermöglicht viel mehr Anpassungsmöglichkeiten als die Verwendung externer JS-Dateien oder Links zu anderen Websites.

Vorteile:

  • Die Funktion wp_add_inline_script() ist eine wertvolle Möglichkeit, Ihrem WordPress-Blog Inline-Zeichen hinzuzufügen;
  • Es kann eine einfache und bequeme Möglichkeit für Entwickler sein, JS-Code hinzuzufügen, ohne das WordPress-Design oder die Plugin-Dateien zu ändern oder die Vorlagendatei header.php zu bearbeiten;
  • Dies kann nützlich sein, um Skripte wie Google Analytics-Code hinzuzufügen. Es erspart Ihnen, die header.php-Datei jedes Mal zu bearbeiten, wenn es ein Update mit Google Analytics-Funktionen oder -Einstellungen gibt.

Nachteile:

  • Der einzige Nachteil der Funktion wp_add_inline_script() ist, dass sie erst ab der WordPress-Version 4.5 verfügbar ist.

Verwenden Sie die Funktion wp_localize_script()

Die Funktion wp_localize_script() ist ein hilfreiches WordPress-Dienstprogramm, um Inline-Zeichen zu einzelnen Seiten Ihrer WordPress-Website hinzuzufügen. Es ist perfekt, wenn Sie schnelle und vorübergehende Funktionen auf Ihren Websites benötigen, z. B. für eine Veranstaltung oder Werbeaktion. Diese Funktion akzeptiert eine variable Anzahl von Argumenten und gibt eine Liste von JS-Strings aus, die dem Kopf des Dokuments hinzugefügt werden. Dies kann hilfreich sein, wenn Sie beispielsweise jQuery verwenden und den Code des Skripts nur auf bestimmten Seiten verwenden möchten.

Wp_localize_script() stellt Ihre JS-Datei in die Warteschlange und gibt ihr eine ID/Handle von „shapeSpace_script“, die ein assoziatives Array definiert, das Ihre Variablen enthält. Zuletzt werden diese JS-Variablen an wp_localize_script() übergeben, um inline mit registriertem shapeSpace_script eingefügt zu werden. Dadurch können Sie beliebige JS-Variablen wie unter anderem shapeSpace.varl anwenden. Diese Funktion dient der Lokalisierung von JS-Variablen zur Verwendung bei der Sprachübersetzung und Internationalisierung. Die meisten WordPress-Entwickler verwenden es jedoch als gängige Methode, um Inline-Zeichen zu ihren Websites hinzuzufügen.

Vorteile:

  • Wp_localize_script() aktiviert die „read:require“-Verknüpfung mit Ihrem bestehenden registrierten Skript. Dies bedeutet, dass es eine hervorragende und konsistente Möglichkeit bietet, die relative Position der benutzerdefinierten Textausgabe Ihrer Website zu steuern.

Nachteile:

  • Der einzige Nachteil ist, dass Sie nur JS-Variablen hinzufügen können ( var = 'value' ). Daher ist es unmöglich, andere Inline-Skripte wie Funktionen, Bedingungen, Gleichungen usw. mit wp_localize_script() hinzuzufügen.

Fallback verwenden

Wie bereits erwähnt, sind bestimmte Methoden wie wp_add_inline_script() erst ab der WordPress-Version 4.5 oder höher verfügbar. Wenn Sie jedoch alles zusammenfügen, können Sie eine ausfallsichere Methode zum Hinzufügen von Inline-Zeichen zu Ihren WordPress-Dateien entwickeln, unabhängig davon, welche WordPress-Version Sie verwenden. Der effektivste Weg, dies zu tun, ist über drei Funktionen im Head-Bereich (Frontend) des Post-Plugins.

Als Erstes müssen Sie Ihre JS-Datei in die Warteschlange stellen und die folgende Funktion aufrufen, um Inline-Zeilen über die Funktion wp_add_inline_script() hinzuzufügen. Die dritte Funktion ist der Fallback auf alles, was älter als die Version 4.5 ist. Dies funktioniert zweifellos mit WordPress 4.5 und jeder anderen Version. Hier geschieht die wahre Magie. Sie können mit der Fallback-Methode fortfahren, die Ihre Arbeit auf der WordPress-Variante Ihrer Wahl erledigt, die auf 2.1 oder was auch immer zurückgeht.

Vorteile:

  • Sie können mehrere JS-Dateien auf Ihrer Website haben, ohne zusätzliche HTTP-Anforderungen hinzuzufügen, um sie gleichzeitig zu laden. Dies bedeutet, dass Sie die Ladezeit für Ihre Website-Besucher verkürzen können.
  • Wenn ein Skript fehlschlägt, funktionieren andere Skripts innerhalb derselben Fallback-Funktionalität weiterhin, da sie aufgrund ihrer Abhängigkeit voneinander asynchron von verschiedenen Threads geladen werden.

Nachteile:

  • Wenn das Skript fehlschlägt, sieht der Benutzer in einigen Fällen anstelle des Codes ein Leerzeichen. Das scheint keine so große Sache zu sein, aber es ist eine wichtige Sache, die man als WordPress-Entwickler beachten sollte.

Eine Zusammenfassung zum Hinzufügen von Inline-Skripten in WordPress

Die Einschränkung der Ihnen zur Verfügung stehenden alternativen Techniken macht die Funktion wp_add_inline_script() zur überlegenen Methode zum Hinzufügen von WordPress-Inline-Zeichen. Dies gilt heutzutage als die effektivste Lösung, und entgegen der landläufigen Meinung kann diese Funktion auf jeder Version von WordPress verwendet werden, wenn Sie die Fallback-Technik verwenden. Zu Ihrer Information finden Sie unten eine kurze Zusammenfassung der effektivsten Möglichkeiten zum Hinzufügen von Inline-Skripten im WordPress-Kern:

    • wp_add_inline_script() ermöglicht es Ihnen, jedem registrierten Skript beliebigen JS-Code hinzuzufügen;
    • Mit wp_print_scripts oder admin_print_scripts können Sie beliebigen Code im Front-End- oder Header-Bereich installieren;
  • Mit wp_localize_script() können Sie außerdem jedem registrierten Skript JS-Variablen hinzufügen;
  • Mit Fallback können Sie eine vollständige Technik entwickeln, die mit jeder Version von WordPress funktioniert.

Hinweis: Wenn Sie Inline-Stil/CSS anstelle von JavaScript hinzufügen möchten, bietet Ihnen WordPress eine Reihe von „Stil hinzufügen“-Funktionen, die denen ähneln, die zum Hinzufügen von Skripten verwendet werden. Schauen Sie sich zum Beispiel wp_print_styles und wp_add_inline_styles an.

Fazit

Inline-Skripte sind eine schnelle und einfache Möglichkeit, Ihrer WordPress-Website Funktionen hinzuzufügen. Indem Sie das Skript in JavaScript schreiben, können Sie ein Inline-Skript erstellen, das alles tut, was Sie auf der Seite tun möchten, ohne dass zusätzliche Plugins oder Code erforderlich sind. Dieses Tutorial beschreibt die effektivsten Methoden zum Hinzufügen von Inline-Skripten in WordPress.

Sind Sie ein WordPress-Editor mit etwas Erfahrung beim Hinzufügen von Skripten zu WP-Sites? Welche Methode würden Sie einem unerfahrenen Entwickler empfehlen, der seine Arbeit schnell erledigen möchte? Bitte zögern Sie nicht, den Kommentarbereich zu nutzen, um Ihre Meinung zu teilen und beunruhigende Fragen zu stellen.

Biografie des Autors:

Arthur ist Spezialist für digitales Marketing und Business-Blogger. Er entwickelt interessante Startups über verschiedene soziale Medien und teilt seine Erfahrungen mit Kunden, um ihr Geschäft besser zu fördern. In seiner Freizeit studiert Arthur Japanisch und schreibt Artikel über Trends der digitalen Transformation.