Apa cara yang disukai untuk menambahkan file javascript khusus ke situs?

Saya sudah menambahkan skrip saya, tetapi saya ingin tahu cara yang disukai.
Saya hanya memasang <script>tag langsung di header.phptemplate saya.

Apakah ada metode yang disukai untuk memasukkan file js eksternal atau custom?
Bagaimana saya mengikat file js ke satu halaman? (Saya memiliki halaman rumah dalam pikiran)

Gunakan wp_enqueue_script()di tema Anda

Jawaban dasar adalah dengan menggunakan wp_enqueue_script()dalam wp_enqueue_scriptshook untuk front end admin_enqueue_scriptsuntuk admin. Mungkin terlihat seperti ini (yang menganggap Anda menelepon dari functions.phpfile tema Anda ; perhatikan bagaimana saya mereferensikan direktori stylesheet):

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

Itulah dasar-dasarnya.

Script Dependent yang Ditentukan Sebelumnya dan Banyak

Tetapi katakanlah Anda ingin memasukkan jQuery dan jQuery UI Sortable dari daftar skrip default yang disertakan dengan WordPress dan Anda ingin skrip Anda bergantung pada mereka? Mudah, hanya menyertakan dua script pertama yang menggunakan pra-didefinisikan menangani didefinisikan dalam WordPress dan untuk naskah Anda memberikan parameter-3 untuk wp_enqueue_script()yang array script menangani digunakan oleh setiap script, seperti:

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

Skrip dalam Plugin

Bagaimana jika Anda ingin melakukannya dalam plugin? Gunakan plugins_url()fungsi ini untuk menentukan URL file Javascript Anda:

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

Versi naskah Anda

Perhatikan juga bahwa di atas kami memberi plugin kami nomor versi dan meneruskannya sebagai parameter ke-4 wp_enqueue_script(). Nomor versi adalah keluaran dalam sumber sebagai argumen kueri dalam URL ke skrip dan berfungsi untuk memaksa browser mengunduh ulang file yang mungkin di-cache jika versinya berubah.

Muat Naskah hanya pada halaman di mana diperlukan

The Aturan 1 Kinerja Web mengatakan untuk Minimalkan Permintaan HTTP sehingga bila memungkinkan Anda harus membatasi skrip untuk memuat hanya bila diperlukan. Misalnya, jika Anda hanya memerlukan skrip di admin, batasi skrip ini hanya untuk admin saja menggunakan admin_enqueue_scripts:

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

Muat Script Anda di Footer

Jika skrip Anda adalah salah satu skrip yang perlu dimuat ke dalam footer, ada parameter ke-5 wp_enqueue_script()yang memberitahu WordPress untuk menunda dan meletakkannya di footer (dengan asumsi tema Anda tidak salah tingkah dan memang ia menyebut kait wp_footer seperti semua seharusnya tema WordPress yang bagus ):

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

Kontrol Berbutir Lebih Halus

Jika Anda memerlukan kontrol berbutir lebih halus daripada itu Ozh memiliki artikel bagus yang berjudul Cara: Memuat Javascript Dengan Plugin WordPress Anda yang lebih detail.

Menonaktifkan Script untuk Mendapatkan Kontrol

Justin Tadlock memiliki artikel bagus berjudul Cara menonaktifkan skrip dan gaya jika Anda ingin:

1. Gabungkan beberapa file menjadi satu file (jarak tempuh dapat berbeda dengan JavaScript di sini).
2. Muat file hanya pada halaman yang kami gunakan skrip atau gaya.
3. Berhenti harus menggunakan! Penting dalam file style.css kami untuk membuat penyesuaian CSS sederhana.

Melewati Nilai dari PHP ke JS dengan wp_localize_script()

Di blog-nya, Vladimir Prelovac memiliki artikel hebat berjudul Praktik terbaik untuk menambahkan kode JavaScript ke plugin WordPress di mana ia membahas penggunaan wp_localize_script()untuk memungkinkan Anda menetapkan nilai variabel di PHP sisi-server Anda untuk kemudian digunakan dalam Javascript sisi-klien Anda.

Kontrol Grained Sangat Baik dengan wp_print_scripts()

Dan akhirnya jika Anda membutuhkan kontrol yang benar-benar halus, Anda dapat melihat wp_print_scripts()seperti yang dibahas di Beer Planet dalam sebuah postingan yang berjudul Cara Memasukkan CSS dan JavaScript Secara Kondisional Dan Hanya Saat Dibutuhkan Oleh Tulisan .

Epiloque

Itu saja untuk Praktik Terbaik termasuk file Javascript dengan WordPress. Jika saya melewatkan sesuatu (yang mungkin saya miliki) pastikan untuk memberi tahu saya di komentar sehingga saya dapat menambahkan pembaruan untuk pelancong masa depan.

Untuk memuji ilustrasi indah Mikes menggunakan enqueues saya hanya ingin menunjukkan bahwa skrip dimasukkan sebagai dependancies tidak perlu enqueued ...

Saya akan menggunakan contoh di bawah Script dalam tajuk Plugin dalam jawaban Mike.

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

Ini dapat dipangkas untuk membaca ..

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

Saat Anda menetapkan ketergantungan, WordPress akan menemukan dan membuat mereka siap untuk skrip Anda, jadi Anda tidak perlu membuat panggilan independen untuk skrip ini.

Selain itu, beberapa dari Anda mungkin bertanya-tanya apakah pengaturan beberapa dependancies dapat menyebabkan skrip untuk menghasilkan dalam urutan yang salah, di sini izinkan saya memberi contoh

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

Jika skrip dua bergantung pada skrip tiga (mis. Skrip tiga harus dimuat terlebih dahulu), ini tidak masalah, WordPress akan menentukan prioritas enqueue untuk skrip-skrip tersebut dan menampilkannya dalam urutan yang benar, singkatnya, semuanya akan dikerjakan secara otomatis untuk Anda oleh WordPress.

Untuk skrip kecil, yang mungkin tidak ingin Anda sertakan dalam file terpisah, misalnya karena dihasilkan secara dinamis, WordPress 4.5 dan penawaran lebih lanjut wp_add_inline_script. Fungsi ini pada dasarnya mengaitkan skrip ke skrip lain.

Katakanlah, misalnya, bahwa Anda sedang mengembangkan tema dan ingin pelanggan Anda dapat memasukkan skripnya sendiri (seperti Google Analytics atau AddThis) melalui halaman opsi. Anda kemudian dapat menggunakan wp_add_inline_scriptuntuk mengunci skrip itu ke file js utama Anda (katakanlah mainjs) seperti ini:

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

Cara yang saya sukai adalah mencapai kinerja yang baik, jadi daripada menggunakan wp_enqueue_scriptsaya menggunakan HEREDOC dengan API Ambil untuk memuat semuanya secara serempak secara paralel:

$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;

Dan kemudian masukkan ke dalam kepala, kadang-kadang dengan gaya seperti ini:

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

Menghasilkan air terjun yang terlihat seperti ini, memuat semuanya sekaligus tetapi mengendalikan urutan eksekusi:

Catatan: Ini membutuhkan penggunaan API Ambil, yang tidak tersedia di semua browser.