Cara Membuat Custom CSS WordPress dengan Mudah

Topik kali ini saya akan membahas cara membuat custom css wordpress. WordPress adalah sebuah platform yang sangat terkenal dikalangan para blogger maupun web developer. Biasa dimanfaatkan untuk mencari uang ataupun hobby sebagai penulis. Namun tidak banyak diantara mereka yang mengetahui cara menggunakan wordpress dengan baik.

Jika anda tau, template wordpress sangat banyak diluar sana. Mungkin wordpress adalah salah satu platform yang dimana menyediakan template gratis yang paling banyak diantara platform lainnya seperti drupal dan lainnya. Memang mudah untuk mencari template gratis untuk website kita, namun terkadang agak susah mencari template yang sesuai dengan keinginan kita.

Walaupun perubahan yang kita inginkan tidak banyak seperti ukuran font, warna background menu, dan lainnya. Biasanya hal yang dilakukan pertama kali yaitu mencari plugin yang dapat merubah itu semua dengan mudah.

Namun cara tersebut tidak sangat disarankan untuk anda, cara itu sangat kotor di dunia per-wordpress-an. Cara yang paling mudah diantaranya, dengan membuat custom CSS template anda. Adapun caranya sangat mudah, dengan ketentuan anda harus mempunyai basic pengetahuan seperti dibawah ini :

Pengetahuan dasar yang wajib dimiliki oleh pengguna WordPress

  • HTML Basic (Yang penting tau syntax dasarnya aja)
  • CSS Basic (syntax dan tau komponen penting css)

BACA : Cara Mengecilkan Ukuran File Gambar di WordPress

Jika anda sudah mempunyai pengetahuan dasar seperti yang dijelaskan diatas, maka cara ini tidak akan sulit buat anda.

 

šŸ‘ Cara Membuat Custom CSS WordPress dengan Mudah

Note : Baca perlahan sambil diikuti.

Saya mengambil contoh kasus template yang saya gunakan sekarang, misalkan saya mau rubah warna menu / header website saya. Saya tinggal arahkan cursor ke object tersebut, lalu klik kanan dan pilih inspect element.

Lalu, perhatikan pada element yang mau kalian ganti dengan sorot cursor kalian pada bagian HTML (inspect element). Jika sudah sesuai, kalian bisa coba ganti di CSS code sebelah kanan.

Cara Membuat Custom CSS WordPress dengan Mudah

Kalau sudah, coba dimodifikasi warnanya. Kalau sudah, salin CSS Class nya. Disini saya contohkan salin CSS Class .site-header beserta isinya. Jika sudah kalian masuk ke halaman admin wordpress, Appearance > CustomizeĀ scroll kebawah lalu pilih Additional CSS.

Cara Membuat Custom CSS WordPress dengan Mudah

Tempelkan (Paste) kode yang kalian salin tadi ke dalam additional CSS. Contoh :

.site-header {
background-color: #3590da !important;
}

Perhatikan pada tanda !important, itu membuat custom css yang anda tambahkan mendapatkan prioritas “important“. So yang akan diproses adalah css yang baru saja anda tambahkan di additional CSS.

Good Luck!

Tinggalkan Balasan