Cara Menyesuaikan Situs WordPress Anda Dengan CSS: 3 Metode Mudah

WordPress telah berkembang selama bertahun-tahun, dan hari ini merupakan platform yang cukup fleksibel dan mudah untuk disesuaikan melalui editor bloknya, Gutenberg. Namun, akan ada saat-saat ketika Anda membutuhkan lebih banyak jangkauan daripada yang disediakan editor Gutenberg.

Di sinilah CSS khusus berguna. Penataan CSS memungkinkan Anda untuk mengedit warna, spasi, font, tata letak, dan pada dasarnya setiap elemen visual lain dari situs WordPress Anda, memungkinkan Anda membuatnya terlihat persis seperti yang Anda inginkan.

Pada artikel ini, kami akan memandu Anda melalui hal-hal penting dalam menyesuaikan situs WordPress Anda dengan CSS.

Mengapa Menyesuaikan Situs Web Anda Dengan CSS?

Menambahkan CSS khusus hanyalah salah satu metode yang dapat Anda gunakan untuk menyempurnakan tampilan situs Anda. Metode lain termasuk menggunakan a Tema WordPress premium berfitur lengkap, atau memasang pembuat laman.

Meskipun kedua metode ini sedikit lebih mudah digunakan untuk pemula, dan tidak memerlukan pengetahuan pengkodean, menggunakan CSS khusus lebih menguntungkan dalam dua cara utama:

Biaya nol

Tema premium dan pembuat halaman WordPress bisa berguna, tetapi harganya mahal—dalam dolar dan sen. Berbekal pengetahuan tentang cara menulis CSS khusus, di sisi lain, Anda dapat mencapai efek yang sama tanpa mengeluarkan biaya tambahan.

Kembung Minimal

Pembuat halaman dan tema berfitur lengkap dirancang untuk memberi pengguna lebih banyak fleksibilitas dan beragam opsi untuk menyesuaikan situs web mereka. Karena itu, mereka cenderung menambahkan kembung ke situs web, berpotensi memperlambatnya.

Saat menulis CSS khusus, di sisi lain, Anda hanya akan menambahkan fitur yang diperlukan, umumnya menghasilkan situs web yang lebih ringan dan kecepatan pemuatan yang lebih cepat.

3 Metode Mudah untuk Menyesuaikan Situs WordPress Anda Dengan CSS

Semoga kamu sudah tahu cara menulis CSS. Setelah Anda terbiasa dengan dasar-dasarnya, Anda dapat menggunakan salah satu dari metode berikut untuk menambahkan CSS khusus ke situs web WordPress Anda:

Metode 1: Gunakan Penyesuai WordPress

Dengan WordPress 4.7 atau versi apa pun setelahnya, Anda dapat menambahkan CSS khusus langsung dari area admin. Ini adalah metode yang paling mudah, dan karena ada pratinjau langsung yang tersedia, Anda dapat melihat perubahan apa pun yang Anda buat secara waktu nyata.

Ini juga yang paling direkomendasikan, karena semua perubahan yang Anda buat disimpan di dalam WordPress itu sendiri. Ini berarti bahwa meskipun Anda mengubah atau memperbarui tema, Anda tidak akan kehilangan CSS khusus Anda.

Berikut langkah-langkah yang harus dilakukan:

Langkah 1: Navigasi ke Penampilan > Sesuaikan.

Ini akan membuka penyesuai tema WordPress, yang menunjukkan pratinjau langsung situs Anda di sebelah kanan, bersama dengan beberapa opsi penyesuaian di sebelah kiri. Gulir ke bawah ke bagian bawah panel kiri, dan Anda akan menemukan CSS tambahan tab.

Langkah 2: Klik pada CSS tambahan tab.

Ini akan membuka kotak kecil di panel kiri tempat Anda dapat menambahkan CSS khusus Anda. Anda dapat mengetikkan baris kode CSS sebanyak yang Anda suka. Hal hebat tentang editor ini adalah ia memvalidasi kode Anda, memperingatkan Anda jika ada kesalahan.

Langkah 3: Publikasikan perubahan Anda.

Aturan CSS valid apa pun yang Anda tambahkan akan muncul di area pratinjau langsung di sebelah kanan. Untuk menerapkan perubahan ke situs Anda, klik tombol Menerbitkan tombol di bagian atas panel kiri setelah Anda puas. Jika Anda tidak ingin perubahan segera diterapkan, Anda juga dapat menjadwalkan penerbitan di lain waktu atau menyimpan pekerjaan Anda sebagai draf.

Penting untuk dicatat bahwa setiap perubahan yang Anda buat menggunakan penyesuai terkait dengan tema Anda saat ini. Jika Anda pernah beralih ke tema lain, perubahan akan hilang kecuali Anda menyalin CSS khusus Anda dan menambahkannya ke tema baru. Ini adalah praktik yang baik untuk menyimpan semua CSS khusus yang Anda tambahkan ke tema di notepad. Dengan begitu, Anda cukup menyalin kode dan menempelkannya di bagian "CSS tambahan" untuk tema yang berbeda.

Jika itu terdengar seperti terlalu banyak pekerjaan, dan Anda lebih suka solusi yang memungkinkan Anda menerapkan CSS khusus ke tema WordPress apa pun yang Anda gunakan, metode selanjutnya adalah untuk Anda.

Metode 2. Gunakan Plugin

Plugin CSS khusus menyimpan CSS khusus Anda terpisah dari tema Anda, memungkinkan perubahan Anda diterapkan terlepas dari tema mana yang Anda gunakan. Plugin ini juga dilengkapi dengan fitur tambahan seperti pelengkapan otomatis yang dapat mempermudah penambahan CSS.

Satu-satunya kelemahan adalah bahwa mereka adalah perangkat lunak pihak ketiga, yang berarti bahwa mereka berpotensi memperlambat situs Anda. Namun, sebagian besar plugin ini ringan, sehingga umumnya berdampak kecil pada kinerja situs Anda. Berikut adalah beberapa plugin CSS kustom terbaik yang dapat Anda gunakan:

• CSS Kustom Sederhana

CSS Kustom Sederhana adalah salah satu plugin CSS kustom paling populer. Ini ringan, mudah digunakan, dan menawarkan fitur-fitur hebat. Menyiapkannya mudah. Yang perlu Anda lakukan hanyalah menginstal dan mengaktifkan plugin. Kemudian, navigasikan ke Penampilan di panel kiri dasbor Anda.

Anda akan melihat opsi baru yang disebut CSS khusus. Mengkliknya akan membuka editor tempat Anda dapat menambahkan CSS khusus Anda. Klik Perbarui CSS Khusus tombol untuk menyimpan perubahan Anda. Untuk melihat perubahan, cukup segarkan situs web Anda.

• CSS dan JS Kustom Sederhana

Jika Anda menginginkan lebih banyak fitur, Plugin CSS dan JS Kustom sederhana adalah pilihan yang bagus. Selain menambahkan CSS, ini memungkinkan Anda untuk menambahkan entri JavaScript.

• Pahlawan CSS

Jika Anda tidak ingin menulis satu baris kode pun, Plugin Pahlawan CSS sangat cocok untuk Anda. Plugin ini menawarkan editor CSS visual dengan menu drop-down dan bidang input yang memungkinkan Anda mengedit hampir semua gaya CSS di situs Anda tanpa harus menulis kode apa pun.

Metode 3. Edit Kode Mentah

Dua metode yang kami jelaskan di atas memungkinkan Anda menambahkan CSS khusus ke situs Anda tanpa perlu menyentuh file tema apa pun. Namun, dalam beberapa kasus, Anda mungkin ingin mengedit CSS tema Anda atau langsung menambahkan CSS khusus ke kode tema Anda.

Untuk melakukan ini, Anda harus mengakses stylesheet situs web Anda. Cara mudah untuk mengakses stylesheet ini adalah melalui Editor Tema di dasbor WordPress Anda.

Namun, sebelum kita melangkah lebih jauh, ada beberapa pengamanan yang perlu Anda lakukan. Pertama, buat cadangan situs web Anda. Saat mengedit file tema Anda, mudah untuk membuat kesalahan yang berpotensi membuat situs Anda mogok.

Cadangan memastikan bahwa Anda memiliki situs web fungsional untuk dikunjungi kembali. Lanjut, buat tema anak. Jika Anda melakukan pengeditan langsung pada tema induk, perubahan tersebut akan hilang setiap kali tema diperbarui.

Setelah perlindungan ini diterapkan, masuk ke backend WordPress Anda. Pergi ke Penampilan > Editor Tema. Saat Anda mengklik opsi editor tema, Anda akan melihat kotak popup yang memperingatkan Anda agar tidak membuat perubahan langsung pada file tema Anda. Jika Anda mengikuti langkah-langkah di atas, Anda siap melakukannya.

Klik saya mengerti untuk melanjutkan.

Setelah Anda mengklik, Anda akan melihat stylesheet situs Anda secara default. Jika tidak, cukup lihat di panel kanan dan klik style.css di bawah lembar gaya pilihan.

Dari sini, Anda dapat membuat perubahan langsung ke file tema Anda. Jangan lupa klik Simpan dan Perbarui setelah Anda selesai.

Kendalikan Tampilan Situs Anda Dengan CSS Kustom

Mempelajari cara menulis CSS khusus di WordPress mungkin membutuhkan waktu untuk pemula, tetapi ini akan memberi Anda kendali sejati atas tampilan situs web Anda. Dan itu tanpa biaya, dan dengan dampak minimal pada kinerja situs Anda.

Namun, jika Anda lebih suka tidak melakukan perancangan manual, ada cara lain untuk menyelesaikan pekerjaan, seperti dengan menggunakan salah satu pembuat halaman teratas untuk WordPress.

5 Pembuat Halaman WordPress yang Dapat Membantu Anda Membangun Situs Web Luar Biasa

Ingin membuat situs WordPress Anda terlihat luar biasa tetapi tidak mampu membayar pengembang? Coba pembuat halaman WordPress ini sebagai gantinya.

Baca Selanjutnya

Tentang Penulis