ショートコード登録 ─ Shortcode Register

新しいカスタム・ショートコードを作成するためのエントリーフォーム画面です。
必要な項目を入力して「ショートコードを保存」を実行することでカスタム・ショートコードをプラグインに保存することができます。この管理画面は大きく3つのセクションに分かれています。

ショートコード管理 - ショートコード登録

Base Shortcode Settings

ショートコード管理 - 基礎ショートコード設定

このセクションでは、作成するカスタム・ショートコードの基礎となるショートコードタイプと対象テーブルを設定します。このセクションで設定したショートコードタイプの内容に準じて後述する詳細設定内容が変わってきます。
各項目の設定内容は下記の通りです。

項目名 設定内容
ベース・ショートコード カスタム・ショートコードの出力ベースとなるショートコードタイプ名を選択します。バージョン2.1.31の時点では、cdbt-viewcdbt-entrycdbt-editの3つのショートコードタイプがあります。
対象テーブル名 カスタム・ショートコードが処理対象とするテーブル名を選択します。テーブルが指定されると、コンボボックスの下に指定テーブルのカラム情報が自動的に読み込まれて表示されます。表示されたカラム情報はラベルをクリックすることで表示・非表示を切り替えることが可能です。

Advanced Shortcode Settings

ショートコード詳細設定では、基礎設定で指定したショートコードタイプに準じてショートコードの外観や制御処理を設定していきます。このセクションはショートコードタイプによって設定内容が異なるため、それぞれのショートコードタイプごとに設定項目を解説します。

ショートコードタイプ:cdbt-view の設定について

ショートコード管理 - ショートコード詳細設定 - cdbt-view編

ショートコードタイプ:cdbt-view はテーブルデータを一覧表示するためのショートコードです。このショートコードの詳細設定では出力するデータの絞り込みや検索性などを指定することができます。
各項目の設定内容は下記の通りです。

項目名 設定内容
外観や操作性 ショートコードによって出力されるデータ一覧コンテンツのスタイルやUI/UXの定義を有効化/無効化することができます。この設定項目の制御詳細は後述します
インデックス行の表示 データ列のヘッダとしてデータ行の前後に列名を見出しとして表示します。前述の外観設定でFuelUXリピーター形式でのデータ出力を指定した場合は、データ行の上部にヘッダを表示するかどうかを選ぶことができます。一方、外観設定でテーブルレイアウトでのデータ出力を指定した場合は、データ行の上下もしくは上部のみに表示するか、または表示しないかを選択できます。
フッター・インターフェース テーブルレイアウト専用の設定項目で、ページングのインターフェースとして、「ページネーション」もしくは「ページャ(従来のFuelUXリピーター形式のインターフェース)」を選択できます。(バージョン2.1.32で追加されました)
絞り込みキーワード 出力するデータを絞り込み条件を指定します。ここで指定されたキーワードによってデータ取得用SQLのWHERE句が生成されます。カラム名とキーワードを:(ダブルコロン)で結合したハッシュ型文字列を指定すると指定カラムに対して完全一致型の絞り込みが行われます。一方、キーワードのみを指定した場合は文字列型のすべてのカラムに対して部分一致検索が行われます。複数の絞り込み条件を指定する場合は,(カンマ)で区切って指定します。その場合、複数条件を結合するための演算子設定が有効になります。
絞り込み条件 上記の「絞り込みキーワード」設定にて複数の条件を指定した場合、ここで設定した演算子にて条件が結合されます。
除外する列 出力するテーブルデータの中で、表示しないカラムを指定することができます。テーブルに存在しないカラム名を指定した場合は無視されます。またすべてのカラムを除外することはできません。
表示する列 上記の「除外する列」と逆に、出力するテーブル中で表示するカラムを指定することができます。ここに指定されなかったカラムのデータは表示されません。なお、テーブルに存在しないカラム名を指定した場合は無視されます。注意点として、この項目が設定された場合、「除外する列」の指定が無効になります。
列の表示順序 表示する列順を指定しながら出力データのカラム名を指定する場合、この設定項目を使います。ここに指定されたカラム名の順序(左から右の順)と同じ順序でデータ列が出力され、指定されなかったカラムのデータは表示されません。テーブルに存在しないカラム名を指定した場合は無視されます。注意点として、この項目が設定された場合、「除外する列」と「表示する列」の指定は無効になります。
初期ソート順 初期出力データのソート順を指定します。カラム名と昇順(asc)または降順(desc)を:(ダブルコロン)で結合したハッシュ型文字列を指定します。複数ある場合は,(カンマ)で区切ってください。ここで指定されたソート条件によってデータ取得用SQLのORDER句が生成されます。
ページあたりの最大行数 出力データリストのページング用の指定です。この設定が指定されると元テーブル自体が属性として持っている最大表示データ数を上書きして、データリストがページングされます。
文字の切り捨て 出力されるテーブルデータに文字列型のデータがある場合、ここに指定された文字数を超過すると表示が切り捨てられます。文字が切り捨てられた場合、全文字列を表示するためのダイアログを開くリンクボタンが表示されます。0が指定されると文字の切り捨ては行われません。
文字を切り捨てるカラム 文字の切り捨てを行うカラムを指定できます。何も指定されないと、すべての文字列型カラムに対して文字の切り捨てが実行されます。指定したカラムは一律前述の「文字の切り捨て」で設定された文字数で切り捨て処理が行われます。(バージョン2.1.32で追加されました)
クリック可能なカラム 出力された列の値をリンクとしてクリックできるように出来ます。なお、対象カラムにURL等のリンクパスとして有効な文字列が格納されていないと正常なリンクができないのでご注意ください。(バージョン2.1.32で追加されました)
フィルタリングの列名 外観設定で出力データをフィルタリングするためのフィルターボックス(ドロップダウンリストボックス)を有効にした場合に、そのフィルタリング対象となるカラム名を指定します。もし指定したカラム名がENUM型やSET型のカラムだった場合、自動でフィルター項目が定義されます。それ以外のカラムの場合は下記の「フィルター定義」設定にフィルターリストを定義する必要があります。
フィルター定義 外観設定で出力データをフィルタリングするためのフィルターボックス(ドロップダウンリストボックス)を有効化した場合に、そのフィルターリストを定義できます。検索を行うフィルター値とドロップダウンに表示されるラベルを:(ダブルコロン)で結合したハッシュ型文字列で指定していきます。
サムネイル画像カラム 出力データ中でサムネイル画像に変換して表示するカラムを指定できます。指定したカラムには画像のURLが格納されている必要があります。画像ファイルのバイナリデータが直接格納されているカラムについてはこの設定項目で特に指定しなくてもサムネイル画像として表示されます。
サムネイル用タイトルカラム 外観設定でサムネイル一覧ビューを有効化した場合、サムネイル一覧ビューで画像の下に表示されるタイトルとして利用するカラム名を指定できます。指定されなかった場合はタイトルは表示されません。
サムネイルのサイズ 表示されるサムネイル画像の幅を指定します。サムネイル画像はここで指定された幅を一辺とする正方形で表示されます。
追加CSSクラス データリストを出力するコンポーネントの大枠のHTML要素のclass属性に追加するCSSクラス名を指定できます。複数のクラスがある場合は半角空白で区切って指定してください。オリジナルのスタイルを適用する場合などに利用できます。
Ajax対応 (実装予定)
備考 ショートコード管理のショートコード一覧画面にて表示されるショートコードの説明文を指定できます。管理画面での識別用なので、テーブルデータの出力には影響しません。

ショートコードタイプ:cdbt-entry の設定について

ショートコード管理 - ショートコード詳細設定 - cdbt-entry編

ショートコードタイプ:cdbt-entry は指定のテーブルにデータを登録するためのエントリーフォームを出力するショートコードです。このショートコードの詳細設定では、出力するエントリーフォームの表示項目などを指定することができます。
各項目の設定内容は下記の通りです。

項目名 設定内容
外観や操作性 cdbt-entry のショートコードでの外観設定はタイトルを表示するかどうかのみを指定できます。
非表示列 エントリーフォームに表示しないカラムを指定します。複数ある場合は,(カンマ)で区切ってください。非表示化したカラムはhiddenフィールドとして出力され、テーブルのカラム定義の初期値に設定されている値が自動で挿入されます。初期値がないカラムはNULLになります。
送信ボタンのラベル エントリーフォームの送信ボタンに表示されるラベル名を指定できます。指定しなかった場合はプラグインの初期ラベルが使用されます。
リダイレクトURL エントリーフォームの送信ボタン押下後にリダイレクトするURLを指定できます。指定しなかった場合は自己のページがリロードされます。
追加CSSクラス エントリーフォーム群を内包する大枠のHTML要素のclass属性に追加するCSSクラス名を指定できます。複数のクラスがある場合は半角空白で区切って指定してください。
備考 ショートコード管理のショートコード一覧画面にて表示されるショートコードの説明文を指定できます。管理画面での識別用なので、テーブルデータの出力には影響しません。

ショートコードタイプ:cdbt-edit の設定について

ショートコード管理 - ショートコード詳細設定 - cdbt-edit編

ショートコードタイプ:cdbt-edit はテーブルデータの編集・削除が可能なデータ一覧を表示するためのショートコードです。このショートコードの詳細設定は、cdbt-view と同じように出力するデータの絞り込みや検索性などを指定することができます。
各項目の設定内容は下記の通りです。

項目名 設定内容
外観や操作性 ショートコードによって出力されるデータ一覧コンテンツのスタイルやUI/UXの定義を有効化/無効化することができます。この設定項目の制御詳細は後述します。なお、cdbt-editではJSON形式での出力やサムネイル一覧ビューへの切り替えはできません。
インデックス行の表示 データ列のヘッダとしてデータ行の前後に列名を見出しとして表示します。前述の外観設定でFuelUXリピーター形式でのデータ出力を指定した場合は、データ行の上部にヘッダを表示するかどうかを選ぶことができます。一方、外観設定でテーブルレイアウトでのデータ出力を指定した場合は、データ行の上下もしくは上部のみに表示するか、または表示しないかを選択できます。
フッター・インターフェース テーブルレイアウト専用の設定項目で、ページングのインターフェースとして、「ページネーション」もしくは「ページャ(従来のFuelUXリピーター形式のインターフェース)」を選択できます。(バージョン2.1.32で追加されました)
絞り込みキーワード 出力するデータを絞り込み条件を指定します。ここで指定されたキーワードによってデータ取得用SQLのWHERE句が生成されます。カラム名とキーワードを:(ダブルコロン)で結合したハッシュ型文字列を指定すると指定カラムに対して完全一致型の絞り込みが行われます。一方、キーワードのみを指定した場合は文字列型のすべてのカラムに対して部分一致検索が行われます。複数の絞り込み条件を指定する場合は,(カンマ)で区切って指定します。その場合、複数条件を結合するための演算子設定が有効になります。
絞り込み条件 上記の「絞り込みキーワード」設定にて複数の条件を指定した場合、ここで設定した演算子にて条件が結合されます。
除外する列 出力するテーブルデータの中で、表示しないカラムを指定することができます。テーブルに存在しないカラム名を指定した場合は無視されます。またすべてのカラムを除外することはできません。
列の表示順序 表示する列順を指定しながら出力データのカラム名を指定する場合、この設定項目を使います。ここに指定されたカラム名の順序(左から右の順)と同じ順序でデータ列が出力され、指定されなかったカラムのデータは表示されません。テーブルに存在しないカラム名を指定した場合は無視されます。注意点として、この項目が設定された場合、「除外する列」の指定は無効になります。
初期ソート順 初期出力データのソート順を指定します。カラム名と昇順(asc)または降順(desc)を:(ダブルコロン)で結合したハッシュ型文字列を指定します。複数ある場合は,(カンマ)で区切ってください。ここで指定されたソート条件によってデータ取得用SQLのORDER句が生成されます。
ページあたりの最大行数 出力データリストのページング用の指定です。この設定が指定されると元テーブル自体が属性として持っている最大表示データ数を上書きして、データリストがページングされます。
文字の切り捨て 出力されるテーブルデータに文字列型のデータがある場合、ここに指定された文字数を超過すると表示が切り捨てられます。文字が切り捨てられた場合、全文字列を表示するためのダイアログを開くリンクボタンが表示されます。0が指定されると文字の切り捨ては行われません。
文字を切り捨てるカラム 文字の切り捨てを行うカラムを指定できます。何も指定されないと、すべての文字列型カラムに対して文字の切り捨てが実行されます。指定したカラムは一律前述の「文字の切り捨て」で設定された文字数で切り捨て処理が行われます。(バージョン2.1.32で追加されました)
クリック可能なカラム 出力された列の値をリンクとしてクリックできるように出来ます。なお、対象カラムにURL等のリンクパスとして有効な文字列が格納されていないと正常なリンクができないのでご注意ください。(バージョン2.1.32で追加されました)
フィルタリングの列名 外観設定で出力データをフィルタリングするためのフィルターボックス(ドロップダウンリストボックス)を有効にした場合に、そのフィルタリング対象となるカラム名を指定します。もし指定したカラム名がENUM型やSET型のカラムだった場合、自動でフィルター項目が定義されます。それ以外のカラムの場合は下記の「フィルター定義」設定にフィルターリストを定義する必要があります。
フィルター定義 外観設定で出力データをフィルタリングするためのフィルターボックス(ドロップダウンリストボックス)を有効化した場合に、そのフィルターリストを定義できます。検索を行うフィルター値とドロップダウンに表示されるラベルを:(ダブルコロン)で結合したハッシュ型文字列で指定していきます。
サムネイル画像カラム 出力データ中でサムネイル画像に変換して表示するカラムを指定できます。指定したカラムには画像のURLが格納されている必要があります。画像ファイルのバイナリデータが直接格納されているカラムについてはこの設定項目で特に指定しなくてもサムネイル画像として表示されます。
サムネイルのサイズ 表示されるサムネイル画像の幅を指定します。サムネイル画像はここで指定された幅を一辺とする正方形で表示されます。
追加CSSクラス データリストを出力するコンポーネントの大枠のHTML要素のclass属性に追加するCSSクラス名を指定できます。複数のクラスがある場合は半角空白で区切って指定してください。オリジナルのスタイルを適用する場合などに利用できます。
Ajax対応 (実装予定)
備考 ショートコード管理のショートコード一覧画面にて表示されるショートコードの説明文を指定できます。管理画面での識別用なので、テーブルデータの出力には影響しません。


外観設定について(cdbt-viewとcdbt-editの場合)

ショートコードタイプがcdbt-viewもしくはcdbt-editの場合に設定可能な「外観や操作性」設定の詳細について解説します。

まず、cdbt-viewのショートコードでのみ有効な「ブートストラップ・スタイル」の設定ですが、この設定はバージョン2.1.31より追加されました。この設定を有効化しない場合、テーブルデータはJSON形式で出力されます。JSON形式のデータを取り扱うためにはJavaScriptが必要になるため、その場合は<script>タグ中にショートコードを展開する必要があります。例としては下記のようなマークアップ形式でショートコードを出力してください。

<script>
var jsonData = [cdbt-view table="something_table_name" bootstrap_style="false"];
</script>

次に、テーブルデータの一覧化コンポーネントとして「リピーター」レイアウトを使うか「テーブル」レイアウトを使うかの選択です。この設定もバージョン2.1.31より追加されました。チェックを入れると従来通りの「リピーター」レイアウトで、チェックを外すと新しい「テーブル」レイアウトでデータが一覧化されます。さらに、バージョン2.1.32からはテーブルレイアウト時に表示領域からはみ出したコンテンツエリアをドラッグ可能にするかどうかを選択できる設定が追加されました。
テーブルレイアウトは下記のようなコンポーネントです。

ショートコード管理 - ショートコード詳細設定 - テーブルレイアウト


リピーターレイアウトは下記のようなコンポーネントです。

ショートコード管理 - ショートコード詳細設定 - リピーターレイアウト


各レイアウト内のコンポーネント名称は下記の通りで、それぞれ外観設定から表示/非表示を切り替えられます。

① コンテンツ見出し
② 検索ボックス
③ 整理番号列
④ フィルタリング用ドロップダウンリストボックス
⑤ サムネイル一覧ビュー切り替えボタン(cdbt-viewのみ表示可能)

バージョン2.1.32からはテーブルレイアウトのみフッターのインターフェースを「ページネーション」と「ページャ」から選択できるようになりました。

Confirm the Generated Shortcode

ショートコード管理 - 生成ショートコードの確認

このセクションでは生成されたカスタム・ショートコードのコードの確認を行うことができます。下記の項目には前述の設定内容がリアルタイムに自動適用されていきます。

項目名 設定内容
生成ショートコード 「基礎ショートコード設定」および「ショートコード詳細設定」セクションにて指定した内容がショートコードとしてリアルタイムに生成されて、この欄に表示されます。欄をクリックすることでコードをクリップボードにコピーすることができます。
ショートコードエイリアス 上記の実体の生成ショートコードのエイリアスコードが表示されます。実体のショートコードは属性値が多く保守性が低いため、エイリアスコードであるこちらのコードを利用することで、投稿などにショートコードを記述する時に有用です。前項と同様に欄をクリックすることでコードをクリップボードにコピーすることができます。

ショートコード登録の操作系ボタン

ボタン 動作内容
Save Shortcode
指定された設定内容でカスタム・ショートコードを作成し、プラグインに保存します。
Preview Shortcode
現在の指定内容で出力される実際のショートコードの表示を確認できます。なお、プレビュー・ダイアログ内に表示されたショートコードは操作が制限されているため、正常な動作はしません。表示確認用として利用してください。

Reference

Related Shortcode Management

Other Management