Jak utworzyć prostą wtyczkę FAQ WordPress

Sekcja „Często zadawane pytania” to świetne narzędzie, dzięki któremu Twoi klienci mogą uzyskać właściwą odpowiedź na swoje pytania. To staje się bardzo popularne. Ale bardzo często często zadawane pytania są zintegrowane z motywem premium, ale co z darmowymi motywami? Oto samouczek tworzenia prostej wtyczki FAQ, która będzie działać z dowolnym motywem. Ten samouczek będzie obejmował tylko podstawowe kroki, dzięki czemu będziesz mógł dostosować sekcję FAQ i uczynić ją własną!

Krok 1: Utwórz wtyczkę

Aby rozpocząć, utwórz nowy folder w folderze „wp-content/plugins” o nazwie „rc-faq”. Następnie utwórz nowy plik w tym folderze o nazwie „rc-faq.php” i umieść ten kod:

<?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
*/

Krok 2: Zarejestruj niestandardowy typ postu w często zadawanych pytaniach

Musimy teraz zarejestrować niestandardowy typ postu. Jeśli nie jesteś zaznajomiony z tą częścią, możesz zajrzeć do Kodeksu.

/*
 * 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');

Zwróć uwagę na użycie funkcji Apply_filters(). Pozwala to modyfikować obsługę i argumenty bez modyfikowania samej wtyczki.

Krok 3: Utwórz krótki kod, aby wyświetlić często zadawane pytania

Na tym etapie utworzymy prosty krótki kod z tylko jednym parametrem, który wyświetli najczęściej zadawane pytania odwiedzającemu. Pomysł jest taki, aby wyświetlić tylko tytuły najczęściej zadawanych pytań i wyświetlić odpowiedzi dopiero po kliknięciu tytułu.

Krótki kod będzie miał unikalny parametr „limit”, który określa liczbę wyświetlanych elementów. Oczywiście możesz dodać własne atrybuty: zamówienie, zamówienie według itp.

Ponadto ten krótki kod zawiera fragment kodu JavaScript zawarty bezpośrednio w samym krótkim kodzie, dzięki czemu JavaScript ładuje się tylko wtedy, gdy jesteś na stronie zawierającej krótki kod.

Na koniec domyślnie ukrywamy treść FAQ i wyświetlamy ją dopiero po kliknięciu jej tytułu.

/*
 * 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" ); ?>

I to wszystko !

Wynik końcowy

Oto końcowy wynik w administracji:

A po stronie gości:

To proste, ale działa i możesz je dostosować, jak chcesz! Mam nadzieję, że podobał Ci się ten samouczek. Chętnie poznam Twoją opinię w sekcji komentarzy!