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

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


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

デモ

ここでの私たちの目標は、多くのものに使用できるプラグインを作成することですが、FAQページにはかなり適合します.

しかし、それとは別に、主な成果は、WordPressカスタム投稿タイプ、ショートコード、外部JS / jQueryプラグインとの相互作用の理解です。このアイデアを使用すると、他のクレイジープラグインに基づいて多くのものを作成することができます。これは、あなたの出発点にすぎません、パダワンさん.

したがって、ここでは、使用するコンポーネントのjQuery APIデモを見つけることができます。しかし、本当にすばらしいのは、そのコンポーネントの生成に使用するコード(PHP)です。.

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

まず、データを保存するためのカスタム投稿タイプを作成する必要があります.

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

これを実現するにはプラグインが必要ですが、おそらくあなたはすでにこの概念に精通しています。プラグインはWordPressのレゴブロックのようなもので、簡単にプラグインできる(そうだ!)または必要に応じてプラグインを解除できるコードを使用して、現在の機能を追加または変換します。.

WPがプラグインを認識する方法でプラグインを作成するには、2つのものが必要です。

  1. wp-content / plugins /内にファイルを作成します
  2. そのファイルの最初にメタデータを追加して、WPがその内容を理解できるようにします。

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

メタダのために、プラグインファイルの先頭に次のようなものを追加します(直後に <?php):

meta_01

つまり:

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

それでは、プラグインを作成し、関連するメタデータをいくつか追加しました。プラグインファイルを保存するとすぐに、それをwp-adminインターフェイスで確認できるはずです。

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

待って、何も?まあ、それは良いことです。もし何か問題があった場合、エラーが表示されます。では、カスタム投稿タイプの作成に移りましょう.

私たちの場合、CPTはFAQ項目ですが、本、ビデオ、紹介文などを作成できます。ここで覚えておくべき重要なことは、関数名は一意でなければならないということです。ここで繰り返します。関数名は一意である必要があり、関数名は一意である必要があります。とった?これで、OOPを使用できるようになるまで、多くの問題を回避できます(多分次のチュートリアルで)。.

魔法使いはこのコードで行われます:

cpt

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

  • $ labels – wp-adminエリアのさまざまなセクションのラベルとテキストを含む配列です。したがって、WPはアイテムを呼び出す適切な方法を知っています。
  • サポート–これは、wp-adminで表示できる内容を示します > よくある質問 > 新しい画面。私たちの場合、タイトル、エディター(メインコンテンツボックス)、作成者、リビジョン、カスタムフィールド(必要な場合)があります。.
  • 分類–ここで、WPに許可される分類(カテゴリ、タグ、またはカスタム分類)を指定します
  • register_post_type( ‘faq_whsr’、$ args)–これはWPに「$ argsからの引数を使用して、IDがfaq_whsrである新しいカスタム投稿タイプを作成します」と伝えます。.

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

待って、それだけですか?うん。このスニペットは、CPT機能全体を作成します。これがクールだとわからない場合は、次のセクションでさらにクールになるまで待ってください。.

wp-adminを終了する前に、いくつかのダミーデータを追加します(少なくとも2つのカテゴリのいくつかのよくある質問).

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

いよいよアクションを確認する時がきたので、jQuery UI Accordion要素を使用します.

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

  • それに取り組んでいる多くの開発者
  • クロスブラウザとモバイル対応コード
  • よく文書化されている
  • WPでうまく機能します(WP自体がそれらを使用します)

ここでの質問は次のとおりです。?

これには2つの方法があります。

  1. あなたのwp_headの悪い純粋な/タグ
  2. 素敵なwp_enqueue

今日は間違ったアプローチであまり時間を無駄にすることはありませんが、良いのはWPに基本的に「バディ、コードのある時点でjQuery UIが必要です。ページに含めてください」と伝えることです。このようにして、WPは他の誰かがすでにそれをインクルードしているか、それとは異なるバージョンをインクルードしているかどうかをチェックして、ライブラリの重複による多くのトラブルを回避できます。わかりました、その素敵なチャットをコードに変換する方法?

エンキュー機能の使用:

enqueue_02

ショートコード

これでwp-adminに戻りました。 FAQアイテムがあり、必要に応じてアイテムのスタイルを設定できるライブラリがありますが、他に何が不足していますか?さて、私たちはアイテムを呼び出す必要があります!

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

  1. [自己完結型] –タグのように、または
    この種のショートコードはある時点で関数を呼び出すだけです–これは私たちの男です
  2. [wrapped] Content [/ wrapped] –これはタグのようなものです

    または実際にそのコンテンツを変換したり、コンテンツを引数として使用したりできます.

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

[よくある質問]

そのページを保存してアクセスし、何が起こるかを確認してください…

冗談だよ、それは正しいことをしないのか?まあ、それはまだそのための関数を作成していないからです.

これをプラグインファイルに追加します。

shortcode_02

ページを更新すると、本当にクールなことが起こると約束します.

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

今回の場合、jQuery UIパネルを作成するには、次の構造を実現する必要があります。

api_02

そのために、WPクエリを作成し、FAQ項目とその内容を読み込みます。ショートコード関数を次のものに置き換えます。

shortcode-basic_02

さて、あなたのFAQアイテムが呼ばれます。 wp_queryを呼び出してカスタム投稿タイプを呼び出し、それをショートコードリターンに渡して、希望の構造に従ってWPがそれらすべてを表示するようにしました.

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

shortcode-final_02

このようにして、次の引数を使用して項目を呼び出すことができます(必要なだけ組み合わせることができます)。

  • cat –カテゴリID(配列として複数追加)[faq-whsr cat = 1]
  • category_name –カテゴリ名[faq-whsr category_name =” food”]
  • order – 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
  • 必要な場合にのみエンキュー(特定のページ)

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map