Ads

Menambahkan Custom Javascript di WordPress

JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript populer di internet untuk mengembangkan aplikasi berbasis web atau situs web.

Salah satu fungsi utama penambahan custom JavaScript di WordPress adalah untuk menyesuaikan tampilan website sesuai kebutuhan.

Akan tetapi, Anda perlu berhati-hati, karena bisa jadi menambahkan custom JavaScript yang salah bisa memunculkan permasalahan yang lebih rumit. Permasalahan yang sering muncul seperti tampilan yang berubah menjadi kacau dan bahkan membuat website tidak dapat diakses.

Manfaat Custom Javascript di WordpPress

Pada pengembangan website yang menggunakan WordPress, ada tiga elemen yang biasanya ada yaitu JavaScript, CSS, dan HTML. Anda memang bisa membuat website menggunakan HTML saja, tetapi hasilnya tidak maksimal. Untuk membuat website dengan performa terbaik, sebaiknya menggunakan ketiga elemen utama, yaitu HTML, CSS, dan JavaScript.

Ada beberapa hal yang JavaScript dapat lakukan supaya website dapat berjalan dengan bagus, baik, dan andal. Sebagai contoh, Anda dapat menggunakan JavaScript untuk melakukan beberapa hal di bawah ini:

  • Mengubah, menampilkan, atau menyembunyikan elemen HTML.
  • Mengubah tata letak elemen dan desain WordPress yang terkadang terbatas untuk diubah.
  • Mengaitkan website dengan pihak ketiga seperti Google Analytics dan Third-Party API.

Cara Pertama Menggunakan Plugin

Menambahkan baris kode ke dalam WordPress bukan perkara mudah. Tidak hanya harus berhati-hati saat menuliskan baris kode, tapi juga bagaimana cara Anda menambahkannya. Cara penulisan baris kode yang salah bisa berakibat fatal dan membuat instalasi WordPress, tema, plugin, dan komponen lain menjadi bermasalah.

Cara yang mudah dan aman untuk menambahkan custom JavaScript di WordPress adalah dengan menggunakan plugin. Berikut plugin yang bisa Anda manfaatkan untuk menambahkan custom JavaScript di WordPress.

Jika ingin menambahkan plugin di WordPress, Anda tinggal membuka fitur instalasi plugin melalui “Plugins » Add New” pada dashboard WordPress.

Simple Custom CSS & JS

Simple Custom CSS dan Javascript Plugin
Dagruel

Simple Custom CSS & JS adalah plugin WordPress yang layak Anda coba. Plugin ini bisa digunakan untuk menambahkan custom JavaScript sekaligus CSS. Jadi, Anda tidak perlu melakukan instalasi plugin terpisah untuk menambahkan script JavaScript atau CSS - cukup menggunakan satu plugin, Anda dapat menambahkan keduanya.

Jika plugin sudah aktif, Anda dapat menemukan menu utamanya di dashboard WordPress yaitu ‘Custom CSS & JS’. Berikut tampilan dashboard plugin Simple Custom CSS and JS.

Anda akan melihat beberapa tombol menu untuk menambahkan kode CSS, kode JavaScript, dan kode HTML. Jika ingin menambahkan kode JavaScript, klik tombol “Add JS Code” dan Anda akan diarahkan ke editor JavaScript. Anda tinggal menambahkan beberapa baris kode ke dalam editor kemudian klik “Save” untuk menyimpan custom JavaScript yang baru.

Meskipun Simple Custom CSS & JS tersedia gratis, Anda dapat upgrade ke akun premium untuk mendapatkan fitur tambahan seperti code revision, CSS preprocessor, minify, dan preview.

Cara Kedua Menggunakan Child Theme

Child Theme adalah metode yang layak Anda coba. Apalagi jika Anda ingin melihat terlebih dahulu tampilan WordPress setelah menambahkan custom JavaScript atau CSS. Cara ini dapat mengatasi ketidakyakinan Anda terhadap kode yang sudah Anda tambahkan dan memastikan jika semua berjalan dengan baik.

Pada proses pengembangan menggunakan Child Theme, website akan tetap terlihat dengan tampilan sebelumnya saat user mengaksesnya Ketika tampilan yang baru sudah benar dan tidak ada masalah, Anda bisa langsung merilisnya. Dengan child theme, Anda bisa lebih bebas berkreasi dan mencoba berbagai kombinasi CSS.

Penutup

Sekian Postingan saya kali ini semoga bermanfaat, dan jika ada yang ingin di tanyakan silahkan berkomentar dibawah. Sampai jumpa dipostingan selanjutnya Terima Kasih.

https://www.niagahoster.co.id/blog/custom-javascript-dan-css-di-wordpress/

Comments

Blogger Disqus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!