Menambahkan CSS Khusus

Meskipun sebagian besar perubahan dapat diterapkan pada pengaturan di WordPress Editor, Anda mungkin lebih suka menggunakan CSS untuk menyesuaikan situs jika Anda berpengalaman menulis kode CSS. Melalui panduan ini, Anda akan mengetahui cara mengedit situs dengan CSS.

Fitur ini tersedia di situs dengan paket WordPress.com Premium, Bisnis, dan Commerce kami, serta paket Pro lawas. Untuk situs yang menggunakan paket Gratis dan Personal, upgrade paket Anda untuk mengakses fitur ini.

CSS adalah singkatan dari Cascading Style Sheets. Ini adalah bahasa markup yang mengontrol tampilan elemen HTML pada halaman web. WordPress menyertakan  editor CSS untuk menambahkan gaya CSS Anda sendiri dengan menimpa gaya default tema.

Potensi tak terbatas untuk apa pun yang dapat Anda lakukan dengan CSS untuk mengubah desain situs. Namun, diperlukan pengetahuan terkait cara kerja CSS dan HTML (atau setidaknya kemauan untuk belajar). Panduan CSS dari MDN web docs adalah tempat yang tepat untuk mulai mempelajari CSS.

Jika Anda tidak tertarik mempelajari CSS, pilih tema blok untuk situs Anda. Tema-tema ini memberikan pilihan paling fleksibel untuk menyesuaikan aspek desain situs Anda tanpa pengetahuan terkait kode komputer.

Ada dua metode untuk mengakses editor CSS situs, tergantung tema yang Anda gunakan. Tiap-tiap metode dijelaskan sebagai berikut.

Untuk situs yang menggunakan tema yang mendukung editor situs, cara berikut bisa digunakan untuk menyesuaikan situs melalui CSS. Cara cepat untuk mengetahui ada tidaknya editor situs dalam situs Anda adalah dengan membuka Tampilan di dasbor situs. Jika melihat Editor di sini, Anda dapat mengakses editor CSS dengan mengikuti langkah-langkah berikut:

1. Buka dasbor situs.
2. Buka Tampilan → Editor.
3. Klik Gaya pada menu Desain di sebelah kiri.
   • Jika tema Anda menyertakan Variasi Gaya, Anda harus mengklik ikon pensil untuk membuka pilihan Gaya:

4. Klik titik tiga di sebelah kanan judul “Gaya” lalu pilih “CSS Tambahan“:

5. Ketik atau tempelkan CSS Anda ke kotak yang disediakan.
6. Klik tombol “Simpan” di kanan atas layar untuk menyimpan CSS ke situs Anda.

Anda dapat melakukan pratinjau dampak perubahan CSS terhadap jenis blok dengan memuat Buku Gaya. Klik ikon mata untuk membuka buku gaya.

Pada tema Editor Situs, Anda dapat menerapkan kode CSS ke blok tertentu di seluruh situs dengan mengikuti langkah-langkah di bawah ini.

1. Buka dasbor situs.
2. Buka Tampilan → Editor.
3. Klik Gaya di menu Desain di sebelah kiri.
   • Jika tema Anda menyertakan Variasi Gaya, Anda harus mengklik ikon pensil untuk membuka pilihan Gaya.
4. Kali ini, pilih bagian “Blok” untuk mengakses pengaturan guna menyesuaikan tampilan blok tertentu di seluruh situs.
5. Klik nama blok yang ingin Anda tambahi dengan CSS. Anda juga dapat menemukan jenis blok yang diinginkan menggunakan kotak pencarian.
6. Gulir ke bawah dan klik pada “Tingkat Lanjut“.
7. Di kotak berlabel “CSS Tambahan“, ketik CSS yang akan berlaku untuk semua instance tipe blok tersebut. Saat menambahkan CSS per blok, Anda tidak perlu menyertakan pemilih CSS. Cukup tambahkan properti dan nilai. Contoh disertakan dalam video di atas.
8. Klik tombol “Simpan” di kanan atas layar untuk menyimpan CSS ke situs Anda.

Untuk tema yang tidak menggunakan Editor Situs, termasuk tema klasik dan banyak tema pihak ketiga, Anda dapat menambahkan CSS dengan mengikuti langkah-langkah berikut:

1. Buka dasbor situs.
2. Buka Tampilan → Penyesuaian → CSS Tambahan.
3. Ketik atau tempelkan CSS Anda ke kotak yang disediakan. Jendela pratinjau di sebelah kanan akan menampilkan perubahan yang Anda buat.
4. Klik tombol “Simpan Perubahan” untuk menyimpan CSS di situs Anda.

Sebanyak 25 versi perubahan CSS terakhir Anda disimpan dan dapat diakses dengan mengklik “Lihat riwayat lengkap” di bawah editor CSS. Anda dapat memulihkan versi CSS sebelumnya di sini.

Jika pilihan ini tidak muncul, tidak ada riwayat CSS yang bisa dipulihkan.

Pilihan “Lebar Media” harus digunakan jika Anda mengubah lebar area konten utama menggunakan CSS khusus. Pengaturan “Lebar Media” adalah ukuran default untuk gambar berukuran penuh saat dimasukkan ke situs Anda.

Perhatikan bahwa hal ini tidak akan memengaruhi ukuran beberapa gambar yang Anda tambahkan sebelum mengubah pengaturan, bergantung pada cara gambar disisipkan, dan Anda mungkin harus menyisipkan ulang beberapa gambar setelah mengubah pengaturan.

Sesuai default, CSS khusus yang Anda tambahkan ke editor CSS akan dimuat setelah CSS asli tema, yang berarti peraturan Anda dapat didahulukan dan menimpa gaya tema.

Anda dapat sepenuhnya menonaktifkan CSS asli tema dengan mengklik pilihan “Jangan gunakan CSS asli tema”. Ini akan memungkinkan Anda menggunakan tema WordPress.com apa pun sebagai kanvas kosong untuk mendesain dengan CSS. Ini merupakan pilihan lanjutan dan sebaiknya hanya digunakan jika Anda ingin memulai dari awal dan mendesain CSS untuk tema dari nol.

Jika ingin menggunakan peraturan CSS yang ada—pendekatan yang paling umum dan direkomendasikan—Anda dapat menonaktifkan pilihan ini.

WordPress.com memiliki dukungan untuk Sass dan LESS praprosesor CSS (Sintaks SCSS). Ini merupakan pilihan lanjutan untuk pengguna yang ingin menggunakan ekstensi CSS seperti variabel dan mixin. Lihat situs LESS dan Sass untuk informasi selengkapnya.

Kredit footer tidak boleh diubah dengan CSS. Anda dapat menghapus atau memodifikasi kredit footer dengan pengaturan, tergantung jenis tema yang digunakan oleh situs:

• Jika situs Anda menggunakan tema blok, Anda dapat mengedit atau menghapus kredit footer menggunakan Editor Situs (tanpa perlu CSS).
• Jika situs menggunakan tema klasik, Anda dapat mengubah kredit footer menjadi logo WordPress minimalis. Anda dapat menyembunyikan kredit jika situs memiliki langganan paket Bisnis atau Commerce.

Ya, meski hanya di situs yang mendukung plugin.

Anda dapat memilih font situs menggunakan pilihan sesuai tema. Saat bekerja dengan CSS, pilihan Anda terbatas hanya untuk dua font web di ujung depan. Namun, Anda dapat menambahkan font tambahan menggunakan plugin font pihak ketiga.

Ya. Anda dapat mengunggah gambar ke Pustaka Media, lalu mengarahkannya dengan URL langsung dari dalam stylesheet CSS. Berikut contoh sederhana mengenai cara menggunakan gambar latar belakang di stylesheet Anda:

 div#content { background-image: url('http://example.files.wordpress.com/1999/09/example.jpg'); } 

Kami sarankan Anda mengedit CSS dengan menggunakan editor CSS, sebagaimana dijelaskan di dalam panduan di atas. Saat menambahkan CSS menggunakan metode ini, CSS baru akan menimpa aturan CSS dari stylesheet tema Anda. Ini adalah metode aman yang memudahkan debug konflik CSS dan memulihkan versi CSS sebelumnya yang telah Anda tambahkan.

Jika mahir mengedit file tema secara langsung, Anda dapat melakukannya melalui SFTP atau dengan membuat tema turunan. Kami sarankan untuk menguji perubahan pada situs staging sebelum menerapkannya ke situs live Anda.

Semua upgrade di WordPress.com diperpanjang tiap tahun. Apabila membatalkan langganan, CSS khusus Anda akan tetap disimpan, tetapi tidak lagi diterapkan ke situs dan orang lain tidak dapat melihatnya. Jika ingin diterapkan kembali ke situs, beli ulang paket Anda dan gaya akan kembali diterapkan secara otomatis asalkan Anda belum mengubah tema. Jika tema telah diubah, Anda dapat menemukan CSS lama di revisi CSS.