Menambahkan Javascript ke Tema WordPress Dengan Cara Yang Benar

Ada cara khusus untuk menambahkan Javascript ke tema WordPress Anda untuk mencegah konflik dengan plugin atau Tema WordPress induk. Masalahnya adalah bahwa banyak “pengembang” memanggil file javascript mereka langsung di file header.php atau footer.php yang merupakan cara yang salah untuk melakukannya.


Dalam panduan ini saya akan menunjukkan kepada Anda cara memanggil file javascript Anda dengan benar menggunakan file functions.php Anda sehingga mereka memuat langsung ke tag kepala atau catatan kaki situs Anda. Dengan cara ini jika Anda mengembangkan tema untuk distribusi dan pengguna akhir Anda ingin memodifikasi skrip melalui tema anak mereka dapat atau jika mereka menggunakan minifying / caching atau plugin optimasi lainnya mereka akan bekerja dengan benar. Dan jika Anda bekerja dengan tema anak Anda skrip Anda ditambahkan dengan cara yang benar, tanpa menyalin file header.php atau footer.php ke tema anak Anda yang seharusnya tidak diperlukan (ketika bekerja dengan tema yang dikodekan dengan baik)

Cara Yang Salah Untuk Menambahkan Javascript ke Tema WordPress

Memanggil javascript di file header.php Anda atau file footer.php seperti yang ditunjukkan di bawah ini, BUKAN cara yang benar dan saya sangat menyarankan untuk tidak melakukannya, sering kali hal itu menyebabkan konflik dengan plugin lain dan melakukan hal-hal secara manual ketika bekerja dengan CMS tidak pernah sebuah ide bagus.

Cara Yang Benar Untuk Menambahkan Javascript Ke Tema WordPress

Yang lebih baik untuk menambahkan javascript ke tema WordPress Anda adalah melakukannya melalui file functions.php wp_enqueue_script. Menggunakan tindakan wp_enqueue_scripts untuk memuat javascript Anda akan membantu menjaga tema Anda dari masalah.

Contoh

wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array (), true);

Kode di atas akan memuat file my-script.js di situs Anda. Seperti yang Anda lihat, saya hanya menyertakan $ handle tetapi Anda juga dapat menambahkan dependensi untuk skrip, nomor versi dan apakah akan memuatnya di header atau footer (defaultnya adalah header).

Fungsi wp_enqueue_script () secara teknis dapat digunakan dalam file template tema atau plugin apa pun, tetapi jika Anda memuat skrip global, Anda ingin meletakkannya di file function.php tema Anda atau dalam file terpisah yang secara khusus dimaksudkan untuk memuat skrip pada situs Tetapi jika Anda hanya ingin memuat skrip pada file templat tertentu (misalnya pada posting galeri), Anda dapat menempatkan fungsi tepat di file templat, namun, secara pribadi saya sarankan menyimpan semua skrip di satu tempat dan menggunakan kondisional untuk memuat skrip sesuai kebutuhan.

Script Hosted WordPress

Satu hal keren tentang WordPress adalah sudah ada banyak skrip yang diinangi oleh dan terdaftar yang dapat Anda gunakan dalam pengembangan tema Anda. Misalnya jQuery yang digunakan di hampir setiap proyek harus SELALU dimuat dari WordPress dan tidak pernah di-host di situs pihak ke-3 seperti Google. Jadi sebelum Anda menambahkan skrip khusus ke proyek Anda, periksa daftar skrip terdaftar untuk memastikan itu belum termasuk dalam WordPress dan jika itu Anda harus memuat yang bukan mendaftar sendiri.

Menggunakan Hook Enqueue WordPress

Sebelumnya kami menyebutkan fungsi yang diperlukan untuk memuat skrip di situs Anda, namun, ketika bekerja dengan file non template seperti file functions.php Anda, Anda harus menambahkan fungsi ini di dalam fungsi lain yang terhubung ke kait WordPress yang tepat, dengan cara ini skrip Anda mendapatkan terdaftar dengan semua skrip lain yang didaftarkan oleh WordPress, plugin pihak ke-3 dan tema orang tua Anda saat menggunakan tema anak.

WordPress memiliki dua kait tindakan berbeda yang dapat Anda gunakan untuk memanggil skrip Anda.

  1. wp_enqueue_scripts – tindakan yang digunakan untuk memuat skrip di front-end
  2. admin_enqueue_scripts – tindakan yang digunakan untuk memuat skrip di admin WP

Berikut ini adalah contoh (yang akan ditambahkan ke file functions.php Anda) tentang cara membuat fungsi dan kemudian menggunakan kait WordPress untuk memanggil skrip Anda.

/ **
* Enqueue a script
* /
function myprefix_enqueue_scripts () {
wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array (), true);
}
add_action ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Catatan: Lihat bagaimana kami menggunakan fungsi “get_template_directory_uri” saat menentukan lokasi skrip Anda? Fungsi ini membuat URL ke folder tema Anda. Jika Anda bekerja dengan tema anak Anda akan ingin menggunakan “get_stylesheet_directory_uri” sebagai gantinya sehingga menunjuk ke tema anak Anda dan bukan tema induknya.

Menambahkan Kode Javascript Inline

Meskipun Anda dapat dengan mudah menempelkan javascript sebaris di file templat apa pun melalui tag skrip, Anda juga dapat menggunakan kait WordPress untuk menambahkan kode inline, terutama ketika itu adalah plugin inti atau kode tema. Di bawah ini adalah contoh menambahkan skrip sebaris ke situs Anda:

function myprefix_add_inline_script () {
wp_add_inline_script ('my-script', 'alert ("hello world");', 'after');
}
add_action ('wp_enqueue_scripts', 'myprefix_add_inline_script');

Apa yang akan dilakukan adalah menambahkan javascript sebaris Anda setelah skrip “skrip” yang terdaftar sebelumnya. Saat menggunakan wp_add_inline_script Anda hanya dapat menambahkan kode inline baik sebelum atau setelah skrip yang sudah terdaftar jadi jika Anda mencoba untuk memodifikasi kode skrip tertentu pastikan itu dimuat setelah itu, atau jika Anda hanya perlu menambahkan beberapa kode khusus Anda dapat menghubungkan ke skrip jquery yang umumnya dimuat oleh sebagian besar tema WordPress dan jika tidak, Anda dapat menggunakan wp_enqueue_script untuk memuat versi jQuery yang dihosting WordPress.

Dengan menggunakan metode ini orang dapat dengan mudah menghapus skrip inline Anda melalui tema anak atau add-on plugin, itu membuat semua javascript kustom Anda teratur rapi dan diurai oleh WordPress yang bisa lebih aman. Dan jika Anda menggunakan tema anak Anda dapat memuat skrip Anda melalui file functions.php Anda alih-alih menyalin file header.php atau footer.php ke tema anak Anda.

Yang mengatakan, jika Anda bekerja di tema anak Anda tidak perlu melakukan ini, Anda dapat dengan mudah membuang kode Anda ke header Anda menggunakan wp_head atau kait wp_footer seperti contoh di bawah ini:

add_action ('wp_footer', function () {?>  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map