Was ist die bevorzugte Methode, um der Site benutzerdefinierte Javascript-Dateien hinzuzufügen?

Ich habe meine Skripte bereits hinzugefügt, wollte aber den bevorzugten Weg kennen.
Ich habe gerade ein <script>Tag direkt in header.phpmeine Vorlage eingefügt.

Gibt es eine bevorzugte Methode zum Einfügen von externen oder benutzerdefinierten JS-Dateien?
Wie würde ich eine js-Datei an eine einzelne Seite binden? (Ich habe die Homepage im Auge)

Verwenden Sie wp_enqueue_script()in Ihrem Thema

Die grundlegende Antwort ist die Verwendung wp_enqueue_script()in einem wp_enqueue_scriptsHook für das Front-End admin_enqueue_scriptsfür den Administrator. Es könnte ungefähr so ​​aussehen (was davon ausgeht, dass Sie aus der functions.phpDatei Ihres Themas aufrufen ; beachten Sie, wie ich auf das Stylesheet-Verzeichnis verweise):

<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );

function mysite_enqueue() {
  $ss_url = get_stylesheet_directory_uri();
  wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js" );
}

Das sind die Grundlagen.

Vordefinierte und mehrfach abhängige Skripte

Angenommen, Sie möchten sowohl jQuery als auch jQuery UI Sortable aus der Liste der in WordPress enthaltenen Standardskripte einbeziehen und möchten, dass Ihr Skript davon abhängt. Ganz einfach, fügen Sie die ersten beiden Skripte mit den in WordPress definierten vordefinierten Handles ein und stellen Sie für Ihr Skript einen dritten Parameter bereit, zu wp_enqueue_script()dem ein Array der von jedem Skript verwendeten Handles gehört.

<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );

function mysite_enqueue() {
  $ss_url = get_stylesheet_directory_uri();
  wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js", array( 'jquery', 'jquery-ui-sortable' ) );
}

Skripte in einem Plugin

Was ist, wenn Sie es stattdessen in einem Plugin tun möchten? Verwenden Sie die plugins_url()Funktion, um die URL Ihrer Javascript-Datei anzugeben:

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue' );

function my_plugin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url('/js/my-script.js',__FILE__), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION );
}

Versionierung Ihrer Skripte

Beachten Sie auch, dass wir oben unserem Plugin eine Versionsnummer gegeben und diese als 4. Parameter an übergeben haben wp_enqueue_script(). Die Versionsnummer wird in der Quelle als Abfrageargument in der URL zum Skript ausgegeben und dient dazu, den Browser zum erneuten Herunterladen einer möglicherweise zwischengespeicherten Datei zu zwingen, wenn sich die Version ändert.

Laden Sie Skripte nur auf Seiten, auf denen sie benötigt werden

Die erste Regel der Webleistung besagt, dass HTTP-Anforderungen minimiert werden müssen. Sie sollten daher die Skripten nach Möglichkeit so beschränken, dass sie nur bei Bedarf geladen werden. Wenn Sie beispielsweise Ihr Skript nur im Admin-Bereich benötigen, beschränken Sie es admin_enqueue_scriptsstattdessen mit dem Hook auf Admin-Seiten :

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );

function my_plugin_admin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION );
}

Laden Sie Ihre Skripte in die Fußzeile

Wenn Ihre Skripte zu denjenigen gehören, die in die Fußzeile geladen werden müssen, gibt es einen fünften Parameter wp_enqueue_script(), der WordPress anweist , sie zu verzögern und in die Fußzeile einzufügen (vorausgesetzt, Ihr Thema hat sich nicht schlecht benommen und es ruft tatsächlich den Haken wp_footer wie alle auf gute WordPress Themes sollten ):

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );

function my_plugin_admin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION, true );
}

Feinkörnigere Steuerung

Wenn Sie eine feinkörnigere Steuerung benötigen, dann finden Sie in Ozh einen großartigen Artikel mit dem Titel Gewusst wie: Laden von Javascript mit Ihrem WordPress-Plugin , in dem mehr Details enthalten sind.

Deaktivieren von Skripten zur Erlangung der Kontrolle

Justin Tadlock hat einen schönen Artikel mit dem Titel So deaktivieren Sie Skripte und Stile für den Fall, dass Sie:

1. Kombinieren Sie mehrere Dateien zu einzelnen Dateien (der Kilometerstand kann hier mit JavaScript variieren).
2. Laden Sie die Dateien nur auf den Seiten, auf denen wir das Skript oder den Stil verwenden.
3. Hören Sie auf,! Important in unserer style.css-Datei zu verwenden, um einfache CSS-Anpassungen vorzunehmen.

Übergabe von Werten von PHP an JS mit wp_localize_script()

Auf seinem Blog hat Vladimir Prelovac einen großartigen Artikel mit dem Titel " Best Practice" zum Hinzufügen von JavaScript-Code zu WordPress-Plugins, in dem er erläutert, wp_localize_script()wie Sie den Wert von Variablen in Ihrem serverseitigen PHP festlegen können, um ihn später in Ihrem clientseitigen Javascript zu verwenden.

Wirklich feinkörnige Kontrolle mit wp_print_scripts()

Und schließlich, wenn Sie wirklich feinkörnige Kontrolle benötigen, können Sie nachlesen, wp_print_scripts()wie auf Beer Planet in einem Beitrag mit dem Titel Wie man CSS und JavaScript bedingt und nur dann einbindet, wenn dies von den Posts benötigt wird .

Epiloque

Das war's für Best Practices beim Einbinden von Javascript-Dateien in WordPress. Wenn ich etwas verpasst habe (was ich wahrscheinlich habe), lass es mich in den Kommentaren wissen, damit ich ein Update für zukünftige Reisende hinzufügen kann.

Um Mikes wundervolle Illustration der Verwendung von Enqueues zu ergänzen, möchte ich nur darauf hinweisen, dass Skripte, die als Abhängigkeiten enthalten sind, nicht in die Warteschlange gestellt werden müssen ...

Ich werde das Beispiel unter der Überschrift " Skripte in einem Plugin" in Mikes Antwort verwenden.

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-sortable');
    wp_enqueue_script('my-script',plugins_url('/js/my-script.js',__FILE__),array('jquery','jquery-ui-sortable'),MY_PLUGIN_VERSION);
}

Dies kann zum Lesen verkleinert werden.

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('my-script', plugins_url( '/js/my-script.js', __FILE__ ), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION);
}

Wenn Sie Abhängigkeiten festlegen, findet WordPress diese und stellt sie für Ihr Skript bereit, sodass Sie für diese Skripts keine unabhängigen Aufrufe vornehmen müssen.

Einige von Ihnen fragen sich möglicherweise, ob das Festlegen mehrerer Abhängigkeiten dazu führen kann, dass Skripts in der falschen Reihenfolge ausgegeben werden. Lassen Sie mich hier ein Beispiel geben

wp_enqueue_script( 'first-script', 'example/path/example_script_1.js', array('second-script','third-script') );

Wenn Skript zwei von Skript drei abhängt (dh Skript drei sollte zuerst geladen werden), spielt dies keine Rolle. WordPress ermittelt die Enqueue-Prioritäten für diese Skripte und gibt sie in der richtigen Reihenfolge aus. Kurz gesagt, alles wird automatisch ausgearbeitet für Sie von WordPress.

Für kleine Teile von Skripten, die Sie möglicherweise nicht in eine separate Datei aufnehmen möchten, weil sie beispielsweise dynamisch generiert werden, bietet sich WordPress 4.5 und weitere an wp_add_inline_script. Diese Funktion speichert das Skript grundsätzlich in einem anderen Skript.

Angenommen, Sie entwickeln ein Thema und möchten, dass Ihr Kunde seine eigenen Skripts (wie Google Analytics oder AddThis) über die Optionsseite einfügen kann. Sie können wp_add_inline_scriptdieses Skript dann wie folgt in Ihre Haupt-JS-Datei speichern (sagen wir mal mainjs):

$custom_script = get_option('my-script')
if (!empty($custom_script)) wp_add_inline_script ('mainjs', $custom_script);

Meine bevorzugte Methode ist es, eine gute Leistung zu erzielen. wp_enqueue_scriptDaher verwende ich HEREDOC nicht mit der Fetch-API, um alles asynchron parallel zu laden:

$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' )
];
$jquery_dependent_script_paths_json = json_encode($jquery_dependent_script_paths);
$inline_scripts = <<<EOD
<script>
(function () {
  'use strict';
  if (!window.fetch) return;
  /**
   * Fetch Inject v1.6.8
   * Copyright (c) 2017 Josh Habdas
   * @licence ISC
   */
  var fetchInject=function(){"use strict";const e=function(e,t,n,r,o,i,c){i=t.createElement(n),c=t.getElementsByTagName(n)[0],i.type=r.blob.type,i.appendChild(t.createTextNode(r.text)),i.onload=o(r),c?c.parentNode.insertBefore(i,c):t.head.appendChild(i)},t=function(t,n){if(!t||!Array.isArray(t))return Promise.reject(new Error("`inputs` must be an array"));if(n&&!(n instanceof Promise))return Promise.reject(new Error("`promise` must be a promise"));const r=[],o=n?[].concat(n):[],i=[];return t.forEach(e=>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}"
  ]));
})();
</script>
EOD;

Und dann fügen Sie sie in den Kopf ein, manchmal zusammen mit Stilen wie diesem:

function wc_inline_head() {
  global $inline_scripts;
  echo "{$inline_scripts}";
  global $inline_styles;
  echo "{$inline_styles}";
}

Das Ergebnis ist ein Wasserfall, der wie folgt aussieht: Alles auf einmal laden, aber die Ausführungsreihenfolge kontrollieren:

Hinweis: Dies erfordert die Verwendung der Fetch-API, die nicht in allen Browsern verfügbar ist.