Cara Menambahkan JavaScript Khusus ke Situs WordPress

Cara Menambahkan JavaScript Khusus ke Situs WordPress

JavaScript mengambil peran besar di WordPress karena sebagian besar fungsinya didukung oleh kode JavaScript. Sebagai pengguna WordPress, penting bagi Anda untuk mengetahui cara bekerja dengan JavaScript.

Meskipun Anda seorang pemula dan baru saja menyiapkan situs web WordPress sederhana, Anda harus membiasakan diri dengan JavaScript. Terutama karena beberapa alat situs web yang Anda gunakan, seperti Google Analytics dan AdSense, menggunakan kode JavaScript yang perlu Anda sematkan di situs web Anda.

Siapa Takut. Anda tidak harus mempelajari seluruh bahasa pemrograman untuk menggunakan JavaScript di WordPress. Dalam panduan ini, kami akan memberi Anda pengantar singkat tentang apa itu JavaScript, apa fungsinya, dan cara menggunakan JavaScript di WordPress.

Mari selami.

Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman populer yang biasa digunakan dalam desain situs web. Sama seperti HTML dan CSS, JavaScript digunakan untuk menambahkan elemen fungsional ke situs web seperti memvalidasi informasi yang Anda kirimkan melalui formulir dan bahkan digunakan untuk memperkuat menu tarik-turun di situs web.

Pada dasarnya, jika Anda melihat elemen animasi atau interaktif di situs web, kemungkinan besar itu didukung oleh JavaScript.

JavaScript mendapat reputasi buruk karena membuat situs web memuat lebih lambat. Itu sebagian benar. Jika Anda mengisi situs web Anda dengan terlalu banyak elemen dan skrip JS, itu akan melambat. Namun, jika Anda mengetahui batasan Anda, itu tidak akan berdampak besar pada waktu muat situs web.

Mengapa Menambahkan JavaScript Khusus di WordPress?

Suka atau tidak suka, Anda harus menambahkan kode JavaScript khusus ke situs WordPress Anda. Terutama jika Anda berencana menambahkan analitik ke situs web Anda, menghasilkan uang dengan iklan, atau bahkan menambahkan animasi.

Misalnya, saat menggunakan Google Analytics untuk melacak lalu lintas situs web Anda, Anda harus menambahkan kode pelacakan JavaScript ke situs web Anda untuk mengumpulkan data.

Bahkan iklan Google AdSense menggunakan JavaScript untuk menampilkan iklan di situs web Anda. Dan ada banyak contoh lain di mana Anda harus menambahkan kode JavaSript khusus di WordPress.

Plugin WordPress Terbaik untuk Menambahkan JavaScript

Untungnya, menambahkan kode JavaScript di WordPress cukup mudah. Anda bisa menyelesaikannya dengan bantuan plugin gratis. Ini adalah beberapa plugin teratas yang dapat Anda gunakan untuk pekerjaan itu.

1. Sisipkan Header dan Footer

masukkan header dan footer

  • Harga: Gratis

Ini adalah salah satu plugin termudah dan paling sederhana yang dapat Anda gunakan untuk menambahkan JavaScript khusus ke situs WordPress Anda. Gratis, ringan, dan memiliki UI sederhana tempat Anda dapat menambahkan skrip tanpa kerumitan apa pun.

Seperti namanya, plugin akan membantu Anda menambahkan skrip ke header dan footer situs Anda. Ini paling cocok untuk menambahkan kode JavaScript yang lebih sederhana seperti kode pelacakan Google Analytics, kode AdSense, dan Facebook Pixel.

2. CSS dan JS Kustom Sederhana

css dan js kustom sederhana

  • Harga: Gratis

Ini adalah plugin yang sedikit lebih canggih untuk menambahkan kode JavaScript kompleks ke situs web Anda. Plugin ini menyertakan editor kode tempat Anda dapat menulis JavaScript Anda sendiri dan menambahkannya dengan mudah ke situs web Anda.

Ini juga memiliki fitur yang memungkinkan Anda untuk menyimpan kode JavaScript Anda secara eksternal dalam file terpisah, yang merupakan standar yang baik untuk diikuti saat menambahkan kode JS khusus.

3. JavaScript Khusus TC

tc javascript khusus

  • Harga: Gratis

TC Custom JavaScript adalah plugin sederhana lainnya yang dapat Anda gunakan untuk menambahkan kode JS dengan mudah ke situs web Anda. Itu juga dilengkapi dengan editor kode tempat Anda menulis dan mengelola skrip Anda. Namun, tidak seperti plugin Simple Custom CSS, yang ini tidak menawarkan opsi apa pun untuk menyimpan file secara eksternal.

4. Kotak Alat CSS & JavaScript

css dan kotak alat Javascript

  • Harga: Gratis

Plugin ini dibuat dengan mempertimbangkan pengguna dan pengembang tingkat lanjut. Ini memiliki editor yang rumit dengan banyak opsi untuk menambahkan tidak hanya kode JavaScript tetapi juga CSS, HTML, dan bahkan PHP. Plugin ini juga memiliki versi premium dengan opsi tambahan.

5. Kode Kustom

kode khusus

  • Harga: Gratis

Plugin Kode Kustom adalah opsi lain yang dapat Anda gunakan untuk menambahkan kode JavaScript kustom, seperti kode pelacakan Analytics, ke situs Anda. Ini juga mendukung CSS, PHP, HTML, dan SASS juga. Dan fitur editor kode modern dengan penyorotan sintaks.

Cara Menambahkan Kode JavaScript di WordPress

Ada beberapa metode berbeda yang dapat Anda gunakan untuk menambahkan kode JS di WordPress. Kami akan memandu Anda melaluinya, selangkah demi selangkah.

Metode 1: Gunakan Plugin Sisipkan Headers dan Footers

Metode termudah untuk menambahkan kode JS adalah dengan menggunakan plugin sederhana. Dan Sisipkan Header dan Footer plugin adalah pilihan sempurna untuk itu.

memasang header dan footer 1

Langkah 1: Mari kita mulai dengan menginstal plugin. Masuk ke dasbor admin WordPress Anda dan buka Plugin >> Tambahkan Baru. Cari plugin Insert Headers and Footers. Install dan Mengaktifkan plugin.

pasang header dan footer 2

Langkah 2: Setelah menginstal plugin, buka Pengaturan >> Sisipkan Header dan Footer halaman untuk menambahkan kode JS kustom Anda.

Cukup salin dan tempel kode Anda ke bagian header, body, atau footer situs web Anda. Dan klik Menyimpan untuk menyimpan perubahan.

Metode ini paling baik untuk menambahkan tag JS sederhana seperti kode Google Analytics ke situs web Anda.

Metode 2: Gunakan Plugin Custom CSS dan JS Sederhana

Jika Anda ingin menambahkan skrip tingkat lanjut ke situs web dan halaman Anda, gunakan CSS dan JS Kustom Sederhana. Ini akan memungkinkan Anda untuk menyesuaikan bagaimana kode ditambahkan dan bahkan menyimpannya sebagai file terpisah.

instal custom css 1 sederhana

Langkah 1: Pergi ke Plugin >> Tambahkan Baru dan cari plugin Simple Custom CSS dan JS. Install dan Mengaktifkan plugin.

instal custom css 2 sederhana

Langkah 2: Setelah Anda menginstal plugin, tab baru bernama Custom CSS dan JS akan muncul di panel admin WordPress Anda. Dari sana, Anda dapat memilih untuk menambahkan kode JS, CSS, dan HTML.

instal custom css 3 sederhana

Langkah 3: Buat file JS baru untuk skrip Anda dan tulis kode menggunakan editor. Di sini Anda akan memiliki opsi untuk mencetak kode ke dalam file eksternal dan memilih tempat untuk memasukkan kode.

Hal yang hebat tentang menggunakan plugin ini adalah memungkinkan Anda untuk mengelola skrip dan kode Anda secara terpisah.

Metode 3: Tambahkan Kode JS Kustom secara Manual

Jika Anda memilih untuk tidak menggunakan plugin, Anda juga dapat menambahkan kode JavaScript khusus secara manual. Metode ini melibatkan pengeditan file Functions.php di situs Anda. Anda juga dapat menambahkan tag sederhana seperti kode pelacakan Google Analytics ke file Header.php di tema Anda.

Namun, kami tidak merekomendasikan penggunaan salah satu metode berikut untuk menambahkan kode JavaScript karena dapat mengganggu urutan pemuatan WordPress. Dan kami sangat menyarankan pemula untuk tidak mengedit file tema, terutama file Functions.

Karena itu, jika perlu, Anda dapat menambahkan JavaScript khusus dengan menyalin-tempel kode berikut ke Functions.php mengajukan.

function wpb_hook_javascript () {
?>

}
add_action (‘wp_head’, ‘wpb_hook_javascript’);

Pastikan untuk menambahkan kode Anda di antara tag . Ini akan menambahkan kode Anda ke bagian tajuk situs web Anda.

Untuk informasi lebih rinci tentang menambahkan JavaScript khusus di WordPress, baca panduan resmi ini.

Kesimpulan

Seperti yang telah kami sebutkan sebelumnya, Anda harus berhati-hati saat menambahkan kode JavaScript khusus di WordPress. Tambahkan hanya kode yang paling penting dan hindari yang lainnya. Terutama hindari menambahkan kode JS dari sumber yang tidak dikenal.

Bahkan saat memilih tema untuk situs web Anda, pastikan untuk memilih tema ringan yang menggunakan lebih sedikit skrip. Anda dapat melihat paket tema eksklusif kami untuk mendapatkan inspirasi tentang tema WordPress yang hebat.

.