How To Change Layout In Wordpress Blog

Mengubah tampilan website di WordPress sangatlah mudah. Dengan meng-install tema, "wajah" situs Anda langsung berubah. Namun, barangkali Anda belum tahu cara edit tema WordPress. Terutama, jika ini kali pertama Anda membuat website.

Jangan khawatir! Di artikel ini Anda akan mempelajari beberapa cara mudah untuk mengedit tema WordPress, yaitu:

• Melalui menu kustomisasi tema (theme customizer)
• Melalui editor tema
• Dengan modifikasi file tema
• Dengan page builder
• Dengan framework dan child theme

Yuk, bahas caranya satu per satu!

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.

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.

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.

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.

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.

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.

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 Niagahoster, membuat staging site lebih mudah lagi. Anda tinggal masuk ke Member Area, lalu klik WordPress Management > Sites.

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.

Mudah, bukan?

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.

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

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.

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.

Baca Juga: Pengertian CSS dan Cara Kerjanya

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.

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.

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!.

Baca Juga: 9+ WordPress Theme Framework Terbaik 2020

7 Tips Aman Mengedit Tema WordPress

Mengedit tema WordPress tidak boleh sembarangan. Seperti yang telah disebutkan di awal, kesalahan coding pada file tema dapat merusak website Anda. Bahkan meskipun hanya satu file.

Oleh karena itu, Anda perlu tahu tips-tips agar tidak melakukan kesalahan ketika melakukan modifikasi pada tema. Apa saja itu? Yuk, bahas bersama!

1. Jangan Coba Mengedit Kode Tema jika Belum Paham

Seperti yang telah Anda ketahui dari membaca berbagai cara edit tema WordPress tadi, file-file tema ditulis dalam PHP dan CSS.

Apabila Anda baru mulai belajar coding dengan keduanya, jangan buru-buru mencoba mengutak-atik file tema WordPress.

2. Patuhi Standar Kode WordPress

Jika Anda memang membutuhkan coding, patuhilah standar kode WordPress. Standar ini dibuat agar kualitas kode HTML, PHP, CSS, dan JavaScript yang Anda buat sesuai dengan ketentuan WordPress.

Pelajarilah dokumen-dokumen tersebut sebelum mengedit tema agar kode Anda terstruktur dengan baik.

3. Gunakan Localhost untuk Mengedit Tema

Ingin cara yang paling aman untuk mengedit tema? Anda dapat melakukannya dengan meng-install WordPress di localhost atau komputer pribadi terlebih dahulu. Kemudian, install tema yang digunakan pada website live Anda.

Dengan demikian, Anda dapat mengutak-atik kode di file tema dan menguji hasilnya tanpa mempengaruhi situs aslinya.

Namun, pastikan Anda memiliki environment lokal terlebih dahulu di komputer Anda. Ini mencakup engine, PHP, dan database. Jika Anda pengguna Windows, Anda dapat membuat environment tersebut dengan memasang stack XAMPP atau WAMP.

Baca Juga: Cara Upload WordPress ke Hosting dari Localhost

4. Periksa Kustomisasi Anda di Staging Site

Meskipun Anda dapat mengedit tema di localhost, sebaiknya Anda juga mencoba hasil kustomisasi di staging site.

Ini dikarenakan environment di komputer mungkin berbeda dengan yang dimiliki server hosting Anda. Tentunya, perbedaan ini dapat mempengaruhi tampilan dan performa website di komputer lokal.

Baru setelah semuanya tidak menunjukkan masalah, Anda dapat mengaplikasikan kustomisasi tema ke versi situs yang sedang live.

5. Lakukan Version Control

Version control adalah cara melacak perubahan pada kode tema Anda dengan menomori setiap versi yang Anda buat. Intinya, Anda dapat membuat salinan dari setiap file tema yang diedit. Kemudian, namai masing-masing versinya dengan angka.

Ini kedengarannya sepele, tapi akibatnya fatal jika tidak dilakukan. Salah satu contoh manfaatnya adalah ketika sebuah error muncul. Tanpa version control, Anda tidak dapat mengembalikan kode tema ke versi sebelumnya.

Selain itu, version control memudahkan Anda untuk  mengingat semua perubahan yang pernah dilakukan dalam file tema. Terutama jika Anda bekerja di dalam tim.

6. Pastikan Tampilan Tema tetap Responsive

Sejak 2016, algoritma Google mengutamakan website dengan tampilan responsive. Artinya, peringkat SEO situs Anda akan menurun apabila tema yang digunakan tidak mobile-friendly.

Selain itu, tampilan website yang tidak responsive akan terlihat kacau di layar perangkat mobile.

Inilah alasan Anda perlu memanfaatkan opsi ukuran layar di theme customizer WordPress. Selain itu, Anda dapat membaca panduan kami tentang 11 cara membuat website mobile friendly agar tampilan situs makin optimal.

7. Jangan Buat Tampilan Jadi Berantakan

Meskipun ingin mengubah layout tema, sebaiknya Anda tidak melakukannya secara berlebihan. Apalagi hingga menu navigasi, font, dan elemen-elemen lainnya susah dibaca atau dipahami.

Untuk menjaga agar tampilan tema Anda enak dipandang, Anda dapat mempelajari artikel kami tentang user interface dan karakteristiknya.

Mana Cara Edit Tema WordPress yang Anda Pilih?

Cara edit tema WordPress tidak sesulit yang Anda bayangkan. Sebagai pemula, Anda dapat menggunakan theme customizer yang ada di Dashboard WordPress. Meski paling mudah, cara ini tidak memungkinkan Anda untuk memodifikasi segalanya.

Jika Anda belum paham dengan coding tapi ingin lebih leluasa, page builder adalah solusinya. Plugin ini memiliki fungsi yang mirip dengan theme customizer, tapi dapat digunakan untuk mengedit berbagai komponen tema.

Apabila Anda mengenal PHP dan CSS, mengedit dengan coding seperti framework dapat dicoba. Apalagi, cara ini memungkinkan Anda untuk membuat child theme. Dengannya, Anda dapat mencoba kustomisasi tanpa mempengaruhi versi live website Anda.

Nah, mana cara edit WordPress yang Anda pilih? Jika ada pertanyaan, jangan sungkan untuk meninggalkan komentar pada kolom yang tersedia di bawah.

How To Change Layout In Wordpress Blog

Source: https://www.niagahoster.co.id/blog/cara-edit-tema-wordpress/

Posted by: rodriguezwiterestich.blogspot.com

Share this post