Movable Typeで用意されているカスタムフィールドをいろいろと試してみます。
バージョンは6.0.8を使用しています。
設定の流れ
まずはカスタムフィールドの設定の流れを確認してみます。
左ナビの カスタムフィールド > 新規 を選択して、各項目を入力します。
今回はブログ投稿時に使用するので、システムオブジェクトは「記事」になります。
それ以外の項目はカスタムフィールドの種類によって違いますので、後述でカスタムフィールドの種類を試す際のものを参照ください。
カスタムフィールドの登録が完了したら、記事 > 新規 > 表示オプション を選択して、登録したカスタムフィールド名のチェックボックスにチェックを入れます。
これでカスタムフィールドが記事登録画面に表示されるようになります。
最後にテンプレートで出力する方法ですが、基本的には以下のようにするとカスタムフィールドの値を出力できます。
<mt:If tag="【テンプレートタグ名】"> <mt:【テンプレートタグ名】> </mt:If>
【テンプレートタグ名】にはカスタムフィールド登録時に入力した「テンプレートタグ」の値を入れます。
これでカスタムフィールドの登録から表示までができました。
テキスト
実際に用意されているカスタムフィールドの種類を試してみます。
カスタムフィールドの種類は登録画面の「種類」で変更でき、全部で12種類あります。
(※「埋め込みオブジェクト」は使い道がよく分からないので今回は省略します。)
1行のテキストを入力できる「テキスト」を試してみます。
入力項目は以下のようになります。
必須項目のみ以下のように設定しました。
- 名前:テキスト
- 種類:テキスト
- ベースネーム:text
- テンプレートタグ:EntryText
記事登録画面では以下のような表示になります。
テンプレートでの出力は以下のようにすればOKです。
<mt:If tag="EntryText"> <mt:EntryText> </mt:If>
テキスト(複数行)
複数行のテキストを入力できる「テキスト(複数行)」を試してみます。
入力項目は以下のようになります。
以下のように設定しました。
- 名前:テキストエリア
- 種類:テキスト(複数行)
- ベースネーム:textarea
- テンプレートタグ:EntryTextarea
記事登録画面では以下のような表示になります。
テンプレートでの出力ですが、先ほどのテキストなどと同様にするとブラウザ上で改行されません。
<mt:If tag="EntryTextarea"> <mt:EntryTextarea> </mt:If>
以下のように、改行をbrに変換するようにすればOKです。
<mt:If tag="EntryTextarea"> <mt:EntryTextarea nl2br="xhtml"> </mt:If>
チェックボックス
yes/noを選択できる「チェックボックス」を試してみます。
入力項目は以下のようになります。
以下のように設定しました。
- 名前:チェックボックス
- 種類:チェックボックス
- ベースネーム:checkbox
- テンプレートタグ:EntryCheckbox
記事登録画面では以下のような表示になります。
チェックボックスの横にテキストを付与したい場合、カスタムフィールド登録の「説明」の項目にテキストを追加してください。
テンプレートでの出力は以下のようにすればOKです。
<mt:If tag="EntryCheckbox"> <mt:EntryCheckbox> </mt:If>
チェックが入っていると1が出力されます。
注意点として、デフォルトでは複数項目からの選択みたいなことはできないようです。
URL
URLの入力ができる「URL」を試してみます。
入力項目は以下のようになります。
以下のように設定しました。
- 名前:URL
- 種類:URL
- ベースネーム:url
- テンプレートタグ:EntryUrl
記事登録画面では以下のような表示になります。
テンプレートでの出力は以下のようにすればOKです。
<mt:If tag="EntryUrl"> <mt:EntryUrl> </mt:If>
日付と時刻
カレンダーから日付の選択と、テキストで時刻の入力ができる「日付と時刻」を試してみます。
入力項目は以下のようになります。
以下のように設定しました。
- 名前:日付
- 種類:日付と時刻
- オプション:日付と時刻
- ベースネーム:day
- テンプレートタグ:EntryDay
オプションで日付のみや時刻のみにもできます。
記事登録画面では以下のような表示になります。
日付の入力エリアにフォーカスすると、以下のようなカレンダーから選択できます。
テンプレートでの出力は以下のようにすればOKです。
<mt:If tag="EntryDay"> <mt:EntryDay> </mt:If>
YYYY年M月D日 hh:mmの形で出力されます。
フォーマットを変更したい場合はこちらを参照ください。
例えば、RFC822のフォーマットで表示したい場合は以下のようにします。
<mt:If tag="EntryDay"> <mt:EntryDay format_name="rfc822"> </mt:If>
ドロップダウン
ドロップダウン形式で複数から1つを選択できる「ドロップダウン」を試してみます。
入力項目は以下のようになります。
以下のように設定しました。
- 名前:ドロップダウン
- 種類:ドロップダウン
- オプション:A,B,C
- ベースネーム:dropdown
- テンプレートタグ:EntryDropdown
記事登録画面では以下のような表示になります。
テンプレートでの出力は以下のようにすればOKです。
<mt:If tag="EntryDropdown"> <mt:EntryDropdown> </mt:If>
ラジオボタン
複数から1つを選択できる「ラジオボタン」を試してみます。
入力項目は以下のようになります。
以下のように設定しました。
- 名前:ラジオボタン
- 種類:ラジオボタン
- オプション:A,B,C
- ベースネーム:radio
- テンプレートタグ:EntryRadio
記事登録画面では以下のような表示になります。
テンプレートでの出力は以下のようにすればOKです。
<mt:If tag="EntryRadio"> <mt:EntryRadio> </mt:If>
アイテム
後述の「オーディオ、ビデオ、画像」以外のファイル(PDFなど)で使用する「アイテム」を試してみます。
入力項目は以下のようになります。
以下のように設定しました。
- 名前:アイテム
- 種類:アイテム
- ベースネーム:item
- テンプレートタグ:EntryItem
記事登録画面では以下のような表示になります。
テンプレートでの出力は以下のようにします。
<mt:If tag="EntryItem"> <mt:EntryItem> </mt:If>
この場合、以下のようなタグで出力されます。
<span class="mt-enclosure mt-enclosure-file" style="display: inline;"><a href="https://XXXXXXX/XXX/filename.pdf">filename.pdf</a></span>
案件によっては上記でも問題ないと思いますが、ファイルのURLのみ取得したい場合、以下のようにすればOKです。
<mt:If tag="EntryItem"> <mt:EntryItemAsset> <$mt:AssetURL$> </mt:EntryItemAsset> </mt:If>
カスタムフィールド登録時のテンプレートタグを使って、<mt:【テンプレートタグ】Asset>のようにしています。
オーディオ
音声データを使用する「オーディオ」を試してみます。
入力項目は以下のようになります。
以下のように設定しました。
- 名前:オーディオ
- 種類:オーディオ
- ベースネーム:audio
- テンプレートタグ:EntryAudio
記事登録画面では以下のような表示になります。
テンプレートでの出力は以下のようにします。
<mt:If tag="EntryAudio"> <mt:EntryAudio> </mt:If>
この場合、以下のようなタグで出力されます。
<span class="mt-enclosure mt-enclosure-audio" style="display: inline;"><a href="https://XXXXXXX/XXX/filename.mp3">filename.mp3</a></span>
アイテムと同様に、ファイルのURLのみ取得したい場合は以下のようにすればOKです。
<mt:If tag="EntryAudio"> <mt:EntryAudioAsset> <$mt:AssetURL$> </mt:EntryAudioAsset> </mt:If>
ビデオ
動画データを使用する「ビデオ」を試してみます。
入力項目は以下のようになります。
以下のように設定しました。
- 名前:ビデオ
- 種類:ビデオ
- ベースネーム:video
- テンプレートタグ:EntryVideo
記事登録画面では以下のような表示になります。
テンプレートでの出力は以下のようにします。
<mt:If tag="EntryVideo"> <mt:EntryVideo> </mt:If>
この場合、以下のようなタグで出力されます。
<span class="mt-enclosure mt-enclosure-video" style="display: inline;"><a href="https://XXXXXXX/XXX/filename.mp4">filename.mp4</a></span>
アイテムと同様に、ファイルのURLのみ取得したい場合は以下のようにすればOKです。
<mt:If tag="EntryVideo"> <mt:EntryVideoAsset> <$mt:AssetURL$> </mt:EntryVideoAsset> </mt:If>
画像
画像データを使用する「画像」を試してみます。
入力項目は以下のようになります。
以下のように設定しました。
- 名前:画像
- 種類:画像
- ベースネーム:image
- テンプレートタグ:EntryImage
記事登録画面では以下のような表示になります。
テンプレートでの出力は以下のようにします。
<mt:If tag="EntryImage"> <mt:EntryImage> </mt:If>
この場合、以下のようなタグで出力されます。
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="https://XXXXXXX/XXX/filename.jpg">filename.jpg</a></span>
アイテムと同様に、ファイルのURLのみ取得したい場合は以下のようにすればOKです。
<mt:If tag="EntryImage"> <mt:EntryImageAsset> <$mt:AssetURL$> </mt:EntryImageAsset> </mt:If>
【参考サイト】
- カスタムフィールドの作成と表示 | CMSプラットフォーム Movable Type ドキュメントサイト
- nl2br – グローバル・モディファイアリファレンス | CMSプラットフォーム Movable Type ドキュメントサイト
- 日付に関するテンプレートタグのモディファイアリファレンス | CMSプラットフォーム Movable Type ドキュメントサイト
- カスタムフィールドでアップロード・選択した画像を出力ページで表示する – ブログ | CMSプラットフォーム Movable Type ドキュメントサイト
コメントが承認されるまで時間がかかります。