Baru-baru ini salah satu pembaca kami bertanya kepada kami bagaimana cara mengubah sisi sidebar tema WordPress?
Kami biasanya mendapatkan pertanyaan ini dari pengguna yang ingin mengubah lokasi bilah sisi mereka dari kiri ke kanan atau dari kanan ke kiri.
Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana mengubah lokasi sidebar di WordPress.
Tetapi sebelumnya, jika Anda belum pernah menginstal WordPress temukan Bagaimana menginstal sebuah blog WordPress langkah 7 et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda
Lalu kembali ke mengapa kita ada di sini.
Mengapa mengubah lokasi sidebar di WordPress?
Pakar kegunaan percaya orang memindai halaman dari kiri ke kanan. Mereka merekomendasikan meletakkan konten penting di sebelah kiri sehingga pengguna melihat konten ini terlebih dahulu. Namun, ini dapat dibalik jika situs web Anda menggunakan bahasa RTL (tepat di sebelah kiri).
Cari tahu apakah seharusnya blog WordPress Anda memiliki sidebar
Banyak situs WordPress menggunakan tata letak blog biasa dengan dua kolom. Satu untuk konten, dan kolom lainnya untuk sidebar.
Jika Anda baru mengenal situs web maka Anda harus memilih tema WordPress yang memiliki bilah sisi di situs yang Anda sukai.
banyak Tema WordPress menawarkan opsi untuk mengubah sisi bilah sisi di pengaturan bilah sisi. Namun, jika tema WordPress Anda tidak memiliki opsi ini, Anda harus mengubah sisi sidebar secara manual. Pergi lebih jauh dengan menemukan cara menghapus sidebar di WordPress
Yang mengatakan, mari kita lihat metode yang harus Anda gunakan untuk dengan mudah mengubah sisi sidebar WordPress dengan menggunakan CSS.
Mengubah bilah sisi dengan CSS
Sebelum membuat perubahan apa pun pada tema WordPress Anda, Anda harus terlebih dahulu mempertimbangkan membuat tema anak. Dengan menggunakan tema anak, Anda dapat memperbarui tema orang tua tanpa kehilangan perubahan.
Temukan Bagaimana untuk menampilkan sidebar berbeda untuk setiap item di WordPress
Kedua, Anda harus selalu membuat cadangan situs WordPress Anda ketika Anda membuat perubahan waktu-nyata untuk tema aktif Anda.
Anda membutuhkan klien FTP untuk mengedit file tema WordPress. Konsultasikan panduan tentang cara menggunakan FTP.
Masuk ke situs WordPress Anda menggunakan klien FTP dan navigasikan ke folder tema. Biasanya terletak di:
/ Yoursite / wp-content / themes /-tema-folder Anda /
Sekarang Anda perlu mengunduh dan membuka file stylesheet utama tema WordPress Anda di editor teks seperti Notepad. File ini disebut style.css, dan itu ada di direktori root tema WordPress Anda.
Temukan cara mengelola file dan folder WordPress
Dalam file ini, cari kelas CSS pada bilah sisi Anda. Umumnya kelas ini adalah " sidebar ". Dalam contoh ini, kami menggunakan tema WordPress default " dua puluh lima belas Siapa yang memiliki kelas ini untuk bilah sisi:
.sidebar {float: left; margin-right: -100%; lebar maks: 413px; posisi: relatif; lebar: 29.4118%; }
Seperti yang Anda lihat sidebar mengapung ke kiri dengan margin -100%. Kami akan mengubah pelampung ke kanan:
.sidebar {float: right; margin-kiri: -100%; lebar maks: 413px; posisi: relatif; lebar: 29.4118%; }
Simpan perubahan Anda dan unggah file style.css ke situs web Anda menggunakan klien FTP. Sekarang, jika Anda mengunjungi situs web Anda, akan terlihat seperti ini:
Memang, kami memindahkan bilah sisi, tetapi kami tidak memindahkan area konten. " Dua puluh Lima belas Gunakan CSS ini untuk menentukan posisi area konten.
.site-content {display: block; mengapung: kiri; margin-kiri: 29.4118%; lebar: 70.5882%; }
Kami akan mengubahnya untuk memindahkan konten ke kanan. Sebagai berikut:
.site-content {display: block; mengapung: kiri; margin-right: 29.4118%; lebar: 70.5882%; }
Inilah tampilan situs web Anda setelah menerapkan kode CSS ini.
Seperti yang Anda lihat, kami mengubah lokasi area konten dan bilah sisi. Namun, masih ada blok putih di sebelah kiri.
Melangkah lebih jauh dengan menemukan cara mengelola file dan folder WordPress
Anda akan sering menemukan kesalahan ini ketika bekerja dengan CSS. Butuh beberapa upaya detektif untuk memahami apa yang menyebabkan ini dan bagaimana cara memperbaikinya.
Gunakan alat "Inspektur" browser Anda untuk melihat kode sumber. Arahkan mouse Anda ke wilayah yang terpengaruh di browser, klik kanan dan pilih "Inspektur" dari menu browser.
Saat Anda menggerakkan mouse di sekitar tampilan kode sumber, Anda akan melihat area yang terpengaruh yang disorot dalam pratinjau langsung. Di panel kanan, Anda akan dapat melihat CSS yang digunakan untuk elemen yang dipilih itu.
Temukan kami Plugin 5 WordPress untuk mengedit CSS secara visual di blog Anda
Jadi CSS yang sesuai dengan item yang disorot harus disesuaikan kembali.
Layar @media dan (min-width: 59.6875em) {body: before {background-color: #fff; bayangan kotak: 0 0 1px rgba (0, 0, 0, 0.15); konten: ""; display: blok; tinggi: 100%; min-height: 100%; posisi: tetap; atas: 0; kiri: 0; lebar: 29.4118%; z-index: 0; / * Memperbaiki bug yang berkedip dengan menggulir di Safari * /}
Kode CSS ini menambahkan blok kosong lebar 29,4118% dan lebar 100% ke kiri atas. Begini cara kita memindahkannya ke kanan.
Layar @media dan (min-width: 59.6875em) {body: before {background-color: #fff; bayangan kotak: 0 0 1px rgba (0, 0, 0, 0.15); konten: ""; display: blok; tinggi: 100%; min-height: 100%; posisi: tetap; atas: 0; kanan: 0; lebar: 29.4118%; z-index: 0; / * Memperbaiki bug yang berkedip dengan menggulir di Safari * /}
Setelah menyimpan dan mengunggah stylesheet ke server, seperti inilah tampilan situs web Anda.
Bekerja dengan CSS bisa membingungkan bagi pemula. Jika Anda tidak ingin melakukan semua pekerjaan manual, maka Anda dapat mencoba Plugin WordPress CSS Hero. Ini memungkinkan Anda untuk mengedit CSS tanpa menulis kode, dan berfungsi dengan setiap tema WordPress.
Temukan juga beberapa plugin WordPress premium
Anda dapat menggunakan yang lain plugin WordPress untuk memberikan tampilan yang modern dan untuk mengoptimalkan penanganan blog atau website Anda.
Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.
1. Zxeion
Zxeion sangat kuat WordPress Plugin premium yang bertanggung jawab untuk meningkatkan keamanan situs web Anda. Plugin ini berisi kumpulan alat perlindungan dan keamanan yang akan melindungi situs web Anda dari kemungkinan serangan.
Sistem perlindungan real-time-nya akan membantu Anda mengidentifikasi ancaman ke situs web Anda dan memblokirnya, tanpa Anda harus melakukan apa pun.
Temukan juga milik kami 7 plugin untuk meningkatkan sidebar Anda di WordPress
Fitur-fiturnya adalah: perlindungan waktu nyata, dukungan pelanggan yang sangat baik, pembaruan rutin, pemblokir alamat IP, dokumentasi yang sangat baik, antarmuka modern dan profesional, dukungan pelanggan khusus, dan lainnya.
Download | Demo | Hébergement Web
2. Slaido
Slaido adalah WordPress Plugin premium yang memungkinkan Anda memilih dari hampir 320 template slider responsif dan mengimpor salah satunya ke situs web Anda hanya dalam beberapa klik. Ini adalah paket template yang lengkap, cocok untuk Slider Revolusi. Jadi, Anda harus menginstalnya terlebih dahulu untuk dapat menggunakan ini sepenuhnya WordPress Plugin
Fitur utamanya adalah: tata letak slider yang responsif, kemudahan mengimpor atau mengekspor slider, pembaruan rutin, dukungan pelanggan tersedia 24/7, animasi yang lancar dan sangat keren, ketersediaan tutorial video untuk memulai dengan cepat, dukungan untuk Google Fonts, dan banyak lagi.
Download | Demo | Hébergement Web
3. Formulir Hubungi Kami
Formulir Hubungi Kami adalah plugin WordPress responsif premium dan alat sederhana namun kaya akan opsi penyesuaian yang memungkinkan Anda untuk menampilkan formulir yang jelas dan menggembirakan, di mana pengunjung Anda dapat menghubungi Anda dengan meninggalkan pesan mereka.
Anda akan dapat menentukan bidang yang diperlukan, memilih tata letak bidang yang terbaik dan menyesuaikannya sepenuhnya untuk mendorong pelanggan atau pengunjung untuk meninggalkan saran atau pesan mereka.
Kami juga mengundang Anda untuk membaca: Plugin 10 WordPress untuk membuat dan mengelola situs web restoran
Cukup atur alamat email tempat Anda ingin menerima pesan dan gunakan untuk menumbuhkan bisnis Anda ke arah yang paling menguntungkan.
Download | Demo | Hébergement Web
Sumber Daya yang Direkomendasikan
Cari tahu tentang sumber daya lain yang direkomendasikan untuk membantu Anda membangun dan mengelola situs web Anda.
- Cara menemukan URL login dari blog WordPress Anda
- Cara membuat zona pahlawan super dengan teks animasi
- Cara menyesuaikan CSS situs web WordPress Anda
- Bagaimana menambahkan kategori untuk menu blog WordPress Anda
Kesimpulan
Here! Itu saja untuk tutorial ini. Kami harap ini membantu Anda mengubah sisi sidebar blog WordPress Anda. merasa bebas untuk bagikan artikel ini dengan teman-teman Anda di jejaring sosial favorit Anda.
Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress.
Jika Anda memiliki saran atau komentar, tinggalkan di bagian kami komentar.
...
