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, les FAQ sont intégrées dans le 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 la personnaliser!

Étape 1: Créez le plugin

Pour commencer, créez un nouveau dossier dans votre dossier «wp-content / plugins» appelé «rc-faq». Ensuite, créez 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 message personnalisé de la 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 apply_filters () fonction. Cela vous permet de modifier le support et les arguments sans modifier le plugin lui-même.

Étape 3: Créez un shortcode pour afficher les FAQ

Cette étape est l’endroit où nous allons créer un shortcode simple avec un seul paramètre qui montrera la FAQ à votre visiteur. L’idée est de ne lister que le titre de la FAQ et d’afficher les réponses uniquement lorsque le titre est cliqué.

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: ordre, ordre 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’afficherons que lorsque son titre est cliqué.

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

Interface utilisateur du plugin FAQ WordPress

C’est simple mais cela fonctionne et vous pouvez le personnaliser comme vous le souhaitez! J’espère que vous avez apprécié ce tutoriel, j’aimerais avoir vos commentaires dans la section commentaires!

Share: