Tips Menambah Custom JavaScript ke WordPress Site – Jika Anda ingin meningkatkan fungsionalitas front-end situs WordPress Anda, Anda perlu menambahkan JavaScript ke situs web Anda-apakah Anda menggunakan pustaka pihak ketiga atau skrip khusus. Bergantung pada tujuan dan pengetahuan pengkodean Anda, Anda dapat memilih dari dua teknik berikut untuk menambahkan JavaScript khusus ke WordPress, dari menggunakan plugin hingga melampirkan skrip khusus ke kait tindakan yang berbeda.

Tips Menambah Custom JavaScript ke WordPress Site
Source : qodeinteractive.com

Dalam tutorial ini, kita akan mempelajari setiap metode, melihat cara kerjanya, dan menjelaskan kapan dan metode mana yang harus digunakan.

Tambahkan JavaScript khusus ke WordPress

Meskipun Anda dapat menggunakan Penyesuai bawaan WordPress untuk menambahkan CSS khusus ke tema, JavaScript tidak dapat melakukannya. Untuk menambahkan JavaScript khusus ke situs WordPress Anda, Anda perlu menggunakan plugin atau mengedit file functions.php dari (sub) tema. javascriptoo akan membahas kedua opsi ini secara mendetail, tetapi ini adalah ringkasan singkat.

1. Anda dapat menggunakan berbagai jenis plugin untuk menambahkan JavaScript kustom ke WordPress:

  • Plugin untuk mengedit template header dan footer
  • Plugin untuk menambahkan kode JS khusus ke WordPress
  • Plugin khusus skrip untuk menambahkan dan mengonfigurasi skrip pihak ketiga, seperti Google Analytics atau AdSense

2. Sebagai alternatif, Anda dapat menggunakan fungsi WordPress dan menggunakan hook di file functions.php:

wp_head dan wp_footer action hook
wp_enqueue_scripts , admin_enqueue_scripts dan hook operasi login_enqueue_scripts
wp_enqueue_script() fungsi WordPress

Meskipun cara termudah untuk menambahkan skrip kustom ke situs WordPress adalah dengan menyeret dan melepas tag <script> langsung ke file template header.php atau footer.php, Anda tidak boleh melakukan ini. Ini karena WordPress memiliki urutan pemuatan tertentu, yang harus diikuti dalam hal apa pun.

Jika Anda memasukkan JavaScript khusus langsung ke template header atau footer, ini mungkin bertentangan dengan tema, plugin yang berjalan di situs web, atau inti WordPress. Sebaliknya, Anda harus menggunakan teknik yang dijelaskan dalam artikel ini.

Baca Juga : CSS Barebone Untuk Fluid Images

Oleh karena itu, jangan pernah menambahkan baris berikut ke file header.php atau footer.php Anda (meskipun secara teknis Anda dapat melakukan ini):

Direkomendasikan untuk menggunakan plugin dalam situasi berikut:

  • Tidak ingin mengedit file sumber secara langsung
  • Jika Anda ingin menambahkan JavaScript yang tidak terkait dengan tema, Anda dapat tetap menggunakan
  • JavaScript meskipun Anda memutuskan untuk beralih ke tema baru.

Anda dapat menggunakan berbagai plugin untuk menambahkan JavaScript khusus ke situs WordPress Anda.

Opsi pertama adalah menggunakan plugin yang memungkinkan Anda mengedit file template header dan footer dari tema WordPress Anda. Jika Anda ingin menambahkan skrip yang dimuat sebelum konten halaman (seperti skrip analisis dan pelacakan), Anda perlu mengedit template header, dan skrip dimuat setelah konten memasuki template footer. Umumnya, ketika skrip mengubah elemen yang ditampilkan di halaman (seperti skrip pustaka gambar), itu harus ditempatkan di footer.

Memasukkan header dan footer adalah contoh plugin yang bagus yang memungkinkan Anda mengedit template header dan footer. Ini memiliki antarmuka pengguna yang sederhana dengan hanya dua area teks-satu untuk header dan satu untuk skrip footer. Ini menambahkan skrip Anda ke hook tindakan wp_head atau wp_footer.

Anda dapat memasukkan jenis skrip apa pun ke dalam dua bidang masukan. Anda perlu menggunakan tag <script></script> untuk menyertakan skrip. Selain itu, Anda juga dapat menggunakan plugin ini untuk menambahkan CSS khusus ke template header-Anda hanya perlu melampirkannya dengan tag <style></style> (perhatikan bahwa CSS harus selalu ditambahkan ke header).

insert-headers-and-footers
Source : webdesign.tutsplus.com

1.2. Plugin untuk menambahkan JavaScript khusus

Pilihan lainnya adalah memilih plugin yang memungkinkan Anda menambahkan JavaScript khusus ke situs WordPress Anda. Plugin ini sangat mirip dengan plugin pengeditan header dan footer, dan sebagian besar plugin juga menggunakan pengait aksi wp_head dan wp_footer. Namun, mereka biasanya memberi Anda lebih banyak opsi konfigurasi.

Misalnya, dengan menggunakan plugin Simple Custom CSS dan JS, Anda dapat menentukan tautan permanen untuk file JavaScript khusus, menyimpannya di folder wp-content /, mengelola skrip sebagai jenis posting khusus, dll. Jika Anda ingin menambahkan beberapa file JavaScript khusus ke situs WordPress Anda dan tetap teratur, maka Anda akan menemukan jenis plugin ini sangat berguna.

custom-css-and-js
Source : webdesign.tutsplus.com

Terakhir, jika Anda hanya ingin menambahkan skrip pihak ketiga ke situs web Anda, Anda juga dapat memeriksa apakah skrip tersebut memiliki plugin terintegrasi untuk WordPress. Pembuat perpustakaan JavaScript pihak ketiga yang populer sering menerbitkan plugin gratis di repositori WordPress.org sehingga Anda dapat dengan mudah menambahkan alat mereka ke situs web Anda. Keuntungan terbesar dari jenis pengaya ini adalah biasanya ia menyediakan opsi konfigurasi bawaan untuk pustaka JavaScript tertentu itu.

Misalnya, plugin Google Analytics GA yang populer memungkinkan Anda menambahkan Google Analytics ke situs web Anda langsung dari area admin WordPress. Ini memiliki fitur bawaan khusus untuk skrip Google Analytics, seperti atribusi tautan yang disempurnakan, anonimisasi IP, objek pelacak khusus, dll.

ga-google-analytics-plugin
Source : webdesign.tutsplus.com

2. Edit file functions.php dari tema

Selain mengandalkan plugin, Anda juga dapat menggunakan fungsi bawaan WordPress dan kait tindakan untuk menambahkan JavaScript khusus ke situs web Anda. Dalam hal ini, Anda perlu mengedit file functions.php dan mengunggah skrip ke server secara manual. Direkomendasikan juga untuk membuat tema anak untuk penyesuaian Anda sehingga Anda dapat memperbarui tema induk dengan aman tanpa kehilangan kode kustom. Anda dapat mengunggah skrip kustom ke folder akar tema anak, atau, jika Anda memiliki beberapa skrip, Anda dapat membuat folder skrip untuk mereka.

Anda perlu menambahkan kode PHP untuk mengantre atau mencetak JavaScript khusus Anda ke file functions.php dari tema anak. Anda dapat mengedit file ini di editor kode, lalu mengunggah versi yang diperbarui ke server secara manual, atau Anda dapat mengeditnya melalui menu “Appearance > Theme Editor” di area pengelolaan WordPress (lihat tangkapan layar di bawah).

edit-functions-php-file
Source : webdesign.tutsplus.com

2.1. Gunakan fungsi wp_enqueue_script()untuk skrip kustom Anda

Panduan tema WordPress merekomendasikan penggunaan fungsi wp_enqueue_script() untuk menambahkan skrip kustom ke situs Anda. Fungsi bawaan ini mengikuti urutan pemuatan WordPress dan mengatur skrip kustom Anda dalam urutan yang benar, sehingga tidak akan bertentangan dengan skrip lain yang dimuat oleh inti dan plugin WordPress yang berjalan di situs Anda.

Dengan menggunakan wp_enqueue_script(), Anda dapat menambahkan JavaScript khusus ke template header dan footer. Secara default, ini mengantrekan skrip di bagian <head> halaman yang dimuat oleh template judul.

Jika Anda ingin menambahkan skrip ke tajuk, Anda hanya perlu menetapkan pegangan khusus (“khusus” pada contoh di bawah) dan jalur ke skrip. Seperti yang ditunjukkan di bawah ini, saya juga menggunakan fungsi WordPress get_stylesheet_directory_uri () untuk mendapatkan URI dari direktori sub-tema. Fungsi add_action () menambahkan fungsi kustom tutsplus_enqueue_custom_js () ke hook aksi wp_enqueue_scripts, yang memungkinkan Anda menambahkan skrip kustom untuk ditampilkan di ujung depan situs ke dalam antrian.

Harap dicatat bahwa meskipun fungsi WordPress bawaan wp_enqueue_script() dan wp_enqueue_scripts memiliki nama yang hampir sama, keduanya berbeda.

Selain memasukkan skrip ke dalam header, Anda juga dapat menggunakan fungsi wp_enqueue_script () untuk menambahkan JavaScript kustom ke template footer. Namun, dalam kasus ini, Anda juga perlu menentukan semua parameter opsional secara terpisah:

  • Dependencies: array(), karena saat ini kami tidak memiliki dependensi
  • Versi skrip: false, karena kami tidak ingin menambahkan nomor versi
  • Apakah ini digunakan untuk template header atau template footer: true saat kita beralih ke template footer, ini adalah opsi non-default

Jika skrip kustom Anda memiliki dependensi, Anda perlu menambahkannya ke parameter array () dari fungsi wp_enqueue_script(). Inti WordPress telah mendaftarkan beberapa skrip dan pustaka populer, seperti jQuery, sehingga Anda dapat menggunakan pegangan pendaftarannya (“jquery” dalam contoh di bawah) untuk menambahkannya.

Jika Anda memiliki ketergantungan yang tidak didaftarkan oleh WordPress, Anda perlu menggunakan fungsi wp_enqueue_script () lain untuk mendaftar dan mengantri sebelum Anda dapat menambahkannya sebagai ketergantungan menggunakan pegangan kustomnya.

Jika Anda ingin menjalankan skrip di area manajemen alih-alih di bagian depan situs, Anda perlu menggunakan hook operasi admin_enqueue_scripts alih-alih wp_enqueue_scripts di fungsi add_action (). Untuk layar login, Anda perlu menggunakan hook operasi login_enqueue_scripts, yang hanya memasukkan skrip kustom halaman login.

2.2. Gunakan pengaitwp_head atau wp_footer untuk mencetak skrip sebaris

Meskipun dokumentasi WordPress merekomendasikan penggunaan fungsi wp_enqueue_script () untuk skrip kustom, Anda juga dapat menggunakan pengait tindakan wp_head dan wp_footer untuk menambahkan skrip sebaris ke situs Anda. Pengait ini hanya mencetaknya di template header atau footer, alih-alih mengantri skrip kustom Anda. Oleh karena itu, Anda sebaiknya hanya menggunakan teknik ini untuk menambahkan skrip sebaris dan bukan file .js eksternal.

Ini adalah cara menggunakan hook operasi wp_head untuk mencetak skrip inline di template header:

Beginilah cara Anda menggunakan hook operasi wp_footer untuk mencetak skrip inline di template footer:

Karena wp_head dan wp_footer hanya diluncurkan di bagian depan situs Anda, skrip yang menambahkan pengait ini tidak akan dimuat ke dalam area manajemen dan halaman login. Untuk menambahkan skrip inline kustom ke area manajemen, Anda harus menggunakan hook aksi admin_head dan admin_footer di fungsi add_action (). Selain itu, jika Anda ingin mencetak skrip pada halaman login, gunakan hook operasi login_head dan login_footer.

Baca Juga : Cara Membuat Template WordPress Menggunakan HTML5

Harap dicatat bahwa plugin di atas (masukkan header dan footer dan CSS dan JS kustom sederhana) memang menggunakan wp_head dan wp_footer tidak hanya untuk skrip inline, tetapi juga untuk file .js eksternal, tetapi kecuali Anda benar-benar tahu diri Anda sendiri, jika tidak Anda tidak boleh menggunakan terakhir untuk melakukan ini karena plugin akan melakukan pemeriksaan tambahan untuk memastikan bahwa urutan pemuatan WordPress dipatuhi. Jika Anda ingin menambahkan skrip ubahsuaian secara manual, lebih aman dan mudah untuk tetap menggunakan fungsi wp_enqueue_script () yang disarankan.

Kesimpulan

Anda dapat menambahkan JavaScript khusus ke situs WordPress Anda menggunakan plugin atau dengan mengedit file functions.php dari tema atau sub-tema.

Jika Anda tidak ingin mengedit file sumber, disarankan untuk menggunakan plugin, karena plugin ini memastikan bahwa skrip khusus dimuat dengan urutan yang benar. Mengantre skrip secara manual di file functions.php memungkinkan Anda mengaitkan skrip kustom dengan tema dan mengatur semuanya tanpa harus menambahkan plugin lain ke situs WordPress Anda.