WordPressのカスタムフィールドテンプレートのタグの使い方

カスタムフィールドテンプレートのtypeを、テンプレートで利用する場合、少しわかりずらかったので、私の使っているコードをサンプルとしてご紹介します。

濃紺ピッチャーのサイトの中で利用している次の4つについて、利用方法を例を交えながらご紹介したいと思います。

  • type = text
  • type = textfield
  • type = file
  • type = radio
このブログでは、カスタムフィールドテンプレートの多くは、条件分岐とセットで利用していますので、
条件分岐もあわせたサンプルでご紹介します。

基本的な条件分岐のコード

まずは、どれにでも利用できる、基本的な条件分岐をご紹介します。

「ほげほげ」のフィールドに値が入力されている場合は、その値を表示するという条件分岐です。
これは本当によく利用するコードです。

「type = file」OGP画像の表示方法

ポイント:URLのパスだけを表示させたい
注)OGPの推奨が1500pxになりましたね。前は300pxだったので、そのままになっていました。。

設定画面 type = file

labelには、簡単な説明を書いておくと、記事を入力するとき、説明文が表示されてわかりやすいです。
labelを表示

テンプレート type = file

もし、OGPFileUploadに画像をアップロードしている場合は、その画像を表示するというコードです。


「type = radio」ラジオボタンで、表示の条件分岐をする

ラジオボタンで選択した方の内容を表示するというサンプルです。

「料理のカテゴリ」というカスタムフィールドの中に、
「今週の料理」と「作ってみたシリーズ」を、チェックボックスで選択することができます。

選択した方の内容を表示したいので、

・「今週の料理」を選んだ場合に表示する内容
・「それ以外(作ってみたシリーズ)」の場合に表示する内容

というように条件を書きます

設定画面 type = radio

#で区切って、複数作成することができます。
defaltで、最初にcheckedしておきたいものを選べます。

テンプレート type = radio


「type = textfield」テキストフィールド

テキストフィールドなので、改行が反映されるようにするのがポイントです。
「上記料理の簡単な説明」に値が入っている場合は、その値を表示させます。

設定画面 type = textfield

htmlEditor は、文字を編集するエディターを表示させます。
mediaButton は、画像を表示させる為に必要になります。
共にtrueで使うことがきます。
編集

テンプレート type = textfield


「type = text」テキスト

1行のただのテキストです。

「作り方まとめ」というフィールドに値が入っている場合に、「作り方まとめ」を表示すると書いてあります。

設定画面 type = text


テンプレート type = text



以上が、4つのタグの紹介でした。
この4つだけで、かなり複雑なテンプレートが作成できると思います。