WordPress でカスタム フィールドを作成して使用する方法

WordPress カスタム フィールドは、サイトの典型的な投稿またはページ コンテンツを拡張する優れた方法です。 これらは、WordPress サイトの投稿またはページに添付されるメタデータの一部です。つまり、この方法を使用することで、あらゆる種類の追加情報をコンテンツに追加できます。

キー/値形式で編成されたカスタム フィールドは、複数の投稿またはページにデータを追加するために使用されます。 キーは、一貫性を提供し、「アイテム」などの特定のフィールドを識別する名前です。 これはいつも同じです。 値は、フィールドに表示される情報です。 入力された情報に応じて、値は投稿ごとに異なります。

投稿にカスタム フィールドを追加する

次の手順では、投稿でカスタム フィールドを使用する方法を示します。 それらをページで使用したい場合は、同じアイデアが適用されますが、投稿ではなくページの構築を担当するテンプレート ファイルに実装する必要があります。

1.投稿編集画面に移動し、「カスタムフィールド」にチェックを入れます。

2. 投稿編集の一環として、[カスタム フィールド] ボックスを探します。 投稿ページを表示すると、下部に「カスタム フィールド」という見出しの新しいセクションが表示されます。

では、WordPress のカスタム フィールドの動作の非常に基本的な例を見てみましょう。 フィットネスブログのこの例で物事が形作られます. カスタム フィールドを使用して、投稿でのさまざまな種類の身体活動を追跡および一覧表示します。

3. キーを追加します。この場合は「エクササイズの種類」です。 このボックスを使用して、特定の詳細を投稿に追加します。 「Enter new」をクリックし、フィールドにキーを入力します。

4. 値を追加します。 今回はズンバで行きましょう。 これは、この特定の投稿にのみ表示されることに注意してください。 別の投稿では、「エリプティカル」や別のタイプのエクササイズなど、別の値を入力できます。

5. 投稿を保存します。

現時点では、実際にはあまり見えません。 情報を表示するには、書式を追加する必要があります。 これまでのところ、この追加情報はデータベースに保存されているため、表示するために呼び出すことができます。 このチュートリアルでは、これらのカスタム フィールドを (ページではなく) 投稿に表示することを選択したので、すべてをフォーマットする最も基本的な方法を説明します。

投稿にカスタム フィールドを表示する

テンプレートの変更を使用してカスタム フィールドを定期的なサイト データとして追加することは、効率的な方法です。 投稿の最初にカスタム フィールドを表示することから始めましたが、後で一番下の方が見栄えが良いと判断したとします。 テンプレートの変更を使用すると、テンプレートを変更するとサイト全体が更新されるため、その変更は簡単です。 この方法を使用せず、代わりに各投稿内に個別に情報を保存した場合、すべての投稿を編集して変更を加える必要があり、変更がはるかに困難になります.

この例では、投稿の前にカスタム フィールドが表示されるため、読者は投稿全体を読む前にエクササイズの種類をすぐに確認できます。 このように表示するには、WordPress ループの前にデータが呼び出されます。

注: もちろん、これらのカスタマイズは子テーマで行う必要があり、 single.phpファイルを使用します。 いつものように、このようなカスタマイズは開発環境でテストするのが最適です。

1. single.phpファイルを開き、次のコードを WordPress ループの外に追加します。

 <?php the_meta(); ?>

次のように表示されます。

これをページの別の場所に表示したい場合は、そのスニペットをループ内またはループの後に配置してみてください。 たとえば、関数を<main>タグ内に配置すると、カスタム フィールドの情報がメイン コンテンツの一部として表示されます。

 <div class="content-area"> <main class="site-main" role="main">

このアプローチは、作成した他のカスタム フィールドも表示するために機能します。

この例について 1 つ言及しておくと、子テーマは、非常に人気のある WordPress Twenty Fifteen 親テーマから作成されました。 カスタム フィールドを表示する場所を試している場合は、 single.phpファイル以外に、子テーマに必要なテンプレートが他にもあるかもしれません。 投稿に情報を表示するために、 content.phpが子テーマに追加されました。 上記のスニペットは、投稿の一部として表示されるように、ページのコンテンツ内に配置されました。

2. フィールドのスタイルを設定します。 インスペクタに移動すると、いくつかの新しいクラスがページに追加されていることがわかります。

2 つの異なるカスタム フィールドを使用した例は次のようになります。

• エクササイズの種類:ズンバ
• 時刻:朝

リストとして扱うのはとても簡単です。 いくつかのスタイリングにより、サイトのスタイルとより統合されたように見えます. CSS をいくつか変更するだけで、テキストの色とリストのスタイルを調整できます。

 ul.post-meta li { color: #898989; list-style-type: none; } ul.post-meta li span.post-meta-key { color: #1fc3d2; font-weight: bold; }

その他のカスタム フィールドのカスタマイズ

前の例のスタイリングは問題なく機能しますが、さらに多くのことを行います。 次の例は、特定のユース ケース向けに追加の表示オプションを使用してカスタム フィールドを調整する方法を示しています。 カスタム フィールドを投稿の一部として読み上げ、役立つ見出しでコンテキストを設定することは、投稿への素晴らしい追加になります。 順を追って説明している場合は、必ず<?php the_meta(); ?> <?php the_meta(); ?>前の例で追加したもの。

この例では、少し変更されています。 キーは「演習」に簡略化されているため、テンプレートに簡単に追加できます。コード スニペットは子テーマの content.php ファイルに追加されているため、前後ではなく投稿コンテンツに表示されます。 .

 <?php $exercises = get_post_meta($post->ID, 'exercises', false); ?> <h3>Today's exercise:</h3> <ul> <?php foreach($exercises as $exercise) { echo '<li>'.$exercise.'</li>'; } ?> </ul>

カスタム フィールドは、「今日の演習:」という見出しの下にリスト形式で表示されます。 これは<h3>として設定されていますが、別の見出しまたは段落スタイルに簡単に調整できます。 リスト形式にしたくない場合は、好きなように構造化することもできます。

条件付きカスタム

田畑

カスタムフィールドが含まれていない場合があります。 たとえば、行使値のない投稿があるとします。 これにより、フォールバック情報を表示できるようになるため、空白のままではありません。

 <?php $exercises = get_post_meta($post->ID, 'exercises', true); ?> <h3>Today's exercise:</h3> <ul> <?php if ($exercises) { ?> <?php echo '<li>' .$exercises. '</li>'; ?> <?php } //if there is nothing for exercises then display else { ?> <li>Today was a rest day.</li>

高度なカスタム フィールド プラグイン

そのチュートリアルに従うことで、カスタム フィールドを簡単に起動して実行できます。 プラグインを使用してカスタム フィールドを追加したい場合は、そのためのオプションも利用できます。 高度なカスタム フィールドは、非常に人気のあるオプションです。 これは、WordPress のデフォルトのカスタム フィールド インターフェースを置き換えます。 このチュートリアルから作成された最終製品は、このプラグインでも作成できます。

フィールド グループ

Advanced Custom Fields プラグインでは、フィールド グループを使用できます。これは、上記のチュートリアルと密接に関連しているため、言及する価値があります。 基本的に、ミニ フィールド グループの非常に基本的なバージョンを作成しました。 高度なカスタム フィールド グループには、カスタム フィールド、場所のルール、および表示オプションが含まれます。 各フィールド グループは、その場所のルールを使用して、必要に応じて適切な場所にフィールドを表示します。 手動で行う方法と同様に、これらの表示オプションを使用すると、ページを自由にカスタマイズできます。 このプラグインで選択できるフィールド グループはたくさんあります。

これは、このプラグインでできることのほんの一部です。 全体像を把握するには、高度なカスタム フィールドの Web サイトにアクセスしてください。

カスタム フィールドは、WordPress のすぐに使える機能です。 テンプレートを少し変更するだけで、この機能を Web サイトに簡単に追加できます。 これらの手順は基本をカバーしており、少し実験するだけで、カスタム フィールドの実装方法を明確に理解できます。 次のプロジェクトを計画するときは、カスタム フィールドが提供する柔軟性を考慮してください。 サイト全体の変更を容易にしながら、さまざまなタイプのコンテンツに対応できます。