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

公開: 2016-09-22

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

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

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

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

1.投稿エディタ画面に移動し、[カスタムフィールド]をオンにします。

カスタムフィールドオプション

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

custom-fields-in-post

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

3.キー（この場合は「運動の種類」）を追加します。このボックスを使用して、投稿に特定の詳細を追加します。「Enternew」をクリックして、フィールドにキーを入力します。

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

type-of-exercise-01

5.投稿を保存します。

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

CMB2でカスタムメタボックスを作成する方法

数年前、私は投稿をクエリして、投稿がGoogleマップに書かれた場所を表示する方法を探していました。私の調査では、ストアの構築方法に関するブログ投稿に出くわしました...

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

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

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

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

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

<?php the_meta(); ?>

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

カスタムフィールド-1

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

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

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

この例について言及する1つのこと：子テーマは、非常に人気のあるWordPressTwentyFifteen親テーマから作成されました。カスタムフィールドを表示する場所を試している場合は、 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>として設定されていますが、別の見出しまたは段落スタイルに簡単に調整できます。リスト形式にしたくない場合は、好きなように構成することもできます。

例-02

条件付きカスタムフィールド

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

<?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>

<?php } ?>
</ul>

例-03

AdvancedCustomFieldsプラグイン

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

フィールドグループ

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

field-group-acf

これは、このプラグインで実行できることの表面をかろうじて傷つけます。全体像を把握するには、必ずAdvancedCustomFieldsのWebサイトにアクセスしてください。

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