WordPress用の簡単なFAQプラグインの作成方法

  • WordPress
  • 更新:Feb 09、2017

私たちは多くの前に見ました ブログのヒントとツール。 さて、今日はブログに適したツール、FAQページプラグインを作成する方法を学びます。 しかし、最も重要なことはプラグイン自体だけでなく、この原則でできることです。 WPサイトに任意の種類のデータを保存する方法と、サイトのカスタムコンポーネントを作成する外部ライブラリ(jQuery UIなど)と統合する方法を学習します。 始めましょう!

アイデア、デモ、ダウンロード

デモ

ここでの目標は、多くのものに使用できるプラグインを作成することですが、FAQページにはうまく収まります。

しかしそれとは別に、私たちの主な業績は ワードプレスの理解 カスタムポストタイプ、ショートコード、外部JS / jQueryプラグインとのやりとり。 このアイデアを使えば、そこにある他のクレイジープラグインに基づいてたくさんのものを作ることができます。これはちょうどあなたの出発点です、親愛なるパダワンです。

So ここでjQuery APIデモを見つけることができます 私たちが使用するコンポーネントのために-しかし、本当にクールなものは、そのコンポーネントを生成するために使用するコードです(PHP)。

ああ、もちろん、あなたは プラグインファイルはこちらからダウンロードできます あなたのWPサイトにインストールすることもできます。

ウォームアップ - プラグインファイルとカスタム投稿タイプ

まず、データを保存するカスタムポストタイプを作成する必要があります。

カスタムポストタイプはWPの魔法の大きな部分です。これにより、WPの関数を使用して呼び出しおよび操作できるように、新しいデータタイプ(ポスト、ページ、添付ファイルなど)を作成できます。 これは初心者には簡単に思えるかもしれませんが、DBにデータを接続して保存するだけの難しさを知っているのは、昔のPHPプログラマー(それでもまだですか?) 新しいデータ型を動的に作成することはもちろん、これは微妙ですが、コードに大きな柔軟性をもたらします。

私たちにはこのプラグインが必要ですが、すでにこのコンセプトに精通していると思います。 プラグインはWordPressのレゴブロックに似ていますが、簡単にプラグインできるコードを使用して現在の機能を追加または変換したり、必要に応じてプラグを抜いたりします。

WPがそれを認識できるようにプラグインを作成するには、2のものが必要です。

  1. あなたのwp-content / plugins /
  2. そのファイルの先頭にメタデータを追加すると、WPはその内容を理解できます

ファイル名は一意でなければならないので、誰かが自分のプラグイン(あなた自身でさえ)をインストールしても、現在のプラグインと競合することはありません。 私たちの場合、より良い組織のために、faq-whsrという名前の新しいフォルダを追加し、その中にfaq-whsr.phpというファイルを追加します。

今度はメタダのために、プラグインファイルの最初に次のようなものを追加してください(<?phpの直後)。

meta_01

つまり、

  • プラグイン名:wp-admin> pluginsインターフェースに表示される素敵な名前
  • プラグインURI:プラグインのページ(ドキュメント、例、販売ページ)へのリンクを追加する場合
  • 説明:これはwp-admin> pluginsインターフェースに表示される小さな段落です。 それを簡単にして、ユーザーが何のために覚えているか
  • 作成者/著者URI:プラグインを作成した人物/会社、クレジットのリンク
  • ライセンス:したがって、ユーザーはプラグインで何ができる/できないのかを知ることができます

01-plugin-created

OK、プラグインを作成し、関連するメタデータを追加しました。 プラグインファイルを保存するとすぐに、wp-adminインターフェイスで表示できるはずです。

それをアクティブにして、何が起こるか見てみましょう。

待って、何もない? うーん、それは良いことです、何かが間違っていたら、今あなたはエラーを見るでしょう。 私たちのカスタムポストタイプの作成に移りましょう。

私たちのケースでは、CPTはFAQ項目ですが、書籍、ビデオ、功績などを作成することができます。 ここで留意すべき重要なことは、関数名が一意であることです。 関数名は一意でなければならず、関数名は一意でなければなりません。 とった? これは、OOPを使用できるようになるまで(多くの場合、次のチュートリアルで多分)、多くの問題を解決します。

ウィザードは次のコードで実行されます:

CPT

そして、これは関連する部分が意味するものです:

  • $ labels - あなたのwp-adminエリアの異なるセクションのラベルとテキストを持つ配列です。 だからWPは私たちのアイテムを呼び出すための適切な方法を知っている
  • サポート–これはwp-admin> FAQ>新しい画面で何を見ることができるかを伝えます。 この場合、タイトル、エディター(メインコンテンツボックス)、作成者、リビジョン、およびカスタムフィールド(必要に応じて)があります。
  • taxonomies - ここではWPにどの分類が許可されているか(カテゴリ、タグ、またはカスタム分類法)
  • register_post_type( 'faq_whsr'、$ args)–これはWPに伝えます "ねえ、$ argsの引数を使ってfaq_whsrというIDを持つ新しいカスタムポストタイプを作成する".

admin-faq

それを保存して、あなたの息を止めてください。 メインのwp-adminメニューに新しいセクションが表示されるはずです

それじゃない? うん。 このスニペットは、CPTの機能全体を作成します。 このクールが見つからない場合は、次のセクションでクーラーになるのを待ちます。

wp-adminを終了する前に、いくつかのダミーデータ(少なくとも2カテゴリを含むいくつかの質問)を追加してください。

フロントエンド - WP x jQueryインタラクション

ついに、何らかの行動を見なければなりません。 jQuery UIアコーディオン要素 このため。

jQuery UIには、jQuery自体とほとんど同じ利点があります。

  • それに取り組んでいる多くの開発者
  • クロスブラウザとモバイル対応のコード
  • 十分に文書化
  • WPでうまく演奏する(WP自体で使用する)

問題は今です:どのようにそれを呼び出すのですか?

これには2のアプローチがあります:

  1. あなたのwp_headの悪い純粋な<script> / <style>タグ
  2. 素晴らしいwp_enqueue

今日は間違ったアプローチであまり時間を無駄にしませんが、良いのは基本的にWPを伝えることです "おい、おい、私たちのコードのある時点でjQuery UIが必要になります。ページにそれを含めてください"。 このようにWPは、他の誰かが既にそれを含んでいるのか、別のバージョンを含んでいるのかを確認し、重複したライブラリの問題を避けることができます。 さて、良いチャットをコードに変換するには?

エンキュー機能の使用:

エンキュー_02

ショートコード

それでwp-adminに戻ります。 私たちはFAQアイテムを持っています。私たちは必要なアイテムのスタイルを設定するためのライブラリを持っていますが、他に何が欠けていますか? さて、私たちはアイテムを呼び出す必要があります!

これにはたくさんのオプションがありますが、この場合には簡単なコードを作成するのが最も簡単です。 ショートコードは、あなたのコンテンツフィールド(ページ、投稿、CPTなど)に追加するもので、WPは実際に実行する関数を検索します。 2タイプのショートコードがあります:

  1. [self-enclosing] - タグ<hr />や<br />のように、この種のショートコードは、ある時点で関数を呼び出すだけです - これは私たちの男です
  2. [wrapped] Content [/ wrapped] - タグ<p> </ p>や<div> </ div>のようなもので、実際にコンテンツを変換したり、そのコンテンツを引数として使用したりすることができます。

どのようにそれが動作するか見てみましょう。 wp-adminで新しいページを作成し、そこにこのコードを追加してください:

[faq-whsr]

保存してそのページにアクセスし、何が起こるか見る...

ちょうど冗談、それは正しいことをしませんか? それは、まだ関数を作成していないからです。

これをあなたのプラグインファイルに追加してください:

shortcode_02

今あなたのページをリフレッシュし、本当にクールなことが起こることを約束します。

冷静さ? 今、あなたはそれが走っているのを見ることができ、空はあなたの限界です。 そのコードが行うことは、[faq-whsr]と呼ばれるショートコードがあることをWPに伝え、WPがそれを見つけた場合、WPはページのそのポイントで機能を実行する必要があります。

私たちの場合、jQuery UIパネルを作成するには、次の構造を実装する必要があります:

api_02

そしてそのために、 WPクエリFAQ項目とその内容を読み込みます。 短コード関数を次のように置き換えます。

shortcode-basic_02

OK、FAQアイテムが呼び出されます。 ここで行ったのは、wp_queryを呼び出してカスタム投稿タイプを呼び出し、それをショートコードリターンに渡して、WPが目的の構造に従ってすべてを表示するようにすることです。

それは良いことですが、何かが足りませんよね? いくつかのオプションはどうですか? さて、ショートコードのオプションを追加できます。ショートコードでWP_Query引数のいくつかを作成する方法を見てみましょう。

shortcode-final_02

この方法で、次の引数を使用してアイテムを呼び出すことができます(必要な数だけ組み合わせることができます)。

  • cat - カテゴリID(配列として追加された複数のもの)[faq-whsr cat = 1]
  • category_name - カテゴリ名[faq-whsr category_name = "food"]
  • オーダー - ASCまたはDESC(デフォルトはDESC)[faq-whsr order = "ASC"]
  • orderby - アイテムの順序付けの基準を変更する[faq-whsr orderby = "title"]
  • posts_per_page - 読み込まれたアイテムの数を変更する[faq-whsr posts_per_page = 5]

しかし、私が言ったように、空はあなたの限界です。 実装して使用できるWP_Queryのオプションは次のとおりです。

  • 著者
  • カテゴリ(not_inで除外オプションを追加する)
  • 検索(ユーザーに検索機能を提供したい場合はクール)
  • カスタムフィールド(FAQアイテムにはカスタムフィールドと値を持つアイテムを読み込むために使用できるので)

今ではあなたの番です

あなたが見ることができるように、これはちょうど出発点に過ぎません。 このシンプルなプラグインを改善するために、私たちは皆、他にもたくさんのクールなことを学ぶことができます。ここで深く掘り下げるためのいくつかの提案があります:

  • 応答デザイン
  • ウィジェットの作成
  • プラグインによるフックの有効化/無効化
  • 国際化
  • OOP
  • 必要な場合にのみエンキューする(特定のページの場合)

コメントにあなたの考えを残すことを忘れないでください! ショートコードに「デフォルトアイテム」オプションを適用することは可能ですか(ページがロードされると、別のアイテムが開かれますが、それは最初のアイテムではありません)。 どうしますか?

ロチェスターオリベイラについて

私はブラジルのイタジュバ(MG)のウェブデザイナー兼起業家です。 あいまいなトピックについて書くこと、およびいくつかクールなことをすることが大好きです。

接続します。