Was ist die bevorzugte Methode zum hinzufügen von benutzerdefinierten javascript-Dateien auf der Webseite?

https://wordpress.stackexchange.com/questions/556

16-10-2019
|

Frage

Ich habe schon noch meine scripts, aber ich wollte wissen, die bevorzugte Art und Weise.
Ich habe nur ein <script> tag, direkt in der header.php mein template.

Ist es eine bevorzugte Methode zum einfügen von externen oder benutzerdefinierte js-Dateien?
Wie würde ich bind eine js-Datei zu einer einzelnen Seite?(Ich habe die home-Seite im Auge)

Lösung

Verwenden `wp_enqueue_script()` in Ihrem Design

Die grundlegende Antwort ist zu verwenden wp_enqueue_script() in einem wp_enqueue_scripts Haken für front-end admin_enqueue_scripts für admin.Es könnte wie folgt Aussehen (die annimmt, aus dem Sie anrufen theme - functions.php - Datei;beachten Sie, wie ich den Verweis auf die stylesheet-Verzeichnis):

<?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.

Pre-definiert und Mehrere Abhängige Scripts

Aber lassen Sie uns sagen, Sie wollen zählen sowohl jQuery und jQuery-UI-Sortable-von der Liste der Standard-Skripte enthalten, die mit WordPress und Sie wollen, dass Ihr Skript auf Sie verlassen?Einfach, fügen Sie einfach die ersten zwei Skripte mit die pre-definiert Griffe definiert in WordPress und für Ihr Skript bieten eine 3. parameter wp_enqueue_script() was ist ein array mit dem Skript behandelt, die von jedem Skript, wie so:

<?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 wollen zu tun, es in ein plugin statt?Verwenden Sie die plugins_url() Funktion geben Sie die URL der Javascript-Datei:

<?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 );
}

Versionsverwaltung Ihrer Skripte

Beachten Sie auch, dass über wir Gaben unser plugin eine Versionsnummer und übergeben Sie es als 4. parameter wp_enqueue_script().Versionsnummer Ausgang Quelle wie die Abfrage argument in URL zum Skript und dient zu zwingen browser neu laden möglicherweise zwischengespeicherte Datei, wenn die version geändert.

Scripte nur auf Seiten, wo nötig

Die 1. Regel der Web-Performance sagt Minimieren von HTTP-Requests also, Wann immer möglich, sollten Sie beschränken Sie die Skripts zu laden, nur wo es nötig ist.Zum Beispiel, wenn Sie brauchen nur Ihr Skript in der admin-Grenze, die es zu admin-Seiten mit den admin_enqueue_scripts Haken statt:

<?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 Sie Ihre Skripts ist einer von denen, die müssen geladen in der Fußzeile gibt es einen 5. parameter wp_enqueue_script() das sagt WordPress zu verzögern, und legen Sie es in die Fußzeile (vorausgesetzt, Ihr Thema nicht schlecht benahmen und dass es in der Tat ruft die wp_footer Haken wie alle guten WordPress-themes sollte):

<?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 );
}

Feinere Kontrolle

Wenn Sie benötigen feinere Kontrolle als Ozh hat einen großen Artikel mit dem Titel Vorgehensweise:Das Laden Von Javascript Mit WordPress-Plugin , die details mehr.

Deaktivieren von Skripten, um Kontrolle zu Erlangen

Justin Tadlock hat einen schönen Artikel mit dem Titel Wie zu deaktivieren Skripte und Stile in Fall Sie wollen:

Kombinieren Sie mehrere Dateien in einzelne Dateien (Laufleistung kann variieren mit JavaScript hier).
Laden Sie die Dateien nur auf den Seiten wir sind mit dem Skript-oder style.
Aufhören zu verwenden !wichtig in unserem Stil.css-Datei zu machen, einfache CSS Anpassungen.

Übergeben von Werten von PHP zu JS mit `wp_localize_script()`

Auf seinem blog Vladimir Prelovac hat einen großartigen Artikel mit dem Titel Beste Praxis für das hinzufügen von JavaScript-code zu WordPress-plugins wo er beschreibt verwenden wp_localize_script() Ihnen zu erlauben, setzen Sie den Wert der Variablen in der server-Seite PHP zu werden, später in Ihrem client-side Javascript.

Wirklich Fein abgestimmte Kontrolle mit `wp_print_scripts()`

Und schließlich, wenn Sie wirklich brauchen eine fein abgestimmte Kontrolle können Sie den look in wp_print_scripts() wie bereits auf Bier Planeten in einem Beitrag mit dem Titel Wie man CSS-und JavaScript-Bedingt Und Nur Bei Bedarf Durch Die Beiträge.

Epiloque

Das ist es für Best-Practices, darunter Javascript-Dateien mit WordPress.Wenn ich etwas verpasst haben (was ich wahrscheinlich) sicher sein, lassen Sie mich wissen in die Kommentare, so kann ich hinzufügen ein update für künftige Reisende.

Andere Tipps

Um die wundervolle Illustration der Verwendung von Enqueue zu ergänzen, möchte ich nur darauf hinweisen, dass Skripte als Abhängigkeiten nicht aufgenommen werden müssen ...

Ich werde das Beispiel unter dem verwenden Skripte in einem Plugin In Mikes Antwort.

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 abgeschnitten 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, wird WordPress sie für Ihr Skript vorbereiten und befürworten, sodass Sie keine unabhängigen Anrufe für diese Skripte stellen müssen.

Darüber hinaus fragen sich einige von Ihnen möglicherweise, ob das Festlegen von Multiple -Abhängigkeiten dazu führen kann, dass Skripte 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ängig wäre (dh Skript drei sollten zuerst geladen werden), würde dies keine Rolle spielen. WordPress bestimmt die Enqueue -Prioritäten für diese Skripte und gibt sie in der richtigen Reihenfolge aus, kurz wird alles automatisch ausgearbeitet für Sie von WordPress.

Für kleine Stücke von Skripten, die Sie beispielsweise möglicherweise nicht in eine separate Datei aufnehmen möchten, da sie dynamisch generiert werden, WordPress 4.5 und weitere Angebote wp_add_inline_script. Diese Funktion verleiht das Skript im Grunde genommen an ein anderes Skript.

Nehmen wir zum Beispiel an, Sie entwickeln ein Thema und möchten, dass Ihr Kunde seine eigenen Skripte (wie Google Analytics oder Addis) über die Optionsseite einfügen kann. Sie könnten dann verwenden wp_add_inline_script Um dieses Skript an Ihre Haupt-JS-Datei zu lagern (sagen wir, sagen wir mainjs) so was:

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

Mein bevorzugter Weg ist es, eine gute Leistung zu erzielen, also anstatt zu verwenden, anstatt zu verwenden wp_enqueue_script Ich benutze 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 dann einfügen sie in den Kopf, manchmal zusammen mit solchen Stilen:

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

Dies führt zu Wasserfall, der so aussieht, alles auf einmal beladen, aber die Ausführungsreihenfolge steuert:

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

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit wordpress.stackexchange