5 Cara Edit Tema WordPress Tanpa Ribet

1. Cara Edit Tema WordPress melalui Menu Kustomisasi Tema (Theme Customizer)
Jika kustomisasi yang diinginkan sebatas warna, jenis teks, dan layout secara umum, Anda dapat menggunakan theme customizer. Ini adalah fitur bawaan WordPress yang memungkinkan Anda untuk mengedit layout tema dengan mudah.

Langkah-langkahnya pun sangat sederhana. Anda tinggal akses Dashboard dan klik Appearance > Customize.

Menu kustomisasi tema WordPress

Pada halaman theme customizer, Anda akan dihadapkan dengan dua panel:

  • Panel sebelah kiri berisi tab-tab yang mewakili komponen tema yang dapat diedit. Sebagai catatan, komponen yang dapat dikustomisasi di setiap tema berbeda-beda. Misalnya, tema A memperbolehkan Anda mengubah warna dan font teks, sedangkan tema B tidak.
  • Panel sebelah kanan adalah live preview website Anda. Dengan kata lain, kustomisasi yang Anda lakukan di panel sebelah kiri dapat dilihat di panel ini. Di live preview, komponen yang dapat diedit juga ditandai dengan ikon pensil berwarna biru. Jika di-klik, pengaturannya akan terbuka di panel kiri.
    Agar lebih jelas, perhatikan tangkap layar berikut ini.

Tampilan panel kustomisasi tema WordPress

Seperti yang dapat Anda lihat pada tangkap layar di atas, ada beberapa komponen yang dapat Anda edit, termasuk warna, latar belakang halaman, dan menu.

Untuk mengubah warna, misalnya, klik Colors. Kebetulan, tema yang digunakan untuk tutorial ini hanya memperbolehkan penggantian warna latar belakang halaman, header, dan footer.

Menu untuk mengubah warna di tema WordPress

Untuk menggantinya, Anda tinggal klik Select Color dan pilih warna yang diinginkan.

Menariknya, theme customizer WordPress juga memungkinkan Anda untuk mengedit layout tema untuk tiga ukuran layar:

  • Desktop
  • Tablet
  • Smartphone

Dengan begitu, Anda dapat memastikan website sudah mobile-friendly.

Anda dapat mengubah layout ukuran layar yang ingin diedit dengan mengklik salah satu dari ketiga ikon yang ada di pojok bawah panel sebelah kiri. Untuk lebih jelasnya, perhatikan gambar di bawah ini.

Menu untuk mengubah ukuran tampilan website

Apabila Anda sudah selesai mengedit tema, klik tombol Publish yang ada di atas panel sebelah kiri.

Selain itu, Anda juga dapat menyimpan kustomisasi yang dilakukan sebelum menerapkannya pada website. Ini dapat Anda lakukan dengan mengklik ikon di sebelah tombol Publish. Kemudian, pilih Save Draft seperti yang ditunjukkan pada gambar di bawah ini.

Menu untuk menyimpan pengaturan tema WordPress sebagai draf

Jika Anda tidak ingin menerapkan kustomisasi, Anda dapat mengklik tombol Discard changes.

Ingat, tombol ini hanya menghapus kustomisasi terakhir yang Anda buat. Apabila tombol Publish sudah diklik, Anda tidak akan dapat mengembalikan tema Anda ke kondisi semula.

2. Cara Edit Tema WordPress melalui Editor Tema
Cara edit tema WordPress lainnya yang dapat Anda lakukan dari backend WordPress adalah dengan editor tema. Anda dapat mengaksesnya di Appearance > Theme Editor.

Panel editor tema WordPress

Pada dasarnya, ini adalah fasilitas yang diberikan WordPress agar Anda dapat memodifikasi kode pada file-file tema.

Namun, Anda tidak dianjurkan untuk melakukannya secara langsung di editor tema ini. Pasalnya, kesalahan pada coding akan membuat website Anda error. Parahnya lagi, error ini membuat Anda tidak dapat mengembalikan website seperti semula.

Oleh karena itu, lebih baik Anda menyalin file yang kodenya ingin dimodifikasi ke aplikasi editor teks, seperti Notepad ++ dan Atom.

Kemudian, jangan buru-buru menyimpan file tema yang telah Anda edit di editor tema WordPress. Anda perlu membuat staging site dan mengetes kustomisasi yang Anda lakukan agar aman.

Staging site adalah versi draf dari situs Anda, di mana Anda dapat melakukan kustomisasi tanpa mempengaruhi versi yang sedang live atau ditampilkan. Dengan ini, kode yang salah tidak akan merusak website Anda.

Untuk mempelajari caranya, Anda dapat membaca panduan kami tentang membuat staging WordPress di cPanel.

Jika Anda pengguna tridaya.cloud.com, membuat staging site lebih mudah lagi. Anda tinggal masuk ke Member Area, lalu klik WordPress Management > Sites.

Menu WordPress Management di Member Area Niagahoster

Di halaman selanjutnya, klik tombol titik tiga yang ada di sebelah kanan layar dan pilih Buat Staging. Bingung mencari tombol tersebut? Di tangkapan layar berikut ini, Anda dapat menemukan lokasinya yang ditandai dengan kotak merah.

Menu untuk membuat staging WordPress di Member Area Niagahoster

3. Cara Edit Tema WordPress dengan Modifikasi File Tema
Di poin sebelumnya Anda telah mengetahui tentang editor tema di WordPress dan fungsinya. Nah, di bagian ini Anda akan diajak mengenali file-file yang dapat Anda edit untuk mengkustomisasi tema.

Untuk mengakses file-file yang dibahas pada bagian ini, Anda dapat menggunakan file manager di cPanel atau panel kontrol yang dimiliki penyedia hosting Anda.

Setelah masuk ke direktori WordPress di file manager, klik public_html > wp-content > themes. Kemudian buka folder tema yang Anda gunakan.

File manager cPanel

Sebelum mulai mengedit, perlu Anda ingat bahwa modifikasi file diperuntukkan tema gratis yang bisa Anda dapatkan dari repository WordPress. Meskipun Anda juga dapat mengedit file tema pihak ketiga, perubahannya akan hilang ketika Anda meng-update tema tersebut.

Agar dapat mengkustomisasi tema pihak ketiga, Anda perlu membuat child theme yang akan dijelaskan pada poin lain di artikel ini. Sekarang, mari bahas jenis-jenis file tema terlebih dahulu.

File Functions

Editor file di File Manager cPanel

File yang dimaksud di sini adalah functions.php. Pada dasarnya, file ini berisi kode-kode yang mengatur berbagai fitur di tema Anda. Misalnya widget dan featured image.

Apabila Anda ingin menambahkan fitur baru di tema, Anda dapat menulis kodenya di file ini. Namun, dengan satu catatan: Anda tidak mengganti tema.

Mengapa? Karena kustomisasi yang dilakukan di file functions.php terikat dengan satu tema saja. Ketika tema diganti, otomatis kustomisasi tadi hilang.

Untuk menambahkan fitur yang bersifat permanen, sebaiknya Anda membuat plugin sendiri.

File Template
File template adalah jenis file yang mengatur tampilan konten pada halaman-halaman tertentu situs Anda. Contohnya adalah file header.php yang berisi pengaturan konten header website Anda. Apabila ingin mengubah tampilan konten, Anda dapat mengedit file tersebut.

Seperti jenis komponen yang dapat Anda edit di theme customizer, file template yang dimiliki setiap tema berbeda-beda.

Sebagai contoh, tema tertentu memiliki file archive.php yang berisi pengaturan konten di halaman list posting blog. Beberapa tema, termasuk Twenty Twenty yang merupakan default WordPress, tidak memilikinya.

Jika ingin melakukan kustomisasi layout halaman tersebut, Anda perlu membuat file archive.php di folder tema yang aktif.

Stylesheet
File stylesheet atau style.css adalah file yang mengatur tampilan tema secara umum. Pengaturan yang dimaksud meliputi layout, warna teks, dan jenis font.

Untuk mengedit file ini, Anda tetap dianjurkan untuk melakukannya di aplikasi editor teks terlebih dahulu.

Sayangnya, menemukan kode yang mengontrol tampilan komponen yang ingin Anda edit tidak mudah. Apalagi, aplikasi editor tidak menampilkan website Anda secara fisik.

Oleh karena itu, selagi membuka style.css di editor teks, Anda dapat membuka halaman website Anda di browser. Kemudian, Anda dapat memanfaatkan fitur inspector untuk melihat kode CSS masing-masing komponen. Misalnya seperti pada tangkap layar berikut ini.

Melihat stylesheet halaman website dengan console di browser

Di Google Chrome, Anda dapat menampilkan fitur ini dengan meng-highlight komponen yang ingin diedit dan klik kanan. Setelah itu, pilih Inspect.

Fitur ini juga dapat ditemukan di Firefox. Bedanya, setelah klik kanan pilihlah Inspect Element.

4. Cara Edit Tema WordPress Dengan Page Builder
Menu kustomisasi tema atau theme customizer sudah cukup memudahkan Anda untuk memodifikasi tampilan website.

Namun, seperti yang dibahas tadi, opsi pengaturan di menu kustomisasi tema sangat terbatas. Selain itu, komponen yang dapat dimodifikasi berbeda-beda di setiap tema.

Apabila Anda ingin cara edit tema WordPress yang lebih fleksibel, gunakanlah plugin page builder.

Dengannya, Anda lebih leluasa untuk memilih bagian layout yang ingin diedit. Misalnya jenis font dan warna tulisan, gaya menu navigasi, dan tampilan slider gambar.

Selain itu, antarmuka drag-and-drop page builder memungkinkan Anda melihat langsung perubahan yang dilakukan.

Nah, page builder pada umumnya memang berbayar. Namun, ada beberapa page builder gratis yang bisa Anda dapatkan di repository WordPress. Elementor adalah salah satunya.

Meskipun cuma-cuma, versi gratis Elementor sudah cukup mumpuni untuk memodifikasi tampilan website.

Di bawah ini adalah tampilan editor Elementor secara sekilas.

Panel builder Elementor

Dapat Anda lihat bahwa di sebelah kiri layar ada panel berisi jenis-jenis komponen atau section yang dapat diletakkan di halaman. Sedangkan di sebelah kanan adalah preview tampilan halaman tersebut.

Jika Anda mengklik suatu komponen, panel di sebelah kiri akan berisi opsi-opsi pengaturan. Dengan pengaturan ini, konten yang Anda klik dapat diubah tampilannya.

Misalnya, gambar di bawah ini adalah pengaturan yang muncul ketika Anda mengklik teks.

Menu edit teks di panel builder Elementor

Di luar itu, masih ada segudang fitur lain Elementor. Saking banyaknya, bisa jadi Anda justru kebingungan dengan cara kerjanya. Oleh karena itu, Anda dapat mempelajari seluk beluk page builder ini dalam panduan Elementor kami.

5. Cara Edit Tema WordPress dengan Theme Framework dan Child Theme
Theme framework adalah jenis tema WordPress yang dapat Anda gunakan untuk membuat tema lain.

“Lho, bukankah itu sulit?” Tidak juga. Setidaknya Anda tidak membuatnya dari nol.

Pada dasarnya, theme framework memiliki kode yang dapat Anda salin untuk membuat tema baru atau child theme. Tema ini akan memiliki fitur dan tampilan yang sama dengan theme framework, tapi dapat dikustomisasi sesuka hati.

Nah, untuk mempelajari caranya, Anda dapat membaca panduan child theme kami. Tidak hanya langkah-langkah membuat child theme saja yang dibahas. Di artikel tersebut, Anda juga akan belajar cara mengeditnya!.