Apakah Anda ingin belajar bagaimana menambahkan stylesheet CSS dan CSS dengan benar di WordPress? Banyak pengguna DIY sering membuat kesalahan dengan langsung memanggil skrip dan stylesheet mereka di plugin dan tema. Pada artikel ini, kami akan menunjukkan cara menambahkan jaring dan stylesheet dengan benar di WordPress. Ini akan sangat berguna bagi mereka yang baru mulai mempelajari tema WordPress dan pengembangan plugin.
Kesalahan Umum Saat Menambahkan Skrip dan Stylesheets di WordPress
Banyak plugin dan pengembang tema WordPress yang baru membuat kesalahan dengan menambahkan skrip atau inline CSS mereka secara langsung ke dalam plugin dan tema mereka.
Beberapa keliru menggunakan wp_head berfungsi untuk memuat skrip dan stylesheet mereka.
Sementara kode di atas mungkin tampak lebih mudah, ini adalah cara yang salah untuk menambahkan skrip di WordPress, dan ini menyebabkan lebih banyak konflik di masa mendatang.
Misalnya, jika Anda memuat jQuery secara manual dan plugin lain memuat jQuery melalui metode yang tepat, Anda harus memasukkan jQuery dua kali. Jika dimuat di setiap halaman, maka ini akan berdampak negatif terhadap kecepatan dan kinerja WordPress.
Ada kemungkinan juga bahwa keduanya adalah versi yang berbeda yang juga dapat menyebabkan konflik.
Yang sedang berkata, mari kita lihat cara yang tepat untuk menambahkan skrip dan stylesheet.
Mengapa Enqueue Scripts dan Styles di WordPress?
WordPress memiliki komunitas pengembang yang kuat. Ribuan orang dari seluruh dunia mengembangkan tema dan plugin untuk WordPress.
Untuk memastikan semuanya bekerja dengan baik, dan tidak ada yang menginjak jari kaki orang lain, WordPress memiliki sistem enqueuing. Sistem ini menyediakan cara yang dapat diprogram untuk memuat stylesheet JavaScript dan CSS.
Dengan menggunakan fungsi wp_enqueue_script dan wp_enqueue_style, Anda memberi tahu WordPress kapan harus memuat file, di mana memuatnya, dan apa dependensinya.
Sistem ini juga memungkinkan pengembang untuk memanfaatkan pustaka JavaScript built-in yang digabungkan dengan WordPress daripada memuat skrip pihak ketiga yang sama beberapa kali. Hal ini mengurangi waktu buka halaman dan membantu menghindari konflik dengan tema dan plugin lainnya.
Cara Memasang Sketsa dengan Benar di WordPress?
Memuat skrip dengan benar di WordPress sangatlah mudah. Berikut adalah contoh kode yang akan Anda sisipkan di file plugin Anda atau di file functions.php tema Anda untuk memuat skrip di WordPress dengan benar.
? php
fungsi wpb_adding_scripts () {
wp_register_script ('my_amazing_script', plugins_url ('amazing_script.js', __FILE__), array ('jquery'), '1.1', true);
wp_enqueue_script ('my_amazing_script');
}
add_action ('wp_enqueue_scripts', 'wpb_adding_scripts');
?>
Penjelasan:
Kami memulai dengan mendaftarkan naskah kami melalui wp_register_script () fungsi. Fungsi ini menerima 5 parameter:
- $ handle – Menangani adalah nama unik dari naskah Anda. Kami disebut “my_amazing_script”
- $ src – src adalah lokasi skrip anda Kami menggunakan fungsi plugins_url untuk mendapatkan URL yang tepat dari folder plugin kami. Setelah WordPress menemukan itu, maka akan mencari nama file kami amazing_script.js di folder itu.
- $ deps – Deps adalah untuk ketergantungan. Karena script kita menggunakan jQuery, kita telah menambahkan jQuery di area dependency. WordPress secara otomatis akan memuat jQuery jika tidak dimuat di situs.
- $ ver – Ini adalah nomor versi skrip kami. Parameter ini tidak diperlukan.
- $ in_footer – Kami ingin memuat skrip kami di footer, jadi kami telah menetapkan nilainya menjadi benar. Jika Anda ingin memuat skrip di header, Anda akan membuatnya salah.
Setelah memberikan semua parameter di wp_register_script , kita bisa memanggil script di wp_enqueue_script () yang membuat semuanya terjadi.
Langkah terakhir adalah menggunakan wp_enqueue_scripts action hook untuk benar-benar memuat script. Karena ini adalah contoh kode, kami telah menambahkannya tepat di bawah hal lainnya.
Jika Anda menambahkan ini ke tema atau plugin Anda, Anda bisa menempatkan kait tindakan ini dimana naskahnya sebenarnya dibutuhkan. Ini memungkinkan Anda mengurangi jejak memori plugin Anda.
Sekarang beberapa mungkin bertanya-tanya mengapa kita pergi langkah ekstra untuk mendaftarkan naskah terlebih dahulu dan kemudian enqueuing itu? Nah, ini memungkinkan pemilik situs lain melakukan deregister naskah Anda tanpa memodifikasi kode inti plugin Anda.
Styles Enqueue yang Benar di WordPress
Sama seperti skrip, Anda juga bisa menghapus stylesheet Anda. Lihatlah contoh di bawah ini:
Alih-alih menggunakan wp_enqueue_script , kita sekarang menggunakan wp_enqueue_style untuk menambahkan stylesheet kami
Perhatikan bahwa kami telah menggunakan wp_enqueue_scripts kait tindakan untuk kedua gaya dan skrip. Meski namanya, fungsi ini bekerja untuk keduanya.
Pada contoh di atas, kita sudah pakai plugins_url berfungsi untuk menunjuk ke lokasi script atau style yang ingin kita enqueue.
Namun, jika Anda menggunakan fungsi skrip enqueue dalam tema Anda, maka cukup gunakan get_template_directory_uri () sebagai gantinya. Jika Anda bekerja dengan tema anak, gunakanlah get_stylesheet_directory_uri () .
Berikut adalah contoh kode: