Pernah liat FAQ yang bisa disembunyikan seperti ini?
Saya pikir cara membuatnya selalu menggunakan plugin. Ternyata cukup dengan menggunakan blok yang sudah ada di WordPress. Nama bloknya: Details.
Blok Details di WordPress
Bagaimana cara menambahkan sejenis FAQ tanpa plugin di WordPress?
Caranya mudah sekali, seperti halnya dengan semua blok di wordpress kita bisa panggil dengan mengetik garis miring dan mengetik namanya.
Apa yang harus ditulis di bagian Summary?
Bagian summary adalah bagian yang akan terbaca, sedangkan bagian yang disembunyikan kita masukkan di bagian yang disebutkan sebagai hidden block.
Apa saja yang bisa ditulis di bagian hidden block?
Di dalam hidden block tersebut kita bisa menambahkan blok-blok WordPress lainnya. Baik itu paragraf, gambar, video, heading, list, maupun penomoran.
Hampir semua blok yang tersedia di WordPress bisa kita masukkan ke dalam bagian hidden block dan hanya akan terbaca ketika blok detailsnya dibuka.
Bisa tidak kalau penjelasannya otomatis terbuka?
Bisa saja, caranya di bagian properti blok details kita set settingnya untuk selalu open by default.
Pada halaman ini saya membuat contohnya pertanyaan pertama akan selalu langsung terbuka.
Kegunaan blok details selain untuk FAQ
Blok details ini bukan dikhususkan untuk FAQ, tetapi untuk membuat halaman bisa terlihat lebih ringkas ketika ada penjelasan yang banyak di dalamnya. Jadi intinya sih bisa dipakai ketika kita ingin menampilkan bagian yang lebih ringkas dari tulisan kita yang panjang supaya pembaca tidak langsung merasa lelah duluan.
Saya menggunakan blok details untuk menampilkan arsip blog yang sudah sangat banyak artikelnya berdasarkan kategori. Tentu saja saya mengisi bagian hidden block nya dengan memanggil shortcode dari display-posts.
Contohnya bisa dilihat di blog saya Risna.info dan juga DrakorClass.
FAQ menggunakan Blok Details + CSS di WordPress
Karena kurang puas dengan tampilan segitiga kecil dari blok details untuk melihat bagiana yang disembunyikan, saya akhirnya mencoba-coba menambahkan CSS ke blok ini. Hasilnya bisa dilihat di FAQ Geneus DNA Indonesia.
Ada yang ingin tahu bagaimana menambahkan CSS di WordPress untuk membuat FAQ seperti yang saya buat?
Kalau ada waktu, di tulisan berikutnya saya akan tuliskan cara membuatnya.
2 responses to “Membuat FAQ tanpa plugin di WordPress”
[…] sudah menuliskan Membuat FAQ dengan blok Details di WordPress. Tulisan kali ini saya mencoba membuat FAQ masih tanpa plugin dengan menggunakan CSS dan Java […]
[…] Java Script. Kalau HTML, dulu pernah belajar dan masih ada yang diingat sedikit. Dari mencari bikin FAQ style accordion tanpa plugin, saya menemukan ternyata ada beberapa cara yang bisa dilakukan. Ada yang menggunakan CSS saja, ada […]