カスタム投稿タイプを使用して WordPress でカスタム FAQ システムを作成する

王林
リリース: 2023-08-30 22:34:01
オリジナル
1264 人が閲覧しました

使用自定义帖子类型通过 WordPress 创建自定义常见问题解答系统

私は最近、専門分野でプロのコンサルタントとして働くクライアントの一人と仕事をしました。彼女は私に、Q&A システム、正確には FAQ ページを実装できないかと尋ねました。私は、「もちろん、ページを作成して、さまざまなスタイルで質問と回答を貼り付けることもできます」と言いましたが、彼女は、別のページを作成して質問と回答を分類するので、より整理するには別の方法が必要だと言いました。

これを行うために、カスタム投稿タイプ、タクソノミー、ショートコードを使用した数行の簡単なコードで彼女のリクエストを処理する方法を説明します。

カスタム投稿タイプとカテゴリ

FAQ システムを構築するには何が必要ですか?

  • 質問と回答のフィールドが必要です。
  • さまざまな種類の質問とその回答を分類して区別するためのカテゴリが必要です。
  • 私たちの場合、これらの質問グループまたはすべての質問をページまたは投稿に埋め込むためのショートコードが必要です。

カスタム投稿タイプを作成することから始めましょう。

ステップ 1: カスタム投稿タイプを作成する

もちろん、FAQ プロジェクトのカスタム投稿タイプを設定することから始めます。 register_post_type() 関数を使用して新しいカスタム投稿タイプを作成しますが、投稿タイプを作成するための GUI が必要な場合は、GenerateWP の投稿タイプ生成ツールを使用して生成できます。この例:

リーリー

ヒント: プロジェクトにこの単純な FAQ 投稿タイプよりも複雑なカスタム投稿タイプが含まれる場合は、SuperCPT という優れたツールをお勧めします。このツールを使用すると、次のような新しい投稿タイプを作成できます。よりシンプルなコード。 SuperCPT に関するチュートリアルも書きました。こちらでご覧いただけます。

ステップ 2: カスタム カテゴリを作成する

さまざまな種類の質問 (流産や産後うつ病に関するクライアントの質問と回答など) を区別するには、カテゴリ システムが必要です。すでにご存知のとおり、WordPress はカスタム分類を通じてこの機能を提供します。

ここでの基本関数は register_taxonomy() です。ただし、グラフィカル インターフェイスが必要な場合は、GenerateWP のタクソノミー ジェネレーター ツールを使用できます。

コードは以下のように表示されます:

リーリー ###それでおしまい!これで、相互にリンクする「FAQ カテゴリ」と呼ばれる分類法を備えた FAQ 投稿タイプが完成しました。管理パネルを確認すると、「FAQ」の下に「FAQ カテゴリ」メニュー項目が表示されます。

通常の投稿カテゴリと同様に、[FAQ カテゴリ] ページでカテゴリを追加、編集、削除したり、新しい FAQ 項目を作成するときに新しいカテゴリを追加したりできます。

ステップ 3:

[faq] ショートコードを作成する

ここからは楽しい部分です。ショートコードを構築します。 (私の以前の投稿を読んだことがある方は、私が WordPress ショートコードの大ファンであることをご存知でしょう。) 基本的に、FAQ 項目は投稿とページに埋め込まれます。

###次は何が起こる:###

新しいカスタム投稿タイプ

でクエリを実行します
    ショートコード パラメータを使用してカテゴリをフィルタリングします。
  • 質問と回答をタイトルと内容として表示します。
  • 別のショートコード パラメーターによって制御される、「詳細...」リンクを介して回答の抜粋を表示します。
  • ショートコードの構築を始めましょう。上記のコードと同様に、役立つコメントをいくつか追加します:
  • リーリー ###それでおしまい!これで、質問と回答を埋め込むためのきちんとしたショートコードが完成しました。クラス名
tuts-faq

tuts-faq-item

tuts-faq-item-titletuts-faq-item を使用できます。 - content スタイルを設定します。ただし、追加のスタイルを含めなくても問題ないはずです。 ステップ 4: コードを要約する これらのコードにはフロントエンドのスタイルが含まれるだけでなく、新しい機能も導入されるため、プラグイン領域としてカウントされます。そのため、コードをプラグインとして保存する必要があります。これを行うときは、アクティブ化と非アクティブ化に関する書き換えルールも更新する必要があります。

完全なコードは次のとおりです:

リーリー ###改善の余地###

クライアントに使い方を見せたところ、その結果にとても喜んでいました。ただし、ここでは...

のような機能を追加してコードを拡張できます。
  1. アコーディオン効果: スイッチング効果を使用して FAQ セクションをより魅力的にしたい場合は、いくつかの優れた jQuery プラグインを使用できます。 jQuery UI を使用したい場合は、Shane Osbourne がその方法に関する優れたチュートリアルを提供しています。
  2. ページング: 特定のカテゴリに多くの質問と回答があり、すべてのアイテムを一度に表示したくない場合は、posts_per_page## を変更して投稿数を制限できます。 # カスタム ショートコードを使用してクエリのパラメータを追加し、wp_reset_postdata(); コードを使用して、その行の下にページネーション リンクに必要なコードを追加します。 'no_found_rows' => true, 行を必ず削除してください。ただし、これを削除しないとページネーションが機能しません。
  3. ランダムな質問: ホーム ページにランダムな質問と回答を表示し、ページが更新されるたびに質問と回答を変更したいとします。必要なのは、カスタム クエリに移動し、posts_per_page パラメータを -1 から 1 に変更し、別のコード行 'orderby を追加することだけです。 ' => 'ランダム', それで大丈夫です!
  4. ###結論は###
これは、カスタム投稿タイプ、カスタム分類法、ショートコードを使用して、WordPress でシンプルな FAQ システムを構築する方法です。このチュートリアルを楽しんでいただき、次のプロジェクトで活用していただければ幸いです。この記事が気に入ったら、ぜひ共有してください。

この FAQ システムを改善するためのアイデアはありますか?以下にコメントを共有してください。

以上がカスタム投稿タイプを使用して WordPress でカスタム FAQ システムを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート