Wordpress

Cara Menambahkan CSS di WordPress (Cara Mudah) .

Salah satu alasan WordPress adalah sistem manajemen konten (CMS) yang paling populer adalah karena sangat ramah bagi pemula.  Anda tidak harus memiliki pengetahuan teknis, keterampilan pengkodean, atau pengalaman dalam pengembangan web untuk membuat situs web yang berfungsi penuh dari awal.

Oleh karena itu, bagi mereka yang siap untuk meningkatkan permainan mereka dan membuat situs mereka sedikit lebih menarik secara visual, ada cara untuk menyesuaikan situs Anda hanya dengan sedikit dari pengetahuan koding.

Mempelajari cara menggunakan CSS di WordPress tidak harus menakutkan.  Bahkan, sebenarnya sangat mudah untuk dilakukan.

Jika Anda siap untuk mengambil risiko dan mempelajari cara menggunakan beberapa kode di situs WordPress Anda untuk membuatnya menonjol dari kompetisi, teruslah membaca.  Hari ini kami akan menjelaskan apa itu CSS dan bagaimana Anda dapat menggunakannya untuk membuat perubahan pada desain situs web Anda.

Apa itu CSS di WordPress?

Cascading Style Sheets (CSS) adalah bahasa yang digunakan dalam desain web untuk mengubah tampilan visual sebuah situs web.  Misalnya, Anda dapat menggunakannya untuk mengubah tata letak, font, warna, dan banyak lagi situs Anda.  Dan bagian terbaik dari penggunaan CSS di WordPress adalah memungkinkan Anda mengganti beberapa pengaturan default tema Anda.

Ini berguna bagi mereka yang menggunakan tema WordPress populer.  Ketika sebuah tema digunakan secara luas, meskipun kontennya berbeda dari satu situs ke situs lainnya, desain dasarnya sama.  Ini mempersulit situs web Anda untuk terlihat berbeda dari semua situs web lain yang menggunakan tema yang sama dengan elemen desain yang sama.

Bagaimana CSS Bekerja?

Pernahkah Anda mendengar tentang Hypertext Markup Language (HTML)?

HTML adalah bahasa utama yang digunakan untuk membuat situs web WordPress Anda.  Tugasnya adalah memberi tahu browser web seperti apa tampilan situs web Anda.  Dengan cara ini, ketika pengunjung situs mengklik situs web Anda, mereka melihat hal-hal seperti warna, gambar, dan konten tertulis.  Tanpa HTML, situs web Anda akan menjadi halaman kode yang tidak dapat dipahami oleh siapa pun.

Untuk melihat seperti apa HTML, yang harus Anda lakukan adalah mengklik tiga titik di sudut kanan atas Editor Gutenberg dan pilih Editor Kode:

contoh html

Masalah dengan mengedit HTML untuk membuat situs web Anda terlihat dengan cara tertentu adalah sangat memakan waktu (belum lagi, Anda harus memahami kode).  Misalnya, Anda ingin mengubah semua judul posting Anda menjadi warna yang berbeda.  Anda harus masuk ke setiap posting blog yang pernah Anda tulis dan mengedit kode HTML secara manual untuk mengubah warnanya.

Itu sebabnya menggunakan CSS sebagai gantinya sangat membantu.

CSS membantu menentukan bagaimana elemen HTML situs web Anda akan terlihat di situs web Anda.  Dan bagian terbaiknya adalah, ini adalah bahasa selimut yang dapat diterapkan pada semua elemen di situs web Anda dengan beberapa baris kode sederhana.

Menggunakan CSS di WordPress memberi Anda kendali penuh atas tampilan situs Anda dan membuat perubahan elemen tertentu menjadi mudah.  Dan Anda bahkan tidak perlu memahami cara kerja HTML.  Anda cukup menambahkan beberapa kode CSS ke situs web Anda dan mengubah tampilannya.  Ini benar-benar sederhana.

Cara Menambahkan CSS di WordPress

Jadi, Anda tahu Anda ingin membuat beberapa perubahan desain pada situs WordPress Anda.  Dan sekarang Anda tahu bahwa menggunakan CSS adalah sebuah pilihan, bahkan jika Anda tidak memiliki pengetahuan coding.

Tapi bagaimana Anda menambahkan CSS di WordPress?

1. Lembar Gaya Tema WordPress

Anda dapat menambahkan cuplikan kode CSS langsung ke lembar gaya tema WordPress Anda untuk membuat perubahan pada keseluruhan tampilan situs web Anda.

Yang mengatakan, metode ini adalah tidak direkomendasikan untuk kebanyakan orang.  Menambahkan kode ke tema induk Anda memiliki beberapa risiko:

  • Anda mungkin benar-benar mengacaukan tampilan situs web Anda jika Anda tidak tahu apa yang Anda lakukan
  • Setiap kali Anda memperbarui tema, semua perubahan yang Anda buat dengan menambahkan CSS akan hilang, yang berarti Anda harus memulai dari awal lagi setiap kali Anda menjalankan pembaruan
  • Anda mungkin merusak situs web Anda jika Anda membuat perubahan di tempat yang salah

Jika Anda adalah pengguna WordPress tingkat lanjut dan ingin menambahkan CSS langsung ke lembar gaya tema Anda, Anda setidaknya harus melakukannya menggunakan tema anak.  Dengan cara ini, jika Anda membuat kesalahan, Anda tidak merusak seluruh situs web Anda.  Plus, setiap kali Anda memperbarui tema induk Anda, tema anak Anda akan mempertahankan perubahan CSS Anda.

Untuk informasi lebih lanjut, lihat artikel kami tentang semua yang perlu Anda ketahui tentang tema anak WordPress.

Sementara itu, lihat lebih banyak cara ramah pemula untuk menambahkan CSS di WordPress.

2. Penyesuai Tema

Di dasbor WordPress Anda, ada cara untuk mengakses Penyesuai Tema.  Yang harus Anda lakukan adalah menavigasi ke Penampilan > Sesuaikan.

dasbor wp, tampilan

Ini akan membawa Anda ke antarmuka Penyesuai Tema.  Anda akan melihat pratinjau situs web Anda dan banyak opsi di sisi kiri.

Untuk menambahkan CSS ke WordPress Anda, klik CSS tambahan

tambahkan css

Saat melakukannya, Anda akan melihat kotak teks kosong tempat Anda dapat menambahkan kode CSS.

tambahkan penyesuai tema css

Saat aturan CSS yang valid ditambahkan, Anda akan melihat perubahan yang tercermin di panel pratinjau Penyesuai Tema.

Sebagai contoh, katakanlah kita ingin mengubah judul postingan dari hitam menjadi biru.  Kami akan menambahkan CSS ke dalam kotak teks kosong dan melihat ini di panel pratinjau:

ubah judul posting dengan css

Perhatikan bagaimana “Hello World” tidak lagi hitam.

Selain itu, lihat bagaimana kami menggunakan kata “biru” dalam kode CSS.  Jika Anda menginginkan warna biru tertentu, Anda selalu dapat memasukkan kode hex.  Misalnya, kita mungkin mengganti kata “biru” dengan “#61d4f4” untuk mendapatkan warna ini untuk judul posting:

ubah judul posting dengan kode hex css

Anda dapat menambahkan potongan kode sebanyak yang Anda inginkan.  Ingat saja, setiap perubahan yang Anda buat di sini akan berlaku untuk seluruh situs web Anda.  Juga, perubahan yang Anda buat dalam satu tema tidak akan muncul di tema lain jika Anda mengaktifkannya.  Jika Anda mengubah tema, Anda harus melakukan kembali semua penyesuaian CSS.

Klik Menerbitkan ketika Anda selesai.

3. Plugin CSS

Jika Anda tidak ingin menggunakan Penyesuai Tema untuk menambahkan CSS di WordPress, Anda selalu dapat menggunakan plugin WordPress gratis seperti CSS Kustom Sederhana.

Plugin ringan ini akan membuat item menu baru di dasbor WordPress Anda di bawah Penampilan.  Ini akan diberi label CSS khusus.  Saat Anda mengkliknya, Anda akan melihat kotak teks kosong yang mirip dengan yang ditemukan di Penyesuai Tema.

css kustom sederhana

Setelah Anda menambahkan cuplikan kode CSS, klik Perbarui CSS Khusus untuk menyimpan perubahan Anda.

Keuntungan menggunakan plugin CSS seperti ini adalah meskipun Anda mengubah tema, CSS khusus Anda akan tersedia.  Ini berarti Anda tidak perlu memasukkannya lagi.

Alat bermanfaat lainnya untuk menyesuaikan situs WordPress Anda menggunakan CSS meliputi:

Contoh Cuplikan Kode CSS

Anda dapat mengubah hampir semua elemen desain di situs WordPress Anda dengan CSS menggunakan rincian dasar ini:

  • Garis pertama: elemen mana yang Anda ubah, seperti judul posting (h1), teks dalam paragraf (p), atau area widget (widget)
  • Semua Jalur Lainnya: instruksi khusus untuk apa yang akan diubah, terlampir dalam tanda kurung

Ada banyak cuplikan kode CSS berbeda yang dapat digunakan untuk menyesuaikan situs web Anda.  Dan tidak mungkin untuk membuat daftar semuanya.

Karena itu, jika Anda ingin menyesuaikan situs web Anda menggunakan CSS, berikut adalah beberapa contoh cuplikan kode untuk menunjukkan cara kerjanya.

Keluarga dan Ukuran Font

Untuk mengubah font dan ukurannya, tambahkan kode CSS ini:


    p {
    font-family: Georgia;
    font-size: 20px;
    }
    
keluarga font dan ukuran css

Anda dapat mengganti keluarga font dengan gaya font yang Anda inginkan dan mengubah nomor untuk membuat ukuran font menjadi besar atau kecil yang Anda inginkan.

Kustomisasi Bilah Sisi

Katakanlah Anda ingin menambahkan beberapa penyesuaian pada widget bilah sisi di situs web Anda.  Untuk menambahkan warna latar belakang dan padding yang bagus, tambahkan kode CSS ini ke baris baru:


    .widget {
    background: #B9EBFA;
    padding: 25px;
    }
    
widget css

Ingat, CSS ini akan berlaku untuk semua area widget di situs web Anda.  Jika Anda ingin menerapkan perubahan ke area widget tertentu, CSS Anda harus mencerminkannya.

Misalnya, Anda ingin CSS hanya diterapkan ke widget Bilah Pencarian.  Untuk melakukan ini, ubah CSS agar terlihat seperti ini:


    .widget_search {
    background: #B9EBFA;
    padding: 25px;
    }
    
widget css khusus

Untuk lebih banyak cara menyesuaikan situs Anda, pastikan untuk memeriksa 5 kode CSS sederhana ini.

Tempat Belajar Lebih Banyak Tentang CSS

Jika Anda senang bekerja dengan CSS, ada banyak tempat untuk mempelajari CSS untuk WordPress:

Jika Anda kesulitan menemukan kode CSS untuk membuat perubahan tertentu di situs web Anda, biasanya pencarian Google sederhana akan membantu.  Tetapi jika Anda benar-benar ingin mendalami dan membuat beberapa perubahan serius pada situs web Anda, lihat beberapa sumber daya di atas dan pelajari CSS secara komprehensif.

Pikiran Akhir

Memiliki situs web unik yang menonjol di antara yang lainnya adalah bagian penting dari kesuksesan Anda secara keseluruhan.  Dan kebetulan menambahkan CSS di WordPress adalah cara mudah untuk menyesuaikan situs Anda.

Mempelajari CSS tidak sulit dilakukan jika Anda tahu harus mulai dari mana.  Dan meskipun mungkin perlu sedikit waktu untuk mempelajari beberapa cuplikan kode yang paling umum, sebelum Anda menyadarinya, Anda akan dapat membuat segala macam perubahan rapi pada tampilan situs Anda dengan sedikit usaha sama sekali.

Ingatlah untuk menggunakan Theme Customizer atau plugin CSS untuk menambahkan CSS di WordPress.  Tidak ada gunanya merusak situs Anda dan mempertaruhkan waktu henti yang serius karena beberapa perubahan desain.

Apakah Anda pernah menambahkan CSS di WordPress?  Apakah ada cuplikan kode masuk yang ingin Anda bagikan?  Jika demikian, kami akan senang mendengar semuanya di komentar di bawah.

Demikanlah tulisan tentang Cara Menambahkan CSS di WordPress (Cara Mudah) . Semoga dapat menjadi manfaat bagi kita semua.

Related Articles

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.

Back to top button