Wo und wie man js in Seiten einfügt

Im Internet gibt es Tausende von Artikeln darüber, wie man externe Skripte mit wp_enqueue_script () einfügt.

Jedenfalls habe ich keine Erklärung gefunden, wie man inline, eingeschlossene Skripte hinzufügt.

Ich benutze, um sie in der Mitte des Seitencodes hinzuzufügen, aber ich nehme an, es ist nicht der eleganteste Weg und es sollte einen besseren Weg geben, so dass der Skript-Code automatisch in den Kopf oder die Fußzeile verschoben wird.

Irgendwelche Ideen?

Edit: Ich habe das ‘ringsherum vergessen, also wurde es abgebrochen. Jetzt sollte meine Frage klarer sein

Solutions Collecting From Web of "Wo und wie man js in Seiten einfügt"

Obwohl mrwweb korrekt ist und diese Technik verwendet werden sollte, ist in Wirklichkeit nichts perfekt und es gibt Zeiten, in denen Inline-Skripte und -Stile verwendet werden. Sie können wp script is , um nach einem Skript zu wp_head und es in der Kopf- oder Fußzeile mit wp_head oder wp_footer .

Sie können sich auf die Antwort von scribu in diesem Beitrag beziehen, wp reiht Inline-Skripte aufgrund von Abhängigkeiten ein

Ich schaue mir jetzt den Quellcode von Twenty Seventeen functions.php und hinterließ ein Muster, um script (oder irgendetwas anderes) in das Dokument mit Priorität einzufügen, das hier mit einer benannten function dargestellt wird:

 function add_inline_script() { echo "\n"; } add_action( 'wp_head', 'add_inline_script', 0 ); 

Dies kann beispielsweise der Fall sein, wenn Sie ein async Skript wie das alternative asynchrone Google Analytics- Tracking-Snippet laden, um nicht blockierende Skriptanforderungen zu starten, sobald das Dokument analysiert wird (wenn es über Blockierungsanfragen platziert wird) ).

Neben async , modernen Browsern können wir auch Async-Abhängigkeiten mit der Fetch-API verwalten , die es einem ermöglicht, externe Abhängigkeiten asynchron parallel zu laden, ohne eine Race-Bedingung zu riskieren.

Das folgende Bild und das folgende Beispiel veranschaulichen die Verwendung dieser Technik, um die Ladezeit von Seiten zu reduzieren, indem Skripts geladen werden, ohne das Twenty Eleven-Design mit Fetch Inject zu blockieren :

Laden von Zwanzig Siebzehn mit Fetch Injection Abbildung 1: Twenty Seventeen lazysizes plus lazysizes laden asynchron parallel.

Piggyback bei einer Frage zur String-Interpolation . Verwenden Sie es, während Sie willkürliche Inhaltsblöcke mit echo auf die Seite mit NOWDOC oder HEREDOC und global Zuweisungen und String-Interpolation mit Fetch Inject, wie hier gezeigt, löschen:

 /** * Load scripts using Fetch Inject instead of wp_enqueue_script * for for faster page loads and lower perceived latency. * * @since WordCamp Ubud 2017 * @link https://wordpress.stackexchange.com/a/263733/117731 * @link https://github.com/jhabdas/fetch-inject * */ function add_inline_script() { $twentyseventeen_l10n = array( 'quote' => twentyseventeen_get_svg( array( 'icon' => 'quote-right' ) ), 'expand' => __( 'Expand child menu', 'twentyseventeen' ), 'collapse' => __( 'Collapse child menu', 'twentyseventeen' ), 'icon' => twentyseventeen_get_svg( array( 'icon' => 'angle-down', 'fallback' => true ) ) ); $jquery_script_path = '/wp-includes/js/jquery/jquery.js?ver=1.12.4'; $jquery_dependent_script_paths = [ get_theme_file_uri( '/assets/js/global.js' ), get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ), get_theme_file_uri( '/assets/js/skip-link-focus-fix.js' ), get_theme_file_uri( '/assets/js/navigation.js' ) ]; $lazysizes_path = get_theme_file_uri( '/assets/js/lazysizes.min.js' ); $screen_reader_text_object_name = 'twentyseventeenScreenReaderText'; $twentyseventeen_l10n_data_json = json_encode($twentyseventeen_l10n); $jquery_dependent_script_paths_json = json_encode($jquery_dependent_script_paths); $inline_script = < <o.push(window.fetch(e).then(e=>{return[e.clone().text(),e.blob()]}).then(e=>{return Promise.all(e).then(e=>{r.push({text:e[0],blob:e[1]})})}))),Promise.all(o).then(()=>{return r.forEach(t=>{i.push({then:n=>{"text/css"===t.blob.type?e(window,document,"style",t,n):e(window,document,"script",t,n)}})}),Promise.all(i)})};return t}(); fetchInject( $jquery_dependent_script_paths_json , fetchInject([ "{$jquery_script_path}" ])); fetchInject(["{$lazysizes_path}"]) })(); EOD; echo ""; } add_action('wp_head', 'add_inline_script', 0); 

Reduziert die wahrgenommene Latenz bei einem Aktien-Twenty-Seventy-Thema um ~ 50 Prozent. Kann auf jedes Thema angewendet werden.

Wie funktioniert es?

  • Ersetzt alle mit wp_enqueue_script eingereihten wp_enqueue_script sodass sie schneller ausgegeben werden, wenn Fetch Injection verwendet wird. (Hinweis: Weitere Informationen zur Kompatibilität mit älteren Browsern finden Sie in der Dokumentation “Fetch Inject”.)
  • Verwendet HEREDOC, um alles in einem script Tag im head auszugeben.
  • Definiert ein Fenster Global, welches das Thema haben möchte.
  • Lädt alle Skripte parallel asynchron, wie im obigen Bild gezeigt, wartet jedoch darauf, dass jQuery das Laden beendet, bevor die Abhängigkeiten ausgeführt werden (bereits heruntergeladen).
  • Arbeitet in einem IIFE, um zu verhindern, dass freie Variablen in den window .

HEREDOC eignet sich ideal zur Kontrolle der Ausgabe, wenn Sie Copyright-Hinweise oder andere Formatierungen über gemischte Vorlagen verwalten müssen. Es hilft auch, die Skript-Debugging-Geschwindigkeit zu erhöhen, wenn Sie den minimierten Code nicht griffbereit haben oder einfach etwas zu Testzwecken in das Dokument laden möchten.

Wenn Sie sicherstellen möchten, dass Elemente nur einmal hinzugefügt werden, lesen Sie diese Antwort: https://wordpress.stackexchange.com/a/131640/117731

Wenn Sie die Fußzeile anstelle des Kopfes hinzufügen wp_head , können Sie wp_head im Aufruf wp_footer durch wp_head ersetzen.

EDIT: Nach ein wenig mehr Graben fand ich diesen Beitrag auf David Walshs Blog, der vorschlug, dass zumindest ein einfaches Inlining seit mindestens 2012 verfügbar war. Viel Spaß!

wp_enqueue_script() ist der einzige Weg, wie JavaScript zu Ihrer Site hinzugefügt werden sollte. Es ermöglicht Ihnen und anderen Plugins, Abhängigkeiten zu deklarieren und sogar Skripte bei Bedarf zu entfernen. Wie in einem anderen Thread heute erwähnt, können Caching-Plugins Ihre Skripte nicht gzipen oder minimieren, wenn Sie nicht die richtige WordPress-Technik verwenden.

Wenn Sie sich die Codex-Seite ansehen, sehen Sie, dass Sie steuern können, ob sich das Skript in der Kopf- oder Fußzeile befindet.