WordPressでカスタムフィールドを設定する方法

WordPressには様々な便利な機能がありますが、その中のひとつにカスタムフィールドがあります。

カスタムフィールドとは、WordPressの投稿ページにある「タイトル」と「本文」以外の情報を入力するための補助的な入力欄の様なものです。

設定を覚えればとても便利なので、ぜひこの記事を参考にしてみてください。

カスタムフィールドの表示・入力方法

カスタムフィールドは、WordPressの初期状態では表示されていません。

以下の手順で表示させることができます。

1. 投稿ページの右上にある「表示オプション」をクリックする。

2. 「表示する項目」という画面が出てきたら、その中の「カスタムフィールド」にチェックを入れる。

すると、カスタムフィールドのテキストボックスが表示されます。

これに情報を入力していくことで、テーマやプラグイン側からその情報を利用することができるようになります。

3. 入力が終わったら、「カスタムフィールドの追加」ボタンをクリックする。

一旦設定すると、カスタムフィールドの名前を一覧から選択できるようになります。新規追加をクリックすれば、新しい名前を追加することも可能です。

また、カスタムフィールドを最初に設定した投稿記事以外でも、既存・新規記事関わらずこの機能は有効となります。

4. 最後に「保存」または「公開」ボタンをクリックして記事を保存する。

カスタムフィールドを記事内に表示する方法

カスタムフィールドを記事に追加できたら、次はそれをサイト上で表示するようにしていきます。

それぞれの記事にカスタムフィールドを表示させるためには、以下の様な「the_meta() テンプレートタグ」を使用します。

このタグは「WordPress ループ」というWordPressの投稿を表示するためのPHPコードの中において下さい。

<?php the_meta(); ?>

HTMLのソースコードでは以下のように表示されます。

<ul class='post-meta'>
 <li>
  <span class='post-meta-key'>カスタムフィールドの名前1: </span>
  カスタムフィールドの値1
 </li>
 <li>
  <span class='post-meta-key'>カスタムフィールドの名前1: </span>
  カスタムフィールドの値2
 </li>
</ul>

カスタムフィールドの名前は「post-meta-key」というクラスの <span> 要素に囲まれるので、スタイルシートを使って見た目を変更することも可能です。

以上がカスタムフィールドの設定と表示の方法です。

カスタムフィールドをどんどん使って、自分好みのWordPressサイトを作っていきましょう。


イベント