Cara Membuat Pemalam Soalan Lazim WordPress Mudah

Bahagian "Soalan Lazim" ialah alat yang hebat untuk memberi pelanggan anda jawapan yang betul kepada soalan mereka. Itu menjadi sangat popular. Tetapi selalunya Soalan Lazim disepadukan dalam tema premium, tetapi bagaimana pula dengan tema percuma? Berikut ialah tutorial untuk mencipta pemalam FAQ mudah yang akan berfungsi dengan mana-mana tema. Tutorial ini akan merangkumi hanya langkah asas supaya anda boleh menyesuaikan bahagian Soalan Lazim dan menjadikannya milik anda sendiri!

Langkah 1: Cipta Plugin

Untuk memulakan, buat folder baharu dalam folder "wp-content/plugins" anda yang dipanggil "rc-faq". Kemudian buat fail baharu dalam folder ini yang dipanggil "rc-faq.php" dan letakkan kod 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: Daftar Soalan Lazim Jenis Catatan Tersuai

Kami kini perlu mendaftarkan jenis siaran tersuai. Jika anda tidak biasa dengan bahagian ini, anda boleh melihat ke 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');

Sila ambil perhatian penggunaan fungsi apply_filters(). Ini membolehkan anda mengubah suai sokongan dan hujah tanpa mengubah suai pemalam itu sendiri.

Langkah 3: Cipta Kod Pendek Untuk Memaparkan Soalan Lazim

Langkah ini ialah di mana kami akan mencipta kod pendek ringkas dengan hanya satu parameter yang akan menunjukkan Soalan Lazim kepada pelawat anda. Ideanya adalah untuk menyenaraikan tajuk Soalan Lazim sahaja dan memaparkan jawapan hanya apabila tajuk itu diklik.

Kod pendek akan mempunyai parameter "had" unik yang mentakrifkan bilangan item untuk ditunjukkan. Sudah tentu anda boleh menambah atribut anda sendiri: order, order by, etc...

Selain itu, kod pendek ini mengandungi coretan javascript yang disertakan terus dalam kod pendek itu sendiri supaya javascript hanya dimuatkan apabila anda berada di halaman yang mempunyai kod pendek.

Akhirnya kami menyembunyikan secara lalai kandungan FAQ dan memaparkannya hanya apabila tajuknya 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 sahaja!

Keputusan Akhir

Berikut adalah keputusan akhir dalam pentadbiran:

Dan di sisi pelawat:

Itu mudah tetapi ia berfungsi dan anda boleh menyesuaikannya seperti yang anda mahu! Saya harap anda menikmati tutorial ini, saya ingin mendapatkan maklum balas anda di bahagian komen!