ゲスト投稿でカスタムフィールドを使う方法を学びたいですか？
カスタムフィールドは、特定の投稿に関連する追加情報を保存できるWordPressの強力な機能です。その情報を投稿のコンテンツと一緒に表示することができます。
この記事で
カスタムフィールドとは？
カスタムフィールドは、WordPressで情報を収集したり表示したりするために使用する追加フィールドです。投稿メタ」フィールドと呼ばれることもあります。
あなたのサイトには、すでにいくつかのカスタムフィールドがあると思われます。例えば、All in One SEOプラグインは、ページのmeta descriptionとmeta titleにカスタムフィールドを使用しています。
独自のカスタムフィールドを作成し、投稿、ページ、カスタム投稿タイプの追加情報を保存することができます。例えば、レビューを書く場合、10点満点で評価するための別のフィールドを持つことができます。そして、レビューを公開するたびに同じ場所に評価を表示するように投稿テンプレートを変更できます。
カスタムフィールドは便利です：
- カスタムレイアウトの作成
- 広告やブランドロゴのようなコンテンツをRSSフィードに追加する
- オートメーションでWordPressの動作をコントロール。
さて、カスタムフィールドが何のためにあるのかを理解したので、カスタムフィールドを使ってゲスト投稿フォームを作ってみましょう。
WordPressのゲスト投稿でカスタムフィールドを使う方法
チュートリアルの後半で、重要なWordPressファイルを編集する予定です。始める前に、バックアッププラグインを使用してWordPressサイトをバックアップすることをお勧めします。
1.プラグインのインストール
このチュートリアルでは、3つのプラグインをインストールする必要がある：
- WPFormsプロ
- WPForms Post Submissionsアドオン
- Advanced Custom Fieldsプラグイン（ACF）の無料版または有料版。
WPForms Proがインストールされ有効化されたら、WPForms " Addonsに移動してPost Submissionsをインストールします。
下にスクロールし、クリックしてインストールする。
最後に、無料のAdvanced Custom Fieldsプラグインをインストールしよう。WordPressのダッシュボードで、プラグイン " 新規追加にアクセスしてください。
Advanced Custom Fieldsを検索し、Install Nowボタンをクリックします。
プラグインがインストールされたら、忘れずに「有効化」をクリックしてください。
素晴らしい！これですべての設定が完了しました。次にカスタムフィールドを作成しましょう。
2.ACFでカスタムフィールドを作成する
この例では、カスタムフィールドを使ってゲストブロガーのウェブサイト名を収集し、その名前の下に表示します。
始めに、サイドバーを見て、カスタムフィールド " 新規追加をクリックします。
一番上に、新しいフィールドグループに名前を付けます。フロントエンドには表示されないので、ここで何を入力してもかまいません。後でわかるような名前にしてください。
Add Fieldをクリックしてカスタムフィールドの作成を開始します。
いくつかのオプションが下にドロップダウンすることに気づくだろう。これらすべてを記入する必要はありません。ここでは2つを使用します：
- フィールド・ラベル- 新しいフィールドに意味のある名前を付けます。
- フィールド・タイプ- 今回はシンプルなテキスト・フィールドを使うので、「テキスト」にしておきます。
フィールド名」フィールドが自動的に入力されることに気づくだろう。
Publishをクリックして、新しいカスタムフィールドを保存します。
新しいフィールドが保存されたことがわかります。フィールド名に注意してください-次のステップで必要になります。
これで、サイトのフロントエンドにゲスト投稿フォームを作ることができます。
3.ゲスト投稿フォームを作成する
このステップでは、ゲスト投稿フォームを作成し、ゲストブロガーが記入できるように新しいフィールドを追加します。
ユーザー投稿用のフォームがまだない場合は、まずWordPressのナビゲーションバーにあるWPForms " Add Newを クリックしてください。
ブログ記事投稿フォームをクリックして開きます。
デフォルトを微調整する必要がある場合は、ユーザー投稿用のフロントエンドフォームを作成するガイドをご覧ください。基本的な準備ができたら、このチュートリアルに戻ってください。
4.ゲスト投稿フォームにカスタムフィールドを追加する
ユーザー投稿フォームができたので、ステップ2で作成したカスタムフィールドを追加します。
左側のパネルから一行テキストフィールドを右側のフォームプレビューにドラッグしてみましょう。これをウェブサイト名と名付けます。
これで、Advanced Custom Fieldsプラグインで作成したフィールドにフィールドをマッピングする準備ができました。
まず、左側の「設定」をクリックし、次に「投稿」をクリックします。
この画面は、投稿投稿アドオンのすべての機能と特徴を示しています。ここで投稿ステータスやその他の設定を行うことができます。
カスタムフィールドを追加するには、カスタム投稿メタセクションまでスクロールダウンします。
左側に、ACFで作成したフィールド名を 貼り付けます。右側には、WPFormsで作成したウェブサイト名のフォームフィールドを選択します。
これだけです！今後、ウェブサイト名フィールドに入力された内容はカスタムフィールドに保存され、投稿テンプレートに表示できるようになります。
保存をクリックしてフォームを保存します。
ゲスト投稿の準備はできましたか？まだフォームを公開していない場合は、埋め込みボタンをクリックしてフォームを公開します。自動的にページに追加することも、ショートコードを使うこともできます。
さて、フロントエンドでゲスト投稿フォームを表示すると、先ほど追加したフィールドが表示されます。
フォームにテスト入力を行ってください。送信されると、サイトのフロントエンドにフィールドを表示することができます。
5.ウェブサイトにカスタムフィールドを追加する
WordPressでカスタムフィールドのデータを表示するには、さまざまな方法があります。簡単な例をいくつか紹介しよう。
この最初の方法には、WordPressのテーマファイルに関する知識が必要だ。先に進む前に、あなたのウェブサイトの子テーマを作ってください。(この時点でサイトをバックアップしておくのもいい考えだ）。
これらの例ではすべて the_field() 関数を使用します。
まず、フィールドを表示するためにシングル投稿テンプレートを編集しましょう。Appearances " Theme Editorにアクセスしてください。
というテーマファイルを開いた。 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に空白のテキストブロックがあります。このスクリーンショットでDynamic Tagsと 表示されている上部のアイコンをクリックします：
次にACF Fieldを選択し、ステップ2で作成したカスタムフィールドを選択します。
これで、このElementorテンプレートを使うたびにカスタムフィールドの内容が投稿に表示されるようになります。これでWPFormsで収集したカスタムフィールドのデータを超簡単に表示できます。
次のステップゲスト投稿を増やす
カスタムフィールドでゲスト投稿フォームを設定したところで、あなたのサイトにもっとユーザー投稿コンテンツを増やしたいと思うでしょう。そのために、あなたのブログにゲスト投稿を増やす方法のヒントをチェックしてみましょう。
フォームを作る準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今すぐ始めましょう。WPForms Proには Post Submissions アドオンが含まれており、14日間の返金保証があります。
この記事がお役に立ちましたら、Facebookや TwitterでWordPressの無料チュートリアルやガイドをフォローしてください。
投稿時にすでに存在していた3つのフィールド以上を、最終的なブログ・ビューに表示することができません！カスタムフィールドを試してみましたが、うまくいきませんでした。
こんにちは、マリアム、
この件に関するご意見をお聞かせいただくために、サポートまで詳細をお知らせください！
ありがとう🙂。
投稿投稿にtrue/falseカスタムフィールドを使用する必要があります。現在のところ、このフィールドには常に真偽値以外の値が送信されるため、フィールドは常に真になります。カスタムフィールドにtrue/falseのブール値を送信する簡単な方法はありますか？
こんにちは、ソンドレ、
ご連絡ありがとうございます！サポートまでご連絡ください。