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.
Que faut-il pour créer un système de FAQ ?
Commençons par créer 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.
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.
[faq]
ShortcodeVient 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 :
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.
É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' ); ?>
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...
posts_per_page
参数来限制帖子数量自定义短代码的查询,并使用 wp_reset_postdata();
代码在行下方添加分页链接所需的代码。请记住删除 'no_found_rows' => true,
, mais sans la supprimer, la pagination ne fonctionnera pas ! posts_per_page
参数从 -1
更改为 1
并添加另一行代码 'orderby' => 'random',
et vous êtes prêt à partir ! 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!