Menyesuaikan Tema WordPress dengan CSS

Tema adalah salah satu nilai jual terbesar WordPress. Tema yang tepat dapat membuat situs web Anda benar-benar menonjol. Namun, Anda biasanya ingin membuat setidaknya beberapa perubahan khusus pada tema apa pun yang Anda gunakan, untuk mendapatkan segalanya dengan benar.

Dalam kebanyakan kasus, Anda harus menggunakan Cascading Style Sheets (CSS) untuk menyesuaikan gaya tema Anda. Dengan WordPress, ada beberapa cara untuk melakukannya. Bahkan jika Anda tidak memiliki pengalaman berurusan dengan kode, Anda dapat dengan mudah menambahkan tweak CSS Anda sendiri ke tema WordPress.

Dalam panduan ini, kita akan melihat tiga metode yang dapat Anda gunakan untuk menambah dan mengedit CSS khusus di WordPress. Kami akan memandu Anda melalui seluruh proses, dan membicarakan kapan masuk akal untuk menggunakan setiap teknik. Mari kita mulai!

Tambahkan CSS Kustom dengan Penyesuai Tema

Tingkat Pengalaman: Pemula

Penyesuai WordPress memungkinkan Anda membuat perubahan pada desain situs web Anda, dan mempratinjaunya secara waktu nyata. Untuk mengaksesnya, masuk ke dashboard WordPress Anda dan arahkan ke tab Appearance > Customize :

Ada banyak pengaturan yang bisa Anda mainkan di sini. Namun, sekarang cari tab CSS tambahan . Setelah Anda mengkliknya, bagian baru akan terbuka, dengan bidang tempat Anda dapat menambahkan CSS khusus:

Jika Anda baru mengenal CSS, Anda dapat membaca lebih lanjut tentang cara menggunakannya dengan WordPress di Codex resmi. Ada juga banyak sumber bagus lainnya tentang dasar-dasar CSS, dan kami sarankan untuk memeriksa beberapa di antaranya.

CSS bisa menjadi sedikit rumit, tetapi ada banyak hal yang dapat Anda capai hanya dengan mengetahui dasar-dasarnya. Hal hebat tentang menggunakan Penyesuai WordPress adalah memungkinkan Anda untuk langsung melihat pratinjau setiap perubahan yang Anda buat menggunakan CSS. Itu berarti pendekatan ini sangat cocok untuk mempelajari cara kerja CSS.

Catatan : Perubahan yang Anda buat menggunakan Penyesuai tidak akan bertahan jika Anda mengubah tema. Plus, memperbarui tema Anda saat ini dapat menghapus CSS khusus Anda. Jadi kami tidak merekomendasikan pendekatan ini jika Anda berniat membuat banyak perubahan atau di antara opsi tema.

Tambahkan CSS Kustom dengan Plugin

Tingkat Pengalaman: Pemula hingga Menengah

Metode di atas berfungsi dengan baik, tetapi Anda dapat memperluas opsi dengan menggunakan plugin. Di bagian berikut, kita akan mengeksplorasi tiga plugin yang memungkinkan Anda menyesuaikan tema WordPress Anda.

Catatan : Tingkat pengalaman mengedit CSS WordPress menggunakan plugin akan bergantung pada alat yang Anda gunakan. Kami merekomendasikan untuk menguji semuanya, dan melihat mana yang paling nyaman.

Editor CSS Tingkat Lanjut

Jika Anda suka menggunakan Penyesuai WordPress, tetapi Anda ingin menawarkan lebih banyak opsi, plugin ini layak untuk dilihat. Dengan Advanced CSS Editor, Anda dapat menambahkan CSS khusus untuk desktop, ponsel, dan tablet. Dengan cara ini, Anda dapat menyempurnakan tampilan situs web Anda di setiap jenis perangkat.

Setelah menginstal plugin WordPress, arahkan ke tab Appearance > Customizer di dashboard Anda. Anda akan melihat opsi Editor CSS Lanjutan baru, memberi Anda akses ke beberapa editor untuk setiap jenis perangkat:

Yang harus Anda lakukan adalah menambahkan CSS khusus yang Anda inginkan, mengujinya untuk memastikan bahwa itu bekerja dengan benar, dan menyimpan perubahan pada tema Anda.

Kelebihan:

• Anda mendapatkan kontrol penuh atas tampilan situs web Anda di semua perangkat.
• Anda masih dapat mengedit tema Anda melalui Customizer.

Kontra:

• Menambahkan CSS khusus untuk beberapa jenis perangkat dapat menjadi pekerjaan yang sulit.

Peringkat Rata-Rata: 4,5/5

Catatan: Plugin ini juga menyertakan opsi untuk mengecilkan CSS Anda, yang dapat membantu mengurangi waktu pemuatan situs Anda.

CSS Kustom Modular

CSS Kustom Modular memungkinkan Anda untuk menambahkan CSS ke tema Anda melalui Penyesuai WordPress. Namun, itu juga menambahkan beberapa fitur yang sangat disambut baik ke editor CSS default. Untuk lebih spesifik, plugin ini memungkinkan Anda membuat CSS khusus untuk masing-masing tema, dan membuat perubahan global yang bertahan di semua tema yang Anda siapkan:

Untuk mengakses bidang ini, Anda harus kembali ke bagian Penampilan > Penyesuai > CSS tambahan . Setelah Anda berada di sana, Anda dapat mulai membuat perubahan.

Kelebihan:

• Anda dapat menambahkan CSS khusus hanya untuk tema tertentu, dan membuat perubahan yang akan bertahan meskipun Anda mengganti tema.

Kontra:

• CSS 'Global' mungkin tidak cocok dengan setiap tema, jadi Anda harus berhati-hati saat beralih ke yang baru.

Peringkat Rata-Rata: 5/5

CSS Asal Situs

SiteOrigin CSS adalah penyimpangan dari plugin yang telah kita bicarakan sejauh ini. Alih-alih menambahkan fitur baru ke Customizer, ia menawarkan editor CSS WordPress yang berdiri sendiri. Anda dapat mengakses editor baru ini dengan membuka tab Appearance > Custom CSS setelah menginstal plugin:

Sepintas, editor CSS ini tidak terlihat banyak. Namun, jika Anda mengeklik ikon mata, Anda akan membuka editor visual. Di sini, Anda dapat mengeklik elemen apa pun dari tema Anda dan mengeditnya dengan mudah menggunakan CSS:

Plugin SiteOrigin CSS bisa sedikit berlebihan pada awalnya. Namun, ini juga dapat menghemat banyak waktu, karena Anda tidak perlu mencari-cari penyeleksi yang tepat. Yang harus Anda lakukan adalah mengklik elemen yang ingin Anda ubah, lalu tambahkan kode CSS apa pun yang Anda suka.

Kelebihan:

• Anda dapat mengedit elemen apa pun yang Anda inginkan di situs web Anda dengan mengkliknya.
• Plugin ini memungkinkan Anda untuk mengubah beberapa aspek sederhana dari tema Anda tanpa harus menggunakan CSS, seperti font-nya.

Kontra:

• Mungkin sulit untuk melacak semua CSS khusus yang Anda tambahkan ke tema Anda jika Anda mengubah beberapa elemen.

Peringkat Rata-Rata: 4,9/5

Edit CSS dengan Stylesheet Tema Anak

Tingkat Pengalaman: Lanjutan

Tema anak adalah salinan dari tema yang sudah ada (dikenal sebagai 'induk'). Tema anak memungkinkan Anda membuat perubahan pada situs web WordPress Anda dengan aman. Itu karena Anda masih dapat mengupdate tema induk, tanpa kehilangan tweak CSS khusus Anda. Plus, jika Anda menambahkan CSS apa pun yang berdampak negatif pada situs Anda, Anda cukup menonaktifkan tema anak.

Setiap CSS khusus yang Anda tambahkan ke tema anak akan menggantikan gaya induknya. Namun, agar ini berhasil, Anda harus tahu cara membuat tema anak sejak awal. Setelah 'anak' Anda siap, Anda dapat mengakses berkasnya menggunakan klien FTP seperti FileZilla.

Setelah terhubung ke situs web Anda melalui FTP, Anda perlu mencari folder root, yang sering disebut public_html atau www , atau dinamai menurut nama situs web Anda:

Selanjutnya, navigasikan ke direktori wp-content/themes . Di sana, Anda akan menemukan folder individual untuk semua tema Anda, termasuk anak yang Anda atur. Buka folder tema anak, dan cari file style.css di dalamnya:

Klik kanan pada file tema, dan pilih opsi Lihat/Edit . Ini akan membuka file menggunakan editor teks default Anda, memungkinkan Anda untuk mengubahnya. Itu berarti Anda dapat menambahkan CSS khusus ke tema Anda, hanya sekarang Anda menggunakan editor teks lengkap alih-alih Penyesuai WordPress.

Setelah selesai, simpan perubahan ke file dan tutup editor. Kemudian, Anda dapat mengunjungi situs web Anda untuk melihat apakah perubahan yang Anda buat berfungsi sebagaimana mestinya. Jika tidak, Anda dapat kembali ke file style.css Anda dan terus mengutak-atik CSS-nya.

Catatan: Ini adalah ikhtisar tingkat tinggi, dan masih banyak lagi untuk menyiapkan dan menggunakan tema anak. Kami menyarankan untuk melanjutkan dengan hati-hati jika Anda baru dalam proses ini.

CSS Kustom dengan Penyesuai Tema vs. Plugin CSS vs. Stylesheet Tema Anak

Seperti yang Anda lihat, Anda memiliki banyak opsi untuk menambahkan CSS khusus ke WordPress. Namun, memilih pendekatan yang tepat bisa menjadi suatu tantangan. Mari uraikan pilihannya, menurut tingkat pengalaman Anda dengan platform dan dengan CSS secara umum:

• Anda baru di WordPress dan tidak terbiasa menggunakan CSS. Dalam skenario ini, taruhan terbaik Anda adalah tetap menggunakan Penyesuai WordPress. Dengan itu, Anda akan dapat melihat pratinjau perubahan secara instan dan terbiasa menggunakan CSS.
• Anda memiliki pengalaman dengan WordPress dan CSS. Pada tahap ini, Anda akan menginginkan lebih banyak opsi daripada yang disediakan Penyesuai default. Oleh karena itu, kami merekomendasikan penggunaan plugin yang meningkatkan fungsinya untuk mengedit CSS khusus di WordPress.
• Anda seorang veteran WordPress yang nyaman menggunakan CSS. Jika Anda tidak terintimidasi oleh CSS dan cuplikan kode, Anda mungkin ingin menyiapkan tema anak dan mengedit stylesheetnya secara manual.

Perlu diingat bahwa ini hanyalah pedoman, dan Anda bebas menggunakan pendekatan apa pun yang terasa paling nyaman bagi Anda.

Tingkatkan Pengalaman Digital dengan Desain Hebat & Hosting Terbaik

Desain situs web Anda memainkan peran penting dalam pendapat pengunjung tentangnya. Dengan WordPress Anda mendapatkan akses ke ribuan tema, dan Anda dapat mengeditnya menggunakan CSS khusus.

Namun, menjalankan situs web yang sukses bukan hanya tentang penampilan. Anda juga memerlukan hosting web WordPress yang memberikan kinerja, keamanan, dan dukungan yang luar biasa. Dengan WP Engine, Anda akan mendapatkan akses ke semua fitur tersebut dengan setiap paket kami!