シンプルな WordPress FAQ プラグインを作成する方法
「よくある質問」セクションは、顧客の質問に対する正しい答えを提供するための優れたツールです。それがとても人気になっています。しかし、よくある質問はプレミアム テーマ内に統合されていることがよくありますが、無料のテーマではどうなるでしょうか?ここでは、あらゆるテーマで動作するシンプルな FAQ プラグインを作成するチュートリアルを紹介します。このチュートリアルでは、FAQ セクションをカスタマイズして独自のセクションにできるように、基本的な手順のみを説明します。
ステップ 1: プラグインを作成する
まず、「wp-content/plugins」フォルダーに「rc-faq」という新しいフォルダーを作成します。次に、このフォルダー内に「rc-faq.php」という新しいファイルを作成し、次のコードを配置します。
<?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
*/ステップ 2: FAQ カスタム投稿タイプを登録する
次に、カスタム投稿タイプを登録する必要があります。この部分に詳しくない場合は、Codex を参照してください。
/*
* 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');
apply_filters() 関数の使用に注意してください。これにより、プラグイン自体を変更せずにサポートと引数を変更できます。
ステップ 3: FAQ を表示するショートコードを作成する
このステップでは、訪問者に FAQ を表示するパラメーターを 1 つだけ持つ単純なショートコードを作成します。 FAQ のタイトルのみをリストし、タイトルをクリックした場合にのみ回答を表示するというアイデアです。
ショートコードには、表示する項目の数を定義する固有の「制限」パラメータがあります。もちろん、order、order by などの独自の属性を追加することもできます。
また、このショートコードには、ショートコード自体に直接組み込まれた JavaScript スニペットが含まれているため、ショートコードを含むページにいるときにのみ JavaScript が読み込まれます。
最後に、デフォルトでは FAQ コンテンツを非表示にし、タイトルがクリックされた場合にのみ表示します。
/*
* 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" ); ?>以上です ！
最終結果
管理における最終結果は次のとおりです。
そして訪問者側では:
シンプルですが機能するので、必要に応じてカスタマイズできます。このチュートリアルを楽しんでいただければ幸いです。コメント欄でフィードバックをお待ちしています。