WordPress Gutenbergカスタムフィールドのチュートリアル：プラグインと手動による方法を完全解説

カスタムフィールドは、WordPressの投稿やページにメタデータを追加するための強力な機能です。この方法によって、以下のことが可能になります。ウェブサイトのコンテンツ構成の拡大属詳細情報の提供著者プロフィール、製品評価、レビュー、その他のドメイン固有のコンテンツなどです。この記事では、WordPressで グーテンベルク ウェブサイトへのカスタムフィールドの追加と表示について、プラグインによる方法と手動による方法の両方を取り上げ、詳細な手順とヒントを説明します。

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

カスタムフィールドはメタデータとも呼ばれ、WordPressの各投稿やページに特定の追加情報を追加することができます。これらのフィールドはバックエンドの管理画面に追加データを保存するだけでなく、フロントエンドのページを通じて訪問者に表示することもできます。

カスタムフィールドの利点は、ページのテンプレートや構造を変更することなく、さまざまなニーズに合わせて独自の情報をコンテンツに追加できることです。これは、eコマース、不動産、ブログなど、特定の業界や用途に非常に役立ちます。

プラグインによるカスタムフィールドの作成

ほとんどのWordPressユーザーにとって、プラグインを使用することはカスタムフィールド機能を実装する最も簡単な方法です。プラグイン アドバンスドカスタムフィールド（ACF） プラグインを例に挙げると、これは最も人気のあるカスタムフィールドプラグインの1つです。

ステップ1：ACFプラグインのインストールと有効化

1. WordPressのダッシュボードにログインします。
2. 切り替える プラグイン > 新しいプラグインの追加.
3. 検索ボックスに入力 高度なカスタムフィールドプラグインが見つかったら 取付 さらに アクティブ化.

ステップ2: カスタムフィールドグループの作成

1. プラグインを有効化した後、WordPressダッシュボードのメニューにある カスタムフィールド オプションクリックするとACFプラグインの設定に入ります。

2. ACF画面で 新規追加 をクリックして新しいフィールドグループを作成します。

3. Field Groups画面で、グループの名前と説明を入力します。必要な数のフィールドを作成します。一般的なフィールド・タイプは以下のとおりです。コピーそして数値的そして日付そしてチェックボックスなど、ドロップダウンメニューから適切なフィールドタイプを選択できます。

4. 各フィールドのラベル、名前、デフォルト値を指定します。ラベルはフロントエンドがユーザーに表示する名前で、名前はフィールドの内部識別子です。

5. 複数のフィールドを追加するには + フィールドの追加 ボタンをクリックして、フィールドグループにカスタムフィールドを追加します。

ステップ3：フィールドグループの位置ルールの設定

ある ポジショニング・ルール タブでは、フィールドグループが表示される場所のルールを設定できます。特定のページまたは投稿でのみカスタムフィールドグループの表示を制御できます。

たとえば、次のルールを設定します。 ページ - イコール - ショッピングカートフィールドがカートテンプレートのページに表示されます。カテゴリ、ページタイプ、カスタムテンプレートに基づいてフィールドのグループを表示するなど、より多くの条件を選択することもできます。

ステップ4：フィールドグループの保存

設定完了後 変更の保存 ボタンをクリックすると、カスタムフィールドグループが保存され、有効になります。

カスタムフィールドグループが正常に作成されたので、次にこれらのフィールドをあなたのページや投稿に適用.

Gutenbergウェブサイトでカスタムフィールドを使用する方法

カスタムフィールドが作成できたら、次の作業はGutenbergエディタのコンテンツに追加することです。Gutenbergでは、ダイナミックコンテンツ機能によってカスタムフィールドの値をページに表示することができます。

GutenKitプラグインをインストールして有効にしてください。

1. GutenKitプラグインは、Gutenbergエディタの拡張機能で、カスタムフィールドの統合などの追加機能を提供します。
2. GutenKit (Pro)プラグインをインストールして有効にすると、Gutenbergエディタでより多くのダイナミックコンテンツ機能を使用できるようになります。

GutenKitを使ったカスタムフィールドの追加

1. を作成または編集します。ページまたはポストGutenbergエディターに グーテンキット タイトルブロック

2. ブロックの設定パネルで 動的コンテンツ アイコンをクリックします（通常はツールバーにあります）。

3. オプション アドバンスドカスタムフィールド（ACF） オプションを選択すると、利用可能なすべてのフィールド・グループとフィールドが表示されます。

4. をクリックして、ドロップダウンリストから表示したいフィールドを選択します。 アプリケーションフォーマット.

Gutenbergページにカスタムフィールドの追加に成功しました。こうすることで、ページのコンテンツに動的に関連付けられ、特定のメタデータを表示するカスタムフィールドを作成できます。

結果を見る

ページを保存した後、カスタムフィールドが正しく表示されているかどうかを確認するために、ページをプレビューすることができます。

カスタムフィールドの手動設定（プラグインなし）

プラグインを使わずに手動でGutenbergページにカスタムフィールドを追加したい場合は、テーマファイルを編集する必要があります。この方法は開発者には適していますが、不適切な処理を行うとサイト上でエラーが発生する可能性があるため、初心者にはお勧めできません。

WordPressデフォルトのカスタムフィールドの有効化

1. ページや投稿を編集する場合は、右上の 3点メニュー(より多くのオプション）。

2. オプション 好き嫌いをクリックし、ポップアップウィンドウで有効にします。 カスタムフィールド オプション

3. 設定を保存すると、編集ページの下部にカスタムフィールドパネルが表示されます。

カスタムフィールドの追加

1. カスタムフィールドパネルで カスタムフィールドの追加フィールド名と値を入力します。
2. 複数のフィールドが必要な場合は、引き続き カスタムフィールドの追加 ボタンをクリックしてフィールドを追加します。

カスタムフィールドの表示（手動）

1. テーマフォルダを開き functions.php ドキュメンテーション
2. 使う get_post_meta() 関数はデータベースからカスタムフィールドの値を取得します。
3. テンプレート・ファイルでは エコー カスタム・フィールドの値を出力します。

例

<?php 
$value = get_post_meta(get_the_ID(), 'your_custom_field', true)；
echo $value.
?>

このコードは、現在の投稿またはページの カスタムフィールド フィールドの値。

よくある質問

WordPressでプラグインを使わずにカスタム・メタ・フィールドを追加するには？

を使用することができます。 add_meta_box() 歌で応える update_post_meta() 関数は functions.php カスタムフィールドはファイルに手動で追加します。手動の方法はコーディング経験のある開発者に適していますが、ほとんどのユーザーにとってはプラグインアプローチの方が簡単.

WordPressでカスタム・ユーザー・メタ・フィールドを追加するには？

投稿フィールドやページフィールドと同様に、カスタムユーザーフィールドはプラグイン(ACFなど)を使ってポジショニング・ルール特定のユーザー・ロールに割り当てます。

カスタムフィールドに複数の値を追加するには？

ACFプラグインを使用すると、"and "条件を使用してフィールドグループに複数の値を追加し、フロントエンドに表示することができます。

カスタムフィールドを使ってサイドバーを表示するには？

サイドバーにフィールドを表示するかどうかは、ACFプラグインのFieldsグループで選択できます。ポジションルールによる表示位置の調整(ACFプロ).