it-swarm.com.de

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 den header.php meiner 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)

68
naugtur

Verwenden Sie wp_enqueue_script() in Ihrem Thema

Die grundlegende Antwort ist die Verwendung von wp_enqueue_script() in einem wp_enqueue_scripts-Hook für das Front-End admin_enqueue_scripts für den Administrator. Es könnte ungefähr so ​​aussehen (dies setzt voraus, dass Sie aus der functions.php-Datei 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 einbeziehen. Sortierbar aus der Liste der in WordPress enthaltenen Standardskripteund, von denen Ihr Skript abhängen soll. Ganz einfach, fügen Sie nur die ersten beiden Skripte ein Verwenden Sie die vordefinierten Handles in WordPress und stellen Sie für Ihr Skript einen dritten Parameter für wp_enqueue_script() bereit. Dabei handelt es sich um ein Array der von jedem Skript verwendeten Skripthandles.

<?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 Funktion plugins_url(), 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 above unserem Plugin eine Versionsnummer gegeben und als 4. Parameter an wp_enqueue_script() übergeben wurde. 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 die Version geändert wird.

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

Die 1. Regel der Webleistung) sagt zu HTTP-Anforderungen minimieren . Sie sollten die Skripte daher nach Möglichkeit so beschränken, dass sie nur dort geladen werden, wo sie benötigt werden. Wenn Sie beispielsweise Ihr Skript nur im Administratormodus benötigen, beschränken Sie es auf admin Seiten, die stattdessen den Hook admin_enqueue_scripts verwenden:

<?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 eines der Skripte sind, die in die Fußzeile geladen werden müssen, gibt es einen 5. Parameter von wp_enqueue_script(), der WordPress anweist, es zu verzögern und in die Fußzeile einzufügen (vorausgesetzt, Ihr Thema hat sich nicht schlecht benommen und es ist tatsächlich ruft den wp_footer auf) Haken wie alle guten 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 als diese benötigen Ozh hat einen großartigen Artikel mit dem Titel Gewusst wie: Laden Sie Javascript mit Ihrem WordPress-Plugin das detailliertere Informationen enthält.

Deaktivieren von Skripten, um die Kontrolle zu erlangen

Justin Tadlock hat einen netten Artikel mit dem Titel So deaktivieren Sie Skripte und Stile für den Fall, dass Sie Folgendes möchten:

  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 für das Hinzufügen von JavaScript-Code zu WordPress-Plugins , in dem er die Verwendung von wp_localize_script() beschreibt, damit Sie den Wert von Variablen auf Ihrer Serverseite PHP auf _ setzen können später in Ihrem clientseitigen Javascript verwendet werden.

Wirklich feinkörnige Steuerung mit wp_print_scripts()

Und schließlich können Sie, wenn Sie wirklich feinkörnige Kontrolle benötigen, wp_print_scripts() untersuchen, wie in Beer Planet in einem Beitrag mit dem Titel Wie man CSS und JavaScript bedingt und nur dann einbindet, wenn dies von den Beiträgen 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.

78
MikeSchinkel

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, sucht 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.

11
t31os

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 WordPress 4.5 und weitere Funktionen 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önnten dann wp_add_inline_script verwenden, um dieses Skript in Ihrer Haupt-JS-Datei zu speichern (sagen wir mainjs):

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

Meine bevorzugte Methode ist es, eine gute Leistung zu erzielen. Anstatt wp_enqueue_script zu verwenden, verwende ich HEREDOC 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 fügen Sie sie dann 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:

 enter image description here 

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

0
Josh Habdas