超現場ブログ

Technique,Design and Events

WordPress投稿一覧にカスタムフィールドの値を取得表示させる

Twitter Facebook Google+ はてブ

wordpressAT

こんにちは!新橋校など関東で教えている田中です。

今回は、実際に今受講中の方が制作を進めているWordPressサイトで使用した技術を元にお話をします。
彼女はある実案件を受注しました。

そのサイトはWorkShopやギャラリーが開催されるたびにクライアントさまが記事を投稿し、時間の経過とともにステータスが「開催決定」から「受付中」へ、さらに「開催中」と変わって行く仕組みにしました。それとは別に「残りわずか」「キャンセル待ち」などのステータスも合わせて表示させたいと彼女は考えました。

各々の投稿記事は、ある一定の時期になるとステータスが変わるというものではなく、それぞれ個別にステータスが変わってくるため、日時を指定して自動でカテゴリーを変えるという手法が使えません。

もちろん、投稿者にはhtmlなどのコーディングスキルはないため、できる限り簡単に投稿ができるようにしなければなりません。そこでカスタムフィールドを用い、チェックボックスで簡単に選択できるようにしました。

個別投稿記事のカスタムフィールド

toko
上記は投稿ページのスクリーンショットです。タイトル以外は全てがカスタムフィールドで入力できるようになっています。

ダッシュボードのカスタムフィールド

wpAT2
こんな感じに、カスタムフィールドの入力フィールドが続いています。
今回は、3つのカテゴリーに設置するカスタムフィールドの項目が違うため、適応するカスタムフィールドの選択が容易にできるようにプラグインを使用しました。

投稿一覧に表示したい記事内容

投稿一覧には、投稿記事やパーマリンク、アイキャッチなどを取得表示させるための以下のようなphpタグがありますが、

<?php the_content(); ?>
<?php the_permalink() ?>
<?php echo get_the_post_thumbnail(); ?>

投稿記事をそのまま表示するのではなく抜粋してさわりのみのせるためのタグもあります。

<?php the_excerpt(); ?>

このタグを使用すれば投稿一覧によく見られる、110文字抜粋した後に「…」とつく、記事の抜粋表示をする事ができます。

投稿一覧にカスタムフィールドの一部の値を取得して掲載

ところが彼女は、このよくあるパターンの記事抜粋ではなく、上記の画像のように、カスタムフィールド内の要素の一部を取得して表示したいと考えました。
list
記事の抜粋をリストに表示するよりも、

  1. ステータス
  2. 開催回数
  3. 開催日
  4. 収容人数
  5. 費用

などを、箇条書きで表示した方が一目で記事内容がわかるからです。

カスタムフィールドの名前を取得する

以下の画像のように取得したいカスタムフィールド名をechoで返します。

<?php echo esc_html( $post->カスタムフィールド名 ); ?>

サンプル画像は、プラグインを使用したカスタムフィールドですので、本来のカスタムフィールドとダッシュボードのインターフェースが少し違いますが、入力フィールドの左側がカスタムフィールド名である事に変わりはありません。
wpAT2
取得したいカスタムフィールド名を以下のように続けて書いて行くだけで簡単に表示する事ができます。
wpAT
皆さんも試して見てください!

まずは無料の体験レッスン・カウンセリングへ!

あなたの目的や目標をお伺いしたうえで、
現在のスキルを分析し、
あなたに最適なカリキュラムをご提案します。

体験レッスン・カウンセリングの流れ

ご質問・ご相談の方はこちら

ご質問・ご相談ですか?

どんなことでもお気軽にご相談ください。

ご質問・ご相談はこちら

Copyright © 超現場主義 All rights reserved.