Cara Membuat Plugin FAQ WordPress Sederhana

Bagian “Pertanyaan yang Sering Diajukan” adalah alat yang hebat untuk memberikan jawaban yang tepat kepada pelanggan Anda atas pertanyaan mereka. Hal ini menjadi sangat populer. Namun seringkali FAQ terintegrasi dalam tema premium, tetapi bagaimana dengan tema gratis? Berikut adalah tutorial untuk membuat plugin FAQ sederhana yang dapat digunakan dengan tema apa pun. Tutorial ini hanya akan mencakup langkah-langkah dasar sehingga Anda dapat menyesuaikan bagian FAQ dan menjadikannya milik Anda sendiri!

Langkah 1: Buat Plugin

Untuk memulai, buat folder baru di folder “wp-content/plugins” bernama “rc-faq”. Kemudian buat file baru di dalam folder ini bernama “rc-faq.php” dan tempatkan kode ini:

<?php
/*
Plugin Name: RC Faq
Plugin URL: http://remicorson.com/rc-faq
Description: A simple FAQ plugin
Version: 1.0
Author: Remi Corson
Author URI: http://remicorson.com
Contributors: corsonr
*/

Langkah 2: Daftarkan Jenis Posting Kustom FAQ

Kita sekarang perlu mendaftarkan jenis posting khusus. Jika Anda belum familiar dengan bagian ini, Anda dapat melihat Codex.

/*
 * Register CPT rc_faq
 *
 */
function rc_faq_setup_post_types() {

	$faq_labels =  apply_filters( 'rc_faq_labels', array(
		'name'                => 'FAQs',
		'singular_name'       => 'FAQ',
		'add_new'             => __('Add New', 'rc_faq'),
		'add_new_item'        => __('Add New FAQ', 'rc_faq'),
		'edit_item'           => __('Edit FAQ', 'rc_faq'),
		'new_item'            => __('New FAQ', 'rc_faq'),
		'all_items'           => __('All FAQs', 'rc_faq'),
		'view_item'           => __('View FAQ', 'rc_faq'),
		'search_items'        => __('Search FAQs', 'rc_faq'),
		'not_found'           => __('No FAQs found', 'rc_faq'),
		'not_found_in_trash'  => __('No FAQs found in Trash', 'rc_faq'),
		'parent_item_colon'   => '',
		'menu_name'           => __('FAQs', 'rc_faq'),
		'exclude_from_search' => true
	) );


	$faq_args = array(
		'labels' 			=> $faq_labels,
		'public' 			=> true,
		'publicly_queryable'=> true,
		'show_ui' 			=> true,
		'show_in_menu' 		=> true,
		'query_var' 		=> true,
		'capability_type' 	=> 'post',
		'has_archive' 		=> false,
		'hierarchical' 		=> false,
		'supports' 			=> apply_filters('rc_faq_supports', array( 'title', 'editor' ) ),
	);
	register_post_type( 'rc_faq', apply_filters( 'rc_faq_post_type_args', $faq_args ) );

}

add_action('init', 'rc_faq_setup_post_types');

Harap perhatikan penggunaan fungsi apply_filters(). Hal ini memungkinkan Anda untuk mengubah dukungan dan argumen tanpa mengubah plugin itu sendiri.

Langkah 3: Buat Kode Pendek Untuk Menampilkan FAQ

Langkah ini adalah dimana kita akan membuat shortcode sederhana dengan hanya satu parameter yang akan menampilkan FAQ kepada pengunjung Anda. Idenya adalah untuk hanya mencantumkan judul FAQ dan menampilkan jawaban hanya ketika judul tersebut diklik.

Kode pendek akan memiliki parameter “batas” unik yang menentukan jumlah item yang akan ditampilkan. Tentu saja Anda dapat menambahkan atribut tambahan Anda sendiri: pesan, pesan berdasarkan, dll…

Selain itu, kode pendek ini berisi cuplikan javascript yang disertakan langsung di dalam kode pendek itu sendiri sehingga javascript hanya dimuat saat Anda berada di halaman yang memiliki kode pendek tersebut.

Terakhir, kami menyembunyikan konten FAQ secara default dan menampilkannya hanya ketika judulnya diklik.

/*
 * Add [rc_faq limit="-1"] shortcode
 *
 */
function rc_faq_shortcode( $atts, $content = null ) {
	
	extract(shortcode_atts(array(
		"limit" => ''
	), $atts ) );
	
	// Define limit
	if ( $limit ) { 
		$posts_per_page = $limit; 
	} else {
		$posts_per_page = '-1';
	}
	
	ob_start();

	// Create the Query
	$post_type = 'rc_faq';
	$orderby   = 'menu_order';
	$order     = 'ASC';
				
	$query = new WP_Query( array ( 
		'post_type'      => $post_type,
		'posts_per_page' => $posts_per_page,
		'orderby'        => $orderby, 
		'order'          => $order,
		'no_found_rows'  => 1
	) );
	
	//Get post type count
	$post_count = $query->post_count;
	$i = 1;
	
	// Displays FAQ info
	if ( $post_count > 0) :
	
		// Loop
		while ($query->have_posts()) : $query->the_post(); ?>
		
		<h3 class="rc_faq_title"><a href="#" onclick="rc_faq_toggle('rc_faq_<?php echo get_the_ID(); ?>');"><?php the_title(); ?></a></h3>
		<p id="rc_faq_<?php echo get_the_ID(); ?>" style="display: none;"><?php echo get_the_content(); ?></p>

		<?php
		$i++;
		endwhile;
		
	endif;
	
	// Reset query to prevent conflicts
	wp_reset_query(); ?>

	<script type="text/javascript">
	<!--
		function rc_faq_toggle(id) {
			var e = document.getElementById(id);
			e.style.display = ((e.style.display!='none') ? 'none' : 'block');
		}
	//-->
	</script>
	
	<?php
	return ob_get_clean();

}

add_shortcode( "rc_faq", "rc_faq_shortcode" ); ?>

Dan itu saja!

Hasil akhir

Berikut hasil akhir administrasinya:

Dan di pihak pengunjung:

Itu sederhana tetapi berhasil dan Anda dapat menyesuaikannya sesuai keinginan! Saya harap Anda menikmati tutorial ini, saya ingin mendapatkan tanggapan Anda di bagian komentar!