Panduan Lengkap Kustomisasi WordPress Untuk Pemula

Panduan Kustomisasi WordPress

Sejak salah satu tujuan saya membangun kelaswebsite.id adalah sebagai resources utama untuk membangun website yang sukses, maka saya membuat panduan ini.

Di panduan ini, saya akan memandu Anda untuk melakukan beberapa hal dengan tujuan agar website yang baru saja Anda buat bisa sukses dalam tahap peluncuran.

Oia, sebelum kita melangkah lebih jauh, saya perlu beritahu bahwa ini adalah panduan lanjutan yang dapat diikuti setelah Anda menyelesaikan tutorial membuat website yang ada dihalaman ini:

Jadi, saya asumsikan bahwa Anda telah menginstal WordPress di domain Anda. jika belum silahkan di install terlebih dahulu. Anda dapat memilih Niagahoster (hosting yang saya rekomendasikan).

More...

Apa yang saya bisa lakukan dengan WordPress?

Ini adalah tahun ke lima dimana saya masih setia (dan mungkin akan selamanya) menggunakan WordPress di semua project  yang saya kerjakan.

Faktanya, saya engga bisa hidup tanpa WordPress. Ini serius.

Harus saya akui - WordPress adalah platform yang sangat brilian, mempunyai segudang fitur, mudah dikuasai (bahkan untuk pemula sekalipun) dan yang paling penting adalah juga mudah dikustomisasi (disesuaikan).

Itu artinya Anda dapat melakukan apa saja dengan WordPress - WordPress memungkinkan Anda untuk merubah ini, merubah itu dan itu.

Untungnya bagi Anda semua, panduan ini sudah mencakup semuanya mulai dari setelah Anda menginstal WordPress hingga website Anda siap untuk diluncurkan (launch).

Tanpa panjang lebar lagi, mari kita mulai dari:

Ketika Selesai Menginstal WordPress


Oke, sekarang Anda sudah menginstal WordPress. Website Anda sudah bisa diakses oleh banyak orang.

Now what?

Saat ini website Anda masih terlihat kosong, belum ada isinya. Anda perlu mengurus beberapa hal penting  terlebih dahulu, yang bisa membuat website Anda terlihat persis seperti yang Anda inginkan:

  • check
    Terlihat professional
  • check
    Website mudah dinavigasi
  • check
    Memiliki security yang bagus
  • check
    Dan optimal secara SEO = "Ramah" di mesin pencari seperti Google

Bagaimana caranya? Yuk, langsung saja kita mulai dari langkah 1:

1. Hapus konten default WordPress [Seperti: Hello World, Sample Page & Hello Dolly]

Ada beberapa konten yang secara default akan muncul ketika Anda selesai menginstal WordPress.

Agar website Anda terlihat professional, sebaiknya mulailah untuk menghapus konten-konten tersebut.

  • Hapus "Hello World" di bagian "Posts"
  • Hapus "Sample Page" di bagian "Pages"
  • Hapus "Hello Dony" di bagian "Plugin"

Arahkan kursor Anda ke judul artikel agar pilihan Edit | Quick Edit | Trash | View muncul.

hapus hello world

2. Nonaktifkan pengaturan "user registration"

Faktanya, fitur "user registration" di WordPress sering digunakan untuk kegiatan spamming.

Anda tidak ingin website baru Anda diserang spammer, ya kan? Jadi, matikan aja fungsinya.

Klik Settings > General.

nonaktifkan user registration

3. Atur zona waktu

Jangan lupa atur zona waktu website Anda menjadi UTC+7 (waktu Indonesia) di bagian Settings > General.

atur zona waktu di WordPress

4. Aktifkan plugin Antispam Bee supaya website Anda tidak diserang komentar spam

Tahukah Anda bahwa ada jutaan orang di internet yang suka sekali membuat komentar spam yang isinya iklan jualan produk atau jasa.

Sebenarnya, spam tidak terjadi di WordPress saja. kalau Anda suka explore Instagram atau Facebook, mungkin Anda sering melihat komentar-komentar yang isinya iklan, seperti iklan obat peninggi badan, obat kuat, dsb.

Anda tidak mau website Anda penuh dengan komentar iklan obat penginggi badan, ya kan? 😀

Solusinya adalah dengan memasang plugin anti spam. 

Saya merekomendasikan plugin Antispam Bee (GRATIS digunakan baik untuk website dengan kebutuhan personal ataupun komersial).

aktifkan plugin antispam bee

Cara mengaktifkannya sangat mudah:

Klik bagian Plugin > Add New.

Lalu cari "Antispam bee" dikolom pencarian, kemudian klik tombol "Install Now", setelah itu "Activate" pluginnya dan yes! begitu saja - sudah selesai, tidak perlu diatur-atur lagi "settingannya".

5. Instal plugin backup supaya website Anda aman

Tanpa adanya backup, semua pekerjaan Anda bisa hilang dalam sekejap.

Kita tidak bisa memprediksi, mungkin suatu hari nanti layanan hosting Anda tutup buku dan sialnya Anda kehilangan data-data website (inilah salah satu alasannya mengapa Anda tidak boleh sembarangan memilih penyedia hosting).

Atau bisa saja website Anda menjadi korban dari serangan hacker (hal ini terkadang bisa terjadi - saya sendiri pernah mengalaminya).

Untuk mencegahnya, Anda dapat memasang plugin backup pada WordPress Anda. Tidak sulit kok, tidak makan banyak waktu juga untuk mengaturnya.

Favorit saya adalah plugin UpdraftPlus. Gratis dan mudah pengaturannya.

plugin backup UpdraftPlus

Anda bisa menjadwalkan backup secara harian, mingguan hingga bulanan dan file backup nya nanti bisa dikirim ke account: Dropbox, Google Drive, Microsoft One Drive, dll.

6. Instal plugin keamanan agar website Anda tidak mudah dijebol hacker

WordPress adalah platofrm yang paling populer di dunia, tetapi juga merupakan platform yang paling sering menjadi target serangan hacker jahat yang kebanyakan dari mereka sebenarnya lagi "nyoba-nyoba ilmu".

Saya tidak menyebut platform WordPress itu jelek keamanannya dan memiliki banyak celah yang mudah ditembus, but trust me, website Anda akan menjadi jauh lebih aman dengan adanya plugin keamanan tambahan.

plugin iThemes Security

Saya menyarankan menggunakan plugin iThemes Security. Plugin ini gratis dan tentu saja powerfull!

Setelah diaktifkan, plugin ini otomatis sudah langsung bekerja - Anda tidak perlu melakukan pengaturan apapun setelahnya.

Kustomisasi (Sesuaikan) tema WordPress Anda


Congratulations! Anda sudah menyelesaikan milestone pertama.

Sekarang Anda sudah masuk ke bagian yang paling penting dari panduan ini.

Di bagian ini, saya ajak Anda untuk meng-kustomisasi (menyesuaikan) tema website Anda agar 100% sesuai dengan apa yang Anda inginkan.

Karena sebagus apapun tema WordPress yang sudah Anda install, pasti akan selalu ada satu-dua atau beberapa bagian yang ingin Anda rubah sehingga hasil akhirnya bisa sesuai dengan kebutuhan Anda.

Catatan penting:

Pertama-tama, kustomisasi yang akan kita lakukan ini mungkin tidak akan tersedia di semua tema WordPress yang ada di pasaran. Karena setiap tema memiliki fitur dan kemampuan yang berbeda-beda dalam melakukan perubahan tertentu.

Jika Anda memilih tema yang lawas dan sudah lama tidak diupdate, saya sarankan untuk menggantinya sekarang juga. Idealnya adalah Anda menggunakan tema baru yang sesuai standar saat ini.

Sesuai standar ciri-cirinya adalah tampak optimal/responsive di semua perangkat mobile dan desktop.

1. Mengenal dan Memahami WordPress Customizer

Pada umumnya, setiap tema WordPress memungkinkan Anda untuk menyesuaikan berbagai hal pada tema hanya dengan menggunakan WordPress customizer.

Dan dalam panduan ini, kita akan banyak bermain di WordPress customizer untuk menyesuaikan tema. Jadi, Anda harus terbiasa dengan fitur yang satu ini.

Untuk mengakses WordPress customizer, silahkan buka melalui Appearance > Customize pada sidebar sebelah kiri dashboard WordPress Anda.

Seperti dibawah ini tampilannya:

WordPress Customizer

Tergantung dari tema yang Anda gunakan, mungkin jumlah modul yang Anda lihat pada sidebar yang saya kotaki warna merah diatas bisa lebih banyak atau lebih sedikit. Hal itu normal, jadi jangan khawatir apabila tampilannya tidak sama dengan contoh diatas.

Dan pada sisi sebelah kanan, Anda akan melihat preview website Anda, yang tampilannya tentu saja berbeda tergantung dari tema yang Anda gunakan.

Oia, jika Anda memodifikasi sesuatu, entah itu colors, menus, widgets, dll (yang akan saya bahas pada bagian selanjutnya), perubahannya akan langsung terlihat pada preview disebelah kanan.

2. Mengganti Header Image

Header adalah bagian paling atas atau kepala dari website Anda. Tergantung dari tema yang Anda gunakan, tapi dikebanyakan kasus, header image dan logo biasanya dijadikan satu.

Pada tema contoh yang saya gunakan ini, header image dan logo dipisah pengaturannya (tidak dijadikan satu).

Terlihat pada WordPress Customizer dibawah ini, header image ditempatkan pada "Header Media", dan logo ada dalam "Site Identity" (jika Anda membukanya).

Maksud saya adalah Anda perlu meng-explore semua modul pada WordPress Customizer agar terbiasa dalam menggunakannya.

mengganti header image pada WordPress

Untuk mengganti header image, cukup mengklik modul "Header Media" atau "Header" atau yang mirip-mirip dengan itu (ini bisa berbeda dari setiap tema).

Kebetulan tema yang saya gunakan memungkinkan mengupload "Header Video" juga dengan rekomendasi dimensi sebesar 2000 x 1200 pixels dengan format .mp4 (Anda dapat melihat informasinya pada kotak merah yang diatas pada gambar dibawah ini). 

header video dan header image pada WordPress

Jika Anda tidak mau menggunakan "Header Video", Anda dapat menggunakan "Header Image" saja, perhatikan kotak merah yang ada dibawah pada gambar diatas.

Untuk merubah gambar pada header, klik tombol "Add new image" kemudian klik "upload files".

Lalu, sebelum Anda menguplaod gambar, WordPress akan menyarankan Anda dimensi gambar yang direkomendasikan, dalam contoh saya dibawah ini dimensinya 2000 x 1200 pixels.

upload files image di WordPress

Tergantung dari tema yang Anda gunakan, dimesinya bisa berbeda-beda.

Tapi, Anda tidak perlu repot-repot untuk menyesuaikan dimensi gambar. Sebenarnya, WordPress menyediakan alat untuk meng-crop gambar yang Anda upload apabila ukurannya lebih besar dari yang seharusnya.

Perhatikan gambar dibawah ini. Gambar yang saya upload berdimensi 3008 x 2000 pixel (dimensi seharusnya 2000 x 1200 pixel), namun saya abaikan saja dan klik tombol biru "Select and Crop".

upload header image di WordPress

Setelah itu, WordPress memungkinkan saya untuk menyesuakan gambar yang saya upload dan meng-cropnya agar sesuai dengan dimensi yang seharusnya. 

crop image header di WordPress

Dan yihaa! sekarang saya punya header image baru 🙂 

header image baru

Ngomong-ngomong:

1. Gambar untuk header image ini saya dapatkan gratis dari situs www.pixabay.com.
2. Header image ini sifatnya opsional. Jika tidak ingin menggunakan gambar pada header, Anda boleh mengklik tombol "hide image" yang ada disamping kiri tombol "Add new image".

3. Mengganti Logo dan Favicon

Logo termasuk media promosi yang bagus untuk website Anda, karena dengan adanya logo, website atau produk Anda akan mudah diingat oleh pengunjung/konsumen.

Well, saya tidak membahas soal teknis atau logo sebagai alat pemasaran, tapi bagaimana caranya mengatur logo pada website WordPress?

Sebelumnya, Anda perlu menyiapkan sebuah logo dengan format .png dengan latar belakang atau background yang transparan.

Untuk mengatur logo website, klik modul "Site Identity" atau modul "logo" atau yang mirip seperti itu pada WordPress Customizer.

Lalu, seperti pada gambar dibawah ini, klik tombol "Selet logo".

mengganti logo pada WordPres

Ditema contoh yang saya gunakan memungkinkan saya untuk menggunakan logo atau menggunakan judul text saja, tetapi jika Anda menggunakan logo, sebaiknya jangan dicentang "Display Site Title and Tagline" karena nanti bisa ada 2 logo (logo dan text) dan itu tidak bagus.

Sebagai contoh, ini logo GuruWebsite.

contoh logo

Selanjutnya, Anda juga perlu mengatur site icon, yang lebih dikenal sebagai favicon. 

Oia, buat yang belum tau apa itu favicon, singkatnya adalah icon yang akan tampil disini:

site icon atau favicon

Cara mengaturnya sangat mudah sekali, sama seperti mengatur logo. Pengaturannya juga ada pada modul "Site Identity". 

Cara termudah untuk membuat favicon adalah dengan mengambil icon pada logo website Anda dan menghapus textnya.

site icon

4. Menyesuaikan Warna pada Website

Beberapa tema WordPress memungkinkan Anda untuk menyesuaikan warna, seperti warna background, warna judul, warna link, warna text, dan lain-lain, tergantung dari tema yang Anda gunakan.

Anda dapat menyesuaikannya pada modul "Colors" pada WordPress Customizer.

mengatur warna pada website WordPress

Sampai dititik ini, saya mengajak Anda untuk melakukan eksperiman dengan mencoba-coba mengganti warna pada website Anda.

Sekali lagi, ketika Anda mengganti warna, entah itu warna link, text atau background, perubahannya akan langsung terlihat pada preview disebelah kanan.

6. Penyesuaian Tambahan Berdasarkan Tema

Ada ribuan tema di luar sana dan banyak dari tema-tema tersebut memiliki beberapa modul tambahan di WordPress Customizer, yang memungkinkan Anda untuk melakukan penyesuaian lebih banyak lagi.

Sayangnya, saya tidak mungkin meng-cover ribuan tema tersebut dalam panduan ini karena tentu saja karena alasan keterbatasan.

Jadi, saya mengajak Anda untuk menelusuri semua modul yang terdapat dalam tema Anda saat ini dan bereksperimen dengan semua yang Anda temukan. 

Sebagai gambaran, ini salah satu tema yang memiliki banyak pilihan modul dalam WordPress Customizer:

beberapa modul tambahan dalam WordPress Customizer

7. Plugin-Plugin Untuk Menambah Kemampuan Kustomisasi

Anda bisa melakukan apa saja dengan WordPress, masih ingat? Kenyataanya, Anda tidak memerlukan pengetahuan coding untuk itu. 

Di WordPress, Anda dapat menginstall plugin untuk membuat contact form, testimonial, gallery photo, portofolio, mengganti font, dan lain-lain.

Dengan adanya plugin, Anda dapat menambah kemampuan untuk mengkustomisasi website WordPress Anda.

Nah, berikut saya berikan rekomendasinya:

  • Shortcodes Ultimate: Untuk menambahkan blok-blok ketika Anda membuat konten, seperti menambahkan button, gallery, column, quote, spoiler, box, highlight, animation, divider, dll. Ini adalah plugin favorit saya.
  • Strong TestimonialJika Anda membuat website dengan tujuan bisnis dan ingin menampilkan testimoni dari pelanggan atau klien Anda.
  • NextGen GalleryUntuk membuat dan menampilkan gallery photo yang keren.
  • Unique Headers:  Bayangkan tentang header image yang berbeda dan unik disetiap konten (posts dan pages) yang Anda buat.
  • Portofolio: Jika Anda ingin menampilkan hasil kerja Anda, entah itu portofolio project atau kerjaan, seperti design logo, website, dsb. Sangat cocok untuk website bisnis.
  • Easy Google Font: Anda merasa bahwa font yang digunakan pada tema Anda saat ini membosankan atau kurang cocok? Install saja plugin ini untuk menemukan +600 Google font secara gratis.
  • Content Views: Jika Anda tidak suka dengan tampilan blogpost WordPress yang standar, Anda dapat merubahnya ke tampilan grid menggunakan plugin yang satu ini.
  • Page Builder by SiteOrigin: Plugin ini memungkinkan Anda untuk menyesuaikan element dan layout pada konten Anda. Mungkin dibutuhkan sedikit waktu hingga Anda terbiasa menggunakannya, tapi menurut saya sangat layak dipelajari jika Anda ingin membuat halaman WordPress yang substansial seperti halaman depan pada kelaswebsite.id. 

WordPress SEO (dan semua hal yang perlu Anda ketahui)


Mungkin sebagian besar dari Anda sudah cukup familiar dengan SEO (Search Engine Optimization).

Tapi, tahukah Anda bahwa SEO adalah bagian yang paling penting dari kesuksesan setiap website? Juga, SEO merupakan elemen yang krusial yang perlu disesuaikan sebelum meluncurkan website baru.

Terus terang saja, tanpa SEO yang bagus, sangat sulit website Anda akan mendapatkan pengunjung, kecuali jika Anda mau menghabiskan uang yang banyak untuk beriklan di Google.

Faktanya, banyak orang diluar sana menghabiskan ratusan hingga ribuan dollar per bulannya untuk meningkatkan peringkat website mereka di Google, tapi disini saya akan menunjukan kepada Anda cara memulai SEO website secara gratis.

Sounds good?

Mari kita lanjutkan... Ngomong-ngomong, SEO mempunyai dua sisi:

  1. SEO On-page
  2. SEO Off-page

Off-page SEO adalah semua yang Anda lakukan di luar website Anda. Hal-hal seperti meyakinkan orang untuk mau memberikan link ke website Anda, mendapatkan share di social media, dan sebagainya.

Sedangkan On-page SEO adalah semua yang Anda lakukan pada website Anda sendiri, dengan tujuan untuk mengoptimalkan konten WordPress Anda agar lebih Google-friendly...dan SEO On-page inilah yang akan kita bahas disini.

Berita baiknya, WordPress itu sendiri hadir dengan SEO yang sudah cukup optimal, tapi agar SEO WordPress Anda bisa lebih bagus lagi dan mampu bersaing dengan website lainnya, Anda membutuhkan sebuah plugin yang mampu meningkatkan segalanya. Pilihan yang paling populer dan terbaik saat ini adalah Yoast SEO.

Jadi, mari kita awali bagian ini dengan:

1. Menginstall dan Mengatur Plugin Yoast SEO

Yoast SEO adalah plugin canggih yang dapat mengelola segala aspek dari SEO on-page sebuah website WordPress, dan jika Anda menyiapkannya sebelum meluncurkan website, maka Anda akan mendapatkan keuntungan besar dalam peringkat SEO sejak awal.

Plugin ini kaya akan fitur, dan untuk mencakup semua fitur tersebut membutuhkan panduan tersendiri karena saking panjangnya, jadi disini saya hanya akan fokus kepada hal-hal yang sangat penting saja. 

Untuk memulainya, Anda dapat menginstall plugin Yoast SEO dari WordPress Anda terlebih dahulu (Plugins > Add New > Cari "Yoast SEO" di kolom pencarian).

Setelah plugin diaktifkan, klik SEO > General pada sidebar WordPress Anda dan klik "configuration wizard!" seperti yang saya tunjukan pada gambar dibawah ini:

mengatur Yoast SEO

Untuk memudahkan Anda, saya akan pandu langkah demi langkahnya:

1. Pertama-tama, klik tombol "CONFIGURE YAOST SEO"

klik tombol configure yoast seo

2.  Jika Anda merasa belum siap untuk meluncurkan website Anda, pilih option B.

step 2 mengatur plugin yoast seo

3. Untuk tujuan apa Anda membangun website? Jika hanya ingin menyalurkan hobi menulis, maka pilihlah "A blog". Jika membuat website untuk perusahaan, pilihlah "A corporation".

step 3 pengaturan Yoast SEO

4. Jika Anda membuat website atas nama perusahaan, pilihlah "Company", jika pribadi pilihlah "Person".

step 4 pengaturan yoast SEO

5. Anda boleh melewati tahap ini jika Anda belum memiliki Social profiles. Silahkan klik tombol "next" untuk melanjutkan proses.

step 5 pengaturan Yoast SEO

6. Pilih "Yes" untuk kedua pertanyaan pada tahap ini.

step 6 pengaturan Yoast SEO

7. Pada bagian "Multiple authors" saya menyarankan untuk memilih "No" saja untuk menghindari terjadinya duplikat konten yang dapat merusak SEO website Anda.

step 7

8. Anda bisa mengabaikan bagian "Google Search Console" pada tahap nomor 8 ini dan klik tombol "Next", karena saya akan pandu Anda tentang ini pada pembahasan setelah ini.

9. Pada tahap ini, Anda dapat memilih simbol yang digunakan untuk memisahkan antara judul halaman dengan judul website. Misalnya: Cara Membuat Website - kelaswebsite.id. Dimana simbol "-" saya gunakan sebagai pemisah.

Jika Anda tidak yakin, Anda bisa memilih simbol "-" seperti yang juga saya gunakan pada website ini.

step 9

10. Ini opsional, boleh iya boleh tidak. Jika Anda ingin berlangganan update terbaru dari Yoast SEO, Anda boleh memasukkan email dan nama Anda pada kotak yang disediakan.

step 10 opsional

11. Tahap nomor 11 ini juga sifatnya opsional. Sebenarnya, plugin Yoast SEO itu freemium, tapi Anda tidak perlu mengupgradenya ke premium, karena versi gratisnya sudah powerfull, bahkan di website ini saya juga menggunakan versi gratisnya. 

step 11 opsional juga

12. Daaan.... akhirnya selesai! Fiuh, cukup panjang juga ya step-step nya 🙂 Klik tombol "Close" untuk mengakhiri proses.

step terakhir selesai

Oia, jika Anda tertarik untuk membaca lebih lanjut tentang fitur lainnya (yang tidak saya bahas disini), saya akan buatkan panduannya setelah ini.

2. Update Permalinks agar SEO-Friendly

Masalah awal pada website WordPress baru adalah permalink yang terlihat "jelek" dan ini tidak bagus untuk SEO Anda.

Jika Anda membuka Settings > Permalinks, Anda akan melihat ini:

update permalinks

Struktur tersebut sebenarnya tidak salah, namun tidak bagus untuk SEO, dan juga tidak mudah diingat oleh pengunjung Anda. Untuk memperbaikinya, ganti permalink menjadi "Post name" sesuai yang saya arahkan pada gambar diatas.

3. Pastikan Website Anda Terlihat oleh Google

Ini sangat penting, jika Anda ingin website Anda terlihat di mesin pencari Google, pastikan Anda tidak mencentang bagian "Search Engine Visibility" ini, yang dapat Anda temukan pada Settings > Reading.

Biarkan saja, jangan dicentang!

jangan centang ini

4. Membuat Sitemap

Pada dasarnya, dengan mengaktifkan Yoast SEO, sitemap website Anda sudah langsung aktif. Anda dapat mengeceknya di SEO > General > Features lalu scroll kebawah hingga Anda menemukan bahwa fitur ini sudah dalam keadaan "On".

Sitemap atau peta situs digunakan oleh Google agar lebih mudah untuk mengindeks halaman website Anda.

membuat sitemap

5. Mempersiapkan Google Search Console

Jika Anda serius ingin belajar SEO, Anda perlu memahami Google Search Console (dulunya bernama Google Webmaster).

Dengan menggunakan alat ini, Anda bisa menemukan banyak data, seperti:

  • Peringkat website Anda di Google
  • CTR (Click Thru Rate)
  • Query
  • Impression

Secara singkat, dengan bantuan alat ini, Anda dapat mengetahui bagaimana Google melihat website Anda dan dan bagaimana caranya untuk mengoptimalkan peringkat website Anda di hasil penelusuran Google.

Alat ini gratis. Yang Anda perlukan hanya sebuah account Google, kemudian daftarkan website Anda di Google Search Console. Lalu Anda akan diminta untuk memverifikasi website Anda. Ikuti saja instruksinya.

Jika Anda kesulitan dalam proses verifikasi, Anda juga dapat menggunakan pengaturan Search Console yang ada di plugin Yoast SEO.

mempersiapkan Google Search Console

6. Daftar di Google Analytics Untuk Melihat dan Menganalisis Traffic Website

Sebagai pemilik website, Anda perlu tahu berapa banyak pengunjung yang datang ke website Anda. Darimana mereka datang, apa saja halaman yang mereka kunjungi, dan masih banyak lagi. Ada begitu banyak yang bisa Anda pelajari tentang pengunjung-pengunjung Anda.

Untungnya bagi kita semua, Google telah menyediakan alat khusus yang disediakan secara gratis untuk membantu kita menganalisisnya, yaitu Google Analytics.

Anda cukup menghubungkan website Anda dengan membuka situs resmi Google Analytics. Kemudian ikuti instruksinya hingga website Anda terhubung dengan Google Analytics.

Atau Anda juga bisa menginstall plugin Google Analytics Dashboard for WP (GADWP)Dari plugin ini, Anda bisa menghubungkan website Anda dengan Google Analytics lebih mudah.

Mengatur "Menu"


Saya yakin apapun tipe website yang Anda bangun saat ini, website Anda membutuhkan menu sebagai navigasi untuk memudahkan pengunjung menelusuri setiap bagian dalam website Anda.

Inilah caranya Anda dapat mengatur menu di WordPress:

Klik Appearance > Menus pada dashboard WordPress. Anda bisa memulai dari memilih halaman yang akan Anda tambahkan di dalam menu.

Anda bisa memasukkan Pages, Posts, Categories dan custom links pada menu. Pada gambar contoh dibawah ini, saya mengarahkan halaman "Contact" dan "About". Centang bagian tersebut dan klik tombol "Add to Menu".

mengatur menu di WordPress

Setelah itu, Anda akan melihat halaman-halaman yang Anda tambahkan ke menu di sisi sebelah kanan. Yang menarik di fitur menu ini adalah Anda dapat men "drag & drop" menu-menunya, sehingga sangat memudahkan Anda untuk mengatur posisi menu.

Kemudian pada bagian "Menu Settings", Anda dapat mencentang "To Menu" agar menu yang Anda atur dapat tampil di website Anda. Jangan lupa klik tombol biru "Save Menu".

mengatur menu drag and drop

Sekarang website Anda sudah memiliki menu . Anda bisa me refresh halaman website Anda untuk melihat menu yang Anda tambahkan.

Ini hasil kerja saya:

menu website

Sampai dititik ini, saya kira website Anda sudah mulai terbentuk. Tetapi, kira perlu melakukan penyesuaian lebih jauh lagi agar website Anda terlihat lebih professional.

Mengatur "Widgets"


Widgets adalah tempat yang biasa dipasangi elemen-elemen seperti search, recent posts, recent comments, aplikasi, scripts, gambar, tulisan, iklan dan sebagainya.

Widget ini biasanya diletakkan pada sidebar website, baik sebelah kiri atau sebelah kanan.

cara mengatur widgets di WordPress

Dan sekarang kita akan belajar cara memodifikasi dan mengatur widget pada website WordPress Anda.

Klik Appearance > Widgets.

Anda akan melihat dua kolom pada fitur widgets.

mengatur widget di WordPress

Pada kolom sebelah kiri, Anda akan melihat daftar widget yang bisa Anda gunakan.

Sedangkan kolom sebelah kanan berisi lokasi wdiget yang dapat Anda masukkan pada website Anda. Tergantung dari tema yang Anda gunakan, lokasinya bisa berbeda-beda. Pada contoh saya diatas, ada lokasi widget di "Blog Sidebar" dan "Footer 1".

Widget bernama sidebar atau blog sidebar berlokasi di sidebar, sedangkan yang bernama footer berlokasi di footer (bagian bawah website Anda).

Sekarang Anda bisa mencoba menambahkan satu atau beberapa widget untuk melihat perubahannya dalam website Anda.

Jika sudah, silahkan lanjutkan ke langkah selanjutnya.

Mengatur Halaman Depan (Homepage)


Dahulu, kita tidak punya banyak pilihan untuk mengatur halaman homepage di website WordPress. Umumnya, tampilan homepage hanya berisikan daftar artikel yang diurutkan mulai dari yang terbaru atau menjadikan satu halaman standar sebagai homepage.

Namun, sekarang WordPress sudah jauh lebih berkembang, kita mempunyai banyak pilihan untuk mengatur homepage website menjadi lebih professional.

Sebagai contoh, mungkin Anda sudah melihat halaman homepage Guru Website.

guru website

Saya menggunakan plugin untuk membuat halaman homepage seperti itu. Saya tidak menyentuh coding sama sekali, mulai dari mengatur warna, membuat button, menambahkan photo, dan sebagainya.

Berita baiknya, Anda pun juga bisa melakukan hal yang sama seperti yang saya lakukan, meskipun ini adalah pertama kalinya Anda mengenal WordPress...

... Dan ada 2 cara untuk mengatur homepage di WordPress:

1. Dengan bantuan tema
2. Dengan bantuan plugin

Mari kita mulai dari tema.

Ada banyak tema gratis di WordPress yang sudah memiliki fitur untuk mengatur homepage dengan mudah hanya dengan menggunakan WordPress Customizer.

Contohnya adalah tema Mesmerize berikut ini, dimana sudah disediakan template untuk halaman depan, Anda hanya perlu mengganti judul, tagline, button, blogpost dan lain-lain hanya dengan menggunakan fitur WordPress Customizer.

Mengatur halaman depan

Ada banyak lagi tema WordPress seperti itu, Anda dapat mencarinya yang sesuai dengan kebutuhan Anda.

Yang kedua, kita juga dapat mengatur halaman depan menggunakan plugin.

Pertama-tama, Anda perlu membuat 2 halaman terlebih dahulu:

1. Buat halaman pada "pages", berikan judul "HOME", biarkan kontennya kosong dan publikasikan halamannya.
2. Buat halaman pada "pages", berikan judul "BLOG", kontennya kosongkan saja dan publikasikan halamannya.

Kemudian, pada dashboard WordPress Anda, klik Settings > Reading dan atur Home sebagai "Homepage" dan Blog sebagai "Post page". Jangan lupa juga centang bagian "A static page".

mengatur halaman depan WordPress

Sampai disini, ketika Anda mengunjungi halaman depan website Anda akan terlihat kosong tidak ada isinya. Ini normal, jangan panik 🙂

Disinilah plugin bermain. Anda akan membangun konten di halaman depan, seperti yang saya lakukan di homepage kelaswebsite.id, yaitu menggunakan plugin.

Rekomendasi saya jika Anda ingin menggunakan plugin yang gratis adalah:

1. Page Builder by SiteOrigin,
2. Live Composer.

Saya pribadi lebih memilih Page Builder by SiteOrigin, karena memiliki fitur yang lebih banyak, juga lebih mudah pengaturannya.

Balik lagi ke halaman kosong "HOME" yang Anda buat sebelumnya, atau ketika Anda menulis konten baru, Anda akan melihat tab "Page builder".

page builder

Ketika Anda mengkliknya, Anda akan melihat tampilan editor berubah seperti ini:

Dengan bantuan plugin ini, Anda dapat membuat custom layout, custom element, menambahkan button, warna, dan lain-lain.

Ini beberapa contoh widget yang dapat Anda gunakan untuk membangun halaman.

widget di Page Builder by Site Origin

Bahkan, plugin ini juga menyediakan "prebuilt layout", yaitu template layout yang sudah dibangun sedemikian rupa sehingga Anda hanya perlu mengganti gambar, text, icon, tombol, warna dan sebagainya saja.

pre built layout

Mungkin Anda berpikir seperti ini:

"Wah kok kayaknya ribet banget ya, saya ini masih pemula".

Memang kelihatannya kompleks karena banyaknya fitur, tapi mendesign homepage Anda dengan cara ini sangat menyenangkan dan lebih mudah, daripada Anda membangun homepage dengan cara manual, yaitu dengan memasukkan kode-kode PHP, HTML dan CSS yang bisa membuat sakit kepala 🙂

Pastikan Anda Mempunyai Halaman-halaman Penting Dalam Website Anda


Setelah homepage, Anda juga perlu membuat halaman-halaman penting lainnya untuk menyempurnakan website Anda.

Halaman-halaman seperti:

  • About Us - Untuk memberitahu orang tentang perusahaan atau website Anda
  • Contact Us
  • FAQ
  • Services dan Products

Juga, halaman-halaman seperti portofolio, testimonials, team, advertising mungkin juga diperlukan, Anda bisa menyesuaikannya sesuai dengan kebutuhan Anda.

Oia, jika Anda membuat contact form pada halaman contact us, Anda harus mencobanya terlebih dahulu untuk memastikan pesan terkirim sempurna ke email Anda.

Mengoptimasi Kecepatan Website WordPress


Saya beritahu Anda:

Kecepatan adalah barang sangat penting yang harus dimiliki apapun yang Anda jual di website Anda.

Masalahnya adalah jika website Anda lambat, pengunjung akan pergi.

Skenearionya seperti ini > Pengunjung pergi karena website Anda yang lambat, kemudian pengunjung yang pergi tersebut pindah ke website lainnya yang lebih cepat, dan kemungkinan besar website itu adalah salah satu dari competitor Anda.

Pertanyaannya:  

Apakah Anda menginginkan hal yang demikian? Tentu tidak, bukan 🙂

Hasil penelitian menunjukan bahwa setengah dari kita hanya mau menunggu tidak lebih dari 2 detik hingga konten website termuat.

Katakanlah Anda adalah Google atau Facebook. Ketika orang mengunjungi website Anda, orang pasti bersedia menunggu lebih lama, karena Anda sudah punya 'nama'. Namun, sayangnya bagi situs usaha kecil atau website baru, Anda tidak akan mendapatkan 'kemewahan' seperti itu.

Jadi, saya sarankan jangan pernah remehkan persoalan kecepatan website Anda. Karena website yang lambat, justru dapat melukai bisnis Anda.

Di WordPress, ada beberapa cara yang dapat Anda lakukan guna meningkatkan kecepatan website Anda, dan untungnya semua ini dapat dilakukan dengan mudah dan cepat.

1. Instal dan Aktifkan Plugin Caching

Pernahkah Anda mengunjungi suatu website dimana pada saat pertama kali membukanya websitenya terasa berat, namun ketika Anda membukanya kembali website tersebut terasa lebih ringan dan lebih cepat dari sebelumnya.

Mungkin Anda bertanya-tanya, apa sebabnya bisa seperti itu?

Sebenarnya itu adalah efek dari caching.

Browser Anda akan menyimpan file-file website yang sudah Anda kunjungi sebelumnya dan menyimpannya dalam local storage komputer Anda. Ketika Anda membuka kembali website yang sudah Anda kunjungi, alih-alih browser akan mendownload kembali seluruh konten dari website tersebut, browser akan menampilkan konten yang telah disimpan dalam local storage komputer Anda.

Begitulah singkatnya cara kerja caching.

Di WordPress, Anda dapat mengaktifkan efek caching dengan menginstall plugin W3 Total Cache (Plugin yang saya rekomendasikan). Plugin ini gratis dan merupakan pilihan paling populer saat ini.

2. Tes Kecepatan Website Anda dan Pastikan Bahwa Website Anda Sudah Benar-benar Cepat

Menguji kecepatan website Anda sebelum diluncurkan adalah tindakan yang bijak dan akan membantu Anda menemukan apakah ada faktor yang menyebabkan website Anda menjadi lambat.

Anda dapat menggunakan alat Google PageSpeed untuk melihat kecepatan website Anda. Tenang saja, alat ini tersedia secara gratis :).

Sebagai contoh, ini hasil tes kelaswebsite.id dalam tampilan mobile. Skor optimizationnya cukup bagus, yaitu 81/100, meskipun sebenarnya masih bisa ditingkatkan lagi.

Idealnya adalah kecepatan website ada di skor 80/100. 

tes kecepatan website Anda

N/B: Anda juga dapat membaca panduan cara mempercepat loading website ini jika Anda ingin mempelajari tentang optimasi website secara lebih advanced.

Pastikan Website Anda "Mobile-Friendly"


Tahukah Anda bahwa sekarang ini jumlah pengguna yang mengakses website via mobile lebih besar daripada yang menggunakan desktop? (sumber rujukan). Itu artinya, jika website Anda tidak optimal pada tampilan mobile, Anda bisa kehilangan banyak traffic > kehilangan pendapatan.

Padahal memastikan website tampak optimal disemua perangkat termasuk mobile ini sangat mudah. Umumnya jika Anda menggunakan tema yang responsive, website Anda kemungkinan besar sudah  "mobile-friendly". 

Tapi tidak ada salahnya jika Anda memastikan sekali lagi agar tidak ada sesuatu yang salah ketika Anda meluncurkan website Anda.

Ada 2 cara untuk mengeceknya, pertama menggunakan alat, kedua dengan cara manual. Mari kita mulai dengan bantuan alat.

1. Dengan Bantuan Alat

Saya merekomendasikan 2 alat ini:

1. Mobile-Friendly Test by Google
2. Mobile Friendliness Test Tool by Bing

Sebaiknya Anda menggunakan kedua alat tersebut. Masukkan saja alamat website atau domain Anda pada kotak yang telah disediakan dan tunggu sekitar 1 menit hingga hasilnya keluar.

Jika Google dan Bing mengatakan bahwa website Anda sudah mobile friendly, saya ucapkan selamat, Anda bisa stop membaca bagian ini dan lanjut ke bagian terakhir dari panduan ini 🙂

2. Cek Secara Manual

Anda juga bisa melakukan tes secara manual. Sebenarnya ini lebih ke kesan subjektif saja, saya pribadi sering melakukannya mengguankan smartphoen saya untuk memastikan bahwa website saya benar-benar mobile friendly.

Atau Anda juga menggunakan fitur yang ada di WordPress Customizer. Perhatikan tombol yang ada pada bagian bawah. Disitu Anda dapat mengganti tampilan website Anda ke tampilan tablet dan mobile.

melihat website di mobile dan tablet

Hal-hal yang perlu Anda perhatikan itu seperti:

  1. Apakah text yang Anda gunakan bisa terbaca dengan baik, tidak terlalu kecil, pun tidak terlalu besar
  2. Gambarnya juga tidak terlihat terlalu besar atau terlalu kecil
  3. Idealnya website Anda tidak bisa di scroll ke samping kanan dan kiri
  4. Menu website Anda berfungsi dengan baik

3. Solusi Website yang Tidak Mobile-Friendly

Seandainya website Anda tidak tampak optimal pada mobile, dimana seharusnya ini kemungkinannya kecil sekali jika Anda menggunakan tema WordPress yang modern, tapi sayangnya demi alasan kemudahan, saya sangat menyarankan Anda untuk memilih tema WordPress yang lain.

Sebenarnya Anda bisa saja melakukan beberapa pengaturan supaya website Anda tampak optimal, seperti misalnya menggunakan plugin WPtouch, tapi saya percaya bahwa itu bukanlah solusi yang tepat.

Ada Pertanyaan?


Fiuuuh... panduan yang panjang, ya kan? 🙂 Butuh waktu sekitar 1 bulan buat saya merampungkan panduan ini.

Akhir kata, saya berharap panduan ini benar-benar dapat membantu Anda  meng kustomisasi website WordPress Anda hingga terlihat keren dan persis seperti apa yang Anda inginkan.

Jika Anda memiliki pertanyaan, silahkan tulis dikolom komentar atau kontak saya langsung via email dengan menulisnya pada kotak dibawah ini:

  • Terima kasih Mas Willya Randika.. Sangat membantu.. mudah dipahami dan panduannyo sangat lengkap.. semoga menjadi amal sholeh bagi mas Willya Randika

  • sangat bermanfaat sekali, ilmu yg diberikan tidak setengah-setengah, terima kasih semoga panjang umur, lancar rezeki di mudahkan segala hajatnya.amiin.

  • Luar Biasa…
    Jarang ada yang seikhlas anda. Terimakasih saya akan mencoba dengan panduan yang anda bagikan, semoga Berkah aminn..

  • Sebuah Keikhlasan dalam menyebar ilmu, dan ilmu itu kelak akan berkembang biak sendiri sebagi investasi tak terhingga untuk di Dunia Keabadian kelak.
    Tak butuh tombol donasi, tak perlu request Thumb Up dll.
    Tapi DIA akan menilai apa yang kau lakukan bro Willy Randika.

  • wah ini sih namanya super totalitas dalam membagi ilmu. Kalo ada artikel dan website secomplex ini sih saya ga akan bingung ngasih tau temen saya yang mau buat website.

    kalo artikel ini saya tau dari dulu, pasti akan sangat membantu saya waktu sedang masa-masanya pembelajaran.

    maka saya akan jadikan artikel ini dibaca pertama kali untuk teman-teman saya yang ingin membuat website dari nol, biar ga kaya saya trial and error mulu waktu dulu hehe.

    terimaksih banyak sudah dirangkum seperti ini..

  • >