Cara Menambahkan Custom Javascript dan CSS di WordPress
4 min read
JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript populer di internet untuk mengembangkan aplikasi berbasis web atau situs web. Sedangkan CSS adalah bahasa pemrograman yang digunakan untuk mengatur style di dalam website atau bisa disebut dengan kumpulan kode-kode yang bertujuan untuk mengatur tampilan/layout halaman web supaya terlihat lebih menarik oleh pengunjung.
Salah satu fungsi utama penambahan custom JavaScript dan CSS di WordPress adalah untuk menyesuaikan tampilan website sesuai kebutuhan.
Akan tetapi, Anda perlu berhati-hati, karena bisa jadi menambahkan custom JavaScript dan CSS 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.
Pada artikel ini kami akan membahas bagaimana cara menambahkan custom JavaScript dan CSS di WordPress dan beberapa alasan kenapa hal ini mungkin perlu Anda lakukan.
Manfaat Custom JavaScript dan CSS di WordPress
Hal pertama yang menjadi pertanyaan adalah alasan kenapa menambahkan custom JavaScript dan CSS di WordPress itu diperlukan.
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 atau memaksimalkan fungsionalitas plugin WordPress.
- Mengubah tata letak elemen dan desain WordPress yang terkadang terbatas untuk diubah.
- Menambahkan variabel ke dalam CSS seperti memberikan respon saat action diambil dan menggabungkan dua variabel.
- Mengaitkan website dengan pihak ketiga seperti Google Analytics dan Third-Party API.
Sedangkan menambahkan custom CSS di WordPress tentu saja untuk memberikan tampilan yang ideal dan sesuai dengan kebutuhan yang diinginkan. Selain itu ada beberapa manfaat menambahkan custom CSS di WordPress yang perlu Anda ketahui.
- Mengubah dan menyesuaikan format teks.
- Menyesuaikan warna dan ukuran layout pada tampilan WordPress.
- Menentukan style konten yang berbeda-beda.
Cara (1) – Menambahkan Custom CSS di WordPress Dengan 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 dan CSS di WordPress adalah dengan menggunakan plugin. Berikut empat plugin yang bisa Anda manfaatkan untuk menambahkan custom JavaScript dan CSS di WordPress.
Jika ingin menambahkan plugin di WordPress, Anda tinggal membuka fitur instalasi plugin melalui “Plugins » Add New” pada dashboard WordPress.
1. Simple Custom CSS
Simple Custom CSS adalah plugin custom CSS yang paling banyak digunakan. Ketika Anda menggunakan tema ini, file CSS isinya tidak akan berubah dan akan tetap sama dengan yang aslinya. Plugin ini bekerja dengan meng-override nilai (value) yang ada di dalam file CSS asli, jadi ketika melakukan update tema tidak akan mengubah custom CSS yang sudah ditambahkan.
Simple Custom CSS merupakan salah satu plugin yang mudah untuk Anda gunakan. Anda hanya perlu masuk ke dalam menu “Appearance » Custom CSS” setelah plugin aktif. Anda dapat memasukkan berbagai macam nilai dan variabel.
Jangan lupa klik “Update Custom CSS” ketika sudah selesai menambahkan kode CSS yang baru.
2. Simple Custom CSS & JS
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.
3. Custom CSS and JavaScript
Plugin ini memungkinkan Anda untuk menambahkan custom JavaScript dan CSS ke situs WordPress Anda. Plugin ini sangat berguna untuk mengganti CSS dan JavaScript sehingga Anda bisa menyesuaikan desain, tampilan, dan juga fungsionalitas sesuai dengan selera Anda.
Anda perlu mengaktifkan plugin terlebih dahulu. Setelah aktif, cara menggunakannya plugin ini cukup mudah. Buka tab Custom CSS di “Appearance » Custom CSS”. Tab ini akan menampilkan teks editor yang nantinya Anda gunakan untuk menambahkan beberapa baris kode.
Plugin Custom CSS and JavaScript ini juga menawarkan fitur revision dan minify secara gratis tanpa harus membayar. Anda dapat menyimpan kodenya terlebih dahulu menggunakan tombol “Save” atau langsung menerapkannya ke dalam website menggunakan tombol “Save & Publish”. Namun, sebelum mengeksekusi perintah “Save & Publish“, pastikan terlebih dahulu kode yang Anda masukkan sudah benar. Sebab custom atau JavaScript yang Anda tambahkan akan langsung diterapkan di website yang aktif.
4. WP Add Custom CSS
Plugin custom CSS lain yang layak Anda coba adalah WP Add Custom CSS. Plugin ini adalah alternatif lain untuk menambahkan custom CSS di WordPress.
Anda bisa mengakses WordPress Add Custom CSS cukup melalui halaman “Dashboard » Add Custom CSS”. Anda akan melihat teks editor dengan beberapa opsi. Untuk menambahkan kode CSS, masukkan ke dalam CSS rules kemudian klik “Save” untuk menyimpannya.
Cara (2) – Menambahkan Custom CSS Menggunakan Editor WordPress
WordPress sendiri sudah menyediakan editor untuk mengubah CSS dan JavaScript yaitu Editor WordPress. Hanya saja fitur ini tidak dianjurkan untuk melakukan custom CSS dan JavaScript karena cukup beresiko. Sebab Editor WordPress akan langsung menerapkan pengubahan yang Anda tulis. Jadi Anda tidak bisa menyimpan kode terlebih dahulu atau melihat preview pengubahan yang Anda buat. Ketika Anda menyimpannya, WordPress akan langsung menerapkan ke website.
Selain itu, mengedit tema secara langsung dapat menyebabkan website rusak dan penambahan atau pengubahan kode akan hilang pada update selanjutnya.
Jadi kami sarankan melakukan backup file atau data sebelum mengubah kode CSS dan JavaScript menggunakan Editor WordPress. Anda dapat menggunakan file manager atau FTP untuk menyalin atau menjalankan proses backup. Selain itu Anda bisa menggunakan plugin backup untuk melakukan backup WordPress.
Anda dapat mengakses fitur ini melalui “Dashboard » Appearance » Editor” dan Anda akan menemukan beberapa file beserta teks editornya.
Selain editor di WordPress, Anda juga dapat menggunakan Theme Customizer untuk mengubah konfigurasi CSS yang ada di WordPress. Cara dengan mengakses halaman “Appearance » Customize”. Anda akan menemukan opsi untuk menambahkan kode CSS ke dalam tema WordPress.
Cara (3) Menambahkan Custom JavaScript dan CSS WordPress dengan Child Theme
Cara pertama dan kedua dapat digunakan untuk website yang sudah aktif. Bagaimana cara melihat tampilan WordPress yang sudah diubah beberapa baris kodenya sebelum di-online-kan? Gunakan 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
Banyak cara yang bisa Anda coba untuk menambahkan custom JavaScript dan CSS di WordPress. Anda bisa mencoba menggunakan plugin yang dengan mudah diinstall melalui halaman dashboard WordPress. Anda juga dapat menambahkan beberapa baris kode menggunakan editor langsung yang tersedia –namun tidak disarankan untuk menggunakan editor ketika pengubahan yang dilakukan cukup kompleks dan skala besar.
Kami lebih menyarankan Anda untuk menggunakan plugin atau child theme untuk mengurangi resiko kerusakan. Selain mengurangi resiko kerusakan, kedua cara ini tidak akan mengubah kode ketika menjalankan proses update.
Komentar
Posting Komentar
This Message