Advertisement
  1. Code
  2. WordPress

Cara Membuat Halaman FAQ dengan WordPress dan Jenis Posting Kustom

by
Length:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Di dunia web, halaman FAQ dibuat khusus untuk pemirsa/pelanggan, dan berisi pertanyaan umum dan jawaban masing-masing tentang produk atau layanan tertentu. Tutorial ini merinci proses pembuatan bagian FAQ khusus di backend WordPress dengan jenis posting kustom, serta bagaimana membumbui halaman sebenarnya sedikit dengan menggunakan jQuery dan CSS.

Untuk mencapai tujuan kita, kita memerlukan jenis posting WordPress FAQ kustom khusus. Dengan begitu, kita bisa menggunakan judul dan isi posting ini untuk menampilkan FAQ dengan cara yang inovatif dan mudah digunakan.


Langkah 1: Menginstal WordPress

Untuk mulai membuat halaman FAQ, tentu saja, kita harus menginstal WordPress di localhost kita terlebih dulu. Instalasi WordPress adalah sangat mudah; namun, jika Anda baru mengenal hal ini, berikut adalah panduan yang menjelaskan prosesnya.

Template TwentyTen adalah tema default yang dikirimkan bersama WordPress.

Setelah WordPress siap untuk pergi, kita selanjutnya harus membuat tema kustom kita, yang akan menerapkan fungsionalitas FAQ. Ada berbagai metode untuk membuat tema kustom. Beberapa memilih untuk membuat template putih kosong baru, sementara yang lain suka membuat tema anak dari template TwentyTen yang baru. Saya telah menggunakan tema Starker, oleh Elliot Jay Stocks untuk waktu yang lama sekarang; kami akan menggunakannya untuk membuat tema baru untuk sistem FAQ kita.

Unduh versi terbaru dari tema kosong Starker, dan pindahkan folder ke 'wp-content/themes', yang terletak di dalam folder instalasi WordPress. Juga, pastikan untuk mengganti namanya menjadi FAQ. Selanjutnya, login ke panel administrasi backend WordPress, klik 'appearance/themes'. Anda akan menemukan bahwa tema 'TwentyTen' default diaktifkan, sementara tema baru, 'Starkers', tercantum di bawahnya. Aktifkan tema Starkers.

activate starkers theme

Setelah aktivasi, pratinjau situs untuk memverifikasi bahwa semuanya memang bekerja dengan benar. Jika semua berjalan sesuai rencana, situs akan terlihat seperti gambar berikut:

blank starkers theme

Langkah 2: Menerapkan Posting Kustom FAQ

Untuk menerapkan sistem FAQ, kita akan membuat jenis posting kustom semata-mata untuk tujuan ini. Ini akan memungkinkan kita mengelola semua FAQ di satu tempat, terutama jika basis pertanyaan FAQ meningkat seiring waktu.

Untuk menerapkan posting kustom, edit file functions.php yang berada di folder tema FAQ. Ini akan berisi sedikit kode, jadi jangan takut atau bingung. Gulir ke bawah dan tambahkan yang berikut untuk menambahkan posting kustom baru. Kita mulai dengan membuat pengaitan fungsi kustom ke tindakan inisialisasi (init).

Fungsi kustom ini akan berisi semua metadata untuk posting  kustom, dan juga akan mendaftarkan posting kustom di dalam database WordPress. Sekarang, dalam fungsinya, pertama-tama kita akan menentukan label yang akan digunakan di panel administrasi backend. Dengan label, maksud saya teks yang akan muncul di antarmuka pengguna untuk menambahkan, mengedit, dan mencari FAQ di panel admin.

Setelah kita mendefinisikan labelnya, kita selanjutnya menentukan array argumen untuk metode register_post_type. Argumen ini berisi semua informasi penting yang akan menentukan komponen dari posting FAQ kita. Misalnya, apakah itu memiliki kotak tag; kotak kutipan? Kita mengirimkan array label yang didefinisikan di atas sebagai argumen, juga.

Sekarang setelah argumen didefinisikan, kita dapat mendaftarkan jenis posting kustom menggunakan metode register_post_type. Anda dapat mempelajari lebih lanjut tentang metode ini dengan mengacu pada dokumentasinya di Codex WordPress.

Periksa panel administrasi untuk menentukan apakah posting jenis FAQ telah berhasil ditambahkan. Mudah-mudahan, Anda akan melihat tab FAQ di sidebar.

Custom post added to dashboard

Posting FAQ Dummy

Sekarang lanjutkan dan tambahkan beberapa FAQ demo, karena kita memerlukan beberapa data untuk membuat dan menguji template. Judul setiap posting FAQ harus menjadi pertanyaannya, dan isinya akan menjadi jawabannya.

Adding some demo posts

Langkah 3: Mengodekan Template

Sejauh ini, kita telah membuat posting kustom FAQ, serta memasukkan satu set data sampel. Sekarang, kita akan memberi kode pada template untuk menampilkan FAQ. Logika utama yang saya gunakan untuk mengatur template adalah: gunakan ID unik FAQ untuk menghubungkan pertanyaan ke jawabannya. Oleh karena itu, kita memiliki dua bagian dalam template: bagian pertanyaan, mencantumkan semua judul FAQ; dan bagian jawaban, yang menampilkan isi masing-masing FAQ.

Temukan file header.php, buka saja, hapus div dengan id "access" di bagian bawah, dan juga paragraf yang berisi deskripsi dari blog. Sekarang tambahkan kode berikut.

Setelah kita mengambil data posting FAQ kita, kita harus membingkai arsitekturnya bagaimana pertanyaan akan ditampilkan. Kita akan melakukannya dengan cara berikut. Semua konten dibungkus dalam div dengan id "content".

Bagian yang paling penting di sini adalah di mana kita menetapkan hyperlink dengan nilai '#answer' dan menambahkan id posting ke sana. Kita bisa menggunakan ini untuk melompat ke jawaban, saat diklik.

Setelah kita menampilkan semua pertanyaannya, kita "memundurkan" posting kita untuk kembali ke awal.

Sekarang kita akan menyusun bagaimana jawaban akan muncul, tepat di bawah pertanyaan.

Anda dapat melihat bahwa kita akan mencantumkan konten setiap posting dalam elemen list. Setiap elemen list akan memiliki id "answers" dengan ID posting yang ditambahkan padanya. Ini penting: saat pertanyaan diklik, tampilan meloncat ke isi dari masing-masing posting. Jika Anda mengikuti, pratinjau situs Anda; Anda akan melihat semua posting yang tercantum dalam arsitektur yang dijelaskan di atas.

FAQ displated without any styling

Langkah 4: Menata Template

Menata halaman FAQ tergantung sepenuhnya pada selera Anda; Anda bisa melanjutkan dengan cara apapun yang Anda inginkan. Jika Anda seorang desainer, bebas untuk melompati Langkah 4. Apa yang telah saya lakukan secara pribadi adalah tata letak yang halus dan bersih. Saat pengguna mengklik pertanyaan tersebut, halaman akan dengan lancar menggulir ke bawah ke jawabannya masing-masing dan menyorotinya dengan mengubah warna dan meningkatkan ukuran font. Untuk mencapai hal ini, kita akan memulai dengan menata template dengan CSS. Kita bisa menggunakan CSS3 untuk menambahkan bayangan dan efek transisi juga. Tambahkan CSS berikut ke styles.css.

Setelah menata halaman, kita akan menata FAQ saat ini. Perhatikan bahwa kami juga telah menambahkan tombol 'Top' ke FAQ saat ini. Untuk membuat tombol, kita akan menggunakan beberapa properti CSS3.

Periksa apakah class 'current' bekerja dengan benar dengan menugaskan kelasnya ke salah satu elemen list. FAQ saat ini akan terlihat seperti berikut ini:

Current Class Styling

Langkah 5: Menambahkan Sejumput jQuery UI

Kami akan menggunakan jQuery UI untuk menambahkan beberapa efek ke halaman. Anda bisa mengunduh jQuery UI disini. Kita hanya perlu penggunaan perpustakaan UI secara terbatas, oleh karena itu hanya mengunduh komponen inti UI saja. Kita juga memerlukan plug-in jQuery scrollTo untuk mencapai efek bergulir yang mulus -- meskipun Anda juga dapat dengan mudah mengkodekan fungsi ini sendiri. Meski begitu, untuk menghemat waktu, Anda bisa mengunduh plug-in di sini.

Pertama, kita merujuk jQuery, file UI jQuery UI Core, dan plug-in scrollTo dalam file header.php. Anda bisa melakukan ini dengan menambahkan kode berikut tepat sebelum metode wp_head().

Pernyataan wp_enqueue_script diperlukan untuk memuat jQuery dengan aman.

Untuk mengaktifkan fungsi yang diinginkan, kami mengambil nilai atribut href dari elemen yang diklik (yaitu pertanyaannya). Nilai ini adalah id dari elemen list yang berisi jawabannya. Kemudian, gulir ke elemen list, dan menerapkan class 'current'. jQuery UI akan memastikan bahwa kelas diimplementasikan pada elemen list dengan lancar dan dinamis.

Seperti disebutkan sebelumnya, kami juga memiliki tombol 'Top' yang menggulung halaman kembali ke atas.


Langkah 6: Kesimpulan

Apa yang telah Anda pelajari hari ini hanyalah salah satu cara untuk menerapkan halaman FAQ. WordPress menyediakan kekuatan field kustom, yang dapat digunakan untuk lebih meningkatkan fungsionalitas sistem FAQ. Ketika menambahkan fitur lain ke halaman FAQ kita, kreativitas Anda sendiri adalah satu-satunya batasannya! Jangan ragu untuk membagikan gagasan Anda di komentar!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.