Créez un système de FAQ personnalisé avec WordPress en utilisant des types de publication personnalisés

J'ai récemment travaillé avec une de mes clientes qui travaille comme consultante professionnelle dans son domaine de travail. Elle m'a demandé si je pouvais mettre en place un système de questions-réponses, une page FAQ pour être exact. J'ai dit : « Bien sûr, nous pourrions créer une page et coller les questions et réponses dans différents styles », mais elle a dit qu'elle créerait différentes pages et catégoriserait les questions et réponses, et que pour être plus organisée, elle avait besoin d'une méthode différente.

Pour ce faire, je vais vous montrer comment gérer sa demande avec quelques lignes de code simples utilisant des types de publication personnalisés, des taxonomies et des codes courts.

Types et catégories de publications personnalisées

Que faut-il pour créer un système de FAQ ?

• Nous avons besoin de champs pour les questions et réponses.
• Nous avons besoin de catégories pour classer et distinguer différents types de questions et leurs réponses.
• Dans notre cas, nous avons besoin d'un shortcode pour intégrer ces groupes de questions ou toutes les questions dans une page ou une publication.

Commençons par créer un type de publication personnalisé.

Étape 1 : Créez un type de publication personnalisé

Bien sûr, nous commencerons par configurer un type de publication personnalisé pour notre projet FAQ. Nous allons créer un nouveau type de publication personnalisé à l'aide de la fonction register_post_type(), mais si vous souhaitez une interface graphique pour créer des types de publication, vous pouvez le générer à l'aide de l'outil générateur de type de publication de GenerateWP, comme je l'ai fait dans cet exemple :

<?php

if ( ! function_exists( 'tuts_faq_cpt' ) ) {

// register custom post type
	function tuts_faq_cpt() {

		// these are the labels in the admin interface, edit them as you like
		$labels = array(
			'name'                => _x( 'FAQs', 'Post Type General Name', 'tuts_faq' ),
			'singular_name'       => _x( 'FAQ', 'Post Type Singular Name', 'tuts_faq' ),
			'menu_name'           => __( 'FAQ', 'tuts_faq' ),
			'parent_item_colon'   => __( 'Parent Item:', 'tuts_faq' ),
			'all_items'           => __( 'All Items', 'tuts_faq' ),
			'view_item'           => __( 'View Item', 'tuts_faq' ),
			'add_new_item'        => __( 'Add New FAQ Item', 'tuts_faq' ),
			'add_new'             => __( 'Add New', 'tuts_faq' ),
			'edit_item'           => __( 'Edit Item', 'tuts_faq' ),
			'update_item'         => __( 'Update Item', 'tuts_faq' ),
			'search_items'        => __( 'Search Item', 'tuts_faq' ),
			'not_found'           => __( 'Not found', 'tuts_faq' ),
			'not_found_in_trash'  => __( 'Not found in Trash', 'tuts_faq' ),
		);
		$args = array(
			// use the labels above
			'labels'              => $labels,
			// we'll only need the title, the Visual editor and the excerpt fields for our post type
			'supports'            => array( 'title', 'editor', 'excerpt', ),
			// we're going to create this taxonomy in the next section, but we need to link our post type to it now
			'taxonomies'          => array( 'tuts_faq_tax' ),
			// make it public so we can see it in the admin panel and show it in the front-end
			'public'              => true,
			// show the menu item under the Pages item
			'menu_position'       => 20,
			// show archives, if you don't need the shortcode
			'has_archive'         => true,
		);
		register_post_type( 'tuts_faq', $args );

	}

	// hook into the 'init' action
	add_action( 'init', 'tuts_faq_cpt', 0 );

}

?>

Astuce : Si votre projet implique des types de publication plus personnalisés qui peuvent être plus complexes que ce simple type de publication FAQ, je peux vous recommander un outil intéressant appelé SuperCPT qui vous permet de créer de nouveaux types de publications ont un code plus simple. J'ai également écrit un tutoriel sur SuperCPT, que vous pouvez consulter ici.

Étape 2 : Créez des catégories personnalisées

Pour différencier les différents types de questions (telles que les questions et réponses de mes clients sur les fausses couches et la dépression post-partum), nous avons besoin d'un système de catégories. Comme beaucoup d’entre vous le savent déjà, WordPress fournit cette fonctionnalité via des taxonomies personnalisées.

La fonction de base ici est register_taxonomy() Mais encore une fois, si vous souhaitez une interface graphique, vous pouvez utiliser l'outil générateur de taxonomie de GenerateWP.

Le code est le suivant :

<?php

if ( ! function_exists( 'tuts_faq_tax' ) ) {

	// register custom taxonomy
	function tuts_faq_tax() {

		// again, labels for the admin panel
		$labels = array(
			'name'                       => _x( 'FAQ Categories', 'Taxonomy General Name', 'tuts_faq' ),
			'singular_name'              => _x( 'FAQ Category', 'Taxonomy Singular Name', 'tuts_faq' ),
			'menu_name'                  => __( 'FAQ Categories', 'tuts_faq' ),
			'all_items'                  => __( 'All FAQ Cats', 'tuts_faq' ),
			'parent_item'                => __( 'Parent FAQ Cat', 'tuts_faq' ),
			'parent_item_colon'          => __( 'Parent FAQ Cat:', 'tuts_faq' ),
			'new_item_name'              => __( 'New FAQ Cat', 'tuts_faq' ),
			'add_new_item'               => __( 'Add New FAQ Cat', 'tuts_faq' ),
			'edit_item'                  => __( 'Edit FAQ Cat', 'tuts_faq' ),
			'update_item'                => __( 'Update FAQ Cat', 'tuts_faq' ),
			'separate_items_with_commas' => __( 'Separate items with commas', 'tuts_faq' ),
			'search_items'               => __( 'Search Items', 'tuts_faq' ),
			'add_or_remove_items'        => __( 'Add or remove items', 'tuts_faq' ),
			'choose_from_most_used'      => __( 'Choose from the most used items', 'tuts_faq' ),
			'not_found'                  => __( 'Not Found', 'tuts_faq' ),
		);
		$args = array(
			// use the labels above
			'labels'                     => $labels,
			// taxonomy should be hierarchial so we can display it like a category section
			'hierarchical'               => true,
			// again, make the taxonomy public (like the post type)
			'public'                     => true,
		);
		// the contents of the array below specifies which post types should the taxonomy be linked to
		register_taxonomy( 'tuts_faq_tax', array( 'tuts_faq' ), $args );

	}

	// hook into the 'init' action
	add_action( 'init', 'tuts_faq_tax', 0 );

}

?>

C'est tout ! Vous disposez désormais d'un type de publication FAQ avec des taxonomies appelées « Catégories FAQ » qui sont liées les unes aux autres ! Vérifiez votre panneau d'administration et vous verrez l'élément de menu « Catégorie FAQ » sous « FAQ ».

Tout comme les catégories de publication habituelles, vous pouvez les ajouter, les modifier ou les supprimer dans la page Catégories de FAQ, ou ajouter de nouvelles catégories lors de la rédaction d'un nouvel élément de FAQ.

Étape 3 : Créer un [faq] Shortcode

Vient maintenant la partie amusante : créer le shortcode. (Si vous avez lu mes articles précédents, vous savez que je suis un grand fan des shortcodes WordPress.) Nous intégrerons essentiellement les éléments de FAQ dans les articles et les pages.

Que se passe-t-il ensuite :

• Requête dans nos nouveaux types de publications personnalisés,
• Filtrez ses catégories à l'aide des paramètres de shortcode,
• Affichez les questions et réponses sous forme de titre et de contenu,
• Afficher l'extrait de réponse via le lien "Plus...", contrôlé par un autre paramètre de shortcode.

Commençons à créer le shortcode. Comme pour le code ci-dessus, j'ajouterai quelques commentaires utiles :

<?php

if ( ! function_exists( 'tuts_faq_shortcode' ) ) {

	function tuts_faq_shortcode( $atts ) {
		extract( shortcode_atts(
				array(
					// category slug attribute - defaults to blank
					'category' => '',
					// full content or excerpt attribute - defaults to full content
					'excerpt' => 'false',
				), $atts )
		);
		
		$output = '';
		
		// set the query arguments
		$query_args = array(
			// show all posts matching this query
			'posts_per_page'	=>	-1,
			// show the 'tuts_faq' custom post type
			'post_type'			=>	'tuts_faq',
			// show the posts matching the slug of the FAQ category specified with the shortcode's attribute
			'tax_query'			=>	array(
				array(
					'taxonomy'	=>	'tuts_faq_tax',
					'field'		=>	'slug',
					'terms'		=>	$category,
				)
			),
			// tell WordPress that it doesn't need to count total rows - this little trick reduces load on the database if you don't need pagination
			'no_found_rows'		=>	true,
		);
		
		// get the posts with our query arguments
		$faq_posts = get_posts( $query_args );
		$output .= '<div class="tuts-faq">';
		
		// handle our custom loop
		foreach ( $faq_posts as $post ) {
			setup_postdata( $post );
			$faq_item_title = get_the_title( $post->ID );
			$faq_item_permalink = get_permalink( $post->ID );
			$faq_item_content = get_the_content();
			if( $excerpt == 'true' )
				$faq_item_content = get_the_excerpt() . '<a href="' . $faq_item_permalink . '">' . __( 'More...', 'tuts_faq' ) . '</a>';
			
			$output .= '<div class="tuts-faq-item">';
			$output .= '<h3 class="tuts-faq-item-title">' . $faq_item_title . '</h3>';
			$output .= '<div class="tuts-faq-item-content">' . $faq_item_content . '</div>';
			$output .= '</div>';
		}
		
		wp_reset_postdata();
		
		$output .= '</div>';
		
		return $output;
	}

	add_shortcode( 'faq', 'tuts_faq_shortcode' );

}

?>

C'est tout ! Nous avons maintenant un shortcode soigné pour intégrer nos questions et réponses. Vous pouvez le styliser en utilisant le nom de la classe tuts-faq、tuts-faq-item、tuts-faq-item-title 和 tuts-faq-item-content. Cependant, cela devrait aller même si vous n'incluez pas les styles supplémentaires.

Étape 4 : Résumez le code

Étant donné que ces codes impliquent non seulement le style front-end mais introduisent également de nouvelles fonctionnalités, ils comptent comme territoire de plugin. C'est pourquoi nous devons enregistrer le code sous forme de plugin. Lorsque nous faisons cela, nous devrions également actualiser les règles de réécriture sur l'activation et la désactivation.

Le code complet est le suivant :

<?php
/*
Plugin Name: Simple FAQ System
Plugin URI: http://code.tutsplus.com/
Description: Helps you create an FAQ section for your WordPress website. Shortcode usage: <code>[faq]</code>
Version: 1.0
Author: Barış Ünver
Author URI: http://hub.tutsplus.com/authors/baris-unver
License: Public Domain
*/

if ( ! function_exists( 'tuts_faq_cpt' ) ) {

// register custom post type
	function tuts_faq_cpt() {

		// these are the labels in the admin interface, edit them as you like
		$labels = array(
			'name'                => _x( 'FAQs', 'Post Type General Name', 'tuts_faq' ),
			'singular_name'       => _x( 'FAQ', 'Post Type Singular Name', 'tuts_faq' ),
			'menu_name'           => __( 'FAQ', 'tuts_faq' ),
			'parent_item_colon'   => __( 'Parent Item:', 'tuts_faq' ),
			'all_items'           => __( 'All Items', 'tuts_faq' ),
			'view_item'           => __( 'View Item', 'tuts_faq' ),
			'add_new_item'        => __( 'Add New FAQ Item', 'tuts_faq' ),
			'add_new'             => __( 'Add New', 'tuts_faq' ),
			'edit_item'           => __( 'Edit Item', 'tuts_faq' ),
			'update_item'         => __( 'Update Item', 'tuts_faq' ),
			'search_items'        => __( 'Search Item', 'tuts_faq' ),
			'not_found'           => __( 'Not found', 'tuts_faq' ),
			'not_found_in_trash'  => __( 'Not found in Trash', 'tuts_faq' ),
		);
		$args = array(
			// use the labels above
			'labels'              => $labels,
			// we'll only need the title, the Visual editor and the excerpt fields for our post type
			'supports'            => array( 'title', 'editor', 'excerpt', ),
			// we're going to create this taxonomy in the next section, but we need to link our post type to it now
			'taxonomies'          => array( 'tuts_faq_tax' ),
			// make it public so we can see it in the admin panel and show it in the front-end
			'public'              => true,
			// show the menu item under the Pages item
			'menu_position'       => 20,
			// show archives, if you don't need the shortcode
			'has_archive'         => true,
		);
		register_post_type( 'tuts_faq', $args );

	}

	// hook into the 'init' action
	add_action( 'init', 'tuts_faq_cpt', 0 );

}

if ( ! function_exists( 'tuts_faq_tax' ) ) {

	// register custom taxonomy
	function tuts_faq_tax() {

		// again, labels for the admin panel
		$labels = array(
			'name'                       => _x( 'FAQ Categories', 'Taxonomy General Name', 'tuts_faq' ),
			'singular_name'              => _x( 'FAQ Category', 'Taxonomy Singular Name', 'tuts_faq' ),
			'menu_name'                  => __( 'FAQ Categories', 'tuts_faq' ),
			'all_items'                  => __( 'All FAQ Cats', 'tuts_faq' ),
			'parent_item'                => __( 'Parent FAQ Cat', 'tuts_faq' ),
			'parent_item_colon'          => __( 'Parent FAQ Cat:', 'tuts_faq' ),
			'new_item_name'              => __( 'New FAQ Cat', 'tuts_faq' ),
			'add_new_item'               => __( 'Add New FAQ Cat', 'tuts_faq' ),
			'edit_item'                  => __( 'Edit FAQ Cat', 'tuts_faq' ),
			'update_item'                => __( 'Update FAQ Cat', 'tuts_faq' ),
			'separate_items_with_commas' => __( 'Separate items with commas', 'tuts_faq' ),
			'search_items'               => __( 'Search Items', 'tuts_faq' ),
			'add_or_remove_items'        => __( 'Add or remove items', 'tuts_faq' ),
			'choose_from_most_used'      => __( 'Choose from the most used items', 'tuts_faq' ),
			'not_found'                  => __( 'Not Found', 'tuts_faq' ),
		);
		$args = array(
			// use the labels above
			'labels'                     => $labels,
			// taxonomy should be hierarchial so we can display it like a category section
			'hierarchical'               => true,
			// again, make the taxonomy public (like the post type)
			'public'                     => true,
		);
		// the contents of the array below specifies which post types should the taxonomy be linked to
		register_taxonomy( 'tuts_faq_tax', array( 'tuts_faq' ), $args );

	}

	// hook into the 'init' action
	add_action( 'init', 'tuts_faq_tax', 0 );

}

if ( ! function_exists( 'tuts_faq_shortcode' ) ) {

	function tuts_faq_shortcode( $atts ) {
		extract( shortcode_atts(
				array(
					// category slug attribute - defaults to blank
					'category' => '',
					// full content or excerpt attribute - defaults to full content
					'excerpt' => 'false',
				), $atts )
		);
		
		$output = '';
		
		// set the query arguments
		$query_args = array(
			// show all posts matching this query
			'posts_per_page'	=>	-1,
			// show the 'tuts_faq' custom post type
			'post_type'			=>	'tuts_faq',
			// show the posts matching the slug of the FAQ category specified with the shortcode's attribute
			'tax_query'			=>	array(
				array(
					'taxonomy'	=>	'tuts_faq_tax',
					'field'		=>	'slug',
					'terms'		=>	$category,
				)
			),
			// tell WordPress that it doesn't need to count total rows - this little trick reduces load on the database if you don't need pagination
			'no_found_rows'		=>	true,
		);
		
		// get the posts with our query arguments
		$faq_posts = get_posts( $query_args );
		$output .= '<div class="tuts-faq">';
		
		// handle our custom loop
		foreach ( $faq_posts as $post ) {
			setup_postdata( $post );
			$faq_item_title = get_the_title( $post->ID );
			$faq_item_permalink = get_permalink( $post->ID );
			$faq_item_content = get_the_content();
			if( $excerpt == 'true' )
				$faq_item_content = get_the_excerpt() . '<a href="' . $faq_item_permalink . '">' . __( 'More...', 'tuts_faq' ) . '</a>';
			
			$output .= '<div class="tuts-faq-item">';
			$output .= '<h2 class="faq-item-title">' . $faq_item_title . '</h2>';
			$output .= '<div class="faq-item-content">' . $faq_item_content . '</div>';
			$output .= '</div>';
		}
		
		wp_reset_postdata();
		
		$output .= '</div>';
		
		return $output;
	}

	add_shortcode( 'faq', 'tuts_faq_shortcode' );

}

function tuts_faq_activate() {
	tuts_faq_cpt();
	flush_rewrite_rules();
}

register_activation_hook( __FILE__, 'tuts_faq_activate' );

function tuts_faq_deactivate() {
	flush_rewrite_rules();
}
register_deactivation_hook( __FILE__, 'tuts_faq_deactivate' );

?>

Possibilité d'amélioration

Quand j'ai montré à ma cliente comment l'utiliser, elle était ravie des résultats. Mais ici, nous pouvons étendre le code avec plus de fonctionnalités comme...

1. Effet Accordéon : Si vous souhaitez rendre votre section FAQ plus attrayante avec des effets de commutation, vous pouvez utiliser d'excellents plugins jQuery. Si vous souhaitez utiliser jQuery UI, Shane Osbourne propose un excellent tutoriel sur la façon de le faire.
2. Pagination : Si vous avez beaucoup de questions et réponses pour une catégorie et que vous ne souhaitez pas afficher tous les éléments d'un coup, vous pouvez le faire en changeant la ligne posts_per_page 参数来限制帖子数量自定义短代码的查询，并使用 wp_reset_postdata(); 代码在行下方添加分页链接所需的代码。请记住删除 'no_found_rows' => true,, mais sans la supprimer, la pagination ne fonctionnera pas !
3. Question aléatoire : disons que vous souhaitez afficher une question et une réponse aléatoires sur votre page d'accueil, et que vous souhaitez qu'elles changent à chaque fois que la page est actualisée. Tout ce que vous avez à faire est de vous rendre sur Requête personnalisée, d'ajouter posts_per_page 参数从 -1 更改为 1 并添加另一行代码 'orderby' => 'random', et vous êtes prêt à partir !

Conclusion

C'est ainsi que vous pouvez créer un système de FAQ simple dans WordPress en utilisant des types de publication personnalisés, des taxonomies personnalisées et des codes courts. J'espère que vous avez apprécié ce tutoriel et que vous pourrez l'utiliser dans votre prochain projet. Si vous avez aimé cet article, n’oubliez pas de le partager !

Avez-vous des idées pour améliorer ce système de FAQ ? Partagez vos commentaires ci-dessous !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!