Toolset Types:カスタムフィールド(複数チェックボックス)の表示・出力方法

Toolset Types で作成した WordPressのCheckboxes(複数チェックボックス)用カスタムフィールドに保存されたデータを フロントエンドに表示させる方法について見ていきましょう。

Types ショートコードを使う場合

投稿編集画面の本文用エディタやView、コンテンツテンプレート作成時に使用するエディタに用意されている「Fields and Views」ボタンを使ってTypesのショートコードを挿入すると、任意の場所にカスタムフィールドを表示することができます。なお、Typesのショートコードを挿入する基本操作については以下のページを参考にしてください。

基本書式

マウス操作で勝手に記述されるので覚える必要はありませんが、カスタムフィールドを表示するためのショートコードの基本書式は以下のとおりです。

[types field='field-name'][/types]

上記で「field-name」と書かれている部分は、カスタムフィールド作成時に設定したスラッグ(Field slug)が入ります。以下の説明も同様ですので、適宜ご自身で設定したものに読み替えてください。

上記の基本書式はカスタムフィールドの種類に関わらず共通のもので、ショートコード内の「field=’‘」で指定したフィールドの名前≒スラッグによって、フィールドの種類が判定され、さらに、後述する複数チェックボックス用カスタムフィールド固有のオプション(属性と属性値)を組み合わせることによって表示・出力が変化する仕組みになっています。

ショートコード内の属性値は「(ダブルクォーテーション)」ではなく「(シングルクォーテーション)」で囲むのが基本です。

ショートコード挿入時に指定するオプション

「Fields and Views」ボタンを使って複数チェックボックス用カスタムフィールドを選択すると以下のようなオプション設定画面が表示され、フロントエンドでの表示形式を設定できます。ここでの設定によって挿入される基本のショートコード内に属性(Attribute)と属性値が自動的に記述されます。

ショートコード、属性および属性値はエディタで直接手入力してもOKです。

Outlput mode(出力形式)

  • Normal(デフォルト値)
    チェックされた項目について、カスタムフィールド作成時の複数チェックボックスの設定で指定した保存値を出力します。また、設定の「Show one of these two values:」で選択時と未選択時の表示値を別途指定しているときは、そちらの表示が優先されます。※ 未チェックの項目は常に出力しません。
  • Raw values
    チェックされた項目について、設定で指定した保存値を出力します。属性および属性値は、 output=’raw’ です。上の「Normal」と違ってこちらは常に保存値が表示されます。 ※ 未チェックの項目は常に出力しません。
  • Custom values for selected and not selected states
    こちらを選択すると入力エリアが出現し、チェックボックスの選択状態に応じて出力する文字列(テキスト)を個別に指定できます。上の2つと違って未選択のチェックボックスも含めた出力が簡単にできますが、他のチェックボックスとの組み合わせを評価する用途には向きません。
    選択肢を日本語で設定している場合、入力エリアの選択肢名が文字化けすることがありますが、フロントエンドでの表示には問題ないようです。

属性および属性値

属性 属性値
state checked :選択済み
uncheked :未選択
option 何番目の選択肢かを数値で指定

output=’raw’の記述例

[types field='field-name' output='raw' separator=', '][/types]

チェック状態を表示する場合 の記述例

[types field='field-name' state="checked" option="0"]チェック時の表示内容[/types][types field='field-name' state="unchecked" option="0"]未チェック時の表示内容[/types]

Separator between multiple values(出力値の区切り記号)

複数チェックボックスでは、複数のチェックがある場合に設定で指定した項目の順番で保存値を出力するので、出力値どうしの区切り記号を指定できます。例えばカンマで区切る場合は、以下の記述例のように「separator=’, ‘」と記述すると「値1, 値2, 値3 ・・・」といった具合に出力されます。

区切り記号を設定する場合の記述例

[types field='field-name' output='raw' separator=', '][/types]

応用:区切り記号をリストタグにすればチェックした項目を箇条書きで出力することもできます。

<ul>
<li>[types field='field-name' output='raw' separator='</li><li>'][/types]</li>
</ul>
Toolsetの使い方・全目次