Erstellen Sie mit WordPress ein benutzerdefiniertes FAQ-System mit benutzerdefinierten Beitragstypen

Ich habe kürzlich mit einer meiner Kundinnen zusammengearbeitet, die als professionelle Beraterin in ihrem Arbeitsbereich tätig ist. Sie fragte mich, ob ich ein Q&A-System implementieren könnte, genauer gesagt eine FAQ-Seite. Ich sagte: „Klar, wir könnten eine Seite erstellen und die Fragen und Antworten in verschiedenen Stilen einfügen“, aber sie sagte, sie würde verschiedene Seiten erstellen und die Fragen und Antworten kategorisieren, und um besser organisiert zu sein, bräuchte sie eine andere Methode.

Dazu zeige ich Ihnen, wie Sie ihre Anfrage mit ein paar einfachen Codezeilen bearbeiten und dabei benutzerdefinierte Beitragstypen, Taxonomien und Shortcodes verwenden.

Benutzerdefinierte Beitragstypen und -kategorien

Was wird zum Aufbau eines FAQ-Systems benötigt?

• Wir brauchen Felder für Fragen und Antworten.
• Wir benötigen Kategorien, um verschiedene Arten von Fragen und deren Antworten zu klassifizieren und zu unterscheiden.
• In unserem Fall benötigen wir einen Shortcode, um diese Fragengruppen oder alle Fragen in eine Seite oder einen Beitrag einzubetten.

Beginnen wir mit der Erstellung eines benutzerdefinierten Beitragstyps.

Schritt 1: Erstellen Sie einen benutzerdefinierten Beitragstyp

Natürlich richten wir zunächst einen benutzerdefinierten Beitragstyp für unser FAQ-Projekt ein. Wir werden mit Hilfe der register_post_type()-Funktion einen neuen benutzerdefinierten Beitragstyp erstellen. Wenn Sie jedoch eine GUI zum Erstellen von Beitragstypen wünschen, können Sie diese mit dem Beitragstyp-Generator-Tool von GenerateWP generieren, wie ich es in diesem Beispiel getan habe :

<?php

if ( ! function_exists( 'tuts_faq_cpt' ) ) {

// register custom post type
	function tuts_faq_cpt() {

		// these are the labels in the admin interface, edit them as you like
		$labels = array(
			'name'                => _x( 'FAQs', 'Post Type General Name', 'tuts_faq' ),
			'singular_name'       => _x( 'FAQ', 'Post Type Singular Name', 'tuts_faq' ),
			'menu_name'           => __( 'FAQ', 'tuts_faq' ),
			'parent_item_colon'   => __( 'Parent Item:', 'tuts_faq' ),
			'all_items'           => __( 'All Items', 'tuts_faq' ),
			'view_item'           => __( 'View Item', 'tuts_faq' ),
			'add_new_item'        => __( 'Add New FAQ Item', 'tuts_faq' ),
			'add_new'             => __( 'Add New', 'tuts_faq' ),
			'edit_item'           => __( 'Edit Item', 'tuts_faq' ),
			'update_item'         => __( 'Update Item', 'tuts_faq' ),
			'search_items'        => __( 'Search Item', 'tuts_faq' ),
			'not_found'           => __( 'Not found', 'tuts_faq' ),
			'not_found_in_trash'  => __( 'Not found in Trash', 'tuts_faq' ),
		);
		$args = array(
			// use the labels above
			'labels'              => $labels,
			// we'll only need the title, the Visual editor and the excerpt fields for our post type
			'supports'            => array( 'title', 'editor', 'excerpt', ),
			// we're going to create this taxonomy in the next section, but we need to link our post type to it now
			'taxonomies'          => array( 'tuts_faq_tax' ),
			// make it public so we can see it in the admin panel and show it in the front-end
			'public'              => true,
			// show the menu item under the Pages item
			'menu_position'       => 20,
			// show archives, if you don't need the shortcode
			'has_archive'         => true,
		);
		register_post_type( 'tuts_faq', $args );

	}

	// hook into the 'init' action
	add_action( 'init', 'tuts_faq_cpt', 0 );

}

?>

Tipp: Wenn Ihr Projekt mehr benutzerdefinierte Beitragstypen umfasst, die möglicherweise komplexer sind als dieser einfache FAQ-Beitragstyp, kann ich ein cooles Tool namens SuperCPT empfehlen, mit dem Sie neue Beitragstypen erstellen können, die einen einfacheren Code haben. Ich habe auch ein Tutorial zu SuperCPT geschrieben, das Sie hier ansehen können.

Schritt 2: Benutzerdefinierte Kategorien erstellen

Um zwischen verschiedenen Arten von Fragen zu unterscheiden (z. B. den Fragen und Antworten meiner Kunden zu Fehlgeburten und Wochenbettdepressionen), benötigen wir ein Kategoriensystem. Wie viele von Ihnen bereits wissen, bietet WordPress diese Funktionalität durch benutzerdefinierte Taxonomien.

Die Grundfunktion hier ist register_taxonomy() Wenn Sie jedoch eine grafische Oberfläche wünschen, können Sie das Taxonomie-Generator-Tool von GenerateWP verwenden.

Der Code lautet wie folgt:

<?php

if ( ! function_exists( 'tuts_faq_tax' ) ) {

	// register custom taxonomy
	function tuts_faq_tax() {

		// again, labels for the admin panel
		$labels = array(
			'name'                       => _x( 'FAQ Categories', 'Taxonomy General Name', 'tuts_faq' ),
			'singular_name'              => _x( 'FAQ Category', 'Taxonomy Singular Name', 'tuts_faq' ),
			'menu_name'                  => __( 'FAQ Categories', 'tuts_faq' ),
			'all_items'                  => __( 'All FAQ Cats', 'tuts_faq' ),
			'parent_item'                => __( 'Parent FAQ Cat', 'tuts_faq' ),
			'parent_item_colon'          => __( 'Parent FAQ Cat:', 'tuts_faq' ),
			'new_item_name'              => __( 'New FAQ Cat', 'tuts_faq' ),
			'add_new_item'               => __( 'Add New FAQ Cat', 'tuts_faq' ),
			'edit_item'                  => __( 'Edit FAQ Cat', 'tuts_faq' ),
			'update_item'                => __( 'Update FAQ Cat', 'tuts_faq' ),
			'separate_items_with_commas' => __( 'Separate items with commas', 'tuts_faq' ),
			'search_items'               => __( 'Search Items', 'tuts_faq' ),
			'add_or_remove_items'        => __( 'Add or remove items', 'tuts_faq' ),
			'choose_from_most_used'      => __( 'Choose from the most used items', 'tuts_faq' ),
			'not_found'                  => __( 'Not Found', 'tuts_faq' ),
		);
		$args = array(
			// use the labels above
			'labels'                     => $labels,
			// taxonomy should be hierarchial so we can display it like a category section
			'hierarchical'               => true,
			// again, make the taxonomy public (like the post type)
			'public'                     => true,
		);
		// the contents of the array below specifies which post types should the taxonomy be linked to
		register_taxonomy( 'tuts_faq_tax', array( 'tuts_faq' ), $args );

	}

	// hook into the 'init' action
	add_action( 'init', 'tuts_faq_tax', 0 );

}

?>

Das ist es! Jetzt haben Sie einen FAQ-Beitragstyp mit Taxonomien namens „FAQ-Kategorien“, die miteinander verknüpft sind! Überprüfen Sie Ihr Admin-Panel und Sie sehen den Menüpunkt „FAQ-Kategorie“ unter „FAQ“.

Genau wie normale Beitragskategorien können Sie sie auf der Seite „FAQ-Kategorien“ hinzufügen, bearbeiten oder löschen oder neue Kategorien hinzufügen, wenn Sie einen neuen FAQ-Artikel schreiben.

Schritt 3: Erstellen Sie einen [faq] Shortcode

Jetzt kommt der spaßige Teil: den Shortcode erstellen. (Wenn Sie meine vorherigen Beiträge gelesen haben, wissen Sie, dass ich ein großer Fan von WordPress-Shortcodes bin.) Grundsätzlich betten wir FAQ-Elemente in Beiträge und Seiten ein.

Was passiert als nächstes:

• Abfrage in unseren neuen benutzerdefinierten Beitragstypen,
• Filtern Sie die Kategorien mithilfe von Shortcode-Parametern,
• Fragen und Antworten als Titel und Inhalt anzeigen,
• Antwortauszug über den Link „Mehr…“ anzeigen, gesteuert durch einen anderen Shortcode-Parameter.

Lassen Sie uns mit der Erstellung des Shortcodes beginnen. Wie beim obigen Code füge ich einige hilfreiche Kommentare hinzu:

<?php

if ( ! function_exists( 'tuts_faq_shortcode' ) ) {

	function tuts_faq_shortcode( $atts ) {
		extract( shortcode_atts(
				array(
					// category slug attribute - defaults to blank
					'category' => '',
					// full content or excerpt attribute - defaults to full content
					'excerpt' => 'false',
				), $atts )
		);
		
		$output = '';
		
		// set the query arguments
		$query_args = array(
			// show all posts matching this query
			'posts_per_page'	=>	-1,
			// show the 'tuts_faq' custom post type
			'post_type'			=>	'tuts_faq',
			// show the posts matching the slug of the FAQ category specified with the shortcode's attribute
			'tax_query'			=>	array(
				array(
					'taxonomy'	=>	'tuts_faq_tax',
					'field'		=>	'slug',
					'terms'		=>	$category,
				)
			),
			// tell WordPress that it doesn't need to count total rows - this little trick reduces load on the database if you don't need pagination
			'no_found_rows'		=>	true,
		);
		
		// get the posts with our query arguments
		$faq_posts = get_posts( $query_args );
		$output .= '<div class="tuts-faq">';
		
		// handle our custom loop
		foreach ( $faq_posts as $post ) {
			setup_postdata( $post );
			$faq_item_title = get_the_title( $post->ID );
			$faq_item_permalink = get_permalink( $post->ID );
			$faq_item_content = get_the_content();
			if( $excerpt == 'true' )
				$faq_item_content = get_the_excerpt() . '<a href="' . $faq_item_permalink . '">' . __( 'More...', 'tuts_faq' ) . '</a>';
			
			$output .= '<div class="tuts-faq-item">';
			$output .= '<h3 class="tuts-faq-item-title">' . $faq_item_title . '</h3>';
			$output .= '<div class="tuts-faq-item-content">' . $faq_item_content . '</div>';
			$output .= '</div>';
		}
		
		wp_reset_postdata();
		
		$output .= '</div>';
		
		return $output;
	}

	add_shortcode( 'faq', 'tuts_faq_shortcode' );

}

?>

Das ist es! Jetzt haben wir einen netten Shortcode zum Einbetten unserer Fragen und Antworten. Sie können es mit dem Klassennamen formatieren tuts-faq、tuts-faq-item、tuts-faq-item-title 和 tuts-faq-item-content. Es sollte jedoch auch dann in Ordnung sein, wenn Sie die zusätzlichen Stile nicht einbeziehen.

Schritt 4: Fassen Sie den Code zusammen

Da diese Codes nicht nur das Frontend-Design betreffen, sondern auch neue Funktionen einführen, zählen sie zum Plugin-Gebiet. Deshalb müssen wir den Code als Plugin speichern. Wenn wir dies tun, sollten wir auch die Umschreibungsregeln für die Aktivierung und Deaktivierung aktualisieren.

Der vollständige Code lautet wie folgt:

<?php
/*
Plugin Name: Simple FAQ System
Plugin URI: http://code.tutsplus.com/
Description: Helps you create an FAQ section for your WordPress website. Shortcode usage: <code>[faq]</code>
Version: 1.0
Author: Barış Ünver
Author URI: http://hub.tutsplus.com/authors/baris-unver
License: Public Domain
*/

if ( ! function_exists( 'tuts_faq_cpt' ) ) {

// register custom post type
	function tuts_faq_cpt() {

		// these are the labels in the admin interface, edit them as you like
		$labels = array(
			'name'                => _x( 'FAQs', 'Post Type General Name', 'tuts_faq' ),
			'singular_name'       => _x( 'FAQ', 'Post Type Singular Name', 'tuts_faq' ),
			'menu_name'           => __( 'FAQ', 'tuts_faq' ),
			'parent_item_colon'   => __( 'Parent Item:', 'tuts_faq' ),
			'all_items'           => __( 'All Items', 'tuts_faq' ),
			'view_item'           => __( 'View Item', 'tuts_faq' ),
			'add_new_item'        => __( 'Add New FAQ Item', 'tuts_faq' ),
			'add_new'             => __( 'Add New', 'tuts_faq' ),
			'edit_item'           => __( 'Edit Item', 'tuts_faq' ),
			'update_item'         => __( 'Update Item', 'tuts_faq' ),
			'search_items'        => __( 'Search Item', 'tuts_faq' ),
			'not_found'           => __( 'Not found', 'tuts_faq' ),
			'not_found_in_trash'  => __( 'Not found in Trash', 'tuts_faq' ),
		);
		$args = array(
			// use the labels above
			'labels'              => $labels,
			// we'll only need the title, the Visual editor and the excerpt fields for our post type
			'supports'            => array( 'title', 'editor', 'excerpt', ),
			// we're going to create this taxonomy in the next section, but we need to link our post type to it now
			'taxonomies'          => array( 'tuts_faq_tax' ),
			// make it public so we can see it in the admin panel and show it in the front-end
			'public'              => true,
			// show the menu item under the Pages item
			'menu_position'       => 20,
			// show archives, if you don't need the shortcode
			'has_archive'         => true,
		);
		register_post_type( 'tuts_faq', $args );

	}

	// hook into the 'init' action
	add_action( 'init', 'tuts_faq_cpt', 0 );

}

if ( ! function_exists( 'tuts_faq_tax' ) ) {

	// register custom taxonomy
	function tuts_faq_tax() {

		// again, labels for the admin panel
		$labels = array(
			'name'                       => _x( 'FAQ Categories', 'Taxonomy General Name', 'tuts_faq' ),
			'singular_name'              => _x( 'FAQ Category', 'Taxonomy Singular Name', 'tuts_faq' ),
			'menu_name'                  => __( 'FAQ Categories', 'tuts_faq' ),
			'all_items'                  => __( 'All FAQ Cats', 'tuts_faq' ),
			'parent_item'                => __( 'Parent FAQ Cat', 'tuts_faq' ),
			'parent_item_colon'          => __( 'Parent FAQ Cat:', 'tuts_faq' ),
			'new_item_name'              => __( 'New FAQ Cat', 'tuts_faq' ),
			'add_new_item'               => __( 'Add New FAQ Cat', 'tuts_faq' ),
			'edit_item'                  => __( 'Edit FAQ Cat', 'tuts_faq' ),
			'update_item'                => __( 'Update FAQ Cat', 'tuts_faq' ),
			'separate_items_with_commas' => __( 'Separate items with commas', 'tuts_faq' ),
			'search_items'               => __( 'Search Items', 'tuts_faq' ),
			'add_or_remove_items'        => __( 'Add or remove items', 'tuts_faq' ),
			'choose_from_most_used'      => __( 'Choose from the most used items', 'tuts_faq' ),
			'not_found'                  => __( 'Not Found', 'tuts_faq' ),
		);
		$args = array(
			// use the labels above
			'labels'                     => $labels,
			// taxonomy should be hierarchial so we can display it like a category section
			'hierarchical'               => true,
			// again, make the taxonomy public (like the post type)
			'public'                     => true,
		);
		// the contents of the array below specifies which post types should the taxonomy be linked to
		register_taxonomy( 'tuts_faq_tax', array( 'tuts_faq' ), $args );

	}

	// hook into the 'init' action
	add_action( 'init', 'tuts_faq_tax', 0 );

}

if ( ! function_exists( 'tuts_faq_shortcode' ) ) {

	function tuts_faq_shortcode( $atts ) {
		extract( shortcode_atts(
				array(
					// category slug attribute - defaults to blank
					'category' => '',
					// full content or excerpt attribute - defaults to full content
					'excerpt' => 'false',
				), $atts )
		);
		
		$output = '';
		
		// set the query arguments
		$query_args = array(
			// show all posts matching this query
			'posts_per_page'	=>	-1,
			// show the 'tuts_faq' custom post type
			'post_type'			=>	'tuts_faq',
			// show the posts matching the slug of the FAQ category specified with the shortcode's attribute
			'tax_query'			=>	array(
				array(
					'taxonomy'	=>	'tuts_faq_tax',
					'field'		=>	'slug',
					'terms'		=>	$category,
				)
			),
			// tell WordPress that it doesn't need to count total rows - this little trick reduces load on the database if you don't need pagination
			'no_found_rows'		=>	true,
		);
		
		// get the posts with our query arguments
		$faq_posts = get_posts( $query_args );
		$output .= '<div class="tuts-faq">';
		
		// handle our custom loop
		foreach ( $faq_posts as $post ) {
			setup_postdata( $post );
			$faq_item_title = get_the_title( $post->ID );
			$faq_item_permalink = get_permalink( $post->ID );
			$faq_item_content = get_the_content();
			if( $excerpt == 'true' )
				$faq_item_content = get_the_excerpt() . '<a href="' . $faq_item_permalink . '">' . __( 'More...', 'tuts_faq' ) . '</a>';
			
			$output .= '<div class="tuts-faq-item">';
			$output .= '<h2 class="faq-item-title">' . $faq_item_title . '</h2>';
			$output .= '<div class="faq-item-content">' . $faq_item_content . '</div>';
			$output .= '</div>';
		}
		
		wp_reset_postdata();
		
		$output .= '</div>';
		
		return $output;
	}

	add_shortcode( 'faq', 'tuts_faq_shortcode' );

}

function tuts_faq_activate() {
	tuts_faq_cpt();
	flush_rewrite_rules();
}

register_activation_hook( __FILE__, 'tuts_faq_activate' );

function tuts_faq_deactivate() {
	flush_rewrite_rules();
}
register_deactivation_hook( __FILE__, 'tuts_faq_deactivate' );

?>

Raum für Verbesserungen

Als ich meiner Kundin die Anwendung zeigte, war sie von den Ergebnissen begeistert. Aber hier können wir den Code um weitere Funktionen erweitern wie...

1. Akkordeon-Effekt: Wenn Sie Ihren FAQ-Bereich mit einigen Umschalteffekten attraktiver gestalten möchten, können Sie einige tolle jQuery-Plugins verwenden. Wenn Sie die jQuery-Benutzeroberfläche verwenden möchten, bietet Shane Osbourne ein großartiges Tutorial dazu.
2. Paginierung: Wenn Sie viele Fragen und Antworten zu einer Kategorie haben und nicht alle Elemente auf einmal anzeigen möchten, können Sie dies tun, indem Sie die posts_per_page 参数来限制帖子数量自定义短代码的查询，并使用 wp_reset_postdata(); 代码在行下方添加分页链接所需的代码。请记住删除 'no_found_rows' => true,-Zeile ändern, aber ohne sie zu entfernen, funktioniert die Paginierung nicht!
3. Zufällige Frage: Angenommen, Sie möchten eine zufällige Frage und Antwort auf Ihrer Startseite anzeigen und möchten, dass sich diese bei jeder Aktualisierung der Seite ändert. Alles, was Sie tun müssen, ist zu „Benutzerdefinierte Abfrage“ zu gehen, posts_per_page 参数从 -1 更改为 1 并添加另一行代码 'orderby' => 'random', hinzuzufügen und schon kann es losgehen!

Fazit

So können Sie ein einfaches FAQ-System in WordPress erstellen, indem Sie benutzerdefinierte Beitragstypen, benutzerdefinierte Taxonomien und Shortcodes verwenden. Ich hoffe, Ihnen hat dieses Tutorial gefallen und Sie können es in Ihrem nächsten Projekt verwenden. Wenn Ihnen dieser Artikel gefallen hat, vergessen Sie nicht, ihn zu teilen!

Haben Sie Ideen zur Verbesserung dieses FAQ-Systems? Teilen Sie Ihre Kommentare unten!

Das obige ist der detaillierte Inhalt vonErstellen Sie mit WordPress ein benutzerdefiniertes FAQ-System mit benutzerdefinierten Beitragstypen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!