Bagaimana cara membuat skrip dalam tema anak wordpress?

Banyak dari kita menggunakan gaya untuk mengubah tampilan situs web kita, dan skrip untuk meningkatkan fungsionalitas. Namun penting untuk dicatat, bahwa cara Anda menambahkan skrip ini ke WordPress sama pentingnya dengan konten file-file ini. Alih-alih memasukkannya ke dalam file header atau footer, kita perlu menggunakan fungsionalitas enqueue WordPress

Pada artikel ini, saya akan menunjukkan cara menambahkan skrip dan gaya ke tema dan plugin Anda, apakah Anda sedang membuat sesuatu di front-end atau di backend

Kami akan membahasnya

Apa itu Enqueue?

Enqueueing adalah cara ramah CMS untuk menambahkan skrip dan gaya ke situs web WordPress. Beberapa plugin yang Anda miliki mungkin menggunakan jQuery dan skrip bersama lainnya. Jika setiap plugin ditautkan ke aset ini secara terpisah, kekacauan akan terjadi dan semua JavaScript Anda dapat berhenti berfungsi

Dengan memasukkan skrip, Anda memberi tahu WordPress tentang aset yang ingin Anda tambahkan dan itu akan benar-benar menautkannya di header dan footer. Anda bahkan dapat menentukan dependensi skrip dan gaya Anda dan WordPress akan menambahkannya dalam urutan yang benar

Dibutuhkan semua informasi dari apa yang dibutuhkan oleh inti, oleh tema dan plugin Anda, membuat daftar skrip dan gaya yang diperlukan, dan mengeluarkannya di lokasi yang benar

Mengantre. Garis bawah

Tidak peduli bagaimana Anda melampirkan aset Anda, hasil akhirnya akan menjadi tag <script> atau <link> di suatu tempat di HTML situs web Anda. Contoh di bawah menunjukkan tiga skrip dan dua gaya dimuat di situs web

Memuat intinya 37363697ded3703b37c38c13dcb26a7b

Dari segi fungsionalitas, ini baik-baik saja, tetapi jangan lupa bahwa WordPress ditugaskan sedikit lebih banyak daripada yang saya tunjukkan di atas. Mungkin ada beberapa skrip dan gaya lain yang berkeliaran. Karena urutan Anda menyertakan skrip dan gaya sangat penting, jika Anda baru saja mulai menempatkannya di header atau footer tema Anda, Anda mungkin akan segera tersesat

Selain itu, sebagian besar skrip ini tidak terlihat di kode PHP tema Anda. Semua skrip yang diperlukan WordPress dan plugin lainnya ditambahkan melalui fungsi wp_head() dan wp_footer()

Mengantrekan Aset dengan Benar

Enqueueing adalah cara untuk memberi tahu WordPress tentang skrip Anda dan dependensinya. Berdasarkan ini, WordPress menyusun penempatan skrip untuk Anda. Karena ini semua dilakukan dengan kode, Anda tidak perlu khawatir mengatur ulang skrip saat Anda perlu menambahkan yang baru. Mari kita telusuri skrip di bagian sebelumnya, menambahkannya dengan enqueueing

Memuat intinya 5eba5ee051046813680204a397a4949a

Kode ini harus ditempatkan di file functions.php_ tema kita, tema anak, atau di file plugin. Perhatikan bahwa skrip dan gaya diantrekan dengan melampirkan fungsi ke kait wp_enqueue_scripts

Dua hal pertama yang saya antri adalah gaya kami. Saya menentukan gaya tema kita terlebih dahulu, meskipun itu tergantung pada gaya pengaturan ulang. Ini bukan masalah karena saya mendefinisikan ketergantungan ini pada parameter ketiga. Parameter pertama adalah nama unik aset, yang kedua adalah lokasinya

Aset ketiga yang saya tambahkan adalah Owl Carousel yang luar biasa. Pada parameter ketiga saya telah menentukan jQuery sebagai dependensi. Saya tidak perlu membuat antrean ini sendiri karena sudah terpasang di WordPress. Lihatlah daftar skrip yang disertakan

Terakhir, saya sertakan skrip tema. Skrip kami bergantung pada jQuery dan Owl Carousel. Pada kenyataannya Anda bisa lolos hanya dengan mendefinisikan Owl Carousel sebagai ketergantungan. Karena jQuery adalah dependensi untuk Owl Carousel, jQuery akan disertakan sebelumnya. Yang mengatakan, saya suka menyatakan dependensi saya sepenuhnya, itu memberi saya lebih banyak informasi ketika melihat kodenya

Bagian terakhir dari teka-teki ini adalah memastikan skrip tema kita dimuat di footer. Ini dapat dilakukan dengan mendefinisikan parameter kelima sebagai true. Parameter keempat adalah nomor versi opsional yang telah saya atur ke 1. 0

Enqueueing secara Detail

Sekarang setelah Anda melihat contohnya, mari kita mengotori tangan kita dan melihat semua fungsi dan parameter yang tersedia untuk kita

Kami menggunakan dua fungsi. wp_enqueue_script() dan wp_enqueue_style(). Keduanya mengambil lima parameter, berbagi empat parameter pertama

Memuat intinya 915b8254122a3e704612867f8e1f1379

• menangani. Ini adalah nama skrip atau gaya Anda. Yang terbaik adalah menggunakan hanya huruf kecil dan tanda hubung di sini, dan pastikan untuk menggunakan nama yang unik
• sumber. URL skrip atau gaya Anda. Pastikan untuk menggunakan fungsi seperti get_template_directory_uri() atau plugins_uri()
• dependencies. Array pegangan untuk aset yang bergantung pada skrip atau gaya Anda. Ini akan dimuat sebelum skrip enqueued Anda
• Versi: kapan. Nomor versi yang akan ditambahkan ke kueri. Ini memastikan bahwa pengguna menerima versi yang benar, terlepas dari caching
• in_footer. Parameter ini hanya tersedia untuk skrip. Jika disetel ke true, skrip dimuat melalui wp_footer() di bagian bawah halaman Anda
• media. Parameter ini untuk gaya, memungkinkan Anda untuk menentukan jenis media yang gayanya harus ditampilkan. Misalnya. layar, cetak, genggam, dll

Semoga penjelasan parameter membuat contoh kita di bagian sebelumnya menjadi lebih jelas. Anda sekarang dapat mulai bermain-main dengan gaya dan skrip Anda sendiri

Registrasi Aset

Sebenarnya ada dua langkah untuk menambahkan aset, tetapi fungsi enqueueing dapat menyelesaikannya sekaligus. Secara teknis skrip dan gaya pertama kali didaftarkan dan kemudian diantrekan. Registrasi memberi tahu WordPress tentang aset Anda, sementara enqueuing benar-benar menambahkannya ke halaman. Inilah cara alternatif untuk menambahkan Owl Carousel kami

Memuat intinya a5eaebbbb15320a1c7de7716ec02a3b9

Jadi mengapa melakukan ini dalam dua langkah jika satu saja sudah cukup? . Contoh yang bagus adalah kode pendek. Misalkan kode pendek yang Anda buat memerlukan beberapa Javascript. Jika Anda memasukkannya dengan melampirkannya ke wp_enqueue_scripts hook, itu akan dimuat pada setiap permintaan, bahkan jika kode pendek tidak digunakan

Jawabannya adalah dengan mendaftarkan skrip menggunakan wp_enqueue_scripts hook, tetapi enqueue dalam fungsi shortcode. Ini akan memuatnya hanya ketika kode pendek benar-benar digunakan. Jika kode pendek digunakan berkali-kali, skrip hanya akan disertakan satu kali, jadi kami telah membahas semua dasarnya

Fungsi <link>1 dan <link>2 berbagi parameter yang sama dengan saudara enqueuing mereka. Satu-satunya perbedaan adalah fungsi enqueue memungkinkan Anda untuk menentukan hanya pegangan selama pegangan itu telah didaftarkan

Menghapus Script Dan Styles

WordPress menyediakan fungsi dequeueing dan deregistering untuk skrip dan gaya

• <link>_3
• <link>_4
• <link>_5
• <link>_6

Fungsi ini memungkinkan kita menghapus aset secara modular. Contoh berikut menunjukkan bagaimana jQuery dapat dengan mudah dihapus dan diganti dengan versi yang lebih baru

Memuat intinya 702c31353253e89913a7a42b4b2a59f8

Karena itu, hampir tidak pernah merupakan ide bagus untuk mengganti jQuery dengan versi baru. WordPress dibangun untuk bekerja semulus mungkin dengan versi yang ditambahkan secara default. Menggantinya tidak boleh dianggap enteng

Menyimpulkan

Mudah-mudahan, sekarang Anda mengerti mengapa enqueueing adalah proses yang sangat penting. Dibutuhkan beban pemeliharaan ketergantungan dari bahu Anda dan memungkinkan Anda untuk menambahkan skrip Anda dengan cara yang modular dan dapat dikelola

Enqueueing diperlukan untuk semua plugin dan tema WordPress. Produk Anda (gratis atau premium) tidak akan diterima di repositori WordPress dan banyak pasar premium tanpanya. Ini membentuk dasar dari “bermain baik dengan orang lain” dan harus diikuti oleh setiap pengembang

Bagaimana cara membuat skrip dalam antrean tema WordPress?

Bagaimana Anda membuat skrip?

Bagaimana cara membuat skrip di footer WordPress?

Bagaimana Anda menyesuaikan tema anak di WordPress?