ホーム > サポート・マニュアル > チュートリアル > テンプレート作成の基本 > カスタムフィールドの追加

チュートリアル

カスタムフィールドの追加

ドキュメント最終更新日時:2011/03/15 16:18

タグ:カスタムフィールド 

カスタムフィールド項目の追加

カスタムフィールド機能を利用するには、管理ページのテンプレートを編集して、カスタムフィールド項目を追加します。それぞれの管理ページのテンプレートを、systemテーマからコピーして編集します。

以下に、ブログ・カテゴリー・エントリー・ユーザーのカスタムフィールドに利用するテンプレートを挙げています。

参考:カスタムフィールド機能の概要は、「機能紹介:カスタムフィールド」をご覧ください。

参考:カスタムフィールド機能についての情報は、「チュートリアル:カスタムフィールドを使いこなすためのノウハウ」もご参考ください。

■ ブログのカスタムフィールド

ブログのカスタムフィールド項目は、下記のファイルを編集することで追加できます。

ブログ設定画面のテンプレートのコピー元
./themes/system/admin/blog/edit.html
テンプレートのコピー先
./themes/使用中のテーマディレクトリ/admin/blog/edit.html
項目を追加する箇所
step#reapplyブロックの中(1箇所)

■ カテゴリーのカスタムフィールド

カテゴリーのカスタムフィールド項目は、下記のファイルを編集することで追加できます。

カテゴリー設定画面のテンプレートのコピー元
./themes/system/admin/category/edit.html
テンプレートのコピー先
./themes/使用中のテーマディレクトリ/admin/category/edit.html
項目を追加する箇所
stepブロックと、step#reapplyブロックの中(2箇所)

■ エントリーのカスタムフィールド

エントリーのカスタムフィールド項目は、下記のファイルを編集することで追加できます。

エントリー編集画面のテンプレートのコピー元
./themes/system/admin/entry/edit.html
テンプレートのコピー先
./themes/使用中のテーマディレクトリ/admin/entry/edit.html
項目を追加する箇所
step#applyブロックと、step#reapplyブロックの中(2箇所)

■ ユーザーのカスタムフィールド

ユーザーのカスタムフィールド項目は、下記のファイルを編集することで追加できます。

ユーザー編集画面のテンプレートのコピー元
./themes/system/admin/user/edit.html
テンプレートのコピー先
./themes/使用中のテーマディレクトリ/admin/user/edit.html
項目を追加する箇所
stepブロックと、step#reapplyブロックの中(2箇所)

カスタムフィールド項目の書式

カスタムフィールド項目は、HTMLとして入力用のフォームパーツを記述することで追加されます。項目を追加する箇所として指定されているブロック内に記述します。複数の箇所が指定されている場合は、それぞれのブロックの中に追加してください。

備考:項目の追加を複数の箇所に行うのは、作成時と更新時で表示に使われるブロックが異なるためです。同じ記述を両方の箇所に加えます。

テキスト項目の記述例

<input type="text" name="hogehoge" value="{hogehoge}" />
<input type="hidden" name="field[]" value="hogehoge" />

1行目 : 通常のテキスト入力項目

name属性
そのカスタムフィールドを定義する名称(変数名)です。自由に定義できます。
value属性
name属性と同じ名前を波括弧( { } )で囲います。その項目に既存の情報があるときは、その内容がvalue属性の中に代入されます。

2行目 : カスタムフィールドの定義

name属性
この値は、field[]で固定されます。他の値を指定することはできません。ブログ・カテゴリー・エントリー・ユーザーに関わらず共通です。
value属性
1行目のname属性で定義された名称(変数名)と同じ値を記述します。

サンプル集

テキスト以外のセレクトボックスやラジオボタン、チェックボックス等の場合のカスタムフィールドの記述例は、systemフォルダ内の以下のファイルを参考にしてください。フォームのサンプルですが、カスタムフィールドでも同様の記述が使用されます。

サンプルファイル
./themes/system/sample/form/reapply.html


携帯アクセス解析