É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:
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!
