wordpress初心者でも楽勝!カスタムフィールドの項目を取得してページ上に表示してみる

wordpress初心者でも楽勝!カスタムフィールドの項目を取得してページ上に表示してみる

こんばんわ。taisonです。
昨日は気温も涼しくなり、過ごしやすい日でしたね。
簡単に気温変えられたら、一年中過ごしやすい日にできるのに、、、、

さて、今回はwordpressを使っている方におなじみのカスタムフィールドを使った便利ワザを、初心者向けに書いてみたいと思います。

まずカスタムフィールドってなんぞや?

カスタムフィールドというのはカンタンに言うと、自分で自由に設定した値を保持しておけるwordpressの機能になります。
論より証拠ということで以下をご覧下さい。

カスタムフィールド画面3

こんな感じで好きな名前を付けて、そこに値を紐付けることができます。
お店のメニュー表や予定の更新表など、情報だけ更新したいような時に非常に役立ちます。
もちろん保管するだけだったら宝の持ち腐れになっちゃいますから、この値を使ってラクをしちゃいましょう。
まずは一からカスタムフィールドの使い方を書いていきますね。

カスタムフィールドを有効にする

まずカスタムフィールドを有効にするため、カスタムフィールドを使いたい記事を開き、右上にある表示オプションを押してください。
中にカスタムフィールドの項目があるので、ここにチェックを入れる。

カスタムフィールド画面1

すると投稿画面の下の方に、カスタムフィールドの項目が表示されます。

カスタムフィールド画面2

カスタムフィールドに項目を作成する

新規追加をクリックして、名前と値を入力します。
入力が終わったらカスタムフィールド追加をクリック。

さあ、これで準備が整いましたね。さっそく表示するコードを書いていきましょう。

カスタムフィールドの値を出力してみる

まずカスタムフィールドの値を簡単に記事内に表示するプラグインというものがありますので、手っ取り早く表示したい。という方はこちらを使ってみましょう。

Custom Field Template

使い方やカスタマイズについは、検索するとバンバン出てくるので、参考にして下さい。
“Custom Field Template 使い方”とかで検索したらいいと思います。

応用編。function.phpをイジって出力してみる

中には「プラグイン使いたくねーなあ」という僕のようなひねくれ物の方もいらっしゃるかと思います。
そんな方は自作しちゃいましょう。
なぁに簡単です。function.phpっていうミスると白画面になる所をちょこっといじればいいだけですから、、、

とりあえずいつでもファイルを修正更新できるようftpソフトでファイル画面を開いておきましょう。
記法を間違えて白画面になったらすぐ取り出して修正したらいいです。焦ることはありません。

ショートコードでカスタムフィールドの出力コードを作成する

wordpressには、本文中でphpを作動させるショートコードという便利機能があります。
これを使えば、様々な値が一筆(一コード)で簡単に出力できるようになるわけですね。うーん、便利。
では、さっそく書いてみましょう。


add_shortcode('viewprice', 'getprice');
function getprice($atts){
	extract( shortcode_atts( array(
		'id' =>get_the_ID(),
		'name' => false,
		), $atts) );

	if(!$name) return false;

	$id = sprintf(esc_html("%s"),$id);
	$name = sprintf(esc_html("%s"),$name);

	$custom = get_post_meta($id, $name, true);

	return $custom;

細かいことは割愛しますが、上記のコードでカスタムフィールドのidとname属性を取得して、ショートコードで取り出せるようにしてあげます。
コード内のviewpricegetipriceはお好みで紐付ける名前に変えて下さい。

  • viewpriceはショートコード名
  • getpriceは紐付ける関数名(functionの行より下のプログラム部分の名前)

getprice関数をviewpriceショートコードで召喚する。といった感じです。
変更する際は、getpriceのみ2箇所変更するのでお忘れなく。

入力が終わったら、念のため無駄な空白スペースができてないかなど確認します。
(無駄なスペースがあるとうまく作動しません。白画面に 汗)

無事入力が完了したら次に、カスタムフィールドを表示させたい場所(記事内)にショートコードを入力していきます。


[viewprice name="price"]

これでカスタムフィールドの値が表示されたかと思います。
形さえできてしまえば、あとはカスタムフィールドを更新するだけで値を切り替えることができます。簡単ですね。

wordpressの更新に面倒のない世界を

以上で説明したカスタムフィールドの使用方法ですが、活用方法は色々あり、その気になればかなり複雑便利なフィールド構築をすることができます。
まあ、それに関してはまた別の機会に書いてみるとして本日はこの辺で。

皆さんも何か面白い使い方があればぜひ教えてください。それでは!

wordpressカテゴリの最新記事