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

68

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)

naugtur
sumber
Lihatlah pertanyaan saya dari beberapa hari yang lalu , jawaban untuk bagian dari pertanyaan Anda ada di sana: - Bagaimana Menghubungkan file jQuery / Javascript Eksternal dengan WordPress
Ben Everard
4
Pertanyaan bagus! Ini adalah hal yang sangat umum ditanyakan orang dan sesuatu yang kita harus didokumentasikan dengan baik di sini.
MikeSchinkel
Terima kasih. Saya sudah melihatnya, tetapi itu tidak mencakup pertanyaan saya sepenuhnya.
naugtur
Tidak apa-apa, saya tahu itu tidak akan menjawab semua pertanyaan Anda, tetapi untuk orang-orang yang berselancar di masa depan ada referensi ke posting lain :-)
Ben Everard

Jawaban:

78

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.

MikeSchinkel
sumber
1
Itu artikel yang luar biasa! Sekarang saya punya banyak pilihan;)
naugtur
Ok, berhasil. Sekarang bagian kedua dari pertanyaan - bagaimana cara memeriksa apakah saya ada di beranda?
naugtur
Cari jawabannya di sini: wordpress.stackexchange.com/questions/575/…
naugtur
3
Menghubungkan ke dalam admin_initdaripada meminta is_admin(). Hapus parameter versi jika Anda menggunakan Google CDN, jika tidak, cache browser akan menampung dua versi: satu tanpa string kueri dari situs lain dan milik Anda.
fuxia
@toscho - Panggilan bagus, saya akan memperbarui.
MikeSchinkel
11

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.

t31os
sumber
Saya pikir inititu bukan tempat yang tepat untuk mengirim enqueue.
brasofilo
Kode awalnya disalin dari jawaban Mike, kemudian disesuaikan untuk menggambarkan suatu poin. Anda benar, jadi saya telah memperbarui jawaban untuk menggunakan pengait yang lebih baik dan lebih benar.
t31os
0

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

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:

masukkan deskripsi gambar di sini

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

Josh Habdas
sumber