Apa cara terbaik untuk menambahkan js eksternal kustom ke dalam wordpress

Seperti yang diklaim oleh komunitas CMS terkemuka, 25% dari internet menggunakan WordPress. Melihat tren, kami tidak memiliki pilihan selain untuk mempercayainya, hampir setiap blog ke-2 dan setiap situs ^ke- 4 tampaknya menggunakan CMS yang tampaknya paling kuat dan ramah pengguna. Menantikan hal ini, orang dan pengembang sudah mulai menggeser situs mereka ke Platform WordPress.

Pada upaya ini untuk mengubah situs web manis dan sederhana Anda menjadi situs CMS yang berkinerja tinggi dan kompleks, orang-orang terjebak pada langkah yang sangat mendasar dan mengajukan pertanyaan: Untuk Cinta, bagaimana cara mendapatkan file JavaScript (.js) eksternal ini bekerja di tema WordPress ini? Apakah Anda juga yang menanyakan pertanyaan yang sama? Ya ampun, Anda akhirnya berada di tempat yang tepat: Saya di sini untuk memandu Anda langkah demi langkah melalui cara paling sederhana yang mungkin untuk mencapai tugas ini!

Sekarang dengan anggapan Anda telah menginstal semua WordPress dan bersemangat dengan JS eksternal siap, mari kita masuk ke dalam tugas termasuk file!

Catatan: Saya menggunakan file berikut (testrun.js) untuk tutorial ini dan tema yang saya kerjakan adalah Twenty Sixteen WordPress .

lansiran ('Halo');

Mari kita mulai!

Semua skrip dan stylesheet diambil dari dalam functions.php . Ini adalah cara yang benar untuk memuatnya di WordPress untuk menghindari konflik dengan skrip lain yang dimuat oleh WordPress sendiri atau plugin Anda digunakan. Jika Anda membiarkan WordPress mengelola semua file yang disertakan, maka Anda harus memberi tahu bahwa Anda ingin file ini dimasukkan dalam bagian header (mulai) atau footer (akhir) dari file tersebut. Setiap templat / tema memiliki functions.php sendiri sehingga nama persis fungsi yang mencakup semua file yang akan dimasukkan akan sulit digeneralisasi. Karena saya menggunakan dua puluh enam belas sebagai tema, di bawah ini adalah snapshot dari bagaimana functions.php saya (digunakan untuk memasukkan file). Anda harus sedikit banyak menyerupai ini:

Fungsi wp_enqueue_script menautkan file skrip ke halaman yang dihasilkan pada waktu yang tepat sesuai dengan dependensi skrip, jika skrip belum dimasukkan dan jika semua dependensi telah terdaftar. Anda bisa 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:

$ handle

(string) (Diperlukan) Nama skrip.

$ src

(string | bool) (Opsional) Jalur ke skrip dari direktori root WordPress. Contoh: '/js/myscript.js'.

Nilai default: salah

$ deps

(Array) (Opsional) Array terdaftar menangani skrip ini tergantung pada.

Nilai default: array ()

$ 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 dimasukkan jika nomor versi tersedia dan masuk akal untuk skrip.

Nilai default: salah

$ in_footer

(bool) (Opsional) Apakah akan enqueue skrip sebelumnya atau sebelumnya . Default 'salah'. Terima 'salah' atau 'benar'.

Nilai default: salah

Anda dapat mengabaikan fungsi wp_register_script () untuk tutorial ini. Tujuan kami adalah untuk memasukkan JS eksternal saja. Seharusnya bekerja dengan baik tanpa itu!

Oleh karena itu, jika saya ingin menamai skrip saya sebagai "test" ingat bahwa param ini ($ handle) TIDAK harus menjadi nama file yang sebenarnya, dan file saya memiliki ketergantungan eksternal pada jquery dan versi 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 dipatenkan setelah fungsi, yaitu " /js/testrun.js " sebenarnya adalah path dari file wrt file indeks 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, functions.php akhir terlihat seperti:

Tahan di sana, kita hampir selesai! Cukup simpan ini sekarang dan tekan segarkan di situs web Anda … Anda seharusnya melihat JS berfungsi! Ini milik saya:

Karena kita menetapkan opsi $ in_footer menjadi false, skrip dimuat sebelum laman dimuat, tetapi setelah JQuery dimuat karena ditambahkan sebagai dependensi!

Dan .. Voila! Ini dia .. Anda telah berhasil memasukkan file JS kustom eksternal dalam tema WP Anda!

Selamat Coding !!

Referensi: Fungsi Enqueue: WordPress Codex