Cara menggunakan css extension

Kita tahu bahwa extension SCSS tidak bisa dibaca oleh oleh browser untuk saat ini. Untuk itu bagi kita yang membuat template dengan extension SCSS karena fiturnya yang mudah dibaca dan mudah dimaintenance, maka kita bisa compile file SCSS kita ke dalam CSS. Untuk melakukanya ikuti cara berikut:

Install Node JS

Pastika kita sudah menginstal Node JS di dalam perangkat kita. Bagi yang belum kita dapat menginstalnya di sini Node JS.

Initialize NPM

Arahkan project kita ke dalam terminal lalu ketikan perintah berikut:

npm init

Ikuti inputan yang yang diminta mulai dari nama project sampe author. Dari perintah di atas akan menghasilkan file bernama package.json.

Install Library node-sass

Library di atas adalah library untuk mengcompile file SCSS ke CSS. Kita dapat membaca dokumentasinya di sini Node-Sass. Untuk menginstalnya ketik perintah berikut di terminal:

npm install node-sass

Dari hasil instalasi mari kita buka file package.json dan akan berisi script seperti berikut:

{"name": "compile-scss","version": "1.0.0","description": "to compile scss into css","main": "vue.min.js","dependencies": {"node-sass": "^4.13.0"},"devDependencies": {},"scripts": {"test": "echo \"Error: no test specified\" && exit 1",},"keywords": ["scss"],"author": "faridho","license": "ISC"}

Setelah selesai perhatikan beberpa hal berikut:

1. Pastikan file SCSS kita di dalam satu folder yang kita namai bebas.
2. Pastikan kita membuat satu folder dengan nama bebas buat nampung file CSS hasil compile.

Kemudian tambahkan script berikut di package.json pada block scripts

"scss": "node-sass --watch scss -o css"

Dari script di atas bisa kita baca beberapa hal maksud dari kata per kata pada script di atas.

node-sass. Merefer ke library node-sass

— watch. Melihat atau mencari file mana saja yang memakai extension SCSS.

scss. Adalah nama folder saya di dalam project, yang mana tempat untuk menyimpan file SCSS.

-o css. Adalah nama folder tempat menyimpan hasil compile.

Untuk menjalankan compile secara otomatis setiap kali kita ada perubahan file SCSS kita maka kita dapat menggunakan perintah berikut:

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 :

Isi Konten

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.
   
   
3. Selanjutnya pada Customize, kalian pilih Additional CSS.
   
   
   
   
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.

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.
   
   
3. Lalu kalian bisa mencari plugin tersebut , dengan mengetikan kata kunci “simple custom css”.
   
   
   
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.

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

Lihat Juga:  Cara Mengatasi Duplicate Meta Descriptions

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.