Apakah cara terbaik untuk menambah js luaran adat ke dalam wordpress

Seperti yang dituntut oleh komuniti CMS yang terkemuka, 25% daripada internet menggunakan WordPress. Melihat tren, kami tidak mempunyai pilihan tetapi untuk mempercayai mereka, hampir setiap blog ^kedua dan setiap laman web ^ke- 4 seolah-olah menggunakan CMS yang paling berkuasa dan mesra pengguna. Melihat ke hadapan ini, orang dan pemaju telah mula memindahkan laman web mereka ke Platform WordPress.

Bagi usaha ini untuk mengubah laman web anda yang manis dan mudah ke laman web CMS yang berprestasi tinggi, orang akan terjebak dengan langkah yang sangat asas dan bertanya: Untuk Cinta, bagaimana saya mendapatkan fail luaran JavaScript (.js) ini bekerja dalam tema WordPress ini? Adakah anda juga yang bertanya soalan yang sama? Nah amigos, anda akhirnya berada di tempat yang betul: Saya di sini untuk membimbing anda langkah demi langkah melalui cara yang paling mudah untuk mencapai matlamat ini!

Sekarang dengan mengandaikan bahawa anda telah memasang semua WordPress dan melepaskannya dengan JS luaran, mari masuk ke dalam tugas termasuk fail!

Nota: Saya menggunakan fail berikut (testrun.js) untuk tutorial ini dan tema yang saya sedang kerjakan ialah WordPress Twenty Sixteen.

amaran ('Hello');

Mari kita mulakan!

Semua skrip dan stylesheet dimuatkan dari dalam functions.php . Ini adalah cara yang betul untuk memuatkannya dalam WordPress supaya mengelakkan konflik dengan mana-mana skrip lain yang dimuatkan sama ada oleh WordPress sendiri atau plugin anda yang digunakan. Jika anda membiarkan WordPress menguruskan semua fail yang disertakan, maka anda perlu membiarkannya tahu bahawa anda mahu fail ini dimasukkan ke dalam bahagian header (start) atau footer (akhir) fail. Setiap templat / tema mempunyai functions.php tersendiri sehingga nama tepat fungsi yang merangkumi semua fail yang akan dimasukkan sukar untuk umum. Oleh kerana saya mengambil dua puluh enam belas sebagai tema, di bawah ini adalah gambaran bagaimana fungsi saya.php (digunakan untuk memasukkan fail). Anda perlu setakat ini menyerupai ini:

Fungsi wp_enqueue_script menghubungkan fail skrip ke halaman yang dihasilkan pada waktu yang tepat mengikut dependensi skrip, jika skrip belum dimasukkan dan jika semua dependensi telah didaftarkan. Anda sama ada boleh memaut skrip dengan pengendalian yang terdahulu didaftarkan menggunakan fungsi wp_register_script (), atau menyediakan fungsi ini dengan semua parameter yang diperlukan untuk menghubungkan skrip.

Wp_enqueue_script ($ handle, $ src, $ deps, $ ver, $ in_footer) mengambil dalam params berikut:

$ mengendalikan

(rentetan) (Diperlukan) Nama skrip.

$ src

(rentetan | bool) (Pilihan) Laluan ke skrip dari direktori root WordPress. Contoh: '/js/myscript.js'.

Nilai lalai: palsu

$ deps

(pelbagai) (Pilihan) Julat pendaftaran yang mengendalikan skrip ini bergantung kepada.

Nilai lalai: array ()

$ ver

(string | bool) (Pilihan) String yang menyatakan nombor versi skrip, jika ia mempunyai satu. Parameter ini digunakan untuk memastikan versi yang betul dihantar kepada klien tanpa mengira caching, dan harus dimasukkan jika nombor versi tersedia dan masuk akal untuk skrip.

Nilai lalai: palsu

$ in_footer

(bool) (Pilihan) Sama ada untuk mencipta skrip sebelum ini atau sebelum ini . Lalai 'palsu'. Menerima 'palsu' atau 'benar'.

Nilai lalai: palsu

Anda boleh mengabaikan fungsi wp_register_script () untuk tutorial ini. Tujuan kami adalah untuk memasukkan hanya JS luaran. Ia harus bekerja dengan baik tanpa ia!

Oleh itu, jika saya ingin menamakan skrip saya sebagai "ujian", ingat bahawa param ini (pemegang $) TIDAK semestinya nama fail sebenar, dan fail saya mempunyai pergantungan luaran berbanding jquery dan versi adalah 1.0 dan banyak sebelum beban halaman maka fungsi saya akan kelihatan 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, rentetan yang disambungkan selepas fungsi itu, iaitu " /js/testrun.js " sebenarnya adalah path file wrt file indeks template .

Maka atribut $ src anda, yang merupakan sumber fail js anda menjadi: get_template_directory_uri (). 'Path_to_js_wrt_index_of_template'.

Oleh itu, functions.php akhir kelihatan seperti:

Bertahan di sana, kami hampir selesai! Hanya simpan sekarang dan tekan semula di laman web anda … anda harus melihat kerja JS! Berikut adalah saya:

Oleh kerana kami menetapkan pilihan $ in_footer kepada palsu, skrip memuatkan sebelum halaman dimuatkan, tetapi selepas JQuery dimuatkan kerana ia ditambahkan sebagai kebergantungan!

Dan .. Voila! Di sini anda pergi .. Anda telah berjaya memasukkan fail JS luar biasa dalam tema WP anda!

Happy Coding !!

Rujukan: Enqueue Function: WordPress Codex