WordPressチュートリアル：カスタムフィールドをゲスト投稿に表示する方法

ゲスト投稿フォームは通常、タイトルとコンテンツのみを収集するため、すべての投稿に対して手動で著者情報をフォーマットする必要があります。

これにより、著者セクションに一貫性がなくなり、ウェブサイト、ソーシャルプロファイル、プロフィールなどのゲストブロガーの詳細を再フォーマットするのに何時間も無駄になります。

カスタムフィールドは、構造化された著者データを自動的に収集することでこれを解決し、すべてのゲスト投稿にプロフェッショナルに表示されます。

このチュートリアルでは、WPFormsとAdvanced Custom Fields（ACF）を使用して、ゲスト投稿フォームにカスタムフィールドを追加する方法を説明します。

これにより、著者情報を自動的に収集し、公開された投稿に一貫して表示するフォームが作成され、手間が省けます。

今日からゲスト投稿の受付を開始しましょう！🙂

カスタムフィールドとは？

カスタムフィールドは、WordPressで情報を収集および表示するために使用する追加のフィールドです。これらは「投稿メタ」フィールドと呼ばれることもあります。

あなたのサイトには、すでにいくつかのカスタムフィールドがある可能性があります。たとえば、All in One SEOプラグインは、ページのメタディスクリプションとメタタイトルにカスタムフィールドを使用しています。

独自のカスタムフィールドを作成して、任意の投稿、ページ、またはカスタム投稿タイプに追加情報を保存できます。たとえば、レビューを書いている場合、10点満点の評価用の別のフィールドを持つことができます。

その後、投稿テンプレートを変更して、レビューを公開するたびに同じ場所に評価を表示できます。カスタムフィールドは、次のような場合に便利です。

• カスタムレイアウトを作成する
• 広告やブランドロゴなどのコンテンツをRSSフィードに追加する
• 自動化を使用してWordPressの動作を制御する。

カスタムフィールドの目的が理解できたので、カスタムフィールドを使用してゲスト投稿フォームを作成しましょう。

WordPressゲスト投稿でカスタムフィールドを使用する方法

チュートリアルの後半で、重要なWordPressファイルを編集します。開始する前に、バックアッププラグインを使用してWordPressサイトをバックアップすることをお勧めします。完了したら、以下の手順に従ってください。

ステップ1：必要なプラグインをインストールする

このチュートリアルでは、3つのプラグインをインストールする必要があります。

• WPForms Pro：フロントエンドのゲスト投稿送信フォームを作成します
• Post Submissions Addon：フォームの送信を公開されたWordPress投稿に変換します
• Advanced Custom Fields (ACF)：カスタム著者情報を保存および表示します

WPForms Proのインストールと有効化から始めます。有効化したら、WordPressダッシュボードのWPForms » Addonsに移動します。

Post Submissionsアドオンを見つけて、Install Addonをクリックします。このアドオンは、フォームの送信をウェブサイト上の実際のWordPress投稿に変換するものです。

次に、Advanced Custom Fields プラグインをインストールします。WordPress ダッシュボードで プラグイン » 新規追加 に移動します。

Advanced Custom Fields を検索し、無料版の 今すぐインストール をクリックします（無料版にはこのチュートリアルに必要なすべての機能が含まれています）。

プラグインがインストールされたら、有効化 をクリックすることを忘れないでください。これで準備完了です。次に、カスタムフィールドを作成しましょう。

ステップ2：ACFでカスタムフィールドを作成する

これで、追加のゲスト著者情報を保存するカスタムフィールドを作成します。

これらのフィールドは、著者ウェブサイト、ソーシャルプロファイル、専門分野など、標準のタイトルとコンテンツ以外に収集する追加データを定義します。

WordPress サイドバーで カスタムフィールド » 新規追加 をクリックして、新しいフィールドグループを作成します。

フィールドグループに「ゲスト著者情報」や「ゲスト投稿の詳細」のような説明的な名前を付けます。この名前は内部整理用であり、ウェブサイトのフロントエンドには表示されません。

次に、フィールド追加 をクリックしてカスタムフィールドの作成を開始します。

下にいくつかのオプションが表示されることに気付くでしょう。これらすべてを入力する必要はありません。使用するのは次の 2 つです。

• フィールドラベル – 新しいフィールドにわかりやすい名前を付けます。
• フィールドタイプ – シンプルなテキストフィールドを使用するため、これは「テキスト」のままにしておきます。

フィールド名 フィールドが自動的に入力されることに気付くでしょう。

公開 をクリックして新しいカスタムフィールドを保存します。新しいフィールドが保存されたことがわかります。フィールド名 をメモしておいてください。次のステップで必要になります。

次に、ゲストブロガーがコンテンツを送信するために使用するフロントエンドフォームを作成します。このフォームは、標準の投稿コンテンツと、作成したばかりのカスタムフィールド情報の両方を収集します。

ステップ3：ゲスト投稿フォームを作成する

このステップでは、ゲスト投稿送信フォームを作成し、新しいフィールドを追加して、ゲストブロガーが入力できるようにします。

まだユーザー投稿用のフォームがない場合は、WordPress ナビゲーションバーで WPForms » 新規追加 をクリックして開始します。

ブログ投稿送信フォームテンプレートを探し、テンプレートを使用 をクリックします。この事前作成済みテンプレートには、ゲスト投稿収集に必要なフィールドが含まれています。

• 投稿タイトルフィールド
• 投稿コンテンツエリア（ビジュアルエディター）
• 著者名とメールアドレス
• アイキャッチ画像アップロード
• 投稿カテゴリ選択

デフォルトを調整する必要がある場合は、ユーザー投稿用のフロントエンドフォームの作成に関するこのガイドにジャンプしてください。基本的な準備がすべて整ったら、このチュートリアルに戻ってください。

ステップ4：ゲスト投稿フォームにカスタムフィールドを追加する

ユーザー投稿フォームが作成されたので、ステップ2で作成したカスタムフィールドを追加します。

左側のパネルからシングルラインテキストフィールドを右側のフォームプレビューにドラッグします。これを「ウェブサイト名」と名付けます。

これで、フィールドをAdvanced Custom Fieldsプラグインで作成したフィールドにマッピングする準備ができました。まず、左側にある「設定」をクリックし、次に「投稿の送信」をクリックします。

この画面には、投稿送信アドオンのすべての機能が表示されます。ここで投稿ステータスなどの設定を行うことができます。

カスタムフィールドを追加するには、「カスタム投稿メタ」セクションまでスクロールダウンします。左側には、ACFで作成した「フィールド名」を貼り付けます。

右側では、WPFormsで作成した（または名前を付けた）「ウェブサイト名」フォームフィールドを選択します。これはフォームに追加したばかりのものです。

これで完了です！今後、「ウェブサイト名」フィールドに入力された内容はカスタムフィールドに保存され、投稿テンプレートに表示できるようになります。「保存」をクリックしてフォームを保存します。

ゲスト投稿の準備はできましたか？まだフォームを公開していない場合は、「埋め込み」ボタンをクリックします。ページに自動的に追加するか、ショートコードを使用できます。

これで、フロントエンドでゲスト投稿送信フォームを表示すると、先ほど追加した追加フィールドが表示されます。

テストエントリでフォームに入力してください。送信後、サイトのフロントエンドにフィールドを表示できます。

ステップ5：カスタムフィールドをウェブサイトに追加する

WordPressでカスタムフィールドデータを表示するには、さまざまな方法があります。簡単な例をいくつか紹介します。

最初の方法では、WordPressのテーマファイルに関する知識が必要です。続行する前に、ウェブサイトの子テーマを作成してください。（この時点でサイトを再度バックアップすることも良い考えです。）

これらの例ではすべて、Advanced Custom Fieldsのthe_field()関数を使用します。まず、フィールドを表示するために単一投稿テンプレートを編集しましょう。「外観 » テーマエディター」に移動します。

single.phpというテーマファイルを編集しました。お使いのテーマでは、このテンプレートファイルの名前が異なる場合があります。フィールドを表示する場所を見つけて、このコードを貼り付けます。これは非常に簡単な例です：

<?php if( get_field('author_website_name') ): ?>
    <h2>Author's Blog: <?php the_field('author_website_name'); ?></h2>
<?php endif; ?>

このコードは、情報が存在する場合、WordPressが投稿者のウェブサイト名をH2で見出しとして表示することを意味します。フィールド名author_website_nameを、作成したフィールドの名前に変更するだけです。

テンプレートファイルを保存すると、コードを配置した場所にフィールドがブログ投稿に表示されます。

これが少しトリッキーに見える場合は、Elementorでカスタムフィールドを簡単に使用する方法をすぐに紹介します。

ステップ6：Elementorでカスタムフィールドを表示する

ユーザー投稿のカスタムフィールドの使用に関するチュートリアルを終了する前に、カスタムフィールドをElementorに表示する方法を簡単に紹介したいと思います。

この方法を使用すると、ユーザーが送信したコンテンツの高度なテンプレートを簡単に構築できます。この例では、Elementorに空のテキストブロックがあります。このスクリーンショットの、ダイナミックタグ というラベルが付いた上部のアイコンをクリックしてください。

次に、ACFフィールドを選択し、ステップ2で作成したカスタムフィールドを選択します。

これで、このElementorテンプレートを使用するたびに、カスタムフィールドの内容が投稿に表示されます。これにより、WPFormsで収集したカスタムフィールドデータを簡単に表示できます。

ゲスト投稿のカスタムフィールドの表示方法に関するFAQ

ゲスト投稿フォームにカスタムフィールドを追加して表示する方法は、読者の間で人気のあるトピックです。それに関する一般的な質問への回答を以下に示します。

WPFormsとACFを連携させるにはどうすればよいですか？

WPForms ProとAdvanced Custom Fieldsの両方をインストールし、まずACFでカスタムフィールドを作成します。WPFormsゲスト投稿フォームで、設定 » 投稿送信に移動し、カスタム投稿メタセクションまでスクロールします。

ACFフィールド名（左側）をWPFormsフィールド（右側）にマッピングします。両方のプラグインがアクティブになると、統合は自動的に行われます。追加の設定は不要です。

WordPressでカスタムフィールドを使用するにはどうすればよいですか？

カスタムフィールドは、標準の投稿コンテンツ以外の追加情報を保存します。WordPressでは、カスタムフィールド » 追加に移動してフィールドグループを作成し、テキスト、テキストエリア、またはドロップダウンオプションなどの個々のフィールドを追加します。

テーマでthe_field()関数を使用してカスタムフィールドデータを表示したり、Elementorのようなページビルダーでダイナミックタグを使用して表示したりできます。

WordPressのカスタムフィールドとは何ですか？

カスタムフィールドは、WordPressの投稿やページに追加のデータストレージ領域です。これらは「投稿メタ」フィールドとも呼ばれます。たとえば、商品の価格、著者の経歴、またはレビュー評価のためにカスタムフィールドを作成する場合があります。

通常のコンテンツとは異なり、カスタムフィールドは構造化データを保存するため、ウェブサイト全体で一貫して表示したり、並べ替え、フィルタリング、または特別なレイアウトに使用したりできます。

WordPressの投稿にカスタムフィールドを表示するにはどうすればよいですか？

テーマファイルでPHPコードを使用するか、Elementorのようなページビルダーを使用してカスタムフィールドを表示できます。コード方法の場合は、データが表示される場所に<?php the_field(‘field_name’); ?>を使用します。

Elementorの場合は、テキストウィジェットを追加し、ダイナミックタグ » ACFフィールドを使用してカスタムフィールドデータをプルします。どちらの方法でも、ゲスト投稿フォームから収集された情報が自動的に表示されます。

WordPressでカスタムフィールドを有効にするにはどうすればよいですか？

カスタムフィールドはWordPressで常に利用可能ですが、投稿エディターで非表示になっている場合があります。それらを表示するには、任意の投稿を編集し、画面オプション（右上）をクリックして、「カスタムフィールド」にチェックを入れます。

ただし、ゲスト投稿の送信に関しては、これを有効にする必要はありません。WPFormsとACFは、インターフェースを通じてカスタムフィールドの作成と管理を自動的に処理します。

WordPressのページや投稿にカスタムフィールドを追加するにはどうすればよいですか？

ACFがインストールされていると、投稿の編集時にカスタムフィールドが自動的に表示されます。WPFormsを介したゲスト投稿の場合は、フォームが送信されるとカスタムフィールドが自動的に入力されます。

個々の投稿に手動で追加する必要はありません。フォームの送信プロセスがこれを処理します。データの表示については、テーマテンプレートを編集するか、Elementorの動的コンテンツ機能を使用します。

WPFormsの投稿送信機能は、ユーザー生成コンテンツに使用できますか？

はい、投稿送信アドオンは、ゲスト投稿、求人情報、お客様の声、コミュニティ投稿など、あらゆるユーザー生成コンテンツに最適です。

フォーム送信からWordPressの投稿を自動的に作成し、作成者を割り当て、カテゴリを設定し、カスタムフィールドデータを処理します。

公開前に投稿をモデレーションし、ユーザーが送信したコンテンツに対する編集権限を完全に維持できます。

次のステップ：ゲスト投稿の送信をさらに増やす

これでカスタムフィールドが設定されたゲスト投稿フォームがセットアップされました。サイトのユーザー送信コンテンツをさらに増やすには、ブログでゲスト投稿を増やす方法に関するこれらのヒントをご覧ください。

WordPressフォームを今すぐ作成

フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。

この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。