Ein Abschnitt „Häufig gestellte Fragen“ ist ein großartiges Werkzeug, um Ihren Kunden die richtigen Antworten auf ihre Fragen zu geben. Das wird sehr populär. Aber sehr oft sind FAQs in Premium-Themes integriert, aber was ist mit kostenlosen Themes? Hier ist ein Tutorial zum Erstellen eines einfachen FAQ-Plugins, das mit jedem Thema funktioniert. In diesem Tutorial werden nur grundlegende Schritte behandelt, damit Sie den FAQ-Bereich anpassen und zu Ihrem eigenen machen können!
Schritt 1: Erstellen Sie das Plugin
Erstellen Sie zunächst einen neuen Ordner in Ihrem „wp-content/plugins“-Ordner namens „rc-faq“. Erstellen Sie dann in diesem Ordner eine neue Datei namens „rc-faq.php“ und platzieren Sie diesen 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
*/
Schritt 2: Registrieren Sie den benutzerdefinierten FAQ-Beitragstyp
Wir müssen jetzt einen benutzerdefinierten Beitragstyp registrieren. Wenn Sie mit diesem Teil nicht vertraut sind, können Sie einen Blick auf die Kodex.
/*
* 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');
Bitte beachten Sie die Verwendung der apply_filters() Funktion. Auf diese Weise können Sie Support und Argumente ändern, ohne das Plugin selbst zu ändern.
Schritt 3: Erstellen Sie einen Shortcode, um FAQs anzuzeigen
In diesem Schritt erstellen wir einen einfachen Shortcode mit nur einem Parameter, der Ihrem Besucher die FAQs anzeigt. Die Idee ist, nur FAQ-Titel aufzulisten und Antworten nur anzuzeigen, wenn auf den Titel geklickt wird.
Der Shortcode hat einen eindeutigen „Limit“-Parameter, der die Anzahl der anzuzeigenden Elemente definiert. Natürlich können Sie Ihre eigenen Attribute hinzufügen: order, order by, etc…
Außerdem enthält dieser Shortcode ein Javascript-Snippet, das direkt im Shortcode selbst enthalten ist, sodass das Javascript nur geladen wird, wenn Sie sich auf der Seite mit dem Shortcode befinden.
Schließlich verstecken wir den FAQ-Inhalt standardmäßig und zeigen ihn nur an, wenn auf seinen Titel geklickt wird.
/*
* 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" ); ?>
Und das ist es !
Das Endergebnis
Hier das Endergebnis in der Verwaltung:
Und auf der Besucherseite:
Das ist einfach, aber das funktioniert und Sie können es nach Belieben anpassen! Ich hoffe, Ihnen hat dieses Tutorial gefallen, ich freue mich über Ihr Feedback im Kommentarbereich!