Cara Mudah Menambahkan CSS Kustom di WordPress (2022)

Repositori tema WordPress resmi memiliki sekitar 9.000 tema. Tambahkan tema yang tersedia di pasar populer dan di situs web pengembang tema dan jumlah ini bisa mencapai hingga 20.000!

Bahkan jika Anda berhasil mengarungi jumlah yang sangat besar ini dan menemukan tema yang tepat, Anda biasanya menemukan bahwa desainnya memerlukan banyak penyesuaian.

Untuk ini, Anda mulai dari backend tema dan mengubah tipografi dan warna.

Anda mungkin perlu mengubah jarak antar elemen atau menambahkan warna latar belakang ke widget.

Di situlah Anda dapat menambahkan CSS khusus untuk mengubah aspek tema dan benar-benar menjadikannya milik Anda.

Apa itu CSS?

CSS, atau Cascading Style Sheets, mungkin merupakan bahasa web terpopuler kedua setelah HTML.

Sementara HTML menyediakan blok bangunan halaman web, CSS membuatnya cantik untuk dilihat.

Seperti yang dapat Anda bayangkan, Anda akan menemukan CSS di mana pun Anda melihat HTML.

Anda dapat menggunakan CSS untuk menambahkan warna, mengubah tampilan dan ukuran font, dan menambah atau menghapus spasi di antara elemen desain. Secara keseluruhan, CSS digunakan untuk menata dan meningkatkan tata letak halaman web.

Jika Anda ingin mengubah elemen visual apa pun, Anda dapat menambahkan cuplikan CSS khusus ke situs web Anda dan segera melihat hasilnya.

Manfaat CSS

CSS menawarkan beberapa manfaat penting untuk situs WordPress Anda.

Konsistensi Lebih Besar dalam Desain Situs Web

Kode CSS umumnya terdapat dalam file terpisah (biasanya, style.css untuk WordPress). File ini dirujuk dalam kode frontend, dan bagian yang relevan ditarik sesuai kebutuhan.

Ini berarti Anda perlu membuat file gaya tunggal yang dapat digunakan untuk semua halaman situs web.

Akibatnya, semua elemen HTML ditata dengan cara yang sama (atau Anda dapat secara selektif menerapkan pemformatan dengan mendefinisikan kelas khusus).

Jika Anda perlu mengubah gaya, Anda hanya perlu membuat perubahan sekali di file CSS, dan itu akan diterapkan di seluruh situs web dalam waktu singkat.

Hadirkan Gaya Berbeda untuk Pemirsa Berbeda

Desain responsif adalah tentang menyesuaikan elemen dan konten HTML dengan ukuran layar pengunjung.

Dengan satu file CSS, Anda dapat memastikan situs web Anda dirender dengan sempurna, terlepas dari perangkat pengunjung.

Halaman HTML terkenal buruk karena ramah printer. Dengan kode CSS yang tepat, Anda dapat membuat tampilan yang memformat konten dengan menghapus warna dan gambar latar belakang.

Demikian pula, Anda dapat memformat konten situs web Anda agar ramah pembaca layar.

Ini meningkatkan skor aksesibilitas situs web Anda dan memungkinkan pengunjung dengan gangguan penglihatan untuk menggunakan konten Anda dengan mudah.

Kode Situs Web Ringan

Situs web adalah kombinasi dari beberapa teknologi, termasuk HTML dan CSS. Akibatnya, pengembang umumnya membagi kode situs web menjadi file terpisah.

Saat Anda membuka halaman web di browser Anda, server hanya memilih file yang diperlukan untuk merender halaman di browser. Akibatnya, paket unduhan keseluruhan yang diperlukan untuk merender halaman web di browser Anda cukup kecil.

Dengan cache browser modern, CSS umumnya diunduh sekali dan kemudian disimpan secara lokal, yang selanjutnya mempercepat pengalaman pengguna.

Manfaat Pengoptimalan Mesin Pencari

CSS adalah cara yang bagus untuk membangun situs web terstruktur. Karena desain (CSS) terpisah dari struktur (HTML), Anda dapat dengan mudah memodifikasi dan mengatur halaman web.

Ini memungkinkan Anda untuk mengatur halaman yang dibangun dengan baik dan memungkinkan bot Google untuk lebih memahami maksud halaman.

Manfaat penting lainnya menggunakan CSS dalam desain situs web Anda adalah mengurangi rasio kode terhadap konten halaman web.

Ini membantu manusia dan bot dengan cepat dan mudah menelusuri konten Anda. Ini mengurangi waktu yang dibutuhkan untuk memuat dan menampilkan halaman web di browser pengunjung.

Seperti yang Anda ketahui, Google menganggap waktu buka halaman sebagai sinyal peringkat penting yang digunakan untuk membangun indeks pencariannya.

Situs web yang memuat lebih cepat ditempatkan di bagian atas hasil pencarian karena menawarkan pengalaman yang lebih baik kepada pengunjung.

Kelemahan CSS

Semua manfaat menggunakan CSS memiliki kerugian yang penting – CSS sekarang merupakan kumpulan teknologi terkait yang memiliki kurva pembelajaran yang signifikan bagi non-pengembang.

Anda harus mulai dengan dasar-dasarnya dan kemudian memahami cara kerja kerangka kerja CSS pilihan Anda.

Ini bisa menjadi segelintir untuk pengguna WordPress rata-rata yang tertarik dengan perubahan gaya kecil.

Namun jangan khawatir – dalam artikel ini, Anda akan mempelajari beberapa trik menambahkan kode CSS khusus ke situs web WordPress Anda tanpa harus mengetahui cara kerjanya.

Penting: Cadangkan Situs Web Anda Sebelum Mencoba Apa Pun

CSS adalah bagian penting dari situs WordPress Anda. Baik Anda seorang pengembang berpengalaman atau pemula dalam pengembangan WordPress, penting bagi Anda untuk membuat cadangan situs web Anda sebelum menambahkan CSS khusus.

Mencadangkan situs web Anda menyimpan salinan file situs web Anda di lokasi terpisah.

Jika ada yang tidak beres, Anda dapat memulihkan situs web Anda dalam beberapa klik.

Jika Anda perlu membaca lebih lanjut tentang mencadangkan situs web WordPress Anda, inilah bagian hebat yang mencakup pencadangan dengan lebih detail.

Menambahkan CSS Kustom ke Situs WordPress Anda

Sekarang setelah Anda memahami peran CSS di WordPress, sekarang kita akan masuk ke detail cara menambahkan CSS khusus ke situs web Anda.

Seperti yang lainnya, Anda akan menemukan bahwa ada banyak cara untuk menambahkan CSS ke situs web Anda.

Kami menyarankan Anda melalui semua cara dan kemudian memilih salah satu yang sesuai dengan tingkat keahlian Anda.

Tambahkan CSS Kustom Langsung ke File Situs Web

Jika Anda memiliki pengetahuan yang baik tentang CSS dan desain web, Anda dapat langsung menambahkan kode CSS khusus ke file tema situs web.

Secara teori, ini mengharuskan Anda untuk membuka file style.css tema dan menambahkan kode CSS khusus Anda di sana.

Setelah selesai, ingatlah untuk menyimpan atau memperbarui file.

Sekarang, untuk banyak tema, style.css adalah sumber gaya utama, dan kode kustom Anda akan diterapkan ke seluruh situs web. Jadi, Anda perlu berpikir hati-hati sebelum berkomitmen pada perubahan.

Kami tidak merekomendasikan metode ini bahkan untuk para ahli karena mudah membuat kesalahan dan membuat situs web Anda tidak dapat digunakan.

Beberapa tema mungkin memiliki file tambahan untuk menata halaman atau bagian tertentu dari situs web. Dalam hal ini, kode khusus Anda mungkin tidak berlaku.

Hal penting lainnya yang perlu diingat saat menambahkan CSS khusus langsung ke file situs web adalah bahwa perubahan akan ditimpa saat Anda memperbarui tema.

Ini berarti Anda perlu menambahkan kode CSS khusus setelah setiap pembaruan tema.

Tambahkan CSS Kustom Menggunakan Penyesuai Tema WordPress

Semua tema WordPress memiliki panel Penyesuai Tema tempat Anda dapat mengubah berbagai desain dan pengaturan terkait fungsionalitas.

Untuk mengakses Customizer, buka Appearance > Customize .

Di dekat ujung panel kiri, Anda akan melihat bidang CSS tambahan . Klik untuk memperluasnya.

Anda dapat menambahkan cuplikan CSS khusus Anda di sini.

Anda dapat melihat pratinjau perubahan di panel pratinjau. Klik Terbitkan untuk menyimpan perubahan.

Perubahan ini bersifat global dan terlihat di seluruh situs web Anda.

Hal yang baik tentang metode ini adalah bahwa perubahan yang dihasilkan dari penambahan CSS khusus tidak akan hilang dengan pembaruan tema.

Tambahkan CSS Khusus ke Blok Gutenberg

Dengan rilis WordPress 5.9 baru-baru ini, Anda mendapatkan kemampuan pengeditan situs penuh. Pendekatan berbasis blok untuk desain situs web (dan pengeditan) ini juga menyederhanakan proses penambahan CSS khusus untuk memformat blok individual.

Prosesnya memiliki dua langkah.

Pada langkah pertama, buka Appearance > Theme File Editor .

Ini akan membuka bagian Edit Tema . Umumnya, style.css, stylesheet default, terbuka di editor.

Jika bukan itu masalahnya, pilih file dari bilah sisi kanan berjudul File Tema .

Gulir ke bagian bawah file dan tambahkan cuplikan kode khusus Anda. Anda perlu memastikan bahwa cuplikan Anda terkandung dalam pemilih kelas.

Pada langkah kedua, Anda menambahkan blok ke pos. Dalam contoh ini, Anda dapat melihat, kami telah menambahkan blok paragraf.

Untuk menambahkan CSS khusus ke blok paragraf, pilih blok dan kemudian pergi ke sidebar kiri. Di bawah tab Blokir , gulir ke bawah ke bagian Lanjutan dan perluas.

Di bidang CSS tambahan , tambahkan kelas CSS khusus.

Ini adalah "sebelum", di mana blok paragraf tidak memiliki CSS khusus.

Setelah menambahkan CSS khusus di bidang CSS tambahan dari blok paragraf, Anda dapat melihat perubahan di blok tersebut.

Tambahkan CSS Khusus ke Pembuat Halaman

Seperti Gutenberg, semua pembuat halaman populer memungkinkan Anda menambahkan CSS khusus ke blok individual. Prosesnya mirip dengan apa yang kami jelaskan di atas.

Perhatikan bahwa Anda mungkin memerlukan pembuat halaman versi premium untuk mendapatkan opsi CSS khusus.

Kami akan menggunakan Elementor Pro untuk mendemonstrasikan ide menambahkan CSS khusus ke blok Elementor.

Tambahkan blok dan buka bagian Edit .

Selanjutnya, pergi ke Advanced > Custom CSS . Rekatkan CSS khusus Anda di bidang.

Dengan sedikit perubahan, proses ini berlaku untuk semua pembuat halaman populer.

Tambahkan CSS Kustom Menggunakan Plugin

Menambahkan kode CSS khusus langsung ke file tema adalah bisnis yang berisiko. Anda harus berhati-hati saat menambahkan kode CSS khusus Anda ke file gaya tema, dan kemudian memanggilnya jika diperlukan.

Bahkan setelah ini, ada kemungkinan perubahan Anda bisa hilang dengan pembaruan tema berikutnya.

Itu sebabnya pengembang WordPress membuat beberapa plugin yang menangani penambahan CSS khusus ke situs web Anda.

Plugin ini biasanya tidak mengubah file inti secara langsung. Sebagai gantinya, kode CSS khusus Anda disimpan dalam file plugin.

Akibatnya, perubahan Anda tetap tersedia bahkan ketika Anda mengubah tema situs web.

Untuk menerapkan kembali perubahan kustom, yang harus Anda lakukan adalah pergi ke plugin dan pilih kode kustom.

Masalah utama di sini adalah memilih dari beberapa opsi hebat.

Untuk membantu Anda membuat keputusan yang tepat, kami akan menjelaskan secara singkat lima plugin yang, menurut kami, menyelesaikan pekerjaan!

Editor Gaya CSS Visual

Jika Anda tidak memiliki pengetahuan kode CSS yang luas, Editor Gaya Visual CSS adalah untuk Anda. Plugin freemium ini hadir dengan editor visual tempat Anda dapat menambahkan perubahan secara visual ke elemen situs web.

Editor drag-and-drop memungkinkan Anda untuk menyempurnakan penempatan elemen dan mengubah margin dan padding. Editor menyimpan riwayat pengeditan sehingga Anda dapat kembali untuk mengembalikan perubahan dengan mudah.

Anda dapat mengedit semua halaman dan posting situs web, termasuk halaman login. Anda mendapatkan sebanyak 60 opsi gaya yang dapat Anda terapkan ke situs web Anda.

Sementara versi berbayar menghadirkan kemampuan tambahan, versi gratisnya cukup mumpuni.

CSS Kustom Sederhana

Meskipun ditujukan untuk administrator situs web, plugin ini cukup ramah pemula dengan pratinjau langsung bawaan dan antarmuka sederhana yang dibuat menggunakan elemen UI WordPress default. Plugin ini sangat ringan dan tidak menambahkan hambatan pada kinerja situs web.

Untuk membantu Anda menulis kode CSS bebas kesalahan, Simple Custom CSS dilengkapi dengan penyorot sintaks dan pemeriksaan kesalahan (linting kode). Ini mempercepat penambahan kode CSS khusus dengan mengurangi waktu yang diperlukan untuk menambahkan kode sempurna ke situs web Anda.

Hal terbaik tentang plugin adalah perubahan Anda tetap dipertahankan bahkan ketika Anda mengubah tema.

Pahlawan CSS

CSS Hero adalah solusi pengeditan tema situs web premium yang menyederhanakan cara Anda mengedit situs web WordPress.

Solusi ini ideal untuk pemula yang membutuhkan solusi point-and-click sederhana untuk mengedit tampilan situs web.

Namun, jangan biarkan tampilan editor yang sederhana membodohi Anda – CSS Hero adalah solusi hebat yang hadir dengan riwayat edit ekstensif, cuplikan kode, dan kemampuan untuk menambahkan aturan CSS khusus.

Plugin ini sangat aman digunakan di situs web mana pun karena tidak mengubah file tema WordPress asli.

Hasilnya, Anda dapat membuat semua perubahan yang Anda inginkan dan tetap yakin bahwa file inti Anda akan tetap tidak berubah dan terlindungi.

kuningpensil

Jika Anda memerlukan solusi tanpa kode untuk mengedit tampilan situs web, YellowPencil mungkin sangat cocok. Plugin premium ini ditujukan untuk pemula dan ahli karena fitur-fiturnya yang luas.

Anda mendapatkan kontrol penuh atas tampilan situs web Anda dengan mengubah lebih dari enam puluh properti di editor seret dan lepas.

Yang perlu Anda lakukan hanyalah mengubah elemen di editor secara visual, dan YellowPencil akan menghasilkan kode CSS khusus untuk perubahan Anda. Anda bahkan dapat menerapkan perubahan untuk mengatasi berbagai ukuran layar dan perangkat. Plugin mempertahankan perubahan CSS Anda, dan Anda dapat menerapkan kembali perubahan saat Anda mengubah tema.

CSS Asal Situs

SiteOrigin CSS adalah solusi pengeditan CSS yang sangat populer untuk situs web WordPress karena sangat cocok terlepas dari keahlian Anda.

Anda mendapatkan kontrol yang tepat atas warna, padding, gaya, dan penempatan elemen situs web di editor visual. Plugin ini juga dilengkapi dengan penyelesaian kode yang menghilangkan tebakan dari pengkodean CSS.

Inspektur yang disertakan menyederhanakan pemilihan penyeleksi yang tepat sehingga Anda dapat memilih atribut yang tepat untuk elemen desain Anda.

Plugin ini gratis untuk digunakan dan dilengkapi dengan fitur menarik seperti penyelesaian kode, linting kode (pemeriksaan kesalahan), dan perlindungan file inti.

Bangun Tema Anak untuk Menguji (Dan Melestarikan) Perubahan

Tema anak mendapatkan fungsionalitas dan gayanya dari tema lain (dikenal sebagai tema induk).

Pada dasarnya, ini adalah salinan dari tema induk dan "mewarisi" kode dan asetnya. Namun, tema anak diisolasi dari tema induk.

Secara teori, membuat tema anak itu sederhana. Anda hanya perlu membuat folder baru, menyalin file style.css (untuk gaya dan elemen visual) dan functions.php (untuk fungsionalitas tema).

Namun, dalam praktiknya, Anda perlu memeriksa dokumentasi tema untuk menemukan file penting yang perlu Anda salin ke folder tema anak.

Setelah Anda memiliki semua file yang diperlukan di folder tersebut, Anda dapat mengaktifkannya sebagai tema default situs web. Sekarang, Anda dapat mengikuti salah satu metode di atas untuk menambahkan CSS khusus.

Generator Tema Anak Astra

Seperti yang Anda lihat, Anda memerlukan tema induk yang bagus jika Anda menginginkan tema anak yang berfungsi tinggi. Karena tema anak mewarisi semua fungsi dan gaya dari tema induk, Anda harus berhati-hati dalam memilih tema induk.

Jika Anda menggunakan Astra, Anda beruntung, karena Astra menawarkan generator tema anak hebat yang menangani proses pembuatan tema anak.

Anda dapat mengunduh tema anak apa adanya atau mengklik Opsi Lanjutan untuk mengubah berbagai parameter seperti penulis, deskripsi, dan tangkapan layar.

Alat ini mengunduh file zip yang berisi paket tema anak lengkap.

Kesimpulan

Kami harap artikel ini membantu Anda memahami ide menambahkan CSS khusus ke situs web WordPress Anda.

Seperti yang Anda lihat, WordPress menawarkan beberapa cara untuk menambahkan cuplikan CSS khusus langsung ke file inti atau melalui plugin. Kami merekomendasikan metode plugin karena lebih aman dan memungkinkan Anda untuk mempertahankan perubahan CSS bahkan ketika Anda mengubah tema.

Anda mungkin perlu memoles pengetahuan CSS Anda (atau mulai belajar dari beberapa sumber yang bagus) karena CSS terus berkembang dan Anda akan menemukan cara yang lebih baik untuk menata halaman web Anda saat Anda melakukan pencarian Google sederhana.

Anda juga harus melihat membangun tema anak sebagai opsi bagus untuk menguji cuplikan CSS. Anda akan menemukan bahwa banyak tema populer menawarkan proses sederhana untuk membangun tema anak dari file inti mereka.

Sekarang giliran Anda – beri tahu kami metode apa yang Anda sukai untuk menambahkan CSS khusus ke situs web WordPress.