カスタムフィールド(単一チェックボックス)の表示・出力方法

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

カスタムフィールド作成の流れや、カスタムフィールド作成時の種類別設定については、以下のページを参照してください。

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つと違って「フィールド値」の代わりに項目名などのテキストだけを表示したい時や、未選択の時に何かを表示させるのに便利です。ただし構造上、Viewsプラグインの Conditional Output(条件出力)機能を使って評価する用途には向きません。

属性および属性値
属性 属性値
state checked :選択済み
uncheked :未選択

output=’raw’の記述例
[types field='field-name' output='raw'][/types]
チェック状態を表示する場合 の記述例
[types field='field-name' state="checked"]チェック時の表示内容[/types][types field='field-name' state="unchecked"]未チェック時の表示内容[/types]

Field name(チェックボックス項目名の出力)

設定したチェックボックスフィールド名(Field name)をフィールドの保存値(一般的には数値)の前につけて一緒に出力するかどうかを選択します。

Show the field name before its value
フィールド名をつけて出力します。ただし、出力スタイルが「フィールド名: フィールド値」に固定されておりカスタマイズできないので、使う機会は少ないかもしれません。
Do not show the field name before its value(デフォルト値)
フィールド内の保存値のみを出力します。

フィールド名をつけて出力する場合の記述例
[types field='field-name' show_name='true'][/types]
ヒント:以下のようにフィールド名はショートコードの外でスタイリングしても良い
フィールド名:[types field='field-name'][/types]

Toolset JP Guide

ページ上部へ戻る