Hi, sedang butuh jasa pembuatan website? ada promo biaya buat website dengan harga yang relatif terjangkau. Kunjungi www.budiharyono.com untuk informasi lebih lengkap 🙏
Cara Buat Custom CSS WordPress Dengan/Tanpa Plugin: Panduan Untuk Pemula - CSS (Cascading Style Sheets) adalah bahasa pemrograman yang digunakan untuk mengatur tampilan dan nuansa situs web. Dengan CSS, Anda dapat mengontrol elemen desain seperti warna, font, ukuran teks, jarak antar elemen, dan banyak lagi.
Keuntungan Membuat Custom CSS di WordPress
Yang Harus Disiapkan Sebelum Membuat Custom CSS:
Tools Yang Harus Dipergunakan, Berikut beberapa contoh ekstensi browser yang dapat membantu Anda dalam mengembangkan custom CSS:
Cara Melakukan Inspek Elemen: Untuk melakukan inspek elemen pada situs web, ikuti langkah-langkah berikut:
Anda dapat bereksperimen dengan mengubah properti CSS langsung dalam panel pengembang untuk melihat dampaknya secara real-time sebelum menerapkan perubahan ke situs web Anda.
Buat file CSS baru dengan menggunakan teks editor seperti Notepad++ atau Sublime Text, dan simpan dengan ekstensi .css (misalnya: custom-style.css)
Unggah file CSS yang telah Anda buat ke folder tema WordPress Anda menggunakan FTP (File Transfer Protocol) atau File Manager pada cPanel hosting Anda
Buka file functions.php yang ada dalam folder tema Anda dan tambahkan kode berikut di akhir file:
function my_custom_styles() {
wp_enqueue_style('custom-style', get_template_directory_uri() . '/custom-style.css');
}
add_action('wp_enqueue_scripts', 'my_custom_styles');
Simpan perubahan pada file functions.php, dan perubahan pada file CSS eksternal akan terhubung ke situs WordPress Anda
Mengubah warna latar belakang:
body {
background-color: #f5f5f5;
}
Mengubah jenis dan ukuran font teks:
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
Mengubah warna dan ukuran judul:
h1 {
color: #333;
font-size: 36px;
}
Mengatur jarak antar elemen (misalnya: paragraf):
p {
margin-bottom: 1.5em;
}
Nama-nama plugin WordPress untuk membuat custom CSS
Beberapa plugin populer yang dapat membantu Anda membuat custom CSS di WordPress meliputi:
Meskipun setiap plugin memiliki proses yang sedikit berbeda, berikut ini adalah langkah-langkah umum yang dapat Anda ikuti:
Setelah plugin diaktifkan, navigasi ke tempat di mana plugin tersebut menambahkan opsi untuk mengelola CSS kustom (biasanya dalam submenu di Appearance (Tampilan) atau Settings (Pengaturan))
Masukkan kode CSS kustom Anda ke dalam kotak teks yang disediakan oleh plugin
Jika plugin menyediakan pratinjau, Anda akan dapat melihat perubahan secara real-time sebelum menyimpan
Klik "Save" (Simpan) atau "Publish" (Terbitkan) untuk menerapkan perubahan CSS kustom Anda ke situs web
Catatan: Pastikan untuk membaca dokumentasi plugin yang Anda pilih untuk informasi lebih lanjut tentang cara menggunakan fitur-fitur spesifik dan opsi yang tersedia.
A. Contoh kode CSS untuk menyesuaikan tampilan blog WordPress
Mengubah warna tautan dan menambahkan efek hover:
a {
color: #0066cc;
text-decoration: none;
}
a:hover {
color: #ff6600;
text-decoration: underline;
}
Mengatur lebar konten dan menambahkan padding:
.content {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
Mengubah gaya header:
.header {
background-color: #333;
padding: 20px;
}
.header h1 {
color: #fff;
margin: 0;
}
Menyesuaikan gaya footer:
.footer {
background-color: #222;
color: #ccc;
padding: 20px;
}
.footer a {
color: #ccc;
}
.footer a:hover {
color: #fff;
}
Mengatur tata letak widget:
.widget {
margin-bottom: 20px;
}
.widget-title {
font-weight: bold;
margin-bottom: 10px;
}
Gunakan shorthand properties: Kurangi jumlah baris kode dengan menggabungkan beberapa properti ke dalam satu baris. Contoh:
/* Sebelum */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
/* Sesudah */
padding: 10px 20px;
Kompresi CSS: Gunakan alat kompresi seperti CSS Minifier untuk mengurangi ukuran file CSS dan meningkatkan kecepatan pemuatan halaman.
Gunakan media queries: Gunakan media queries untuk membuat desain responsif yang menyesuaikan tampilan situs Anda berdasarkan ukuran layar dan perangkat yang digunakan pengunjung.
@media screen and (max-width: 768px) {
.content {
padding: 10px;
}
.header {
padding: 10px;
}
}
Prioritaskan konten di atas lipat: Pastikan elemen yang penting dan sering digunakan oleh pengunjung ditempatkan di bagian atas halaman untuk mempercepat pemuatan dan meningkatkan pengalaman pengguna.
Hindari penggunaan !important: Sebisa mungkin, hindari penggunaan !important dalam kode CSS Anda, karena dapat menyulitkan pemeliharaan dan penyuntingan CSS di masa depan. Sebagai gantinya, gunakan teknik spesifitas dan kaskading yang tepat untuk mengatur prioritas gaya.