WordPress フロントエンド投稿フォームの作成

  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

ワードプレスで非会員または会員ユーザーがフロントエンドで記事を作成して提出できるようにするフロントエンド投稿フォームを作成したい場合、プラグインがある場合は、プラグインを使用してもしますが、制約が多いため、ユーザーが希望するフロントエンド文の作成フォームを作成するには通常の開発が必要です。

ワードプレスの多言語翻訳プラグイン WPML 開発者で作成された Toolsetツールを使用すると、コーディングの知識がなくても簡単にワードプレスのフロントエンド文の提出フォームを簡単に作成することができます。

ワードプレスのフロントエンド投稿フォームの作成プロセス

カスタムポストタイプ文を作成し、フロントエンドの投稿フォームを作成するには、まず、カスタムポストタイプを作成する作業が先行しなければならない。 ワードプレスの基本ポストタイプの文やページに提出したい場合や、一部のテーマで提供されているカスタムポストタイプ(例えば、ポートフォリオ)グロー提出する場合は、この作業は必要ありません。

カスタムポストタイプ(ユーザー定義文のタイプ)で文を提出したい場合は、次のプロセスに進むとされます。

  1. カスタムポストタイプを作る(例えば、不動産物件のポスト、映画レビュー記事など)
  2. カスタムフィールド(カスタムフィールド)を作成し
  3. カスタム分類の作成
  4. 文とアーカイブ(保管物)のページをフロントエンドに表示するようにテンプレートを作成する
  5. フロントエンド投稿フォームの作成

手順1で4段階までの内容は、「ToolsetとElementorを使用してワードプレスのカスタム検索機能を実装する」を参考にしてみてください。 ああ、海 など、いくつかのテーマで提供されるポートフォリオ(Portfolio)などのカスタムポストタイプ文をユーザーがフロントエンドで作成して提出する場合は、このプロセスは不要です。

以下では、 5段階。 フロントエンド投稿フォームの作成について説明します。

ワードプレスのフロントエンド投稿フォームの作成

この作業には、Toolset FormsとToolset Accessをインストールして有効にする必要があります。

フロントエンド文の作成フォームの作成

ワードプレス伝言板> Toolset>文フォーム(フォーム)をクリックして、 新たに追加をクリックして、新しいポストフォームの作成ウィザードを実行します。

ワードプレスのフロントエンド投稿フォームの作成 -  Toolset

下段の 持続するをクリックします。 次のステップで文フォームの名前を指定します。 名前を指定した後、 持続するをクリックすると、Post Form設定画面が表示されます。

ワードプレスのフロントエンドポスト送信フォーム

フォームタイプは「新しいコンテンツの追加」を選択します。 作成/編集する文の種類ユーザーがフォームを送信したときの記事タイプに登録されるかを選択します。

そして この記事の状態設定では、ユーザーがフロントエンドで文を提出したとき文の状態を指定します。 基本的には次の状態の中から選択することができます。

  • 下書き
  • 検討中
  • プライベート
  • 発行さ

検討中の状態については、「ワードプレスで「下書き」と「検討中」の違い(外部筆陣役割)」を参照してみてください。

次のステップでは、フォームのレイアウトを設計することができます。

ワードプレスのフロントエンド文の作成フォームの作成 -  Toolset

Build Form(フォームの作成)段階では、XNUMXつの要素で構成されています。 左はフォームの領域であり、右側はフォーム領域に追加することができるフィールドと要素が表示されます。 左からフィールドをドラッグして順序を変更したり、不要なフィールドを削除することができます。 フォームに追加するフィールドを右からドラッグ&ドロップすることもできます。

Expert mode(エキスパートモード)を有効にすると、マークアップエディタでフォームを編集することができます。

Toolset Form  - エキスパートモードのマークアップエディタ

Expert modeでラベルを変更して、一般的なフィールド(generic field)を追加し、条件に応じて、いくつかのフィールドを表示するように編集することができます。

CSS editorにCSSコードを入れてレイアウトを調整することができます。 JS editorにJavaScriptコードを追加することができます。

フォームの編集が完了したら、次のステップで電子メール通知を設定することができます。 電子メール通知を設定すると、フロントエンドポスティングフォームの作成が完了します。

Toolsetフォームへのアクセス権(Access Permissions)ユーザー定義する

続いて、作成したポストフォームにアクセスする権限を設定することができます。 たとえば、ゲスト(非会員)がこのフォームにアクセスするように設定したり、特定のメンバーの役割(例えば、作成者または外部筆陣)のみアクセスが可能なように制限することができます。

ワードプレス伝言板> Toolset>アクセス制御をクリックして、 Toolset Forms タブをクリックします。

Toolsetフォームアクセス権を設定する

上記のような画像が表示されたら、作成したポストフォームへのアクセス権を設定するようにします。 非会員のポストを提出できるようにするには、(上の図では、表示されませんが)の下にある ゲストをチェックしてください。

スパム対策

非会員フォームを送信することを許可すると、スパムが問題になることがあります。 この場合、Google reCAPTCHAを追加して、スパムからフォームを保護することができます。 グーグルreCAPTCHAを追加するにはGoogleからAPIキーの発給を受けToolset設定ページに入力する必要があります。 その後、フォームにreCAPTCHAフィールドを追加することができます。

Toolset Form(フロントエンド投稿フォーム)を表示する

フロントエンドにツールセットフォームを表示するには、 Toolset Form ブロックを使用するようにします。 ブロックエディタ(グーテンベルク)でブロックを追加することができます。

ツールセットフォームをフロントエンドに表示する

ElementorページビルダーでもToolsetフォームを利用することができます。

ElementorページビルダーにToolsetフォームを表示する

これでフロントエンドのポストフォームの作成が完了しました。 今のフロントエンドでは、ユーザーが記事を作成して提出することができます。

フロントエンド文提出フォーム

CSSなどを使用してレイアウトを調整するようにします。 基本的なCSSは本を介して煮たり 生活コーディングのような無料のインターネット講義を利用して学ぶことができます。

実際文を提出してみると、フロントエンドで提出した文が設定過程で指定された文の状態(例えば、下書き)に文章が登録されます。

フロントエンドで提出されたポストが一時グローバル格納される。

おわりに

以上で Toolsetプラグインを使用して、フロントエンド文の作成フォームを作成する方法を説明しました。 上記の過程で分かるように、コーディング作業が全く介入されなくても、フロントエンドの投稿フォームを作成することができます。

プラグインを使用する場合、決められた枠を変えることは非常に難しいですが、このツールを使用すると、管理者ページで簡単な作業でレイアウトを必要に応じて指定することができます。 Toolsetを使用すると、開発時間とコストを削減することができるようになります。

注:



コメントを残す