Saya sudah menambahkan skrip saya, tetapi saya ingin tahu cara yang disukai.
Saya hanya memasang <script>
tag 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)
theme-development
javascript
naugtur
sumber
sumber
Jawaban:
Gunakan
wp_enqueue_script()
di tema AndaJawaban dasar adalah dengan menggunakan
wp_enqueue_script()
dalamwp_enqueue_scripts
hook untuk front endadmin_enqueue_scripts
untuk admin. Mungkin terlihat seperti ini (yang menganggap Anda menelepon darifunctions.php
file tema Anda ; perhatikan bagaimana saya mereferensikan direktori stylesheet):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:Skrip dalam Plugin
Bagaimana jika Anda ingin melakukannya dalam plugin? Gunakan
plugins_url()
fungsi ini untuk menentukan URL file Javascript Anda: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
: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 ):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:
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.
sumber
admin_init
daripada memintais_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.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.
Ini dapat dipangkas untuk membaca ..
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
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.
sumber
init
itu bukan tempat yang tepat untuk mengirim enqueue.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 (katakanlahmainjs
) seperti ini:sumber
Cara yang saya sukai adalah mencapai kinerja yang baik, jadi daripada menggunakan
wp_enqueue_script
saya menggunakan HEREDOC dengan API Ambil untuk memuat semuanya secara serempak secara paralel:Dan kemudian masukkan ke dalam kepala, kadang-kadang dengan gaya seperti ini:
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.
sumber