it-swarm-id.com

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

Saya sudah menambahkan skrip saya, tetapi saya ingin tahu cara yang disukai.
Saya baru saja memasang tag <script> langsung di header.php template 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)

68
naugtur

Gunakan wp_enqueue_script() dalam tema Anda

Jawaban dasarnya adalah menggunakan wp_enqueue_script() dalam wp_enqueue_scripts hook untuk front end admin_enqueue_scripts untuk admin. Mungkin terlihat seperti ini (yang menganggap Anda menelepon dari file functions.php 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 Diurutkan dari daftar skrip default yang disertakan dengan WordPressdan Anda ingin skrip Anda bergantung pada mereka? Mudah, cukup sertakan dua skrip pertama menggunakan menanganiyang ditentukan sebelumnya di WordPress dan untuk skrip Anda berikan parameter ke-3 untuk wp_enqueue_script() yang merupakan larik gagang skrip yang digunakan oleh setiap skrip, seperti itu:

<?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 fungsi plugins_url() 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 memberikan plugin kami nomor versi dan meneruskannya sebagai parameter ke-4 ke 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

Aturan 1st Performance Web mengatakan Minimalkan Permintaan HTTP jadi bila memungkinkan Anda harus membatasi skrip untuk memuat hanya jika diperlukan. Misalnya, jika Anda hanya memerlukan skrip di admin batasi skrip ke halaman admin menggunakan kait admin_enqueue_scripts sebagai gantinya:

<?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 yang perlu dimuat ke dalam footer, ada parameter ke-5 dari wp_enqueue_script() yang memberitahu WordPress untuk menunda dan meletakkannya di footer (dengan asumsi tema Anda tidak nakal dan memang memang memanggil wp_footer kait seperti semua tema WordPress yang baik seharusnya ):

<?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 dari itu Ozh memiliki artikel bagus berjudul Cara: Memuat Javascript Dengan Plugin WordPress Anda yang lebih detail.

Menonaktifkan Script untuk Mendapatkan Kontrol

Justin Tadlock memiliki artikel yang 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 yang 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 sisi server Anda PHP to nanti digunakan di Javascript sisi klien Anda.

Kontrol Butir 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 di sebuah posting 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.

78
MikeSchinkel

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 in a Plugin heading 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 diselesaikan secara otomatis untuk Anda oleh WordPress.

11
t31os

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_script untuk 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);
0
cjbj

Cara pilihan saya adalah mencapai kinerja yang baik, jadi daripada menggunakan wp_enqueue_script saya menggunakan HEREDOC dengan Fetch API untuk memuat semuanya secara asinkron 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:

 enter image description here 

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

0
Josh Habdas