WordPressのカスタムフィールドを表示する

WordPressのカスタムフィールドを表示する

WordPressのカスタムフィールドを使用したことがなかったので、勉強がてら自作しているテーマにカスタムフィールドを表示してみることにしました。

WordPressのカスタムフィールドを表示すると、たとえば商品ページごとのカスタムフィールドに金額を設定しておき、商品一覧ページでそれぞれの商品金額を表示するとかできるので便利です。

カスタムフィールドを表示するやり方を手順にして説明します。

 

WordPressにカスタムフィールドを表示

 

WordPressでカスタムフィールドを使用したことがない場合は、カスタムフィールドが非表示になっているので、オプションの設定でカスタムフィールドを有効化して表示します。

 

 

カスタムフィールドを表示するために有効化する操作手順は、はじめに投稿編集画面で3つの点が縦に表示しているアイコンでオプションを表示します。

 

 

次に、表示したオプションの項目から「設定」をクリック。

 

 

そして、設定のサイドメニューで「パネル」を選択すると「カスタムフィールド」の項目が表示しているので「有効化してリロード」をクリックします。

 

 

するとカスタムフィールドを有効化することができたので、投稿編集画面の下部にはカスタムフィールドの領域が追加され表示します。

表示したWordPressのカスタムフィールドには新規追加をクリックして名前と値を入力します。

 

 

例えば名前に「price」と入力し、値に「1234」と入力した場合には、カスタムフィールド名がpriceという配列のキーになり、「1234」という値はカスタムフィールドのpriceキーに値として保存されることになります。

カスタムフィールドの名前と値の入力後には「カスタムフィールドを追加」のボタンをクリックして名前と値を保存します。

 

Advertisement

 

カスタムフィールドの値を取得して表示

 

保存したカスタムフィールドの値はWordPressの関数を使用して表示します。

使用するWordPressの関数はget_post_meta()関数です。

 

get_post_meta( $post_id, $key, $single );

 

WordPressのカスタムフィールドの値を表示することができるget_post_meta関数はカッコ内に引数を3つ使います。

$post_idは、カスタムフィールドで入力した値を取得する記事のIDです。$post->ID を使って記事のIDを取得できます。

$keyは取得する名前の文字列です。例えば投稿のカスタムフィールドで名前をpriceで設定している値を取得したい場合は$keyにpriceと記述します。

$singleはtrueかfalseを記述します。 trueを記述した場合は文字列として表示します。 falseを記述した場合は、カスタムフィールドの配列が返ってきます。

WordPressにカスタムフィールドの値を表示するget_post_metaの記述例は以下のPHPコードです。

 

<?php
    $price_number = get_post_meta( $post->ID, price, true );
    echo $price_number;
?>

 

Advertisement

 

get_post_metaの第一引数に$post->IDを記述して記事のIDを取得し、第二引数では例としてpriceというキーを取得しています。

第三引数はカスタムフィールドの値を文字列で表示するのでtrueを指定します。

そして引数を与えたget_post_metaを代入した変数を使用しechoでカスタムフィールドの値を表示します。

このように記述したget_post_metaのPHPコードはpriceというカスタムフィールド名を設定しているWordPressのテンプレートに記述します。

 

 

例えば今回は投稿ページの1つにカスタムフィールドの名前をpriceに、値を1234に設定しているのでsingle.phpにget_post_metaのPHPコードを記述すると、値の1234を設定している投稿ページで1234が表示できます。

また、WordPressのカスタムフィールドの名前は一度設定してしまえば他のページで再利用が可能です。

 

 

値の1234を設定してる投稿ページとは別の投稿ページのカスタムフィールドで選択をクリックするとpriceというフィールド名を選択できますので、priceの値を新たに5678とかで入力すると、その投稿ページでは1234の値ではなく5678の値を取得して表示することができます。

 

 

カスタムフィールドのキーと値を表示

 

WordPressにカスタムフィールドを表示して、いくつかの投稿ページにそれぞれの値を表示すると、カスタムフィールド名にどんな値が入っているのか確認したい場合があります。

そんなときにはカスタムフィールドのキーと値のペアをWordPressのthe_meta()関数で表示、またはget_post_meta関数で表示します。

 

<?php the_meta(); ?>

 

WordPressのthe_meta()関数でカスタムフィールドのキーと値を表示する場合は上記の記述のようにPHPの開始タグと終了タグでthe_meta()を囲んだコードをキーと値を確認したいページのテンプレートに記述します。

 

 

すると上の画像のように、そのページに設定されているカスタムフィールドの名前と値を表示することができます。

WordPressにカスタムフィールドのキーと値を配列で表示する場合はget_post_metaをvar_dumpです。

 

<pre>
<?php
    $meta = get_post_meta( get_the_ID() );
    var_dump( $meta );
?>
</pre>

 

カスタムフィールドのキーと値を配列で表示した表示結果は以下です。

 

array(5) {
["_edit_lock"]=>
array(1) {
[0]=>
string(12) "1632192825:1"
}
["_edit_last"]=>
array(1) {
[0]=>
string(1) "1"
}
["price"]=>
array(6) {
[0]=>
string(4) "1234"
}
["the_page_memo"]=>
array(1) {
[0]=>
string(0) ""
}
["classic-editor-remember"]=>
array(1) {
[0]=>
string(12) "block-editor"
}
}

 

the_meta()で表示したときとは違い、値の文字数などを得られるので詳細なカスタムフィールドのキーと値を表示することができます。

ちなみに_edit_lockや_edit_lastのようにアンダーバーが先頭にあるカスタムフィールド名はWordPress本体が出力しているものです。

 

カスタム投稿でカスタムフィールドを表示

 

WordPressに表示したカスタムフィールドで名前と値を設定してから、テンプレートでカスタムフィールドの値を表示するまでを何度かテストして理解ができてきたら、あとは実際にカスタムフィールドを表示しまくって使い方に慣れるのみです。

勉強がてら自作しているWordPressテーマのカスタム投稿で商品ページっぽいのを作成して、商品金額をカスタムフィールドで表示してみたので、カスタムフィールドの使い方のヒントになればと思います。

まずはWordPressのカスタム投稿タイプを作成してカスタム投稿ページを6ページくらい作成、そして6ページをカスタム投稿一覧ページにもしておきます。

 

 

次に作成したカスタム投稿6ページそれぞれのカスタムフィールドで名前をpriceにして、ページに掲載する商品の金額を値に入力します。

そしてカスタム投稿一覧ページのテンプレートで商品金額を表示する位置にWordPressのget_post_meta関数でカスタムフィールドの値を取得し表示します。

 

<div class="archive_item">
    <h2><a class="item_link" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <div class="cos-field">
    <?php
        $price = get_post_meta($post->ID, 'price', true);
        if($price){ ?>
            <p>価格 <? echo number_format($price) . '円'; ?></p>
        <?php
        } else {
            echo "入荷待ち";
        }
    ?>
    </div>
</div>

 

上記のget_post_meta関数の使い方は、これまで説明してきた書き方とは少し異なります。

異なる部分はif文でカスタムフィールドのpriceキーがあるかないかを真偽して、カスタムフィールドにpriceキーとその値が設定してある場合は、カスタムフィールドの値を表示。

値がない場合は入荷待ちと表示するように条件分岐した書き方です。

WordPressのカスタム投稿でカスタムフィールドを表示してみた表示結果は以下の画像です。

 

 

カスタム投稿ページごとのカスタムフィールドに商品金額を入力した数字はpriceキーに格納されているので、カスタム投稿一覧ページではカスタム投稿ページごとの商品金額が表示します。

もし6つの商品のうち1つの商品金額に変更があった場合には、該当のカスタム投稿ページのカスタムフィールドで値を変更するだけで金額の変更が可能なため修正が簡単です。

WordPressでカスタムフィールドの活用はそれぞれのサイトによりけりですが、サイトのコンテンツに対してカスタムフィールドを、どのように活用できるのかイメージしながら、自分に合ったカスタムフィールドの使い道を発見して表示してみてください。

WordPress使い方カテゴリの最新記事