WordPress

Cara Membuat Custom CSS WordPress Sendiri

Cara Membuat Custom CSS WordPress Sendiri

Di tutorial ini, kami akan membahas tentang custom CSS WordPress. Ada tiga cara menambahkan CSS di WordPress dengan menggunakan:

  1. Plugin custom CSS WordPress;
  2. Customizer tema yang in-built;
  3. WordPress child theme.

Melalui tutorial ini, kami berharap Anda dapat mengetahui cara membuat CSS sendiri di WordPress. Dengan demikian, Anda dapat mengelola elemen tertentu dan membuat tampilan website Anda lebih menarik dan user-friendly.

Opsi 1 – Menambahkan Custom CSS WordPress dengan Plugin

Cara termudah untuk membuat CSS sendiri di WordPress adalah dengan menggunakan plugin. Ada banyak plugin yang bisa Anda pilih. Di tutorial ini, kami akan membahas plugin custom CSS WordPress serta mengetahui cara kerjanya. Perlu diingat, semua tool yang digunakan dalam panduan ini dapat dengan mudah diinstall via Plugins > Add New pada dashboard.Plugin custom CSS WordPress dapat dengan mudah diinstall via WP Dashboard->Plugins->Add New section

Simple Custom CSS

Simple Custom CSS merupakan salah satu plugin WordPress yang paling banyak digunakan. Dengan plugin ini, Anda dapat mengelola tema sesuai keinginan dan override tema CSS saat ini. Meskipun tema diubah, value yang Anda buat akan tetap sama.Install plugin Custom CSS WordPress, Simple Custom CSS, via dashboard

Setelah diaktifkan, tool bisa diakses via Appearance > Custom CSS. Penggunaan tool ini tidak begitu sulit. Masukkan value apa pun yang Anda inginkan ke editor dan simpan.Cara membuat CSS sendiri di editor interface

Refresh website untuk melihat perubahan yang dilakukan.Custom CSS WordPress berhasil dibuat dan bisa dilihat pada website yang sudah online

WP Add Custom CSS

WP Add Custom CSS adalah tool lain yang bisa Anda manfaatkan untuk membuat custom CSS WordPress.Install plugin Custom CSS WordPress, WP Add Custom CSS, via dashboard

Setelah diunduh dan diinstall, plugin ini akan muncul di bagian yang dedicated pada dashboard. Dari situ, Anda bisa mengaktifkan dan menerapkan CSS ke website.Membuat Custom CSS dengan plugin untuk seluruh bagian website

Hal paling mengasyikkan dari menginstall plugin ini adalah adanya CSS editor di bawah setiap post. Melalui editor tersebut, Anda bisa menerapkan CSS berbeda untuk individual post jika memang diperlukan.Menerapkan Custom CSS WordPress ke individual post via editor

Refresh browser untuk melihat perubahan yang Anda buat.Custom CSS WordPress berhasil ditambahkan dan dapat dilihat di website yang sudah online

Site Origin CSS

Site Origin CSS merupakan tool yang interaktif dan mudah digunakan untuk menambahkan custom CSS WordPress.Install Custom CSS WordPress. SiteOrigin CSS, via dashboard

Setelah terinstall, plugin ini bisa diakses di Appearance > Custom CSS.Pratinjau Custom CSS WordPress dengan plugin SiteOrigin

Plugin ini menawarkan interface editor yang mudah digunakan sehingga Anda dapat memilih bagian mana pun dari situs dan mengeditnya menggunakan tool yang telah tersedia atau dengan menambahkan kode secara manual.Cara menambahkan CSS di WordPress dengan plugin SiteOriginin dan kelola segalanya di interface editor

Simple Custom CSS and JS

Simple Custom CSS and JS merupakan tool yang layak Anda coba. Plugin ini memiliki banyak fitur tambahan jika dibandingkan dengan entry sebelumnya. Salah satu fitur tersebut bisa digunakan untuk menambahkan entri custom JavaScritp.Install plugin Custom CSS WordPress, Simple Custom CSS and JS, via dashboard

Setelah terinstall, plugin ini bisa diakses melalui bagian terpisah yang ada di bawah dashboard Anda. Di bagian atau area tersebut, Anda dapat membuat entry custom CSS, sama seperto ketika Anda membuat post WordPress.Menambahkan entry Custom CSS WordPress melalui dashboard

Untuk mengetes perubahan yang diterapkan, ubah tag h1 sehingga lebih colorful.Cara edit CSS WordPress dan membuat tag 1 lebih colorfoul

Simpan dan lihat perubahan yang telah Anda lakukan.Contoh WordPress Custom CSS yang berhasil diedit

Cara 2 – Cara Menambahkan CSS di WordPress dengan Theme Customizer

Custom CSS WordPress bisa dengan mudah dibuat jika versi WordPress Anda adalah 4.7 dan di atas 4.7. Versi ini menawarkan tool inbuilt pada theme customizer. Untuk bisa menggunakan tool tersebut, buka Appearance > Customize pada dashboard.Buka Appearance dan Customize di WordPress dashboard

Scroll ke bawah dan klik Additional CSS.Menambakan CSS tambahan di WordPress theme editor

Dengan tool inbuilt tersebut, Anda bisa membuat atau menambahkan kode CSS apa pun. Saking mudahnya, bahkan dengan tool tersebut, Anda bisa melihat tampilan website versi mobile dan tablet. Tentu ini menjadi kelebihan tersendiri mengingat zaman sekarang orang-orang lebih suka mengakses internet via perangkat mobile.Contoh WordPress custom css yang menggunakan tool theme editor in-built

Kini Anda sudah tahu cara membuat custom CSS WordPress bahkan cara edit CSS WordPress tanpa harus memanfaatkan plugin.

Opsi 3 – Membuat Custom CSS WordPress dengan Child Theme

Dua opsi di atas menunjukkan cara membuat CSS sendiri di website WordPress yang sudah online. Namun, ada kalanya Anda ingin melihat tampilan CSS sebelum di-publish pada website yang sudah live. Mungkin saja Anda merasa tidak yakin atau tidak ingin membuat error website Anda yang sudah tertata rapi. Dalam hal ini, Anda dapat memanfaatkan WordPress child theme. Dengan child theme, Anda bisa lebih bebas berkreasi dan mencoba berbagai kombinasi CSS. Bahkan Anda pun tak perlu khawatir kalau-kalau website akan terkena dampaknya.

Mengatasi Masalah yang Umumnya Terjadi Terkait Custom CSS WordPress

Tak selamanya membuat CSS sendiri akan berjalan mulus. Bisa saja Anda akan mengalami error, meski tidak terlalu besar. Berikut error atau masalah yang umumnya terjadi ketika Anda membuat atau menambahkan CSS WordPress serta cara mengatasinya.

CSS WordPress Tidak Dapat Ditampilkan

Salah satu penyebab mengapa custom CSS WordPress tidak dapat ditampilkan adalah cache. Apabila Anda menggunakan caching plugin, kemungkinan besar resource tertentu di-cache dan dikirimkan dari penyimpanan sementara untuk menaikkan kecepatan dan mengurangi penggunaan resource. Untuk informasi selanjutnya mengenai cara menghapus cache WordPress, silakan baca tutorial ini. Selain menghapus cache, Anda juga bisa mematikan sementara plugin terkait.

Jika, di sisi lain, browser caching juga diaktifkan, maka Anda hanya perlu menghapusnya untuk melihat perubahan yang telah dibuat dan diterapkan.

Beberapa penyedia web hosting menawarkan tool caching yang in-built untuk meningkatkan performa situs WordPress Anda, contohnya Hostinger. Plugin caching WordPress in-built kami dapat dimatikan atau di-purge via Plugins > Installed Plugins > Must-Use.Mengatasi masalah Custom CSS WordPress caching plugin yang disediakan Hostinger

Salah Pengejaan pada CSS Syntax

Sering kali, salah pengejaan pada CSS Syntax membuat custom CSS WordPress tidak dapat ditampilkan. Apabila hal ini terjadi (dan Anda yakin error tersebut tidak disebabkan oleh cache), maka sebaiknya gunakan CSS validator. Anda hanya perlu paste CSS, lalu jalankan tool tersebut. Beberapa saat kemudian Anda sudah bisa melihat letak kesalahan atau typo.

Terlalu Banyak Pilihan

Karena ada banyak sekali pilihan CSS WordPress, Anda pasti dilanda kebingungan harus memilih yang mana. Menambahkan satu atau lebih CSS saja bisa membawa website Anda pada masalah atau error. CSS pun tidak dapat menawarkan value terbaik untuk diterapkan. Hal ini bisa saja terjadi ketika Anda ‘menimpa’ stylesheet baru di atas stylesheet yang sudah ada. Apabila Anda hendak mengubah heading h2 tetapi tak ada satu pun perubahan yang ditampilkan, maka cara terbaik adalah dengan mengecek kembali style sheet untuk entry yang sudah ada.

Kehabisan Ide

Meskipun ini bukan masalah yang sangat penting untuk diperhatikan, tetap saja harus diwaspadai. Terkadang Anda bingung atau justru kehabisan ide ketika memilih custom CSS mana yang ingin dibuat atau ditambahkan di WordPress. Banyak sekali pilihan yang perlu dipertimbangkan. Namun jangan khawatir, kami menyediakan panduan yang bisa Anda manfaatkan dalam mencari CSS yang tepat:

Kesimpulan

Jika ingin membuat tampilan Anda unik dan menarik, maka salah satu cara yang wajib dilakukan adalah membuat custom CSS WordPress. Di tutorial ini, Anda sudah mempelajari cara menambahkan CSS WordPress sendiri dengan bantuan plugin, tool in-built, dan child theme.

Anda merasa tutorial ini bermanfaat? Jangan lupa share ke teman-teman Anda melalui Facebook, Twitter, atau media sosial lainnya. Jika ada tips, trik, atau saran yang ingin dibagikan, tulislah di kolom komentar di bawah ini!

Tentang penulis

Ariata C.

Ariata suka sekali menulis dan menerjemahkan, dan sekarang ini bekerja sebagai translator di Hostinger Indonesia. Lewat artikel dan tutorial yang diterbitkan di blog Hostinger, Ariata ingin membagikan pengetahuan tentang website, WordPress, dan hal terkait hosting lainnya kepada para pembaca.

Tambah Komentar

Klik di sini untuk menulis komentar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Gabung bersama ratusan ribu pelanggan di seluruh dunia

dan dapatkan tutorial baru langsung di email Anda

Please wait...

Abone olduğunuz için teşekkürler!

Dapatkan harga hemat!

Web Hosting Gratis Domain mulai dari

Rp.10.275
/bln