Seperti yang diklaim oleh komunitas CMS terkemuka, 25% dari internet menggunakan WordPress. Melihat tren, kami tidak memiliki pilihan selain mempercayai mereka, hampir setiap 2 blog dan 4 situs tampaknya menggunakan CMS yang paling kuat dan mudah digunakan. Melihat ke depan untuk ini, orang-orang dan pengembang telah mulai mengalihkan situs mereka ke Platform WordPress.
Pada upaya ini untuk mengubah situs web Anda yang manis dan sederhana menjadi situs CMS yang kompleks dan berkinerja tinggi, orang-orang akan terjebak pada langkah yang sangat mendasar dan mengajukan pertanyaan: Untuk Cinta, bagaimana cara mendapatkan file JavaScript eksternal (.js) ini bekerja di tema WordPress ini? Apakah Anda juga yang mengajukan pertanyaan yang sama? Nah amigos, Anda akhirnya berada di tempat yang tepat: Saya di sini untuk membimbing Anda selangkah demi selangkah melalui cara paling sederhana yang mungkin untuk mencapai tugas ini!
Sekarang dengan asumsi Anda memiliki WordPress semua terinstal dan bersemangat dengan JS eksternal siap, mari masuk ke tugas termasuk file!
Catatan: Saya menggunakan file berikut (testrun.js) untuk tutorial ini dan tema yang saya kerjakan adalah WordPress's Twenty Sixteen.
alert ('Hello'); Mari kita mulai!
Semua skrip dan stylesheet dimuat dari dalam functions.php . Ini adalah cara yang benar untuk memuatnya di dalam WordPress untuk menghindari konflik dengan skrip lain yang dimuat baik oleh WordPress itu sendiri atau plugin Anda yang digunakan. Jika Anda membiarkan WordPress mengelola semua file yang disertakan, maka Anda harus membiarkannya tahu bahwa Anda ingin file ini dimasukkan di bagian header (awal) atau footer (akhir) dari file. Setiap template / tema memiliki fungsinya sendiri.php sehingga nama yang tepat dari fungsi-fungsi yang mencakup semua file yang akan dimasukkan akan sulit digeneralisasikan. Karena saya mengambil dua puluh enam belas sebagai tema, di bawah ini adalah snapshot tentang bagaimana function.php saya (digunakan untuk memasukkan file). Hormat Anda harus sedemikian rupa menyerupai ini:
Fungsi wp_enqueue_script menautkan file skrip ke halaman yang dihasilkan pada waktu yang tepat sesuai dengan dependensi skrip, jika skrip belum disertakan dan jika semua dependensi telah didaftarkan. Anda dapat menautkan skrip dengan pegangan yang sebelumnya terdaftar menggunakan fungsi wp_register_script (), atau menyediakan fungsi ini dengan semua parameter yang diperlukan untuk menautkan skrip.
Wp_enqueue_script ($ handle, $ src, $ deps, $ ver, $ in_footer) menggunakan params berikut:
$ pegangan
(string) (Diperlukan) Nama skrip.
$ src
(string | bool) (Opsional) Path to the script dari direktori root WordPress. Contoh: '/ js/myscript.js'.
Nilai default: salah
$ deps
(array) (Opsional) Sebuah array menangani menangani script ini tergantung pada.
Nilai default: larik ()
$ ver
(string | bool) (Opsional) String yang menentukan nomor versi skrip, jika ada. Parameter ini digunakan untuk memastikan bahwa versi yang benar dikirim ke klien terlepas dari caching, dan karenanya harus disertakan jika nomor versi tersedia dan masuk akal untuk skrip.
Nilai default: salah
$ in_footer
(bool) (Opsional) Apakah akan memasukkan skrip sebelumnya atau sebelumnya. Default 'salah'. Menerima 'salah' atau 'benar'.
Nilai default: salah
Anda dapat mengabaikan fungsi wp_register_script () untuk tutorial ini. Tujuan kami adalah untuk menyertakan JS eksternal saja. Itu harus bekerja dengan baik tanpa itu!
Oleh karena itu, jika saya ingin menamai skrip saya sebagai "test", ingat bahwa param ini ($ hand) TIDAK harus menjadi nama file yang sebenarnya, dan file saya memiliki ketergantungan eksternal atas jquery dan versinya adalah 1.0 dan memuat sebelum halaman dimuat maka fungsi saya akan terlihat seperti:
wp_enqueue_script ('tutorial', get_template_directory_uri (). '/ js/testrun.js', array ('jquery'), '1.0', false);
Jika Anda perhatikan, saya telah menggunakan get_template_directory_uri (), jadi, string yang digabung setelah fungsi, yaitu " /js/testrun.js " sebenarnya adalah path file wrt file indeks dari template .
Jadi atribut $ src Anda, yang merupakan sumber file js Anda menjadi: get_template_directory_uri (). 'Path_to_js_wrt_index_of_template'.
Oleh karena itu, fungsi terakhir.php terlihat seperti:
Tahan di sana, kita hampir selesai! Simpan saja ini sekarang dan tekan refresh di situs web Anda ... Anda harus melihat JS bekerja! Ini milik saya:
Karena kami menyetel opsi $ in_footer menjadi false, skrip akan dimuat sebelum laman dimuat, tetapi setelah JQuery dimuat karena ditambahkan sebagai dependensi!
Dan .. Voila! Di sini Anda pergi .. Anda telah berhasil memasukkan file JS kustom eksternal dalam tema WP Anda!
Selamat Coding !!
Referensi: Fungsi Enqueue: WordPress Codex
