Termasuk javascript dalam plugin atau tema, cara yang betul

dengan cekap memuatkan kod JavaScript dalam tema dan plugin WordPress

mata utama

• Apabila termasuk kod JavaScript dalam plug-in atau tema WordPress, pastikan anda melakukannya dengan teliti untuk mengelakkan kembung yang tidak perlu dari halaman yang dihasilkan. Anda boleh menggunakan fungsi wp_enqueue_script() untuk mengelakkan memasukkan fail yang sama beberapa kali.
Fungsi
• wp_enqueue_script() memerlukan sekurang -kurangnya dua parameter: nama skrip dan URL skrip. Ia juga boleh menerima tiga parameter tambahan untuk mengawal lebih baik bagaimana skrip dimasukkan.
Fungsi
• wp_register_script() digunakan untuk menunjukkan cara memasukkan skrip, tetapi ia tidak termasuk. Fungsi ini sangat berguna untuk menguruskan kebergantungan kerana ia membolehkan plugin lain menggunakan skrip berdaftar.
• skrip tidak boleh didaftarkan di mana -mana. Sebaliknya, pemaju harus berfikir tentang kapan atau di mana skrip mereka diperlukan dan menggunakan API Tindakan/Penapis API atau WordPress untuk memasukkan skrip hanya jika perlu.
Fungsi
• wp_enqueue_script() memastikan skrip yang sama tidak termasuk dua kali dan dimasukkan dengan betul dalam tajuk atau footer. Walau bagaimanapun, jika skrip diperlukan pada masa atau lokasi tertentu, panggilan wp_enqueue_script() hendaklah diletakkan dalam fungsi yang betul.

Pada masa ini, terdapat lebih daripada 33,000 plugin dan 2,600 tema di WordPress.org, dan kami juga boleh menambah lebih banyak tema dan plugin yang tidak berada di platform ini. Mereka boleh melakukan banyak operasi yang berbeza dan sering menyediakan beberapa fungsi menggunakan JavaScript.

Pada dasarnya, tidak sukar untuk memasukkan kod JavaScript dalam tema atau plugin: WordPress menghasilkan hanya fail HTML, jadi menggunakan tag skrip untuk memasukkan kod secara langsung di dalamnya atau menghubungkan ke fail dengan atribut SRC sudah cukup - - - - - Jika anda membangunkannya sendiri, terpencil dari dunia.

Tetapi itu bukan kes itu. Pengguna yang menggunakan WordPress boleh memasang plugin atau tema yang wujud bersama dengan plug-in atau tema anda, dan pemaju alat ini juga boleh menggunakan JavaScript. Di samping itu, WordPress sendiri juga menggunakan JavaScript. Masalahnya ialah jika semua orang memasukkan skrip mereka pada kehendak, halaman yang dihasilkan akan menjadi kembung yang tidak perlu.

Soalan

Contohnya akan lebih jelas, dan saya akan menggunakan contoh yang saya kenal dengan: saya sendiri.

Saya membangunkan plugin sfera foto WP yang membolehkan pengguna menambah imej panoramik ke jawatan mereka. Untuk melakukan ini, saya memerlukan fail JavaScript yang berbeza: perpustakaan untuk memaparkan panorama dan fail untuk mendapatkan tag khusus untuk memaparkan panoramas. Juga, dalam skrip terakhir ini saya menggunakan jQuery jadi saya perlu memasukkannya.

Jika saya tidak peduli dengan pengguna, saya boleh memasukkan tiga skrip ini ke dalam semua halaman laman web, yang bermaksud bahawa pelawat perlu memuat turun fail ini walaupun halaman itu tidak memerlukannya.

Pada masa ini, masalahnya sudah serius, tetapi apabila kita menganggap jQuery, masalahnya menjadi lebih besar. Bagaimana jika dua plugin menggunakan perpustakaan ini mempunyai tingkah laku ini? Pengguna bukan sahaja akan memuat turun fail yang tidak berguna, tetapi juga memuat turunnya dua kali!

Halaman yang lebih berat, semakin lama masa pemuatan akan menjadi. Laman web dengan masa pemuatan yang terlalu panjang mempunyai lawatan yang lebih rendah daripada laman web dengan kelajuan pemuatan yang lebih cepat. Jika plugin atau tema anda membuat pemuatan terlalu lama, mereka tidak akan digunakan. Ini sudah pasti daya penggerak yang kuat untuk mengoptimumkan alat anda, bukan?

fungsi penyisipan skrip yang tidak dapat dielakkan

Untuk mengelakkan masalah berulang kali memasukkan fail yang sama, WordPress menyediakan fungsi yang hebat: wp_enqueue_script(). Fungsi ini mestilah sahabat anda apabila anda ingin memasukkan skrip.

Seperti namanya, fungsi ini akan menambah skrip anda ke barisan dan memasukkannya ke dalam tajuk atau footer pada masa yang betul, jadi tiada tag skrip ditambah di tengah -tengah halaman.

Apabila digunakan semata -mata, fungsi

memerlukan sekurang -kurangnya dua parameter: nama skrip dan url skrip. Sebagai contoh, jika saya mahu memasukkan skrip keperluan plugin saya, saya menambah baris ini ke fail utamanya (kita akan melihat cara yang betul di bawah). wp_enqueue_script()

Walau bagaimanapun, tiga parameter tambahan membolehkan anda mengawal lebih baik bagaimana skrip dimasukkan, terutamanya parameter Boolean yang terakhir: Secara lalai, nilai boolean ini ditetapkan kepada palsu dan skrip anda akan dimasukkan ke dalam tag kepala, tetapi jika menetapkannya Untuk benar dan skrip anda akan dimasukkan ke dalam tag footer.

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');

Parameter keempat berguna apabila anda membuat versi skrip yang berbeza: ia adalah rentetan yang mengandungi nombor versi, yang akan dilampirkan ke akhir URL. Menambah nombor versi memastikan pelawat mendapatkan versi skrip yang betul tanpa mengira cache.

Parameter ketiga adalah salah satu yang paling menarik, kerana ia membolehkan anda menunjukkan kebergantungan skrip. Sebagai contoh, jika skrip anda memerlukan perpustakaan jQuery, anda boleh menggunakan parameter ini.

Seperti yang anda lihat, walaupun terdapat hanya satu pergantungan, kebergantungan mesti ditunjukkan dalam array. Nama yang anda nyatakan dalam array ini ialah nama skrip yang didaftarkan dengan fungsi kedua:

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));

.

wp_register_script() Fungsi kedua digunakan sama seperti fungsi pertama: anda menunjukkan nama skrip, URL, kebergantungannya, nombor versi, dan sama ada ia mesti dimasukkan ke dalam footer. Tiga parameter terakhir adalah pilihan, tetapi parameter lain diperlukan.

Skrip pendaftaran tidak akan memasukkannya. Anda masih perlu menggunakan fungsi

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

untuk memasukkan skrip anda, tetapi penggunaannya akan dipermudahkan: anda hanya perlu menunjukkan nama skrip.

wp_enqueue_script()

anda mungkin tertanya -tanya bagaimana berguna

wp_enqueue_script('test');

kerana

boleh melakukan semua kerja. Fungsi ini digunakan untuk menunjukkan bagaimana skrip harus dimasukkan, tetapi jika tidak diperlukan, ia tidak akan dimasukkan. wp_register_script() wp_enqueue_script() Contohnya akan lebih jelas, jadi bayangkan anda perlu memasukkan dua fail JavaScript. Fail pertama adalah perpustakaan, dan fail kedua menggunakan perpustakaan ini untuk melakukan sesuatu. Perpustakaan memerlukan jQuery untuk berfungsi dengan baik, jadi kami mendaftarkannya seperti berikut:

Pada ketika ini, perpustakaan tidak termasuk, tetapi jika kita mahu memasukkan fail utama, kita perlu memasukkan perpustakaan ini: kita menunjukkannya sebagai kebergantungan.

wp_register_script('mylib', plugin_dir_url(__FILE__) . 'lib/mylib.js', array('jquery'));

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');

Semua kuasa sihir muncul. Fail MyFile.js dimasukkan, tetapi ia memerlukan fail MyLib.js untuk berfungsi: Ini adalah apa yang berfungsi, ia akan mengandungi fail ini. Tetapi! Fail mylib.js memerlukan jQuery, jadi ia juga mengandungi jQuery. Barisan kod mengandungi tiga fail.

Tetapi itu bukan satu -satunya kelebihan fungsi

: Jika anda mendaftarkan skrip anda, plugin lain akan dapat menggunakannya. Oleh itu, jika anda ingin membuat pelbagai plugin, salah satunya mentakrifkan beberapa perpustakaan, yang lain akan dapat memasukkannya. wp_register_script() Kelebihan terbesar fungsi

ialah ia tidak mengandungi skrip yang sama dua kali. Sebagai contoh, bayangkan bahawa kedua -dua fail memerlukan jQuery: fail -fail ini menunjukkan ia sebagai kebergantungan, dan WordPress akan memasukkan perpustakaan apabila fail pertama dimasukkan. Kemudian ada masa untuk memasukkan skrip kedua. WordPress merawat jQuery sebagai kebergantungan, tetapi perpustakaan sudah mengandunginya, jadi ia tidak perlu memasukkannya lagi: WordPress tidak melakukannya. wp_enqueue_script()

Tingkah laku yang sama juga akan berlaku apabila anda cuba menggunakan dua skrip dengan nama yang berbeza tetapi dengan url yang sama. Dalam contoh berikut, WordPress hanya akan memasukkan fail sekali.

Walau bagaimanapun, nota: Tingkah laku ini terhad: Jika nombor versi ditunjukkan dalam sekurang -kurangnya satu

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));

panggilan, skrip akan dimasukkan dua kali walaupun nombor versi adalah sama. Contoh berikut nampaknya sama dengan yang sebelumnya, tetapi ia akan mengandungi fail dua kali.

wp_enqueue_script()

iaitu, secara umum, anda tidak mempunyai alasan untuk mendaftarkan skrip yang sama dengan nama yang berbeza. Tetapi perlu menjelaskan keadaan.

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

Seperti yang anda lihat, kedua -dua fungsi ini adalah cara terbaik untuk menguruskan kebergantungan: anda mendaftarkannya dan WordPress secara automatik akan mengendalikan selebihnya.

Perhatikan bahawa kami menggunakan nama "

jQuery

" untuk menunjukkan bahawa kami ingin memasukkan jQuery dengan fail kami sendiri, tetapi kami tidak mendaftarkannya. Nama ini didaftarkan oleh WordPress: Apabila anda memuat turun CMS, ia mengandungi jQuery. Perpustakaan ini bukan satu -satunya: anda boleh mencari semua skrip untuk pendaftaran WordPress di halaman ini. Anda boleh mendaftarkannya secara langsung atau melalui kebergantungan, dan ia adalah sejuk bahawa anda tidak perlu menyediakan fail, jadi setiap plugin atau tema yang menggunakan skrip ini akan menggunakan fail yang sama: dalam contoh kami, jika plugin lain menggunakan jQuery, maka perpustakaan hanya akan mengandungi sekali.

Jangan mendaftarkan skrip anda di mana -mana!

Fungsi

memastikan skrip yang sama tidak termasuk dua kali dan dimasukkan dengan betul dalam tajuk atau footer. Tetapi bagaimana jika halaman yang dipaparkan tidak memerlukan skrip anda?

wp_enqueue_script() Menggunakan Action/Filter API

Ambil contoh menambah butang media ke editor kandungan: Fail JavaScript hanya diperlukan apabila pengguna berada dalam editor. Malah, apabila pelawat purata membaca artikel, mereka tidak memerlukan skrip ini: termasuk ia tidak berguna dan akan menjadikan halaman lebih berat.

Jadi apabila anda ingin memasukkan skrip ke dalam halaman, tanyakan pada diri anda soalan berikut: Bilakah anda memerlukan skrip ini? Sudah tentu, jawapan kepada soalan ini akan berbeza -beza bergantung kepada fungsi skrip anda.

Tetapi apabila anda menemui jawapan ini, cuba cari tindakan yang sepadan. WordPress Codex memberikan kami senarai tindakan yang ada, jadi anda boleh mencari tindakan yang anda cari di sini. Menjumpainya? Hebat, buat fungsi baru yang akan mendaftarkan skrip anda dalam fail utama plugin anda atau dalam fail functions.php tema anda, contohnya:

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js');

Kemudian, jalankan apabila tindakan anda dicetuskan:

wp_enqueue_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'));

Contohnya, apabila kita mahu menambah butang media, kita menggunakan tindakan

, yang sempurna: wp_enqueue_media

wp_register_script('test', plugin_dir_url(__FILE__) . 'test.js', array('jquery'), '1.0', true);

Jika anda cuba mencari tindakan ini dalam rujukan yang dipautkan di atas, anda mungkin tidak dapat mencari apa -apa: Apabila menulis baris ini,

tidak disenaraikan. Senarai ini tidak lengkap, tetapi ia adalah titik permulaan yang baik. wp_enqueue_media

Jika anda tidak dapat mencari tindakan yang betul, anda mungkin dapat mencari tindakan lain dengan tingkah laku yang sama, atau anda harus cuba mencari dalam penapis.

Fungsi menggunakan fungsi WordPress!

Biasanya, plugin dicipta untuk sebab -sebab tertentu yang mungkin tidak digunakan sepenuhnya dengan API Tindakan/Penapis. Sebagai contoh, plugin boleh mengubah suai elemen tertentu dalam artikel, tetapi tidak semua elemen: kod pendek adalah contoh klasik.

Katakan plugin anda memerlukan beberapa skrip yang digunakan oleh kod yang menggantikan kod shortcode. Tiada tindakan atau penapis untuk mencari kod pendek anda dengan tepat. Walau bagaimanapun, terdapat tempat yang anda boleh pastikan bahawa kod pendek anda telah dijumpai dan anda boleh memastikan skrip anda diperlukan.

Tempat ini adalah fungsi panggil balik yang dipanggil oleh WordPress setiap kali anda mencari kod shortcode anda. Panggil

dalam fungsi panggil balik ini dan skrip anda tidak akan dimasukkan kecuali jika diperlukan. wp_enqueue_script()

Tetapi apa yang berlaku jika kod pendek anda dijumpai dua kali atau lebih? Jawapannya mudah: tiada apa yang akan berlaku.

Malah, cuba panggil fungsi

dua kali, menggunakan skrip yang sama: Skrip ini hanya akan mengandungi sekali, itulah sebabnya fungsi ini adalah alat yang sangat baik. wp_enqueue_script()

Jadi, anda boleh memasukkan panggilan ini ke dalam fungsi panggil balik anda atau mana -mana bahagian plugin atau tema anda, di mana anda boleh memastikan skrip anda diperlukan: walaupun mereka perlu berbilang kali, mereka hanya akan terkandung sekali.

Perhatikan bahawa mungkin terlambat untuk meminta WordPress untuk memasukkannya ke dalam tag kepala bergantung pada tempat

dipanggil: satu -satunya pilihan anda ialah footer. Sekiranya skrip anda berada dalam tag kepala atas sebab tertentu, pertimbangkannya. wp_enqueue_script()

anda mungkin mempunyai soalan sekarang: Bilakah terlambat?

Setiap topik mesti menggunakan dua fungsi tertentu: wp_head() dan wp_footer(). Apabila bekas itu dipanggil, WordPress secara automatik akan menambah semua baris yang diperlukan di kepala tag: jika anda meminta untuk memasukkan skrip anda di tag kepala, mereka akan dimasukkan semasa memanggil wp_head(), jadi jika anda selepas panggilan wp_head() Jika anda meminta kemasukan ini, skrip anda tidak akan dimasukkan ke dalam tag kepala.

Tetapi WordPress pintar, skrip anda masih akan dimasukkan: anda akan dapat mengambilnya di footer, apabila fungsi wp_footer() dipanggil, dan apabila skrip yang mesti dimasukkan di sini dimasukkan.

Jadi, anda mendapat jawapan: Jika anda benar -benar ingin memasukkan skrip anda dalam tag kepala, sila minta kemasukan sebelum panggilan wp_head(), yang sepatutnya berada di akhir tag kepala topik. Panggilan wp_head() hendaklah berada di hujung dokumen, sebelum akhir tag badan. wp_footer()

Kesimpulan

skrip anda berguna untuk tindakan pemalam atau tema anda lakukan di lokasi tertentu, tetapi termasuk mereka dalam halaman yang tidak memerlukannya akan menjadikan halaman tersebut tidak perlu lebih berat.

WordPress memberikan kami pelbagai alat untuk membolehkan kami memasukkan skrip kami dengan betul dan hanya jika diperlukan. Apabila anda ingin menggunakan alat ini, satu -satunya soalan yang anda perlukan ialah: bila atau di mana skrip saya diperlukan? Selebihnya bergantung pada jawapan: Cari tindakan atau penapis, letakkan panggilan

dalam fungsi yang betul, gunakan fungsi fungsi ini, atau menggabungkan semua ini. wp_enqueue_script()

anda boleh mengambil beberapa contoh yang diterangkan di atas dalam plugin ujian yang disediakan di sini. Ia mendaftarkan skrip dan "perpustakaan" dan mencipta kod pendek yang menggunakan skrip lain yang tidak berguna.

Soalan Lazim (Soalan Lazim) Mengenai termasuk JavaScript dalam plugin atau topik

• Apakah cara terbaik untuk memasukkan JavaScript dalam tema atau plugin WordPress?

Cara terbaik untuk memasukkan JavaScript dalam tema atau plugin WordPress adalah menggunakan fungsi

. Fungsi ini membolehkan anda memasukkan fail JavaScript dalam tema atau plugin WordPress tanpa mengedit secara langsung fail tema atau plugin. Ia juga memastikan bahawa skrip anda dimuatkan mengikut urutan yang betul, menghalang sebarang konflik atau kesilapan yang berpotensi. wp_enqueue_script()

• Bolehkah saya menambah JavaScript terus ke artikel atau halaman WordPress saya?

Ya, anda boleh menambah JavaScript terus ke artikel atau halaman WordPress anda. Walau bagaimanapun, ini tidak disyorkan kerana ia boleh menyebabkan masalah dengan pesanan pemuatan skrip dan mungkin bertentangan dengan skrip lain. Sebaliknya, adalah disyorkan untuk menggunakan fungsi

untuk memasukkan skrip anda. wp_enqueue_script()

• Bagaimana untuk memastikan fail JavaScript saya dimuatkan mengikut urutan yang betul?

Anda boleh memastikan fail JavaScript anda dimuatkan dalam urutan yang betul dengan menentukan kebergantungan semasa mendaftarkan skrip. Fungsi wp_enqueue_script() membolehkan anda menentukan skrip skrip anda bergantung pada, memastikan bahawa ia dimuatkan dalam urutan yang betul.

• Bolehkah saya memasukkan JavaScript dalam fail Functions.php tema WordPress?

Ya, anda boleh memasukkan JavaScript dalam fail Functions.php tema WordPress. Walau bagaimanapun, adalah disyorkan untuk menggunakan fungsi wp_enqueue_script() untuk memasukkan skrip anda. Ini memastikan skrip anda dimuatkan dalam urutan yang betul dan menghalang sebarang konflik yang berpotensi dengan skrip lain.

• Bagaimana untuk mencegah konflik antara fail JavaScript saya dan skrip lain?

Anda boleh menghalang konflik antara fail JavaScript anda dan skrip lain dengan memasukkan skrip anda menggunakan fungsi wp_enqueue_script(). Fungsi ini memastikan skrip anda dimuatkan dalam urutan yang betul dan menghalang sebarang konflik yang berpotensi dengan skrip lain.

• Bolehkah saya menggunakan fungsi wp_enqueue_script() untuk memasukkan fail JavaScript luaran?

Ya, anda boleh menggunakan fungsi wp_enqueue_script() untuk memasukkan fail JavaScript luaran. Anda hanya perlu menyediakan URL skrip luaran sebagai parameter kedua apabila memanggil fungsi.

• Bagaimana untuk memasukkan JavaScript dalam plugin WordPress?

Anda boleh memasukkan JavaScript dalam plugin WordPress dengan menggunakan fungsi wp_enqueue_script(). Fungsi ini membolehkan anda memasukkan fail JavaScript dalam plugin tanpa mengedit fail plugin secara langsung. Ia juga memastikan bahawa skrip anda dimuatkan mengikut urutan yang betul, menghalang sebarang konflik atau kesilapan yang berpotensi.

• Bolehkah saya menggunakan fungsi wp_enqueue_script() untuk mengandungi pelbagai fail JavaScript?

Ya, anda boleh menggunakan fungsi wp_enqueue_script() untuk mengandungi pelbagai fail JavaScript. Anda hanya perlu memanggil fungsi sekali untuk setiap skrip yang anda mahu sertakan.

• Bagaimana untuk memastikan fail JavaScript saya hanya dimuatkan pada halaman tertentu?

Anda boleh memastikan bahawa fail JavaScript anda dimuat hanya pada halaman tertentu dengan menggunakan tag bersyarat dalam fungsi pendaftaran anda. Sebagai contoh, anda boleh menggunakan fungsi is_page() untuk memeriksa sama ada halaman tertentu dipaparkan dan skrip anda hanya didaftarkan apabila halaman dipaparkan.

• Bolehkah saya memasukkan JavaScript dalam sub-tema WordPress?

Ya, anda boleh memasukkan JavaScript dalam sub-tema WordPress. Anda boleh menggunakan fungsi wp_enqueue_script() dalam fail Functions.php tema kanak -kanak untuk memasukkan skrip anda. Ini memastikan skrip anda dimuatkan dalam urutan yang betul dan menghalang sebarang konflik yang berpotensi dengan skrip lain.

Respons ini memberikan versi teks asal yang ditulis semula dan diperbaiki dengan ketara, mengekalkan makna teras sambil meningkatkan kejelasan, aliran, dan kebolehbacaan. Ia juga menggunakan tajuk dan pemformatan yang lebih sesuai untuk pengalaman pengguna yang lebih baik. URL imej kekal tidak berubah.

Atas ialah kandungan terperinci Termasuk javascript dalam plugin atau tema, cara yang betul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!