Tag: customcss

  • Bingung Taruh Kode di Mana? Ini 14 Cara Tambah Custom CSS di WordPress Block Editor

    Bingung Taruh Kode di Mana? Ini 14 Cara Tambah Custom CSS di WordPress Block Editor

    Dengan hadirnya fitur Custom CSS di level blok dan halaman pada WordPress modern (Block Theme), kita sering kali dihadapkan pada satu pertanyaan membingungkan: “Kalau saya mau mengubah desain A, kodenya harus ditaruh di mana agar tidak berantakan?”

    Ternyata, saat ini ada 14 cara berbeda untuk menyuntikkan gaya (CSS) ke dalam WordPress. Memiliki satu sumber kebenaran (single source of truth) seperti theme.json memang sangat ideal, tapi praktiknya di lapangan, kita kadang butuh pendekatan lain.

    Artikel ini adalah panduan komprehensif bagi Anda—baik sebagai pemilik situs, desainer, maupun developer—untuk memahami semua metode dari yang no-code (tanpa koding) hingga full theme development.

    (Catatan: Artikel ini disadur dan diadaptasi ke bahasa Indonesia dari ulasan komprehensif di Gutenberg Times. Tujuannya agar teman-teman pengguna Block Editor di Indonesia bisa lebih mudah memahami ekosistem WordPress yang baru ini).

    Daftar Isi
    1. Pahami Dulu: Hierarki Gaya (The Specificity Cascade)
    2. 14 Metode Menambahkan Custom CSS
    3. Panduan Memilih (Decision Guide)
    4. Tabel Ringkasan (Summary Table)
    5. Tanya Jawab (FAQ)
    6. Kesimpulan

    Pahami Dulu: Hierarki Gaya (The Specificity Cascade)

    Sebelum menyelam ke 14 cara tersebut, kita wajib paham hierarki gaya di WordPress. Gaya (styles) diterapkan dengan urutan berikut. Lapisan yang lebih bawah akan selalu menimpa (override) lapisan di atasnya:

    1. Default: Gaya bawaan dari inti (Core) WordPress.
    2. Block-level: Gaya yang dibawa oleh plugin blok tertentu.
    3. Theme-level: Seluruh desain yang dikontrol oleh Tema aktif (menimpa Default dan Block-level).
    4. User-level: Perubahan yang dilakukan pengguna melalui antarmuka Site Editor. Ini tersimpan di database dan memiliki “kasta” tertinggi karena akan menimpa pengaturan tema.

    14 Metode Menambahkan Custom CSS

    1. theme.json — Structured Style Properties

    Siapa: Pengembang tema | Di mana: File theme.json (root tema) Ini adalah pilihan utama yang paling direkomendasikan. Daripada menulis CSS mentah, Anda mendefinisikan warna, tipografi, dan spasi sebagai properti JSON yang terstruktur.

    • Kelebihan: Terintegrasi otomatis dengan Global Styles UI (bisa diedit pengguna tanpa koding), WordPress mengurus spesifisitasnya, dan menjaga konsistensi visual.
    • Kekurangan: Hanya bisa mengekspresikan apa yang didukung oleh skema theme.json. Belum bisa menggunakan media queries atau pseudo-elements yang rumit.

    2. theme.json — Properti “css”

    Siapa: Pengembang tema | Di mana: Properti css di dalam theme.json Ketika properti terstruktur tidak cukup, Anda bisa memasukkan string CSS mentah langsung di sini.

    • Kelebihan: Mendukung selektor & untuk nested elements. CSS per-blok yang ditulis di sini akan terlihat dan bisa diedit oleh pengguna di Site Editor.
    • Kekurangan: Karena formatnya JSON, kodenya harus ditulis dalam satu baris memanjang tanpa jeda (Enter), sehingga agak sulit dibaca jika kodenya panjang.

    3. Custom CSS Properties (Variabel) via settings.custom

    Siapa: Pengembang tema | Di mana: theme.json → settings.custom Anda bisa membuat variabel CSS kustom Anda sendiri (misal: menentukan lebar konten atau transisi standar). WordPress akan mengubahnya menjadi variabel seperti --wp--custom--transition.

    • Kelebihan: Menjadi “Token Desain” terpusat yang bisa dipanggil di file CSS mana pun.
    • Kekurangan: Tidak bisa diedit langsung oleh pengguna di antarmuka Site Editor.

    4. Child Theme’s theme.json

    Siapa: Developer yang memodifikasi tema | Di mana: File theme.json di child theme Menimpa atau menambah pengaturan dari tema induk (parent theme). WordPress akan menggabungkan kedua file ini secara otomatis.

    • Kelebihan: Semua modifikasi Anda aman dan tidak akan hilang saat tema induk diperbarui.

    5. Global Styles UI

    Siapa: Pemilik situs / Editor (No-Code) | Di mana: Appearance → Editor → Styles Antarmuka visual bawaan WordPress untuk mengatur tipografi, warna, dan tata letak secara keseluruhan.

    • Kelebihan: Tidak butuh keahlian coding. Memiliki spesifisitas tertinggi (user-level) dan perubahannya disimpan di database, sehingga aman dari pembaruan tema.

    6. Additional CSS (Site-Wide)

    Siapa: Pengguna yang paham CSS | Di mana: Appearance → Editor → Styles → Klik menu (⋮) → Additional CSS Ini adalah pengganti fitur Customizer klasik. Berisi editor CSS bebas untuk diterapkan ke seluruh situs.

    • Kelebihan: Ada fitur live preview dan riwayat revisi.
    • Kekurangan: Kodenya dimuat (load) di seluruh halaman, kurang optimal untuk performa jika isinya terlalu membengkak.

    7. Per-Block Additional CSS

    Siapa: Pengguna yang paham CSS | Di mana: Styles → Blocks → (Pilih Blok) → Advanced → Additional CSS Menerapkan CSS hanya pada tipe blok tertentu secara global (misal: menargetkan semua blok Quote agar tulisannya miring).

    • Kelebihan: Terfokus dan WordPress yang akan mengurus selektornya agar tidak bentrok.
    • Kekurangan: Area teks editornya kecil dan media queries kadang tidak berjalan sempurna di sini.

    8. Additional CSS Class(es) pada Individual Block

    Siapa: Editor konten | Di mana: Pengaturan Blok (Sidebar kanan) → Advanced → Additional CSS Class(es) Memberikan “nama kelas” pada satu blok spesifik di sebuah halaman/postingan.

    • Kelebihan: Sangat presisi untuk modifikasi satu kali (one-off styling), misalnya membuat satu paragraf di- highlight kuning.
    • Kekurangan: Anda tetap harus menulis kode CSS aslinya di tempat lain (misal di metode nomor 6).

    9. Global Style Variations

    Siapa: Pengembang tema | Di mana: File JSON di dalam folder /styles tema Memberikan opsi skema desain alternatif untuk seluruh situs (seperti variasi Dark Mode, atau preset warna).

    • Kelebihan: Pengguna bisa mengubah nuansa seluruh web dengan satu klik dari panel Styles tanpa harus ganti tema.

    10. Block Style Variations (JSON, PHP, atau JS)

    Siapa: Pengembang tema/plugin | Di mana: JSON di /styles atau via PHP register_block_style() Memberikan gaya siap pakai di panel blok (contoh: gaya tombol “Outline” atau “Isi Penuh”). Sejak WordPress 6.6, ini bisa dilakukan tanpa PHP sama sekali.

    • Kelebihan: Sangat memudahkan editor konten karena mereka hanya tinggal klik gaya yang diinginkan.

    11. Section Styles (Baru di WP 6.6)

    Siapa: Pengembang tema | Di mana: File JSON di folder /styles (menargetkan Group/Column) Memungkinkan kita mendesain satu “seksi” utuh. Jika gaya ini diterapkan pada blok Group, maka warna latar, teks, dan tombol di dalam grup tersebut akan otomatis menyesuaikan agar terlihat harmonis.

    12. Block Stylesheets (wp_enqueue_block_style)

    Siapa: Pengembang tema | Di mana: File .css terpisah yang dipanggil via functions.php Metode paling profesional jika Anda punya banyak kode CSS untuk sebuah blok.

    • Kelebihan: Terbaik untuk performa! WordPress hanya akan memuat CSS ini jika blok tersebut benar-benar ada di halaman yang sedang dibuka oleh pengunjung.
    • Kekurangan: Tidak terekspos di Global Styles UI untuk diedit pengguna biasa.

    13. Enqueuing Stylesheets via wp_enqueue_style()

    Siapa: Pengembang tema/plugin | Di mana: functions.php Cara klasik (PHP) memanggil file CSS.

    • Kelebihan: Kontrol penuh. Cocok untuk memuat library pihak ketiga atau font dari luar.
    • Kekurangan: Dimuat di seluruh halaman (render-blocking) kecuali Anda menambahkan logika kondisional secara manual.

    14. Theme style.css

    Siapa: Pengembang tema | Di mana: File style.css di direktori utama tema File stylesheet utama yang tradisional. Di era Block Theme, perannya lebih banyak untuk menyimpan metadata tema dan CSS Reset skala global. Tidak disarankan untuk styling blok spesifik.

    Panduan Memilih (Decision Guide)

    Masih bingung harus mulai dari mana? Ikuti panduan praktis ini:

    1. Mulai dari sini: Gunakan theme.json structured properties (#1) untuk semua hal dasar.
    2. Butuh CSS yang agak kompleks? Gunakan properti css di theme.json (#2) untuk tambahan kecil, atau Block Stylesheets (#12) untuk kode yang panjang demi menjaga performa web.
    3. Ingin memberi opsi desain ke tim editor? Buat Block Style Variations (#10) agar mereka tinggal klik.
    4. Anda pemilik situs yang mau sedikit revisi? Gunakan Global Styles UI (#5) secara visual. Kalau mentok, baru pakai Additional CSS (#6 atau #7).
    5. Ingin menargetkan HANYA satu blok tertentu? Gunakan Additional CSS Class (#8).

    Baca Juga

    Tabel Ringkasan (Summary Table)

    Metode Siapa Cakupan (Scope) Kapan Dimuat? Bisa Diedit User?
    1. theme.json structured Developer Global / blok / elemen Selalu (inlined) Ya, via Global Styles UI
    2. theme.json css property Developer Global atau per-blok Selalu (inlined) Ya, di menu Styles per-blok
    3. settings.custom variables Developer Global (variabel) Selalu Tidak
    4. Child theme.json Developer Mengikuti parent Sama dengan parent Sama dengan parent
    5. Global Styles UI (visual) User Global / blok / elemen Selalu (inlined) Ya (Ini adalah antarmuka User)
    6. Additional CSS (site-wide) User Global Setiap halaman Ya
    7. Per-block Additional CSS User Tipe blok tertentu Saat blok hadir di halaman Ya
    8. Additional CSS Class(es) User Satu instansi blok Saat blok tersebut hadir N/A (hanya input class)
    9. Global style variations Developer Preset seluruh situs Saat diaktifkan Ya (pilih preset)
    10. Block style variations Developer Variasi per-blok Saat blok & variasi dipakai JSON/style_data: Ya
    11. Section styles Developer Blok container Saat variasi dipakai Ya, via panel Styles
    12. Block stylesheets Developer Per-blok Hanya saat blok hadir Tidak
    13. wp_enqueue_style() Developer Sesuai konfigurasi Sesuai konfigurasi Tidak
    14. style.css Developer Global Setiap halaman Tidak

    Tanya Jawab (FAQ)

    Biasanya ini masalah Specificity Hierarchy. Jika Anda menaruh CSS di tema, tapi sebelumnya Anda sudah mengubah warna di antarmuka Site Editor (Global Styles UI), maka pengaturan UI tersebut yang akan menang (karena prioritas user-level lebih tinggi).

    Metode nomor 12 (wp_enqueue_block_style). Mengapa? Karena CSS dipisah per blok. File CSS tersebut tidak akan dimuat oleh browser pengunjung kecuali blok tersebut sedang tampil di layar. Sangat efisien.

    Untuk pengguna Block Theme atau Full Site Editing (FSE), ya. Fitur tersebut telah digantikan sepenuhnya oleh menu Styles di dalam Site Editor. Namun, tema klasik masih tetap menggunakan Customizer.

    Kesimpulan

    Banyaknya pilihan kustomisasi CSS di WordPress modern bukanlah untuk membingungkan, melainkan untuk memberikan efisiensi luar biasa. Kuncinya adalah menggunakan metode yang tepat pada tempat yang tepat.

    Jika Anda sekadar ingin mengubah gaya dengan cepat, fitur bawaan editor (UI) adalah sahabat Anda. Namun, jika Anda membangun situs profesional dan mementingkan performa, menguasai kombinasi theme.json dan Block Stylesheets adalah kemampuan yang wajib dimiliki.

    (Sumber Artikel Asli: Gutenberg Times – Ditulis ulang dan diadaptasi untuk komunitas WordPress Indonesia).