Une section « Foire aux questions » est un excellent outil pour donner à vos clients la bonne réponse à leurs questions. Cela devient très populaire. Mais très souvent des FAQ sont intégrées au thème premium, mais qu’en est-il des thèmes gratuits ? Voici un tutoriel pour créer un plugin FAQ simple qui fonctionnera avec n’importe quel thème. Ce didacticiel ne couvrira que les étapes de base afin que vous puissiez ensuite personnaliser la section FAQ et vous l’approprier !
Étape 1 : Créer le plugin
Pour commencer, créez un nouveau dossier dans votre dossier « wp-content/plugins » appelé « rc-faq ». Créez ensuite un nouveau fichier dans ce dossier appelé « rc-faq.php » et placez ce code :
<?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
*/Étape 2 : Enregistrez le type de publication personnalisé FAQ
Nous devons maintenant enregistrer un type de publication personnalisé. Si vous n’êtes pas familier avec cette partie, vous pouvez consulter le Manuscrit.
/*
* 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');
Veuillez noter l’utilisation du appliquer_filtres() fonction. Cela vous permet de modifier le support et les arguments sans modifier le plugin lui-même.
Étape 3 : créer un shortcode pour afficher les FAQ
Cette étape est celle où nous allons créer un shortcode simple avec un seul paramètre qui montrera la FAQ à votre visiteur. L’idée est de lister uniquement le titre de la FAQ et d’afficher les réponses uniquement lorsque l’on clique sur le titre.
Le shortcode aura un paramètre « limite » unique qui définit le nombre d’éléments à afficher. Bien sûr, vous pouvez ajouter vos propres attributs : trier, trier par, etc…
En outre, ce shortcode contient un extrait de code javascript inclus directement dans le shortcode lui-même afin que le javascript ne se charge que lorsque vous êtes sur la page contenant le shortcode.
Enfin nous masquons par défaut le contenu de la FAQ et ne l’affichons que lorsque l’on clique sur son titre.
/*
* 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" ); ?>Et c’est tout !
Le résultat final
Voici le résultat final dans l’administration :
Et du côté des visiteurs :
C’est simple mais ça marche et tu peux le personnaliser comme tu veux ! J’espère que vous avez apprécié ce tutoriel, j’aimerais avoir vos commentaires dans la section commentaires!
