Fathurrahman Seorang blogger biasa ,yang baru menyukai teknologi Wordpress. Serta senang belajar teknologi komputer dan internet. Moto :" Keep Learning , Keep Contribute"

Cara Membuat Custom CSS

1 min read

cara membuat menambahkan custom css wordpress

Custom CSS adalah salah satu fitur yang tersedia di theme wordpress , yang fungsinya untuk memodifikasi tampilan ,dan juga tata letak atau layout , dari theme yang sedang kita gunakan. Custom CSS disini juga bisa disebut Additional CSS , atau code 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 1 : Menambahkan 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.

  • Pada halaman menu admin , kalian pilih menu Appearance > lalu Customize.
Appearance > Customize
Appearance > Customize
  • Selanjutnya pada Customize ,kalian pilih Additional CSS.
customize additional css wordpress
Additional CSS
  • Pada Additional CSS ,disini kalian bisa memasukan baris code css sendiri , setelah itu kalian bisa melihat hasil tampilannya secara langsung.
  • 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.
  • Untuk belajar css kalian bisa kunjungi w3schools.com.
additional custom code css wordpress
Custom Code CSS

Cara 2 : 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.

  • Langsung saja , kalian bisa pilih menu Plugins > pilih Add New.
dashboard wordpress menu plugin install add new
Plugin > Add New
  • Lalu kalian bisa mencari plugin tersebut , dengan mengetikan kata kunci “simple custom css”.
Simple Custom CSS and JS
Simple Custom CSS and JS
  • Jika sudah ketemu , kalian langsung pilih tombol Install Now ,dan Active.
  • Selanjutnya pada halaman menu admin, pilih menu Custom CSS & JS > Add Custom CSS.
  • 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.
add css code plugin wordpress
Add CSS Code

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

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.

Fathurrahman Seorang blogger biasa ,yang baru menyukai teknologi Wordpress. Serta senang belajar teknologi komputer dan internet. Moto :" Keep Learning , Keep Contribute"

Leave a Reply

Your email address will not be published. Required fields are marked *