Una sección de «Preguntas frecuentes» es una gran herramienta para dar a sus clientes la respuesta correcta a sus preguntas. Eso se está volviendo muy popular. Pero muy a menudo las preguntas frecuentes están integradas en un tema premium, pero ¿qué pasa con los temas gratuitos? Aquí hay un tutorial para crear un complemento de preguntas frecuentes simple que funcionará con cualquier tema. ¡Este tutorial cubrirá solo los pasos básicos para que luego pueda personalizar la sección de preguntas frecuentes y personalizarla!
Paso 1: crea el complemento
Para comenzar, cree una nueva carpeta en su carpeta «wp-content / plugins» llamada «rc-faq». Luego cree un nuevo archivo dentro de esta carpeta llamado «rc-faq.php» y coloque este código:
<?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
*/
Paso 2: Registre el tipo de publicación personalizada de preguntas frecuentes
Ahora necesitamos registrar un tipo de publicación personalizada. Si no está familiarizado con esta parte, puede echar un vistazo a la Códice.
/*
* 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');
Tenga en cuenta el uso de aplicar_filtros () función. Esto le permite modificar el soporte y los argumentos sin modificar el complemento en sí.
Paso 3: cree un código corto para mostrar las preguntas frecuentes
En este paso es donde vamos a crear un código abreviado simple con un solo parámetro que mostrará las preguntas frecuentes a su visitante. La idea es enumerar solo el título de las preguntas frecuentes y mostrar las respuestas solo cuando se hace clic en el título.
El shortcode tendrá un parámetro de «límite» único que define la cantidad de elementos que se mostrarán. Por supuesto, puede agregar sus propios atributos: ordenar, ordenar por, etc.
Además, este shortcode contiene un fragmento de JavaScript incluido directamente dentro del shortcode en sí, de modo que el javascript solo se carga cuando estás en la página que tiene el shortcode.
Finalmente, ocultamos por defecto el contenido de las preguntas frecuentes y lo mostramos solo cuando se hace clic en su título.
/*
* 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" ); ?>
Y eso es !
El resultado final
Aquí está el resultado final en la administración:
Y del lado de los visitantes:
¡Es simple pero funciona y puedes personalizarlo como quieras! Espero que hayas disfrutado de este tutorial, ¡me encantaría recibir tus comentarios en la sección de comentarios!