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

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)と属性値が自動的に記述されます。

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

ショートコード、属性および属性値はエディタで直接手入力しても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(条件出力)機能を使って評価する用途には向きません。

属性および属性値

属性属性値
statechecked :選択済み
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]

ヒント:以下のようにフィールド名はショートコードの外でスタイリングしても良い

<span style="font-weight:bold;">フィールド名:</span>[types field='field-name'][/types]
Toolsetの使い方・全目次