Tutorial Membuat FAQ di WordPress dengan Blok Details Bawaan
Buat FAQ buka tutup memakai blok Details WordPress: susun pertanyaan, isi jawaban, atur keadaan awal, lalu periksa hasil pada pratinjau dan keyboard.
FAQ membantu pembaca memilih penjelasan yang dibutuhkan
Pertanyaan umum dapat membantu calon pelanggan memahami layanan sebelum menghubungi tim. Tantangannya ialah menyajikan jawaban yang cukup jelas tanpa membuat halaman terasa penuh sejak pertama dibuka. Blok Details bawaan WordPress menyediakan ringkasan yang dapat dibuka untuk menampilkan isi tambahan. Dokumentasi WordPress menyebut FAQ sebagai salah satu penggunaannya. Tutorial ini membuat contoh kecil dengan pertanyaan yang berdiri sendiri, sehingga pengelola dapat memeriksa isi dan perilakunya sebelum menerapkannya pada halaman layanan yang sebenarnya.
Bedakan ringkasan pertanyaan dari jawaban di dalamnya. Pertanyaan tetap terlihat saat bagian tertutup dan perlu memberi alasan yang jelas untuk membuka. MDN menjelaskan pola disclosure pada elemen details: label disediakan melalui summary, sedangkan isi ditampilkan ketika keadaan terbuka. Latihan ini berfokus pada penyajian pertanyaan dan jawaban. Hasilnya tidak menjadi bukti peningkatan peringkat pencarian, dan jumlah FAQ tidak perlu ditambah hanya untuk mengulang kata kunci yang sama pada banyak bagian halaman.
Prasyarat: editor blok dan materi yang sudah disetujui
Siapkan akun yang berwenang menyunting halaman pada WordPress milik sendiri, editor blok dengan Details yang tersedia, dan tiga pertanyaan beserta jawaban yang telah diperiksa pemilik layanan. Gunakan halaman draf atau lingkungan uji. Siapkan browser desktop, keyboard, dan ponsel jika tersedia untuk meninjau hasil. Anda tidak perlu memasang plugin FAQ tambahan untuk contoh ini. Jika Details tidak ditemukan, konfirmasikan versi serta pembatasan editor kepada pengelola sebelum mengubah instalasi atau menambah alat lain.
Pilih materi publik yang tidak memuat informasi pribadi pelanggan. Tentukan tujuan tiap jawaban, sumber informasi internal yang menjadi acuan, dan siapa yang dapat menyetujuinya. Catatan ini diperlukan ketika isi layanan berubah setelah FAQ selesai dibuat. Jangan memakai angka biaya, jangka pengerjaan, atau janji fasilitas yang belum ditetapkan hanya agar contoh tampak lengkap. Isi draf percobaan dapat menggunakan kalimat contoh yang ditandai dengan jelas dan diganti oleh materi resmi sebelum ditinjau untuk penggunaan nyata.
Langkah 1: susun tiga pertanyaan yang tidak saling menyalin
Tuliskan tiga pertanyaan yang menjawab kebutuhan berbeda, lalu urutkan berdasarkan perjalanan pembaca. Untuk contoh hipotetis jasa pemotretan produk, kelompoknya dapat berupa bahan sebelum konsultasi, penentuan lingkup foto, dan cara meminta penjelasan lanjutan. Jangan membuat tiga variasi kalimat yang semuanya hanya menjawab bagaimana menghubungi petugas. Pastikan setiap pertanyaan dapat dipahami saat jawaban belum terlihat, karena keadaan tertutup tidak memberi pembaca konteks tambahan dari paragraf yang berada di dalam blok.
Buat lembar acuan sederhana berisi pertanyaan, inti jawaban, dan pihak pemeriksa. Contoh pertanyaan pertama ialah 'Apa yang perlu disiapkan sebelum konsultasi foto produk?' Inti jawaban dapat membahas jenis produk dan tujuan pemakaian foto, sesuai kebijakan usaha contoh yang disepakati. Kalimat ini bukan informasi tentang paket JagoWeb atau janji layanan usaha tertentu. Latihan memakai konteks hipotetis untuk memperlihatkan proses penyusunan, sedangkan isi yang akan digunakan bisnis nyata harus mengikuti materi yang benar-benar telah disetujui.
Langkah 2: tambahkan blok Details dan isi ringkasannya
Buka halaman draf di editor blok. Tambahkan judul bagian yang membantu pembaca mengenali kumpulan pertanyaan, lalu buat blok Details melalui tombol penambah blok. Anda juga dapat mengetik /details pada paragraf baru dan memilih blok yang sesuai. Isi bidang ringkasan dengan pertanyaan pertama. Dokumentasi WordPress menunjukkan placeholder Write summary sebagai tempat menulis label tersebut. Nama kontrol dapat diterjemahkan pada instalasi Anda, sehingga cocokkan fungsi bidangnya jika tampilan bahasa berbeda.
Baca ringkasan itu tanpa melihat catatan jawaban. Jika pertanyaannya terlalu umum, perbaiki sebelum mengisi bagian dalam. Kalimat seperti 'Informasi lainnya' kurang menjelaskan apa yang akan didapat, sedangkan pertanyaan yang langsung menyebut kebutuhan pembaca lebih mudah dibedakan. Hindari label yang terlalu panjang hingga beberapa topik bercampur menjadi satu pertanyaan. Jika ada dua kebutuhan berbeda, pisahkan pada blok yang sesuai agar pembaca tidak harus membuka jawaban panjang untuk menemukan bagian kecil yang dicari.
Langkah 3: masukkan jawaban di bagian isi yang benar
Letakkan jawaban sebagai blok paragraf di dalam Details, di bawah ringkasan. Gunakan satu atau beberapa paragraf yang langsung menjawab pertanyaan, sesuai panjang penjelasan yang diperlukan. Pastikan jawaban berada di dalam wadah yang dimaksud, bukan sebagai paragraf terpisah setelah blok. Periksa struktur melalui tampilan editor yang tersedia bila posisi isinya meragukan. Pertanyaan dan jawaban perlu berhubungan jelas sebelum Anda membahas warna, jarak, atau tampilan pembuka pada halaman.
Untuk contoh persiapan konsultasi, jawaban dapat menjelaskan informasi produk yang perlu dibawa serta tujuan pembicaraan awal menurut acuan usaha contoh. Hindari menambahkan syarat baru yang tidak tercantum pada materi pemeriksa. Bila ada istilah yang mungkin tidak dipahami calon pelanggan, beri penjelasan dalam kalimat biasa. Jika jawaban perlu mengarahkan ke halaman informasi yang sudah tersedia, pastikan tautannya benar dan teksnya menjelaskan tujuan. Jangan membuat alamat baru yang belum ada hanya untuk melengkapi contoh FAQ.
Langkah 4: buat pertanyaan berikutnya sebagai blok terpisah
Tambahkan Details kedua dan ketiga, kemudian masukkan ringkasan serta jawaban berdasarkan lembar acuan. Periksa urutan pertanyaan setelah ketiganya lengkap. Untuk latihan ini, gunakan perilaku buka tutup yang berdiri sendiri. Dokumentasi WordPress menjelaskan bahwa pengaturan Name dapat mengelompokkan beberapa blok sehingga pembukaan satu menutup yang lain. Biarkan bidang itu kosong jika tersedia dan Anda menginginkan tiap pertanyaan tetap dapat dibuka secara terpisah, lalu pastikan perilakunya melalui pratinjau.
Jangan menganggap semua komponen bernama accordion pada tema atau plugin mempunyai pengaturan yang sama dengan Details bawaan. Jika tampilan editor berbeda dari latihan, identifikasi blok yang benar sebelum melanjutkan. Pada contoh tiga pertanyaan, coba membaca seluruh ringkasan secara berurutan: apakah ada topik berulang, istilah yang tidak konsisten, atau pertanyaan yang jawabannya lebih tepat digabung. Koreksi susunan isi dahulu agar pengujian berikutnya menilai kumpulan pertanyaan yang sudah mempunyai tujuan jelas bagi pembaca.
Langkah 5: tentukan keadaan awal dan periksa pratinjau
Pilih satu blok dan lihat pengaturan Open by default atau terjemahannya. Bila diaktifkan, isi tampil terbuka pada keadaan awal. Tentukan keadaan yang dibutuhkan, lalu terapkan secara sengaja pada setiap pertanyaan. Untuk latihan awal, gunakan ketiganya tertutup agar perbandingan mudah dilakukan. Simpan draf dan buka pratinjau, kemudian cocokkan keadaan yang terlihat dengan catatan pengaturan. Jangan menyimpulkan keadaan awal dari blok yang kebetulan sedang Anda buka ketika menyunting di editor.
Klik ringkasan pertama untuk membuka jawaban, lalu klik lagi untuk menutup. Ulangi pada pertanyaan lain dan periksa apakah isi yang muncul memang jawaban milik pertanyaan tersebut. Buka dua pertanyaan untuk memastikan perilaku independen yang Anda rencanakan. Jika satu menutup yang lain, tinjau pengelompokan atau komponen yang digunakan bersama pengelola. Catat hasil secara spesifik, termasuk pertanyaan mana yang berbeda, sehingga pemeriksaan tidak berhenti pada kesan bahwa seluruh halaman sudah tampak interaktif.
Langkah 6: uji keyboard, keterbacaan, dan hasil setelah koreksi
Pada pratinjau, gunakan Tab untuk menuju ringkasan dan pastikan posisi fokus dapat dikenali. Saat ringkasan terfokus, coba tombol Spasi untuk membuka dan menutup isi, sebagaimana perilaku yang dijelaskan MDN untuk details. Lanjutkan ke pertanyaan berikutnya. Periksa apakah teks ringkasan dan jawaban tetap terbaca setelah bagian dibuka. Jika memakai ponsel, coba kontrol yang sama melalui sentuhan dan pastikan isi tidak tertutup elemen lain pada halaman ketika jawaban panjang ditampilkan.
Bandingkan seluruh jawaban dengan acuan yang disetujui. Jika ada koreksi isi atau tampilan, simpan perubahan draf, buka kembali pratinjau, dan ulangi kasus yang bermasalah serta satu pertanyaan lain sebagai pembanding. Tandai selesai hanya untuk contoh yang sudah diperiksa: pertanyaan jelas, jawaban sesuai, keadaan awal benar, dan buka tutup dapat digunakan. Langkah tersebut adalah prosedur untuk pembaca, bukan laporan bahwa website tertentu telah diuji atau bahwa seluruh kebutuhan aksesibilitas website otomatis terpenuhi.
Kesalahan umum dan pemeliharaan jawaban FAQ
Kesalahan umum mencakup menulis jawaban di luar blok, memakai ringkasan yang tidak menggambarkan isinya, mengandalkan tampilan editor tanpa pratinjau, dan melupakan perilaku pengelompokan. Hindari pula mengisi FAQ dengan pertanyaan buatan yang tidak membantu keputusan pembaca. Pilih sedikit jawaban yang berguna, lalu tambah berdasarkan kebutuhan yang telah dipastikan. Tentukan pemeriksa materi dan waktu peninjauan setelah kebijakan layanan berubah agar tampilan yang rapi tidak menyembunyikan informasi yang sudah tidak berlaku.
Kenali layanan melalui https://www.jagoweb.com/ dan informasi hosting WordPress di https://www.jagoweb.com/hosting-wordpress. Konfirmasikan kebutuhan instalasi serta editor yang digunakan ketika berdiskusi dengan pengelola. Tutorial ini tidak mengasumsikan semua versi atau paket mempunyai tampilan blok identik. Simpan catatan pertanyaan, acuan jawaban, serta hasil uji draf sebagai dasar peninjauan. Dengan cara itu, FAQ mempunyai fungsi yang jelas dalam penjelasan layanan dan tetap dapat dirawat ketika isi bisnis berkembang.
Bacaan terkait
Sumber dan referensi
