17 Tip CSS Hemat Waktu Untuk Pengguna WordPress
Diterbitkan: 2023-03-13WordPress menawarkan kemungkinan tak terbatas untuk mendesain dan menyesuaikan situs web Anda. Pada artikel ini, kami akan membagikan beberapa tips praktis CSS khusus untuk pengguna WordPress, mulai dari mengatur gaya tajuk hingga mengubah font Anda.
Meskipun WordPress menawarkan banyak tema dan template siap pakai, terkadang Anda perlu mengambil tindakan sendiri dan membuat penyesuaian dengan CSS.
Jika Anda pernah menanyakan salah satu dari pertanyaan ini saat bekerja di situs WordPress Anda:
- “Bagaimana cara menghapus tombol 'baca lebih lanjut'?”
- “Bagaimana saya bisa mengubah warna tautan ini?”
- “Bagaimana cara membuat tautan ini tidak dapat diklik tetapi teksnya tetap ada di halaman?”
… lalu baca terus untuk mempelajari beberapa trik CSS berharga untuk situs web Anda.
Dalam tutorial ini, kita akan membahas:
- Kiat CSS WordPress
- Pusatkan elemen secara horizontal dan vertikal
- Ubah warna tautan
- Hapus tautan
- Nonaktifkan tautan (tautan tetap terlihat tetapi pengguna tidak dapat mengekliknya)
- Ubah warna tautan saat melayang
- Tautan gaya
- Gaya sebuah tombol
- Mengubah font bagian
- Buat tajuk lengket
- Buat tajuk lengket dengan efek bayangan
- Tambahkan warna latar belakang ke bagian
- Mengubah warna latar belakang tubuh
- Mengubah warna kata atau frasa tertentu
- Buat perbatasan di sekitar gambar
- Buat efek hover pada gambar
- Berikan gaya pada formulir
- Buat tata letak yang responsif
- Tingkatkan Keahlian CSS Anda ke Level Selanjutnya
Kiat CSS WordPress
Dua hal yang perlu Anda ketahui untuk menerapkan tips ini adalah:
- Bagaimana CSS bekerja
- Bagaimana cara menambahkan CSS ke WordPress
Catatan: CSS tidak berisiko, jadi jika Anda membuat kesalahan, Anda dapat menghapus kode Anda atau memodifikasinya… tidak akan merusak apa pun :)
Dengan itu, mari lompat langsung ke beberapa tips praktis CSS dengan contoh sehingga Anda dapat mencobanya di situs WordPress Anda sendiri:
Pusatkan elemen secara horizontal dan vertikal
Untuk memusatkan elemen (seperti gambar, teks, atau div) baik secara horizontal maupun vertikal, gunakan kode CSS berikut:
.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Dalam kode ini, properti position: relative digunakan untuk memposisikan elemen relatif terhadap leluhur terdekatnya. top: 50% dan left: 50% properti memindahkan elemen ke tengah wadahnya. Terakhir, properti transform: translate(-50%, -50%) memusatkan elemen baik secara horizontal maupun vertikal dengan memindahkannya kembali 50% dari lebar dan tingginya sendiri.
Ubah warna tautan
.item-class{
color : blue;
}
Anda dapat menggunakan warna seperti putih, hitam, biru, merah… tetapi Anda mungkin ingin menggunakan warna tertentu.
Dalam hal ini, Anda dapat melakukannya seperti ini:
.item-class{
color : #F7F7F7;
}
Jika Anda ingin membuat palet warna untuk desain situs web Anda, coba gunakan alat Paletton. Ini sangat membantu!
Catatan: Jika ingin menggabungkan elemen, caranya cukup mudah.
Misalnya, Anda ingin menonaktifkan klik dan mengembalikan tautan menjadi hitam.
Anda dapat menggunakan kode ini:
.item-class{
pointer-events : none;
color : black;
}
Hapus tautan
.item-class{
display : none;
}
Catatan: Kadang-kadang Anda mungkin perlu memberi a setelah kelas Anda untuk membuatnya berfungsi, seperti ini:
.item-class a{
display : none;
}
Coba tambahkan a atau bereksperimen tanpanya untuk melihat apakah kode Anda berfungsi atau tidak. Cukup tambahkan CSS Anda, simpan, dan periksa frontend Anda.
Nonaktifkan tautan (tautan tetap terlihat tetapi pengguna tidak dapat mengekliknya)
Catatan: Itu selalu lebih baik untuk memodifikasi HTML untuk melakukan ini, tetapi jika CSS mungkin lebih mudah atau satu-satunya solusi yang mungkin, gunakan kode ini:
.item-class{
pointer-events: none;
}
Ubah warna tautan saat melayang
Anda dapat membuat tautan berubah warna saat pengguna mengarahkannya dengan menggunakan kode CSS berikut:
a:hover {
color: red;
}
Dalam kode ini, pemilih a:hover menargetkan semua tautan pada halaman yang sedang diarahkan oleh pengguna. color: red mengubah warna teks menjadi merah.
Tautan gaya
Untuk menata tautan di situs web Anda, gunakan kode CSS berikut:
a {
color: #0077cc;
text-decoration: none;
border-bottom: 1px solid #0077cc;
transition: all 0.2s ease-in-out;
}
a:hover {
color: #005299;
border-bottom: 1px solid #005299;
}
Dalam kode ini, pemilih a digunakan untuk memberi gaya pada semua tautan di halaman. Properti color mengatur warna tautan, dan properti text-decoration menghapus garis bawah default. Properti border-bottom menambahkan efek garis bawah yang halus. Properti transition menciptakan efek transisi yang mulus saat pengguna mengarahkan kursor ke tautan. Pemilih a:hover digunakan untuk mengatur gaya tautan saat pengguna mengarahkan kursor ke atasnya.
Gaya sebuah tombol
Gunakan kode berikut untuk mendesain tombol:
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
Dalam kode ini, berbagai properti digunakan untuk memberi gaya pada tombol, termasuk properti background-color dan color untuk tampilan tombol, properti padding untuk ukuran tombol, dan properti cursor untuk mengubah penunjuk tetikus saat mengarahkan kursor ke tombol.
Mengubah font bagian
Ubah font bagian situs web Anda menggunakan kode CSS berikut:
.section {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
Dalam kode ini, properti font-family mengatur font ke Arial atau font sans-serif serupa, properti font-size mengatur ukuran font menjadi 16 piksel, dan properti line-height mengatur jarak antar baris teks menjadi 1,5 kali ukuran font.
Buat tajuk lengket
Jika Anda ingin membuat tajuk yang tetap berada di bagian atas halaman saat pengguna menggulir, Anda dapat menggunakan kode CSS berikut:
.header {
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 9999;
}
Dalam kode ini, properti position: fixed memperbaiki header ke bagian atas area pandang, dan properti top: 0 memposisikannya di bagian paling atas halaman. width: 100% memastikan tajuk mencakup seluruh lebar viewport. background-color , color digunakan untuk menata header, dan properti z-index: 9999 memastikan bahwa header muncul di atas semua elemen lain di halaman.
Buat tajuk lengket dengan efek bayangan
Untuk membuat tajuk lengket dengan efek bayangan yang tetap berada di bagian atas halaman saat pengguna menggulir, gunakan kode CSS ini:
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.content {
padding-top: 100px;
}
Dalam kode ini, properti position: fixed digunakan untuk memperbaiki header ke bagian atas halaman. top: 0 dan left: 0 memposisikan tajuk di sudut kiri atas halaman. width: 100% mengatur lebar tajuk menjadi lebar penuh halaman. Properti background-color mengatur warna latar belakang header, dan properti z-index memastikan bahwa header muncul di atas elemen lain di halaman. Terakhir, properti box-shadow menambahkan efek bayangan halus ke header. Pemilih .content digunakan untuk menambahkan padding ke bagian atas halaman sehingga konten tidak tercakup oleh header tetap.
Tambahkan warna latar belakang ke bagian
Apakah Anda ingin menambahkan warna latar belakang ke bagian situs web Anda? Kemudian gunakan kode CSS berikut:
.section {
background-color: #f2f2f2;
padding: 20px;
}
Dalam kode ini, properti background-color: #f2f2f2 menyetel warna latar belakang menjadi abu-abu muda, dan properti padding: 20px menambahkan 20 piksel ruang di sekitar konten di dalam bagian.
Mengubah warna latar belakang tubuh
Tambahkan kode ini untuk mengubah warna latar belakang badan situs web Anda:
body {
background-color: #f5f5f5;
}
Dalam kode ini, properti background-color menyetel warna latar belakang menjadi abu-abu terang.
Mengubah warna kata atau frasa tertentu
Untuk mengubah warna kata atau frasa tertentu dalam blok teks, Anda dapat menggunakan kode CSS berikut:
p span {
color: red;
}
Dalam kode ini, pemilih p span menargetkan elemen span apa pun yang muncul dalam elemen p . Anda kemudian dapat membungkus kata atau frasa yang ingin Anda targetkan dengan elemen span di HTML Anda, seperti ini:
<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Ini akan membuat frase “consectetur adipiscing elite” muncul dengan warna merah.
Buat perbatasan di sekitar gambar
Berikut cara menambahkan batas di sekitar gambar:
img {
border: 2px solid #ccc;
}
Dalam kode ini, properti border mengatur lebar, gaya, dan warna border. Nilai 2px menyetel lebar batas menjadi 2 piksel, solid menyetel gaya menjadi garis padat, dan #ccc menyetel warna menjadi abu-abu terang.
Buat efek hover pada gambar
Gunakan cuplikan kode ini untuk membuat efek hover pada gambar:
img:hover {
opacity: 0.8;
}
Dalam kode ini, pemilih img:hover menargetkan gambar saat pengguna mengarahkan kursor ke atasnya. Properti opacity mengatur transparansi gambar. Dalam hal ini, nilainya disetel ke 0,8, membuat gambar sedikit transparan saat pengguna mengarahkan kursor ke atasnya.
Berikan gaya pada formulir
Gaya formulir di situs web Anda dengan kode CSS berikut:
form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}
form label {
display: block;
margin-bottom: 10px;
}
form input[type="text"], form input[type="email"], form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}
form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}
Dalam kode ini, berbagai properti digunakan untuk memberi gaya pada formulir, termasuk properti background-color , padding , dan border-radius untuk keseluruhan tampilan formulir. Pemilih form label digunakan untuk menata label yang terkait dengan setiap bidang formulir. form input[type="text"], form input[type="email"], form textarea digunakan untuk menata berbagai bidang input dalam formulir. Pemilih form input[type="submit"] digunakan untuk mengatur gaya tombol kirim.
Buat tata letak yang responsif
Jika Anda ingin membuat tata letak responsif yang menyesuaikan dengan ukuran layar yang berbeda, gunakan kode CSS berikut:
@media (max-width: 768px) {
/* Styles for screens smaller than 768px */
.container {
width: 100%;
}
.menu {
display: none;
}
.mobile-menu {
display: block;
}
}
@media (min-width: 769px) {
/* Styles for screens larger than 768px */
.container {
width: 768px;
margin: 0 auto;
}
.menu {
display: block;
}
.mobile-menu {
display: none;
}
}
Dalam kode ini, aturan @media digunakan untuk menentukan gaya yang berbeda untuk ukuran layar yang berbeda. Aturan @media pertama menargetkan layar dengan lebar maksimum 768 piksel, dan aturan @media kedua menargetkan layar dengan lebar minimum 769 piksel. Berbagai pemilih dalam setiap aturan @media digunakan untuk menyesuaikan tata letak dan tampilan halaman berdasarkan ukuran layar.
Satu tip CSS lagi…
Anda mungkin menemukan kode Anda tidak berfungsi meskipun Anda melakukan semuanya dengan benar. Ini mungkin karena sudah ada kode CSS yang mengatakan sesuatu yang berbeda dari kode Anda.
Untuk menimpanya, tambahkan saja !important seperti ini:
.item-class{
pointer-events: none !important;
}
Ini hanyalah beberapa contoh cara praktis Anda dapat menggunakan CSS untuk menyempurnakan situs web WordPress Anda.
Dengan CSS, kemungkinan untuk menyesuaikan tampilan situs web Anda hampir tidak terbatas. Dengan mempelajari dan menerapkan tip-tip ini, Anda dapat membuat situs web yang tidak hanya menarik secara visual tetapi juga dioptimalkan untuk pengalaman pengguna yang lebih baik.
Tingkatkan Keahlian CSS Anda ke Level Selanjutnya
Apakah Anda seorang pemula atau pengembang web profesional berpengalaman atau desainer web, jika Anda ingin menyelam lebih dalam menggunakan CSS dengan WordPress, tutorial CSS tambahan ini akan membantu Anda memperluas pengetahuan dan keterampilan Anda:
- 10 Tips Sederhana Belajar CSS For WordPress – Tips praktis untuk pemula yang ingin belajar CSS khusus untuk digunakan dengan WordPress. Ini mencakup semuanya, mulai dari memahami sintaks CSS hingga menggunakan kerangka kerja CSS.
- Mempelajari dan Mereferensikan CSS untuk WordPress – Panduan komprehensif untuk mempelajari dan mereferensikan CSS khusus untuk digunakan dengan WordPress. Ini mencakup topik-topik seperti menggunakan Penyesuai WordPress, memahami pemilih CSS, dan bekerja dengan tema anak.
- 7 Situs Terbaik untuk Menemukan Cuplikan dan Inspirasi CSS – Sedang mencari inspirasi untuk kode CSS Anda? Artikel ini mencantumkan tujuh situs web yang menawarkan potongan CSS dan contoh yang dapat Anda gunakan di situs web WordPress Anda sendiri.
- Cara Menata Gaya Gambar di Situs WordPress Anda dengan CSS – Gambar adalah bagian penting dari situs web mana pun, dan artikel ini menawarkan tip tentang cara menatanya menggunakan CSS. Anda akan mempelajari cara menambahkan batas, mengubah ukuran dan perataan gambar, dan lainnya.
- Cara Menambahkan CSS Khusus ke Situs WordPress Anda – Artikel ini memandu Anda melalui proses penambahan CSS khusus ke situs web WordPress Anda, menggunakan Penyesuai dan plugin bawaan.
- Plugin CSS Gratis Untuk Mengedit Langsung Situs WordPress Anda – Artikel ini mencantumkan beberapa plugin CSS gratis yang memungkinkan Anda mengedit langsung situs web WordPress Anda, membuatnya lebih mudah untuk melihat efek perubahan CSS Anda secara real-time.
- 14 Alat Animasi CSS Keren Untuk WordPress – Jika Anda ingin menambahkan beberapa animasi ke situs web WordPress Anda menggunakan CSS, artikel ini mencantumkan beberapa alat keren yang dapat Anda gunakan untuk melakukannya.
- Tambahkan Tata Letak Batu dan Kisi ke Situs WordPress Anda Menggunakan CSS – Artikel ini menjelaskan cara menggunakan CSS untuk menambahkan tata letak batu dan kisi ke situs WordPress Anda, menciptakan desain yang lebih menarik secara visual.
- 25 Tips Ahli untuk Pengkodean CSS yang Lebih Bersih untuk WordPress – Jika Anda ingin meningkatkan kebersihan dan keterbacaan kode CSS Anda, artikel ini menawarkan 25 tips ahli untuk melakukannya.
- 25 Kiat Pro untuk Meningkatkan Alur Kerja CSS Anda – Kiat untuk meningkatkan alur kerja CSS Anda, mulai dari menggunakan praprosesor CSS hingga menggunakan alat pengembang browser untuk men-debug kode Anda.
Klik tautan untuk mempelajari lebih lanjut dan mulai tingkatkan situs web WordPress Anda hari ini.
Kontributor
Terima kasih kepada anggota WPMU DEV Antoine dari Incensy yang telah menyumbangkan ide untuk postingan ini dan beberapa contoh CSS yang digunakan di atas. Lihat profil mitra Agensi Incensy untuk detail lebih lanjut.
***
Catatan: Kami tidak menerima artikel dari sumber eksternal. Namun, anggota WPMU DEV dapat menyumbangkan ide dan saran untuk tutorial dan artikel di blog kami melalui Blog XChange.