Kode CSS Terbaik untuk Menyesuaikan Situs Web WordPress

Apakah Anda melihat beberapa kode CSS terbaik untuk menyesuaikan WordPress ? Jika demikian, kami akan menunjukkan kepada Anda beberapa skrip CSS yang paling sering digunakan yang dapat Anda gunakan untuk mengedit situs web WordPress Anda.

Kami tahu bahwa ada banyak opsi untuk menyesuaikan WordPress dengan plugin, opsi tema, dan pengaturan default. Tetapi Anda juga dapat mengedit berbagai area situs web Anda menggunakan kode CSS. Jadi mari kita lihat mengapa Anda mungkin membutuhkan mereka untuk menyesuaikan situs web Anda terlebih dahulu.

Mengapa kode CSS digunakan di WordPress untuk Menyesuaikan Situs Web?

Skrip atau kode CSS digunakan di WordPress untuk mengubah tampilan visual sebuah situs web. Jika Anda ingin membuat beberapa perubahan desain khusus yang tidak termasuk dalam opsi tema atau pengaturan default WordPress, skrip CSS bisa sangat membantu Anda.

Anda dapat menginstal plugin WordPress untuk penyesuaian tetapi plugin menambahkan bobot tertentu ke kerangka kerja situs web Anda yang mungkin memperlambatnya. Menggunakan plugin untuk melakukan perubahan kecil pada tampilan situs web tidak sebanding dengan penurunan kinerja. Jadi jika Anda memiliki pengetahuan dasar dalam pengkodean, menggunakan kode CSS adalah pilihan terbaik.

Untuk memastikan bahwa Anda tidak kehilangan kecepatan situs web saat melakukan modifikasi visual, kami sangat menyarankan Anda untuk menggunakan kode CSS untuk menyesuaikan situs web WordPress Anda. Selain itu, terkadang ada beberapa desain unik yang ingin Anda terapkan di situs web Anda. Dan jika tidak ada plugin khusus yang dibuat untuk itu, skrip CSS adalah satu-satunya pilihan Anda.

Kode CSS Terbaik untuk Menyesuaikan Situs WordPress

Meskipun ada banyak kode CSS untuk menyesuaikan situs web WordPress, kami akan memberi Anda skrip CSS terbaik yang kami temukan. Mereka adalah beberapa kode yang paling sering digunakan untuk menyortir semua jenis masalah dan mencapai desain yang luar biasa saat bekerja di bagian depan situs web WordPress.

Namun, daftar skrip berikut dimaksudkan untuk tujuan demonstrasi, skrip tersebut mungkin tidak berfungsi di situs web Anda karena pemilih yang digunakan relatif terhadap situs web sampel. Dalam kebanyakan kasus, Anda perlu mengedit pemilih, jadi itu sebabnya Anda memerlukan pengetahuan dasar tentang CSS untuk menerapkan skrip ini ke situs web Anda. Lihat posting ini jika Anda ingin mempelajari lebih lanjut tentang menerapkan skrip CSS ke situs web WP menggunakan alat pengembang.

Selanjutnya, Anda akan menemukan bagian tambahan di bagian akhir, di mana Anda akan belajar menerapkan skrip CSS Anda ke WordPress dalam tiga cara berbeda. Sekarang, mari kita lihat skripnya

1. Sembunyikan Elemen

Ini mungkin aturan CSS yang paling banyak digunakan. Ini cukup berguna ketika Anda perlu menghapus elemen apa pun di ujung depan atau ujung belakang.

1.1. Sembunyikan tajuk:

 tajuk{
    tampilan: tidak ada;
}

1.2. Sembunyikan tombol "tambahkan ke troli"

 .single_add_to_cart_button.button{
    tampilan: tidak ada;
}

1.3. Sembunyikan remah roti

 .woocommerce-breadcrumb{
    tampilan: tidak ada;
}

Catatan: Ini tidak disarankan dalam beberapa kasus karena elemen tersembunyi dapat menjadi terlihat dengan pemahaman dasar tentang konsol browser. Misalnya, Anda mungkin perlu menghapus formulir sehingga pengguna tidak dapat mengisinya. Kemudian, Anda tidak ingin melakukan ini dengan skrip CSS karena siapa pun yang memiliki pengetahuan dasar tentangnya dapat membuatnya terlihat dan tetap mengirimkan formulir.

Namun, ini memberikan solusi cepat dan mudah untuk masalah gaya atau desain dan kami masih dapat menggunakannya tanpa masalah.

Jika Anda ingin bantuan lebih lanjut tentang cara menyembunyikan dan menghapus tombol tambahkan ke troli, kami juga memiliki panduan mendetail tentangnya. Demikian pula, Anda juga dapat menemukan informasi lebih lanjut tentang cara mengedit header dan breadcrumb di WordPress jika diperlukan di blog kami.

2. Pindahkan Elemen

Jika Anda perlu memindahkan beberapa elemen untuk menyesuaikan desain halaman, Anda dapat dengan mudah memindahkannya ke segala arah menggunakan sesuatu seperti ini:

 #qlwapp{
    bawah:45px;
    kiri:25 piksel;
    posisi: relatif;
}

Anda mungkin perlu mengatur position:relative dalam beberapa kasus, jika elemen telah diposisikan sebelumnya.

Catatan: Ini hanya berguna untuk penyesuaian kecil, elemen tidak boleh dipindahkan di luar wadahnya. Anda dapat menggunakan atas, kanan, bawah, kiri dan memberikan nilai untuk masing-masing.

3. Kode CSS untuk Mode Seluler

Kami juga dapat menerapkan CSS hanya untuk perangkat seluler. Ini dapat dilakukan dengan menggunakan kueri media.

Mereka bekerja seperti pernyataan bersyarat. Semua aturan CSS dalam kueri media hanya akan diterapkan jika ukuran layar di bawah 768 piksel.

Lebar layar yang diberikan diambil dari standar yang diterima untuk perangkat seluler, yaitu 768 piksel. Anda dapat mengedit nilai ini untuk diterapkan pada perangkat dengan ukuran layar yang lebih besar atau lebih kecil.

 @media saja layar dan (max-width:768px){
    div.masthead{
        tampilan: blok sebaris;
        lebar: 50%;
        margin:otomatis;
    }
}

4. Edit Teks

Pemilih Pseudo CSS adalah sumber yang bagus untuk menyesuaikan situs web WordPress. Dan dengan penggunaan yang bijak, kami juga dapat mencapai banyak modifikasi di situs web Anda. Oleh karena itu, kami juga dapat menggunakan kode CSS ini untuk menyesuaikan teks situs web WordPress Anda.

Selektor semu :before dan :after memungkinkan kita untuk menyisipkan "elemen semu" tepat sebelum atau sesudah elemen HTML lainnya. Dengan cara ini, kita dapat menyembunyikan teks dan menggantinya dengan yang lain:

 p.teks{
    visibilitas: tersembunyi;
}
p.teks::sebelum{
    visibilitas: terlihat;
    konten:'teks baru di sini';
    tampilan: blok;
}

5. Terjemahan menggunakan Kode CSS

Kelas semu :lang() memungkinkan kita untuk menerapkan aturan CSS bergantung pada bahasa halaman. Bahkan jika diterjemahkan dengan salah satu plugin terjemahan seperti WPML atau Polylang, atribut lang saat ini akan selalu berada di tag utama <html> dari output HTML situs web.

Jadi, jika kita menggunakan selektor semu :before seperti yang terlihat pada contoh skrip sebelumnya, dikombinasikan dengan kelas semu :lang() , kita akan dapat menerjemahkan string apa pun di situs web.

Ini juga akan berfungsi di situs web multi-bahasa.

 p.teks:lang(en){
    visibilitas: tersembunyi; 
} 
p.text:lang(en)::sebelum{ 
    visibilitas: terlihat;
    isi:'teks yang diterjemahkan';
    tampilan: blok; 
}

6. Tambahkan Bilah Gulir

Bilah gulir dapat meningkatkan pengalaman pengguna di situs web saat Anda memiliki beberapa konten besar seperti daftar, galeri gambar, atau bagian. Mereka juga membantu memelihara posting dan halaman tanpa panjang yang berlebihan.

Ini sangat berguna untuk digunakan di bilah sisi atau area widget lainnya. Selain itu, ini dapat membantu memperbaiki masalah widget yang hilang atau terpotong ketika tingginya melebihi ukuran yang tersedia juga.

Kami juga dapat menyisipkan bilah gulir di dalam posting dan halaman:

Skrip ini akan menambahkan bilah gulir ke daftar, membuat semua dokumen menjadi lebih pendek.

 ul {
    tinggi: 370 piksel;
    overflow-y:gulir;
} 

7. Kode CSS untuk Menggunakan Gambar sebagai Ikon

Anda dapat menambahkan semua jenis gambar dengan skrip CSS dan itu dapat dicapai dengan beberapa cara. Tetapi dengan menggunakan pseudo selector :before , kita dapat menambahkan gambar dan membuatnya terlihat seperti ikon juga.
Pastikan untuk mengunggah gambar ke perpustakaan media dan gunakan tautan permanen gambar sebagai url('image-link-here')

 .entry-content > p:nth-child(3)::before{
    content:url('http://localhost/Sampler/wp-content/uploads/2022/03/fish-icon.png');
}

Atau kita dapat menggunakan ikon nyata, juga menggunakan pemilih yang sama:

 .entry-content > p:nth-child(3)::before{
	font-family: "Font Awesome 5 Gratis"; 
        font-berat: 400; 
        isi: "\f0f3";
}

Untuk menggunakan ikon asli, tautan tag HTML ikon diatur ke font mengagumkan 5 Gratis pada contoh kami. Itu harus dimuat di bagian <head> halaman web.

8. Ubah Font

Anda dapat menyesuaikan font situs web WordPress dengan kode CSS juga. Mirip dengan ikon, font juga harus dimuat ke dalam header tema agar kita dapat menggunakannya. Kami dapat memverifikasi apakah kumpulan font tersedia dengan melihat bagian <head> halaman.

Di sini, tautan Google Font telah ditambahkan dengan bantuan skrip PHP.

Setelah Anda mengonfirmasi bahwa ikon atau kumpulan font yang ingin Anda gunakan sudah dimuat di bagian HTML <head> , Anda dapat dengan bebas menggunakannya di situs web secara keseluruhan

 h1,h2,h3,p,a,li{
    font-family: 'Hubbali', kursif;
} 

Bonus: 3 cara menerapkan CSS ke situs WordPress

Kami telah memberi Anda beberapa kode CSS yang paling sering digunakan untuk menyesuaikan situs web WordPress Anda. Tetapi Anda juga perlu tahu cara menambahkannya ke situs web Anda juga. Untuk itu, kami juga akan menampilkan tutorial singkat sebagai bonus di artikel ini.

Jadi, berikut adalah 3 cara umum untuk menerapkan CSS ke situs web WordPress.

1. Penyesuai tema

Untuk menambahkan skrip CSS melalui penyesuai tema, yang harus Anda lakukan adalah menempelkan skrip CSS Anda pada penyesuai tema. Ini dapat diterapkan secara umum untuk penyesuaian atau perbaikan kecil.

Buka Penampilan > Kustomisasi > CSS tambahan untuk membuka editor gaya. Kemudian rekatkan skrip CSS Anda di sini.

Script di sini akan disimpan di database setelah menekan tombol " Publish ". Anda akan dapat melihat perubahan di situs web Anda setelah Anda mempratinjaunya.

2. File CSS tema anak

Untuk langkah ini, Anda harus membuat tema anak untuk situs web Anda secara terprogram atau dengan menggunakan salah satu plugin tema anak sebelum kita mulai. Kemudian, pastikan situs web Anda memiliki tema anak yang aktif dan tambahkan kode CSS di file style.css . Lebih baik jika Anda mencadangkan seluruh situs web Anda juga karena kami akan memodifikasi file inti situs web Anda yang rumit.

Buka editor kode Anda untuk menempelkan skrip Anda di sana, atau gunakan editor bawaan WP di Appearance > Theme Files Editor . Sekarang, buka file Stylesheet atau file style.css dari tema anak.

Ini adalah tempat di mana Anda harus menempelkan semua skrip khusus Anda. Setelah Anda menambahkan kode CSS, klik Update File . Namun jika berubah menjadi file yang besar, mungkin ada baiknya untuk membuat file baru atau beberapa file.

3. file functions.php dari Tema Anak

Anda juga dapat menyisipkan gaya CSS menggunakan fungsi PHP. Semua gaya yang diterapkan dengan cara ini akan disisipkan sebagai gaya sebaris di bagian depan.

Sama seperti pendekatan sebelumnya, pastikan tema anak aktif untuk situs web Anda. Kemudian, buka file functions.php dari editor tema dan rekatkan kode berikut di sini.

 add_action('wp_head','QuadLayers_headlink');
fungsi QuadLayers_headlink(){
	gema '<gaya>
    .entry-content > p:nth-child(3)::before{
	    font-family: "Font Awesome 5 Gratis"; 
	    font-berat: 400; 
	    isi: "\f0f3";
    }
    h1,h2,h3,p,a,li{
	    font-family: "Hubbali", kursif;
    }</ gaya>';
}

Keuntungan besar menggunakan cara ini adalah Anda dapat menerapkan persyaratan PHP, memanfaatkan kekuatan penuh kait dan fungsi WP.

Jika Anda ingin mempelajari lebih lanjut tentang menerapkan CSS ke situs web Anda, silakan lihat panduan kami tentang cara menerapkan CSS ke WordPress juga.

Kesimpulan

Ini semua adalah kode CSS yang paling umum digunakan untuk menyesuaikan situs web WordPress . Kami telah menunjukkan kepada Anda semua skrip populer yang dapat digunakan untuk mengubah tampilan visual situs web Anda dan menambahkan desain unik ke dalamnya. Untuk meringkas, kami telah membahas modifikasi berikut menggunakan skrip CSS:

1. Sembunyikan elemen
2. Pindahkan elemen
3. CSS untuk perangkat seluler
4. Mengedit teks
5. Terjemahan
6. Tambahkan bilah gulir
7. Gunakan gambar sebagai ikon
8. Ubah font

Anda dapat dengan mudah menggunakan kode CSS untuk menyesuaikan elemen-elemen ini dari situs WordPress Anda. Untuk membantu Anda, kami bahkan telah menunjukkan kepada Anda beberapa cara untuk menerapkan CSS di WordPress.

Selanjutnya, jika Anda ingin belajar tentang CSS di WordPress, kami juga telah membahas penerapan CSS pada halaman atau postingan tertentu. Demikian pula, skrip CSS bahkan dapat digunakan dengan pembuat halaman. Salah satu contoh paling umum adalah menyesuaikan menu Divi dengan CSS.

Jadi apa pendapat Anda tentang CSS untuk mengedit situs web WP? Apakah Anda pernah menggunakannya? Apakah mereka membantu? Beri tahu kami di komentar.

Sementara itu, berikut beberapa artikel lain yang mungkin menarik bagi Anda:

• Cara Membuat Plugin WordPress Kustom
• Perbaiki Dashboard WordPress Tidak Memuat Masalah
• Cara Membuat Bidang Kustom WordPress Secara Terprogram