WordPressカスタムフィールドのエッセンシャルガイド

WordPressについて、他のコンテンツ管理システム（CMS）とは一線を画す機能が1つあるとすれば、それはカスタマイズです。 WordPressのカスタムフィールドはCMSの組み込み部分であり、表示するメタデータや情報を拡張できるだけでなく、投稿やページの機能やユーティリティを完全に変更することもできます。 私たちはあなたが基本を理解するのを手伝いたいです。 カスタムフィールドとは何か、なぜそれらが役立つのかについて説明し、それらがどのように使用されるかの実際の例をいくつか示します。

私たちのYoutubeチャンネルを購読する

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

つまり、WordPressのカスタムフィールドを使用すると、特定の要素をページに追加できます。 カスタムフィールドのCodexエントリにあるように、特定の種類の画像、署名記事、著者の経歴、評価などのようなものである可能性があります。気分、現在読んでいる、聞いている、天気予報などです。

これらのフィールドは、投稿のメタデータと呼ばれるものを構成します（基本的には記事のメインコンテンツに含まれていないもの）。 デフォルトでは、WordPressには、タグ、カテゴリ、パーマリンク、注目の画像などの一般的な情報のメタボックスがあります。さらに追加する場合は、カスタムフィールドを使用します。

チームの各ライターが投稿を公開するために完了する必要のある情報を追加することもできます。

特定の基準がオフになるまで投稿を公開しない必須フィールドを作成できます。 したがって、これらのカスタムフィールドは、フロントエンドに関する情報だけのものではないことに注意してください。 バックエンドにも役立ちます。

WordPress投稿へのカスタムフィールドの追加

デフォルトでは、WordPressカスタムフィールドはページおよび投稿エディターで無効になっています。 ブロックエディタを使用している場合は、簡単に有効にできます。 画面の右上隅にある歯車のアイコンをクリックするだけです。 [オプション]を選択します。

次に、ポップアップする画面の下部近くにあるカスタムフィールドを有効にすることを選択します。 ページをリロードする必要があるため、最初に作業内容を保存してください。

有効にして再読み込みすると、カスタムフィールドのメタボックスが画面の下部に表示されます。 画面のコンテンツエディタ部分の下。

WordPressのカスタムフィールドは非常に強力ですが、デフォルトのフィールドはテキスト値に制限されています。 それらをより堅牢にするには、PHPと開発が必要です。 幸いなことに、それを実行するプラグインがあります。プラグインを実行する方法について説明します。 一部の投稿のテキストフィールドだけが必要で、プラグインが必要ない場合は、WordPressカスタムフィールドをテーマのフロントエンドに追加する方法について、以下をスキップしてください。 これは、デフォルトのフィールドだけでなく、Advanced CustomFieldsなどのプラグインによって生成されたフィールドにも当てはまります。

Advanced CustomFieldsプラグインの使用

WordPressのほとんどのものと同様に、実装には2つのオプションがあります。 PHPファイルを手動で編集してカスタムフィールド機能を追加するか、プラグインを使用できます。 この場合、プラグインルートを使用することを強くお勧めします。 ただし、PHPを編集してコードに入る必要があると感じた場合は、[外観]-[テーマエディター]で編集できます。 これは、カスタムフィールドのWPコーデックスページです。 これは、機能させるために必要なさまざまなテンプレートタグとフックにリンクしています。

ただし、コードを微調整するのではなく、Advanced CustomFieldsプラグインを使用することを強くお勧めします。 プラグインは、カスタムフィールド（および一部）から必要なすべてのものを許可するため、車輪の再発明の必要性を感じません。 それが機能するとき、それは機能します。 これを使って。

ACFをインストールしてアクティブ化すると、WordPress管理パネルの左側のサイドバーに[カスタムフィールド]エントリが表示されます。 [フィールドグループ] 、[新規追加] 、[ツール]の3つのオプションがあります。

フィールドグループはセットと考えることができます。 同じボックスに表示したいものはすべて、同じグループに含めます。 [新規追加]を使用すると、新しいグループと新しいカスタムフィールドの両方を追加できます。 ツールは、他のWordPressサイトからさまざまな既存のカスタムフィールドのセットをインポートおよびエクスポートする場所です。

ACFの基本

フィールド自体の作成は非常に簡単です。 [新規追加]ウィンドウに移動します。

いずれにせよ、ACFカスタムフィールドはフィールドグループに含まれます。 これは、同じボックスに含まれる特定のフィールドを意味します。 したがって、投稿エディタに表示する名前を付けることができます。 グループに個別のエントリを追加するたびに、[フィールドの追加]ボタンをクリックします。 同じメタボックスに異なるフィールドが必要になるたびに、これを実行します。 ロケーションルールは、ボックスが表示される場所とタイミングを決定します。 この例では、投稿タイプは投稿と等しいため、投稿にのみ表示されます。 ページやその他のカスタム投稿タイプではありません。

次に、フィールド自体の設定を実際に選択します。 それが何をするのか、そしてそれがサイトで提供する機能。

基本的に、配置（エディターの投稿コンテンツの下、サイドバー、コンテンツの上など）と、テキストおよびフィールド自体の配置を選択します。 画面に隠す領域が最も興味深いです。 カスタムフィールドの使用方法に応じて、ドラフトから他のすべてのメタボックスを除外できます。 このカスタムフィールドの外観の条件を選択し、他にどのボックスが表示されるかを決定します（存在する場合）。 多くの場合、これについて心配することさえありません。

ACFを使用したカスタムフィールドの作成

フィールドグループに名前を付けたら、[フィールドの追加]ボタンをクリックできます。 同じグループ内に任意の数のフィールドを含めることができますが、それらすべてを相互に関連付けておくようにしてください。 ACFで想像できるほぼすべての種類の入力フィールドを作成できます。

この例では、映画を見て、カスタムフィールドに評価を表示し、映画がストリーミングされているかどうか、ストリーミングされている場合はどこにあるかを一覧表示するポップカルチャーのWordPressサイトを実行しているとしましょう。

これらはすべて同じフィールドグループの下にありますが、フィールドは異なります。 上で見ることができるように、それはストリーミングですか？ フィールドは、公開前に必要なyes / noセレクターを備えたラジオボタンになるように設定されています。 さらに、フィールドが「はい」とマークされている場合に条件付きフィールドを表示する必要があります。 これは、[フィールドの追加]をもう一度押すだけで実行できます。

条件付きロジックトグルを有効にすると、対象となるフィールドと必要な値を選択するだけで済みます。 この場合、それはストリーミングですか？ はいと等しい必要があります。

投稿エディタでは、カスタムフィールドエントリは次のようになります。

また、投稿を公開すると、入力したメタデータが投稿の一部になります。 しかし、まだ1つの問題があります。 あなたはそれを見ることができず、あなたの訪問者も見ることができません。

WordPressフロントエンドでカスタムフィールドを表示する方法

これらすべてを完璧に行ったとしても、入力したデータは、少し調整しないとサイトのフロントエンドに表示されません。 結局のところ、それはどこに表示されますか？ 多くの場合、テーマにはメタデータとカスタムフィールドを表示する方法がありますが、それらはテーマごとに異なります。 ドキュメントのテーマオプションを確認してください。

フロントエンドにカスタムフィールドを表示するもう1つの方法は、組み込みのACFショートコードです。 ACFにはカスタマイザーやビルダーは組み込まれていませんが、次のショートコードはテキストフィールドにのみ使用できます。

ただし、テキストフィールドに限定されているため、多くの人にとっては使用が制限されている可能性があります。 ドキュメントの例のように、PHPにアクセスしてACFコードを使用することもできます。 また、ACF Proにアップグレードして、ビルダーでスタイルを設定したとおりにカスタムフィールドを表示する組み込みのGutenbergブロックにアクセスすることもできます。

しかし、私たちが言ったように、最近では多くのテーマにカスタムフィールドの統合が詰め込まれており、それがDiviでどのように処理されるかを示します。

Diviを使用してフロントエンドにカスタムフィールドを表示する方法

まず、多くのDiviモジュールがショートコードをレンダリングできることを忘れないでください。 多くの場合、ACFで作成されたテキストのカスタムフィールドは、前述のように、ショートコードを使用して簡単に挿入できます。

条件付きロジックとラジオ​​ボタンを使用する上記の例では、Diviの動的コンテンツ機能を使用します。 使い方もとても簡単です。 これはDiviテーマビルダーで表示されますが、通常のDiviビルダーでサポートされている文字通りすべてのモジュールで使用できます。 黒の+をクリックして、必要なモジュールを選択します。 このため、それはテキストモジュールです。

次に、カスタムフィールドを挿入するモジュールの部分を見つけます。 機能をサポートする場所の右側にある動的コンテンツアイコンを探します。

これをクリックして、すべてのカスタムフィールドを含む、使用可能なすべての種類の動的コンテンツのドロップダウンメニューから選択します。 それらは一番下にあるかもしれません。

Diviには、基本的にフィールドコンテンツに前後のラベルを追加するオプションがあります。 投稿の一部として自然に読んでもらいたいので、この映画はオンラインでストリーミングできますか？ フィールドがレンダリングされるときに、値の前に配置されます。 また、ラベルをACF値から分離するために、末尾にスペースを追加しました。

モジュール領域ごとに1つの動的コンテンツしか持てないため、他のフィールドに対してこのプロセスを繰り返します。 ただし、カスタムフィールドは条件付きですが、 Diviモジュールは条件付きではないことに注意してください。 したがって、条件フィールドでbefore / afterラベルを使用しても、そのラベルは引き続き表示されます。 それらを空白のままにすると、値はまったくレンダリングされません。

さらに、[生のHTMLを有効にする]オプションを使用すると、さまざまなプラットフォームへのリンクなど、ACFフィールドに入力したすべてのコードをレンダリングできます。

まとめ

ご覧のとおり、かなり複雑に見えますが、WordPressのカスタムフィールドは開発者が正しく理解する必要のない機能です。 ACFをインストールして、あなたとあなたのチームが情報を入力する方法のカスタマイズを開始するだけです。 レビューサイト、eコマースマーケットプレイス、または人生で起こっていることを共有したい単なるフレンドリーなブログであっても、投稿やページのメタデータを微調整して完成させることができれば、ウェブサイトを新しいレベルに引き上げることができます。

WordPressのカスタムフィールドは何に使用しますか？

SurfsUp /shutterstock.comによる注目の画像