Tutorial


Ketika berbelanja, Anda tentu suka dengan produk yang kemasannya menarik, serta akan memilih toko yang bersih dan tertata dengan baik. Nah, kecenderungan itu terjadi juga di dunia online, lho.

Bedanya, yang diperhatikan konsumen online adalah tampilan dari website yang dikunjungi. Bahkan, 90% calon konsumen akan langsung meninggalkan website yang tampilannya jelek.

Contoh desain web yang tidak menarik

Kalau Anda memiliki website, jangan sampai tampilan websitenya buruk sehingga membuat pengunjung Anda lari, ya. 

Untungnya, kustomisasi tampilan website itu mudah dilakukan kalau Anda pengguna WordPress. Namun, mengutak-atik tampilan website secara sembarangan malah bisa membuat website error, lho. 

Supaya hal itu tidak terjadi, Anda harus melakukan staging, yaitu membuat duplikat website WordPress agar bisa mengedit tampilannya dengan leluasa.

Bagaimana cara kustomisasi di WordPress dengan staging? Semuanya akan kami jelaskan di artikel ini. Jadi, baca terus sampai selesai dan mari mulai dari cara kustomisasi tampilan WordPress!

Cara Kustomisasi Tema WordPress

Setidaknya ada lima cara yang bisa Anda lakukan untuk mengkustomisasi tema, yaitu:

  • Menggunakan menu customize
  • Menggunakan page builder
  • Memanfaatkan theme editor
  • Mengedit file tema dengan text editor
  • Membuat child theme

Menggunakan menu customize di WordPress adalah cara kustomisasi tema yang paling mudah dan praktis. Tanpa keahlian koding pun Anda bisa melakukannya.

Untuk mengakses menu customize, Anda tinggal klik Appearance > Customize di Dashboard.

Menu customize WordPress

Anda akan melihat dua panel pada layar seperti pada gambar di bawah ini:

Tampilan menu customize WordPress

Panel sebelah kiri berisi bagian-bagian tema yang bisa dikustomisasi. Sedangkan panel sebelah kanan adalah preview tampilan website.

Perlu Anda ingat, opsi-opsi yang ada di panel sebelah kiri tergantung pada tema yang Anda gunakan. Jadi, opsi kustomisasi di sebuah tema belum tentu bisa dilakukan di tema lainnya.

Nah, untuk menerapkan perubahan yang sudah dilakukan, Anda tinggal klik tombol Publish. Atau, klik ikon gir untuk beberapa pilihan lain, yaitu:

  • Save Draft — menyimpan perubahan yang Anda lakukan tanpa menerapkannya
  • Schedule — menerapkan kustomisasi pada waktu yang Anda tentukan
  • Discard changes — menghapus perubahan terakhir yang belum Anda simpan
Menyimpan kustomisasi tema di WordPress

Menggunakan menu Customize di WordPress itu mudah, kan? Apalagi cara edit tema ini juga cukup aman.

Anda bisa melihat langsung perubahan pada tampilan, menyimpan kustomisasi tanpa menerapkannya, dan menghapus perubahan terakhir yang belum disimpan.

Hanya saja, kustomisasi yang bisa Anda lakukan masih terbatas. Apabila ingin lebih bebas dalam mengedit tema, cara selanjutnya lebih cocok untuk Anda.

Baca Juga: 10+ Tema WordPress SEO Friendly Gratis Terbaik

2. Menggunakan Page Builder

Page builder adalah plugin yang membantu Anda membuat halaman website dengan mudah. Fungsi plugin ini mirip dengan menu Customize, di mana Anda bisa memodifikasi tampilan website tanpa koding dan melihat hasilnya langsung.

Bedanya, page builder menawarkan fungsi drag and drop. Jadi, Anda bisa klik dan geser objek-objek di halaman website untuk melakukan kustomisasi yang diinginkan. Ini memungkinkan Anda untuk berkreasi sebebas mungkin.

Saat ini, ada banyak page builder yang bisa Anda pilih, baik berbayar, maupun gratis. Elementor adalah contoh page builder gratis dengan fitur lengkap.

Selain fiturnya banyak, antarmuka editor Elementor mudah dipahami. Jika sudah terbiasa dengan menu Customize di WordPress, Anda akan mudah menggunakan Elementor.

Antarmuka editor Elementor

Seperti halnya menu Customize WordPress, editor Elementor juga terdiri dari dua panel. Bedanya, panel di sebelah kiri memiliki dua fungsi.

Jika Anda klik sebuah objek atau elemen di panel preview (sebelah kanan), panel yang ada di kiri menampilkan opsi-opsi kustomisasinya.

Pengaturan tampilan Elementor

Namun, panel sebelah kiri juga berfungsi sebagai element library ketika Anda tidak sedang mengedit salah satu elemen di panel preview. Dari element library ini, Anda bisa menambahkan berbagai jenis elemen ke halaman yang Anda edit.

Element library Elementor

Nah, jika tertarik untuk menggunakan Elementor, Anda bisa belajar lebih banyak tentang page builder ini dalam panduan Elementor yang pernah kami tulis.

Baca juga:   Celah Kerentanan Plugin WP Statistics Ancam 600 Ribu Website!

Baca Juga: 5+ Rekomendasi Plugin Landing Page Terbaik

3. Melalui Theme Editor WordPress

Kalau dua cara di atas menawarkan kustomisasi secara mudah, kustomisasi melalui theme editor WordPress membutuhkan keahlian koding. Namun, Anda lebih bebas melakukan perubahan sesuai keinginan.

Theme editor adalah tool text editor bawaan WordPress. Di dalamnya, Anda bisa mengubah, menghapus, dan menambahkan kode untuk memodifikasi tema dari file-file pendukungnya.

Apa langkah yang perlu dilakukan?

Anda tinggal klik Appearance > Theme Editor di Dashboard.

Theme editor WordPress

Di halaman theme editor, Anda akan melihat daftar file tema yang bisa Anda edit pada sebelah kanan. Cukup pilih file yang akan Anda edit.

Theme editor memudahkan Anda untuk mengakses dan mengedit file tema. Sayangnya, Anda tidak bisa mengecek hasil kustomisasi sebelum menyimpan perubahan pada file tema.

Pastikan Anda melakukan perubahan dengan benar sebab tidak ada fitur untuk mengembalikan website Anda ke kondisi sebelumnya. 

Kustomisasi tampilan website dengan  theme editor WordPress lebih cocok dilakukan oleh yang sudah ahli dan digunakan pada website staging (yang akan kami bahas di bagian lain artikel ini).

4. Melalui Aplikasi Text Editor

Anda bisa juga melakukan kustomisasi tema dengan  mengedit file tema menggunakan  aplikasi text editor. Contohnya, Atom.

Pastikan Anda sudah menginstal text editor di komputer, lalu unduh file tema yang ingin dikustomisasi. Bagaimana caranya? Ikuti langkah-langkah di bawah ini:

Setelah mengunduh file yang dibutuhkan, Anda tinggal membukanya di aplikasi text editor. Kemudian, lakukan perubahan yang diinginkan, dan simpan perubahannya. 

Jika sudah, lakukan cara berikut ini untuk mengunggah ke folder tema di hosting Anda lagi:

  1. Akses folder tema melalui file manager cPanel.
  2. Klik menu Upload di bagian atas file manager.
  3. Klik file tema yang sudah Anda kustomisasi dan geser file tersebut ke halaman upload file manager cPanel.

Seperti halnya kustomisasi melalui theme editor WordPress, mengembalikan tema ke kondisi sebelumnya setelah mengedit file-nya tidak mudah. Apalagi jika Anda sudah merubah banyak kode.

Lalu, apakah ada cara kustomisasi tema dengan koding yang lebih aman? Cara yang kami bahas di bagian berikutnya adalah jawabannya.

5. Dengan Child Theme

Tidak mudah untuk mengembalikan tema ke kondisi semula dengan theme editor atau text editor. Nah, membuat child theme adalah salah satu solusinya.

Child theme adalah tema yang dibuat dari tema yang sudah ada. Supaya tidak membingungkan, mari sebut tema yang sudah ada sebagai parent theme.

Folder child theme terpisah dari folder parent theme. Jadi, kustomisasi yang Anda lakukan terhadap file-filenya tidak akan mempengaruhi parent theme. Alhasil, Anda bisa mengembalikan tampilan website ke kondisi semula dengan menghapus folder child theme saja.

Sebagai catatan, Anda sebenarnya bisa membuat child theme dari semua tema WordPress. Namun, agar hasilnya lebih baik, Anda dianjurkan untuk menggunakan theme framework. Framework tidak hanya menyediakan template yang fleksibel, tetapi juga kumpulan kode yang bisa Anda gunakan untuk memodifikasi child theme.

Untuk membuat child theme, Anda harus mengakses public_html > wp-content > themes dengan file manager cPanel. Di dalam folder themes, buat folder baru untuk child theme. Kemudian, Anda perlu membuat file style.css dan functions.php.

Langkah lengkapnya kami bahas dalam artikel Cara Membuat Child Theme WordPress. Jadi, pastikan Anda simak artikel tersebut, ya?

Hindari Kustomisasi Tema Secara Langsung!

Ada banyak cara mempercantik tampilan website. Namun, kustomisasi secara langsung di WordPress bukanlah pilihan terbaik. Sebab, ada dampak buruk yang bisa mengancam website Anda: 

Tindakan Anda saat kustomisasi tema bisa membuat website error. Baik itu dari segi tampilan maupun fungsi. Tergantung tingkat keparahannya, error tersebut bisa membuat website lambat hingga merusak tampilan. 

  • Website Tidak Bisa Diakses

Website error saja sudah bisa memberikan kesan buruk. Apalagi jika sampai tidak bisa diakses. Kalau sudah seperti itu, Anda harus bergegas memperbaiki masalahnya. Sebaiknya, Anda juga memasang halaman under construction agar pengunjung tahu website Anda sedang diperbaiki.

  • Kehilangan Pengunjung dan Pelanggan
Baca juga:   Panduan Terbaru Cara Migrasi Wix ke WordPress (Paling Lengkap)

Website yang tidak bisa diakses, tampilannya rusak, atau butuh waktu lama untuk loading tentu mengurangi user experience. Tidak hanya itu, pengunjung pun akan enggan untuk datang ke website Anda lagi.

  • Harus Instal Ulang WordPress

Masalah Anda akan bertambah buruk apabila error yang terjadi ternyata tidak bisa diatasi. Kemungkinan terburuknya, Anda harus menginstal ulang WordPress. Dengan kata lain, Anda harus membuat website dari awal lagi. Setidaknya, Anda harus rajin backup untuk menghindari risiko instal ulang.

Terutama jika website Anda digunakan untuk berbisnis, hindari keempat bahaya di atas. Nah, melakukan kustomisasi tampilan website dengan staging adalah solusinya

Simak bagian selanjutnya untuk mengenal apa itu staging, manfaatnya, dan cara membuatnya.

Baca Juga: Ayo Backup Data Website! Ini 7 Resiko yang Bisa Anda Hindari

Staging: Solusi Kustomisasi Tampilan Website dengan Aman

Staging adalah tindakan menduplikasi website Anda untuk mencoba kustomisasi yang diinginkan. Jika sudah dipastikan tidak terjadi error, Anda bisa menerapkan kustomisasi tersebut ke website live.

Untuk memudahkan penjelasan, kami akan menggunakan istilah “Website live” sebagai website yang diakses pengunjung, dan “website staging” sebagai website duplikatnya.

Ada dua cara untuk membuat website staging, yaitu dengan plugin dan melalui panel kontrol hosting. 

Cara Membuat Website Staging dengan Plugin

Cara sederhana untuk membuat website staging adalah menggunakan plugin. Anda tinggal menginstal plugin, dan hanya dengan beberapa klik, website staging sudah jadi. Praktis, kan?

Sayangnya, kebanyakan plugin staging itu berbayar. Namun, ada juga kok yang menawarkan versi gratis, seperti WP Staging.

Banner plugin WP Staging

Dengan versi gratis WP Staging, Anda memang tidak bisa menerapkan kustomisasi dari website staging ke website live. Namun, setidaknya Anda bisa menggunakan plugin ini tanpa batas waktu. Selain itu, setup staging-nya lebih mudah dibandingkan plugin-plugin lainnya.

Nah, bagaimana cara menggunakan WP Staging? Ikuti langkah-langkah di bawah ini.

1. Instal WP Staging

Akses Dashboard WordPress Anda dan klik Plugins > Add New. Ketikkan “WP Staging” di search bar untuk mencarinya. Kemudian, klik InstallNow. Setelah instalasi selesai, jangan lupa klik Activate.

Install plugin WP Staging

2. Buat Website Staging

Untuk membuat website staging Anda, akses Dashboard dan klik WP Staging > Sites/Start.

Tombol membuat website staging WP Staging

Di sebelah teks Staging Site Name, ketikkan nama yang Anda inginkan untuk website staging. Di bawahnya, ada pengaturan untuk database dan file, tetapi bisa Anda lewati. Klik Start Cloning untuk memulai proses pembuatan website staging.

Menentukan nama website staging

Tunggu prosesnya hingga selesai. Durasinya tergantung dengan ukuran file-file dan database website Anda.

Jika sudah selesai, tombol Open Staging Site akan muncul. Klik tombol tersebut untuk login ke website staging Anda. Username dan password-nya sama dengan milik website live.

Mengakses halaman login website staging di WP Staging

Nah, supaya Anda bisa membedakan Dashboard website live dan staging, cek admin bar-nya, yaitu baris menu paling atas di Dashboard WordPress. Di website staging, admin bar-nya berwarna oranye.

Admin bar website staging WP Staging

3. Mengelola Website Staging di WP Staging

Setelah membuat website staging dengan WP Staging, Anda juga bisa mengelolanya dengan mudah. Untuk melakukannya, klik WP Staging > Sites/Start lagi. Pada website staging, klik Actions. Menu drop-down dengan empat pilihan berikut ini akan muncul:

  • Open — login ke website staging
  • Update — memperbarui website staging agar memiliki pengaturan terbaru milik website live
  • Reset — mengembalikan pengaturan website staging ke kondisi saat terakhir di-update
  • Delete — menghapus website staging
Mengelola website staging di WP Staging

Cara Membuat Website Staging Melalui Panel Kontrol

Cara lain untuk membuat website staging adalah menggunakan panel kontrol seperti cPanel. Dibandingkan menggunakan plugin, cara ini tidak begitu praktis. Namun, tak ada biaya tambahan untuk bisa membuat pengaturan staging ke website live.

Nah, mari simak langkah-langkahnya di bawah ini.

1. Akses Instalasi WordPress di Softaculous Apps Installer

Login ke cPanel, lalu akses menu Softaculous Apps Installer.

Baca juga:   Ini 5 Inovasi Baru dari Smartphone Essential PH-1 Buatan Andy Rubin, Tidak Ada di Smartphone Lain!
Menu Softaculous Apps Installer di cPanel

Di halaman Softaculous Apps Installer, klik Installations. Menu tersebut akan membawa Anda ke daftar aplikasi yang diinstal di hosting Anda.

Melihat daftar instalasi di Softaculous Apps Installer

Di daftar yang muncul, cari instalasi WordPress Anda dan klik ikon yang ditandai kotak merah di bawah ini untuk membuat website staging.

Tombol membuat staging di Softaculous Apps Installer

2. Buat Website Staging

Setup website staging akan muncul. Di dalamnya, Anda harus mengisi beberapa kolom, yaitu:

  • Installation URL dan directory — URL website yang ingin Anda buat staging-nya. Pada kolom directory di sebelah kanannya, ketikkan nama direktori tempat menyimpan file-file website staging.
  • Database name — nama database untuk website staging.
  • Disable search engine visibility — bisa atau tidaknya website diindeks oleh mesin pencarian. Pastikan Anda centang checkbox ini agar website staging Anda tidak mempengaruhi ranking website live di Google.
  • Site name — nama yang ingin Anda tentukan untuk website staging.
Membuat staging WordPress di Softaculous Apps Installer

Jika sudah mengisi kolom-kolom di atas, klik Create Staging untuk memulai proses staging. Setelah staging selesai, Anda akan melihat pesan sebagai berikut:

Pesan staging berhasil

3. Terapkan Kustomisasi ke Website live

Setelah Anda melakukan kustomisasi atau mengubah pengaturan di website staging, cara menerapkannya ke website live sangat mudah. Anda cukup kembali ke daftar instalasi aplikasi di Softaculous Apps Installer, lalu klik ikon yang ditandai di bawah ini:

Tombol push to live

Pada pesan konfirmasi yang muncul, klik tombol Push to Live. Mudah, kan?

Konfirmasi push to live

WordPress Management Niagahoster: Cara Staging Gratis nan Praktis

Mana yang Anda pilih, melakukan staging dengan mudah pakai plugin atau ingin yang gratis pakai kontrol panel?

Sebenarnya, Anda tak perlu memilih. Dengan fitur WordPress Management Niagahoster, staging bisa Anda lakukan dengan gratis dan praktis. Bagaimana caranya?

1. Log in ke Member Area Anda. Lalu, klik Kelola Hosting.

Tombol kelola hosting di Member Area

2. Klik tab WP Management dan klik menu Staging seperti yang ditunjukkan di bawah ini:

Menu staging di WordPress Management

3. Di formulir yang muncul, pilih domain website yang ingin Anda buat staging-nya beserta protokolnya dan tentukan nama sub direktori. Klik Buat Staging jika sudah.

Formulir pembuatan website staging WordPress Management

Jika website staging Anda berhasil dibuat, pesan berikut ini akan muncul. Klik Kembali untuk menutupnya.

Pesan staging berhasil dibuat

Berikutnya, Anda bisa kembali ke WordPress Management dan klik tombol Login WordPress di sebelah kanannya untuk mengakses website staging.

Tombol login website staging di WordPress Management

Nah, bagaimana cara untuk menerapkan kustomisasi di staging ke website live Anda? Caranya, klik tanda panah yang ada di sebelah kanan tombol Login WordPress tadi, kemudian klik Live Staging.

Menu live staging di WordPress Management

Akan ada dua opsi, yaitu Pengaturan Standar dan Pengaturan Lanjutan. Di Pengaturan Standar, semua kustomisasi dan pengaturan Anda akan diterapkan ke website live.

Pengaturan standar push staging di WordPress Management

Sedangkan di Pengaturan Lanjutan, Anda bisa memilih pengaturan yang ingin diterapkan.

Pengaturan lanjutan push staging di WordPress Management

Setelah memilih, klik Lanjutkan untuk menerapkan kustomisasi dan pengaturan ke website live.

Lakukan Staging di WordPress Management Niagahoster!

Staging memungkinkan Anda untuk merubah tampilan website dengan aman. Semua perubahan akan terjadi pada website duplikat dulu sebelum diterapkan pada website sebenarnya.

Staging bisa dilakukan dengan bantuan plugin atau melalui panel kontrol hosting seperti cPanel. Sayangnya, masih ada kekurangan dari segi biaya dan kemudahan dari dua cara tersebut.

Nah, WordPress Management Niagahoster menawarkan langkah staging dengan mudah dan tanpa tambahan biaya. Dengan beberapa klik, website staging bisa langsung jadi. 

Eits, kecanggihan WordPress Management Niagahoster tidak sebatas staging saja, lho. Anda akan mendapatkan  kemudahan pengelolaan WordPress jauh lebih baik berkat adanya:

  • Login instan
  • Update versi WordPress otomatis
  • Backup dan restore
  • Speed test
  • Force HTTPS
WordPress Management

WordPress Management akan didapatkan oleh semua pengguna  paket Unlimited, Cloud, dan WordPress hosting. Jadi, segera manfaatkan fitur staging dan fitur lainnya di WordPress Management!

Belum menjadi pengguna Niagahoster tapi ingin merasakan manfaat WordPress Management? Tenang, cukup transfer hosting Anda sekarang juga!



Source link

Hosting Unlimited Indonesia

Author

admin

Leave a comment

Your email address will not be published.

WeCreativez WhatsApp Support
Tim support kami di sini untuk menjawab pertanyaanmu. Tanyakan apa saja pada kami!
? Halo... ada yg bisa kami bantu?
%d bloggers like this: