Apa Itu WordPress Theme Editor?<\/h2>\n
WordPress theme editor adalah editor teks sederhana di dalam dashboard WordPress. Dengan tool ini, user bisa menyesuaikan file tema WordPress untuk mewujudkan tampilan dan fungsi yang mereka inginkan. Misalnya, menyertakan sidebar tambahan, membuat website yang mobile-friendly, atau menyematkan video khusus di header.<\/p>\n <\/div>\n\n\n\n<\/p>
Cara Menggunakan WordPress Theme Editor<\/h2>
Dengan WordPress theme editor, Anda bisa membuka file tema apa pun yang sudah diinstal. Tool ini akan menampilkan konten file pada editor teks sehingga Anda bisa mengubah kode tema secara langsung di dashboard.<\/p>
Tool ini disebut Theme Editor<\/strong> di versi WordPress lama, sedangkan di WordPress 5.9 yang lebih baru disebut Theme File Editor<\/strong>.<\/p> Akses editor kode theme melalui Appearance<\/strong> -> Theme File Editor<\/strong>. Daftar file template yang termasuk dalam tema akan ditampilkan di sisi kanan. Klik file apa pun untuk melihat isinya dan membuat perubahan.<\/p> \n\n Penting!<\/strong> Kalau Anda menggunakan tema berbasis block di WordPress 5.9, buka Tools -> Theme File Editor untuk mengakses editornya.<\/p><\/div>\n\n\n\n<\/p> Untuk melihat tema lain yang mungkin ingin Anda ubah, klik menu drop-down di pojok kanan atas layar.<\/p> Tenang, pada langkah ini, memilih tema lain tidak akan mengganti tema yang sekarang sedang digunakan. Untuk mengetahui tema mana yang saat ini diterapkan atau yang ingin diaktifkan, buka Appearance<\/strong> -> Themes<\/strong>.<\/p> Setelah selesai menyesuaikan file tema, klik tombol Update File<\/strong>. Ketika menggunakan WordPress theme editor, user tidak akan bisa menyimpan file kalau ada error sintaksis dalam kode. Tool ini juga akan menunjukkan letak error sehingga lebih mudah diatasi.<\/p> Karena sebagian besar tema menggunakan jenis file CSS<\/a>, JavaScript<\/a>, dan PHP<\/a>, sebaiknya Anda sudah cukup paham cara menangani file tersebut. Hati-hati saat mengedit atau menempelkan snippet kode karena kesalahan edit atau paste bisa menyebabkan error, atau bahkan membuat website down.<\/p> File yang ada dalam tema akan bervariasi tergantung pada temanya. Tapi, setiap WordPress theme menyertakan file-file penting berikut:<\/p> Kalau Anda adalah developer yang bekerja untuk klien, sebaiknya nonaktifkan akses ke theme editor. Hal ini akan mencegah error tak terduga yang terjadi karena klien mungkin tidak tahu bahwa mengedit kode tema bisa cukup berisiko.<\/p> Selain itu, menonaktifkan akses ke editor kode theme bisa mencegah hacker menyisipkan kode berbahaya ke website.<\/p> \n\n\n Penting!<\/strong> Selalu backup website sebelum mengedit file tema. Untuk mengetahui caranya, silakan baca tutorial kami tentang cara backup website WordPress<\/a>.<\/p><\/div>\n\n\n\n<\/p> WordPress theme editor bukan satu-satunya tool yang bisa digunakan untuk mengedit tema dan tampilan website. Di bagian ini, kami akan membahas beberapa cara edit WordPress theme dengan metode lain.<\/p> File tema WordPress disimpan di akun web hosting dan bisa diubah melalui file manager. Kalau Anda hPanel<\/a> Hostinger, ikuti langkah-langkah berikut ini.<\/p> Cara edit WordPress theme selanjutnya adalah dengan menggunakan metode edit berbasis block.<\/p> Untuk menggunakan editor ini, Anda memerlukan WordPress versi 5.9 atau yang lebih baru dan tema berbasis block seperti Twenty Twenty-Two<\/a> atau Wabi<\/a>.<\/p> Kalau sudah, Anda bisa mengedit template tema homepage, postingan, dan halaman. Akses editornya dengan membuka Appearance<\/strong> -> Site Editor<\/strong>.<\/p> Editor akan membuka template homepage secara default. Anda bisa melihat semua template yang tersedia dengan mengklik logo WordPress<\/strong> di pojok kiri atas layar dan memilih Templates<\/strong>.<\/p> Karena editor ini berbasis block, Anda bisa mengedit dan mengurutkan ulang semua block WordPress yang sudah ada. Di versi baru, editor ini disebut Gutenberg block editor. Simak beberapa langkah utama berikut ini sebelum Anda menggunakan editor tersebut:<\/p> Banyak WordPress theme yang kompatibel dengan page builder WordPress<\/a> seperti Divi<\/a> dan Beaver Builder. Sebagian besar plugin ini memiliki fungsi drag-and-drop (tarik dan lepas), sehingga Anda bisa mengubah tema tanpa mengedit kode.<\/a><\/a><\/a><\/p> Cara edit WordPress theme menggunakan page builder adalah dengan menginstal plugin<\/a> yang kompatibel dengan tema Anda, lalu gunakan opsi yang disediakan untuk mengedit desain halaman.<\/p> Setelah antarmuka drag-and-drop muncul, mulai tambahkan elemen ke halaman dengan memilih widget di sidebar kiri.<\/p> Meskipun menawarkan fleksibilitas dan banyak opsi kustomisasi untuk website, page builder juga memiliki kekurangan.<\/p> WordPress page builder mengubah layout website menjadi shortcode khusus plugin. Jadi, saat Anda menonaktifkan plugin page builder, shortcode tidak akan berfungsi dan desain website akan rusak.<\/p> Plugin adalah<\/a> opsi yang bagus untuk website yang membutuhkan fitur tambahan dasar. Direktori plugin WordPress<\/a> memiliki ribuan opsi, mulai dari eCommerce dan plugin keamanan hingga integrasi media sosial dan optimasi WordPress<\/a>.<\/p> Sebelum diinstall, perhatikan kapan terakhir plugin tersebut diupdate, review dari user, dan kompatibilitasnya dengan versi WordPress terbaru. Plugin yang sering diupdate umumnya memiliki lebih sedikit masalah kompatibilitas dan keamanan, sementara penilaian user bisa menunjukkan kualitas keseluruhannya.<\/p> Kalau Anda hanya ingin mengedit gaya dan desain tema, gunakan plugin seperti CSS Hero<\/a>. Plugin ini akan membuat salinan file stylesheet dan menimpa versi aslinya, sehingga user bisa mengubah desain dan gaya website tanpa harus mengutak-atik file asli tema.<\/p> \n\n\n Kalau Anda mencari opsi plugin lainnya, lihat review kami tentang plugin WordPress terbaik<\/a>.<\/p>\n <\/div>\n\n\n\n<\/p> Salah satu kelemahan mengedit file tema adalah perubahan yang Anda buat akan hilang saat tema diperbarui.<\/p> Install atau buat child theme baru untuk mengatasi masalah ini. Child theme adalah tema baru yang mewarisi semua karakteristik tema induk (parent theme).<\/p> Child theme memiliki file style.css<\/strong> dan functions.php<\/strong> yang disimpan dalam direktori terpisah, sehingga Anda bisa membuat file baru untuk mengedit gaya, parameter layout, dan skrip di dalam direktori child theme. File-file ini tidak akan terpengaruh ketika parent theme diperbarui.<\/p> Ada beberapa cara membuat child theme<\/a> di WordPress yang bisa Anda lakukan, misalnya dengan setup folder child theme melalui File Manager, atau dengan menginstall plugin seperti WPS Child Theme Generator<\/a>.<\/p> Mengedit kode asli tema dengan theme editor memungkinkan Anda mengontrol dan menyesuaikan output sepenunya, tapi cara ini ternyata bisa membuat website kehilangan bagian kode penting dan mengalami error.<\/p> Untuk itulah, di bagian ini kami akan membahas tips keamanan yang harus diikuti sebelum mengeksekusi cara edit WordPress theme.<\/p> Backup website WordPress sangat penting apabila Anda melakukan cukup banyak pengeditan. Dengan cara ini, Anda tidak perlu mengatur ulang setting dan kustomisasi dari awal kalau terjadi error.<\/p> Tapi, Anda tidak harus selalu melakukan backup penuh. Misalnya, cukup simpan salinan file stylesheet.css<\/strong> kalau Anda hanya akan mengedit file ini. Kalau terjadi error, upload file backup untuk menimpa file yang diubah.<\/p> Gunakan staging environment untuk mengecek dan melihat preview hasil edit WordPress theme yang telah Anda buat. Di server lokal atau website staging, error yang tak terduga tidak akan mengganggu website yang sudah online.<\/p> Untuk menyiapkan staging environment, Anda perlu menginstall WordPress<\/a> secara lokal menggunakan MAMP<\/a> atau WampServer<\/a>. Setelah itu, akan tersedia environment untuk menginstall dan menguji WordPress di komputer lokal.<\/p> Cara lainnya adalah menggunakan staging environment<\/a> untuk menduplikasi website. Berbeda dengan solusi server lokal, cara ini dilakukan di akun web hosting Anda atau melalui dashboard WordPress.<\/p> Gunakan plugin seperti WP Staging<\/a> untuk menyiapkan kloningan website dari dashboard WordPress. Plugin ini akan menghasilkan duplikat URL website. Caranya juga mudah, cukup login dan Anda bisa langsung mulai edit tema.<\/p> Ingat juga, WP Staging menyimpan file website staging di subdirektori website Anda.<\/p> Misalnya, kalau website WordPress Anda diinstall di direktori public_html<\/strong>, website versi staging akan berada di folder public_html\/nama_website_staging<\/strong>.<\/p> Hostinger juga menawarkan staging environment yang bisa Anda akses dari hPanel. Fitur ini tersedia untuk pengguna Business Shared Hosting<\/a> <\/strong>dan web cloud hosting<\/a>.<\/p> Setelah yakin dengan perubahan yang Anda buat, pastikan tidak ada error lalu paste (tempel) file staging ke database website Anda yang sudah online.<\/p> Version control digunakan agar user bisa melacak dan membatalkan perubahan di website WordPress. Dengan begitu, user bisa restore website ke versi yang tidak bermasalah kalau terjadi error.<\/p> Cara ini sangat cocok bagi orang-orang yang bekerja dalam tim, karena merupakan tool yang sangat baik untuk kerja kolaboratif. User bisa dengan mudah menggabungkan perubahan dan menguji ide-ide baru tanpa perlu cemas akan mengubah versi live website.<\/p> Ada beberapa solusi untuk version control WordPress. Salah satunya adalah menggunakan repositori Git seperti GitHub<\/a> dan GitLab<\/a> untuk menyimpan dan melacak perubahan kode.<\/p> Opsi lainnya adalah dengan menginstall plugin seperti WP Rollback<\/a> untuk mengembalikan website Anda ke keadaan sebelumnya.<\/p> Selesai! Sekarang Anda sudah tahu cara mengedit WordPress theme dengan beberapa metode.<\/p> WordPress memungkinkan user melakukan berbagai kustomisasi dan menyediakan tool untuk mengutak-atik kode website, termasuk editor kode tema. Dengan tool ini, Anda bisa mengakses source code tema dari dashboard dengan mudah sehingga bisa mengubah desain website dan membuat fitur baru.<\/p>![\"edit](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/edit-tema.png\/public\")
<\/figure><\/div>![\"editor](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/editor-opsi-tema.png\/public\")
<\/figure><\/div>\n
Cara Edit WordPress Theme Lainnya<\/h2>
1. Mengedit File Tema melalui File Manager<\/h3>
\n
![\"Folder](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/04\/folder-public_html-di-file-manager-hostinger.png\/public\")
<\/figure><\/div>\n
![\"Folder](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2021\/02\/filemanager-publichtml-wpcontent-themes.png\/public\")
<\/figure><\/div>\n
![\"Edit](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2021\/02\/filemanager-publichtml-wpcontent-themes-fucntionsphp-edit-1.png\/public\")
<\/figure><\/div>\n
![\"Tampilan](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/05\/filemanager-text-editor.png\/public\")
<\/figure><\/div>![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2024\/06\/ID-New-WP_in-text-banner.png\/public\")
<\/a><\/figure><\/div>2. Menggunakan Editor Website Berbasis Block<\/h3>
![\"antarmuka](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/antarmuka-editor-block.png\/public\")
<\/figure><\/div>![\"editor](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/editor-opsi-template.png\/public\")
<\/figure><\/div>\n
3. Menginstal Page Builder<\/h3>
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/edit-elementor.png\/public\")
<\/figure><\/div>![\"antarmuka](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/antarmuka-elementor.png\/public\")
<\/figure><\/div>4. Memanfaatkan Plugin WordPress<\/h3>
Saran Artikel<\/h4>\n
5. Menggunakan Child Theme<\/h3>
Tips Tambahan Saat Mengedit WordPress Theme<\/h2>
Selalu Buat File Backup\/Cadangan<\/h3>
Siapkan Server Testing Lokal atau Staging Environment<\/h3>
![\"website](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/website-mamp.png\/public\")
<\/figure><\/div>![\"plugin](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/plugin-wp-staging.png\/public\")
<\/figure><\/div>![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/08\/staging-di-hpanel.png\/public\")
<\/figure><\/div>Gunakan Version Control<\/h3>
Kesimpulan<\/h2>