Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Menggunakan WordPress untuk membuat sistem FAQ dengan Custom Post Type

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Arief Syahrir (you can also view the original English article)

Saya baru saja bekerja dengan klien saya, yang bekerja sebagai konsultan profesional di bidangkerjanya. Dia bertanya jika saya bisa menerapkan Q&A sistem, atau halaman FAQ, tepatnya. Aku berkata, "Tentu saja, kita dapat hanya membuat halaman dan paste pertanyaan dan jawaban di sana dengan styling berbeda", tapi dia bilang dia akan membuat halaman yang berbeda dan mengkategorikan pertanyaan dan jawaban, dan untuk menjadi lebih terorganisir, dia membutuhkan pendekatan yang berbeda.

Untuk itu, aku akan menunjukkan kepada Anda bagaimana saya menangani requestnya dengan beberapa baris kode menggunakan custom post type, taksonomi, dan shortcode.

Custom Post Type dan taksonomi

Apa yang kita perlu membangun sistem FAQ?

  • Kami membutuhkan bidang untuk pertanyaan dan jawaban.
  • Kita perlu kategori untuk mengklasifikasikan dan memisahkan jenis-jenis pertanyaan dan jawaban mereka.
  • Dalam kasus kami, kita perlu shortcode untuk embed kelompok pertanyaan ini atau semua pertanyaan di suatu halaman atau post.

Mari kita mulai dengan menciptakan custom post type.

Langkah 1: Membuat Custom Post Type

Tentu saja, kita akan mulai dengan menyiapkan custom post type untuk item FAQ kami. Kita akan membuat custom post type baru dengan bantuan dari fungsi register_post_type(), tetapi jika Anda ingin GUI untuk menciptakan jenis posting Anda, Anda dapat menghasilkan itu dengan GenerateWP's Post Type Generator tool seperti yang saya lakukan dalam contoh ini:

Tip: Jika proyek Anda akan melibatkan lebih banyak custom post type yang dapat lebih kompleks daripada FAQ post type, saya dapat menyarankan alat yang keren yang disebut SuperCPT yang memungkinkan Anda untuk membuat custom post type dengan kode bahkan lebih sederhana. Saya telah menulis tutorial tentang SuperCPT, juga, Anda dapat check it out di sini.

Langkah 2: Membuat taksonomi kustom

Dalam rangka untuk memisahkan jenis-jenis pertanyaan (seperti klien saya pertanyaan dan jawaban tentang keguguran dan depresi pascamelahirkan), kita akan membutuhkan sistem kategori. Seperti banyak dari Anda sudah tahu, WordPress menyediakan fungsi ini dengan taksonomi kustom.

Fungsi penting di sini adalah register_taxonomy() tapi sekali lagi, Anda dapat menggunakan Generatewp Taxonomy Generator Tool jika Anda memerlukan sebuah antarmuka grafis.

Berikut adalah kode:

Hanya itu! Sekarang Anda memiliki FAQ post type dengan taksonomi yang disebut "FAQ Categories" terhubung satu sama lain! Periksa panel administrasi Anda dan Anda akan melihat item menu "FAQ Categories" di bawah "FAQ".

Seperti post kategori biasa, Anda dapat menambahkan, mengedit atau menghapus mereka di halaman "FAQ Categories", atau Anda dapat menambahkan kategori baru saat Anda sedang menulis item FAQ baru.

Langkah 3: Membuat Shortcode [faq]

Inilah menyenangkan bagian: membangun shortcode. (Jika Anda telah membaca posting saya sebelumnya, Anda tahu bahwa saya penggemar berat WordPress shortcode.) Kita pada dasarnya akan membuat item FAQ embeddable ke post dan halaman.

Berikut adalah apa yang akan terjadi:

  • query dalam custom post type kami yang baru,
  • Filter kategori dengan shortcode parameter,
  • Menampilkan pertanyaan dan jawaban sebagai judul dan isi,
  • menunjukkan kutipan dari jawaban dengan "More..." link, dikontrol oleh parameter shortcode lain.

Mari kita mulai membangun shortcode. Seperti kode di atas, saya akan menyertakan beberapa komentar yang membantu:

Hanya itu! Sekarang kita memiliki shortcode rapi untuk menanamkan pertanyaan dan jawaban. Anda dapat menambah style dengan class nama tuts-faq, tuts-faq-item, tuts-faq-item-title dan tuts-faq-item-content. Meskipun, itu harus baik-baik saja bahkan jika Anda tidak menyertakan tambahan styling.

Langkah 4: Membungkus kode

Karena potongan kode ini tidak hanya tentang styling front-end tetapi juga memperkenalkan fungsi baru, itu dianggap sebagai plugin territory. Itu sebabnya kita harus menyimpan kode sebagai plugin. Dan sementara kita berada di itu, kita juga harus flish menulis ulang aturan berdasarkan aktivasi dan deaktivasi.

Berikut adalah kode lengkapnya:

Ruang untuk perbaikan

Klien saya sangat puas dengan hasil ketika saya menunjukkan padanya bagaimana menggunakannya. Tapi di sini, kita dapat memperluas kode dengan fungsionalitas yang lebih, seperti...

  1. Akordeon efek: Jika Anda ingin membuat bagian FAQ Anda lebih menarik dengan beberapa toggle efek, Anda dapat menggunakan beberapa plugin jQuery yang keren. Jika Anda ingin menggunakan jQuery UI, ada tutorial yang menakjubkan oleh Shane Osbourne yang menunjukkan bagaimana melakukannya.
  2. Pagination: Jika Anda memiliki banyak pertanyaan dan jawaban untuk kategori dan tidak ingin menampilkan semua item sekaligus, Anda dapat membatasi jumlah post dengan mengubah parameter posts_per_page dalam kustom kueri shortcode kami, dan menambahkan kode yang dibutuhkan untuk pagination link di bawah baris dengan wp_reset_postdata(); kode. Ingatlah untuk menghapus 'no_found_rows' => true, baris, meskipun - pagination tidak akan bekerja jika Anda tidak menghapusnya!
  3. Random pertanyaan: Katakanlah Anda ingin menampilkan satu random pertanyaan dan jawaban di situs dan Anda ingin mengubah setiap refresh halaman. Semua yang perlu Anda lakukan adalah ke query kustom, mengubah posts_per_page parameter dari -1 ke 1 dan menambahkan baris lain dengan kode 'orderby' => 'random', dan Anda baik untuk pergi!

Kesimpulan

Ini adalah bagaimana Anda membangun sistem FAQ sederhana di WordPress melalui penggunaan custom post type, kustom taksonomi, dan shortcode. Saya harap Anda menikmati tutorial ini dan Anda dapat menggunakannya dalam proyek berikutnya. Jangan lupa untuk berbagi artikel, jika Anda menyukainya!

Apakah Anda memiliki ide untuk meningkatkan sistem FAQ ini? Bagi komentar Anda di bawah ini!

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.