5+ Cara Edit (Custom) CSS di WordPress (WP) dengan Mudah

Gimana Cara edit dan menambahkan CSS di Wordrpess? Selengkapnya akan dibahas pada artikel kali ini.

Custom CSS (Cascading Style Sheet) adalah salah satu fitur yang tersedia di theme wordpress, yang fungsinya untuk memodifikasi atau mengedit tampilan css, dan juga tata letak atau layout css, dari theme yang sedang kita gunakan.

Custom CSS disini juga bisa disebut Additional CSS, atau code css tambahan khusus , yang dimana kita bisa menyisipkan baris kode css ,untuk edit tampilan , tanpa perlu kita mengeditnya lewat theme editor pada style.css.

Jadi untuk pengeditan minor atau kecil-kecilan , seperti ganti margin , ukuran ,warna ,gaya font , dan lainnya kita bisa gunakan fitur ini.

Pada artikel tentang wordpress kali ini , teknoding akan mencoba menambahkan custom css, pada website wordpress , dengan menggunakan 2 cara. Selengkapnya, berikut mari kita simak lebih lanjut :

Cara Menambahkan Custom CSS di WordPress

1. Edit CSS dengan Customizer

Berdasarkan dokumentasi codex.wordpress.org tentang css , sejak Wordrpess versi 4.7 , kalian dapat menambahkan, dan membuat code custom css sendiri , pada bagian theme customizer.

  1. Pergi ke halaman dashboard admin WordPress.
  2. Pilih menu Appearance > lalu Customize.
    cara edit css wordpress
  3. Selanjutnya pada Customize, kalian pilih Additional CSS.
    customize additional css wp
  4. Pada Additional CSS ,disini kalian bisa memasukan baris code css sendiri , setelah itu kalian bisa melihat hasil tampilannya secara langsung.
  5. Sebagai contoh ,disini saya mengedit header dari theme ini , menggunakan selector header .site-header .menu.text , untuk menebalkan font .font-weight:bold, lalu membuat semua huruf kapital .text-transform:uppercase.
  6. Untuk belajar css kalian bisa kunjungi w3schools.com.
additional custom code css wordpress
Custom Code CSS

2. Edit CSS dengan Memasang Plugin

Jika kalian tidak ingin menggunakan fitur custom css bawaan, yang tersedia di theme , kalian bisa juga menggunakan cara kedua, yaitu dengan menginstall plugin yang bernama Simple Custom CSS dan JSS.

  1. Pergi ke halaman dashboard admin WordPress.
  2. Langsung saja kalian bisa pilih menu Plugins > pilih Add New.
    cara menambahkan custom css wordpress
  3. Lalu kalian bisa mencari plugin tersebut , dengan mengetikan kata kunci “simple custom css”.simple custom css and js
  4. Jika sudah ketemu, kalian langsung pilih tombol Install Now ,dan Active.
  5. Selanjutnya pada halaman menu admin, pilih menu Custom CSS & JS > Add Custom CSS.
  6. Pada bagian Add CSS Code , disini kita bisa membuat file css sendiri , kita bisa memberi nama file css , mengatur permalink. Jika sudah kalian bisa tekan tombol Publish.
cara menambahkan css di wordpress
cara menambahkan css di wordpress

Kelebihan menggunakan plugin ini , pastinya kita bisa mengelola banyak file custom code css ,javscript, yang tersedia di menu All Custom Code.

Lihat Juga:  3 Cara Menghapus Tanggal di Postingan WordPress (WP)

Namun , sayangnya kita tidak bisa melihat previewnya secara langsung , jika kita menggunakan versi gratis. Jadi kita harus mengupgrade ke versi pronya, untuk melihat live previewnya.

flash sale shopee
✅Biar Gak Kudet alias Kurang Update, Mending langganan GRATIS channel Telegram Teknoding.com di sini, dan dapetin ilmu gratis setiap harinya, atau bisa ikuti kami di Google News.

  Artikel Terkait

cara daftar google news

9+ Cara Daftar Google News untuk Blogger WordPress (WP)

cara mengganti foto profil wordpress

7+ Cara Mengganti Foto Profil di WordPress (Terbaru)

cara setting bunnycdn blog wordpress

3+ Cara Setting BunnyCDN di WordPress Paling Mudah

Fathurrahman

Tech Enthusiast dan Blogger berpengalaman menulis sejak 2014, dengan background Ilmu Komputer. Sangat menyukai hal-hal tentang teknologi komputer, internet, dan HP Android, main game. Senang berbagi informasi gratis dan berguna untuk semua orang, lewat Teknoding.com. Connect me: Instagram

Satu pemikiran pada “5+ Cara Edit (Custom) CSS di WordPress (WP) dengan Mudah”

Komentar ditutup.