カスタムフィールドとは

エントリーや、カテゴリー・ブログ・ユーザーに対して独自のデータを追加することができる機能です。追加したデータは表示や検索用のキーとして利用されます。例えば、ひとつの商品を紹介するエントリーに対して「値段・発売日・サイズ」などの情報をカスタムフィールドとして追加することで、商品情報のデータベースを作ることができます。



カスタムフィールドのタグの基本

カスタムフィールドはフォームタグのようにHTMLベースで書くことができます。値段を入れるカスタムフィールドを追加してみます。カスタムフィールドの変数は price にします。

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

これでカスタムフィールドが1つできました。HTMLなので入力画面を入力しやすいレイアウトできます。

カスタムフィールドでできること

カスタムフィールドは以下のような入力フォームが追加できます。

  • テキスト(テキスト、テキストエリア、チェックボックス、ラジオボタン、セレクトボックス)
  • 画像
  • ファイル
  • 地図(GoogleMaps)

今回作成するカスタムフィールド

では、site2015テーマを元に以下のようなカスタムフィールドを追加してみたいと思います。(site2015テーマでインストールした事を前提としています。)

  • エントリー(記事)データに独自フィールドを追加
  • 商品価格のテキストデータを追加
  • 商品画像の画像データを追加

編集画面のカスタマイズ

SFTPに接続し、/themes/site2015/admin/entry/field.html に以下のコードを追記します。

<table class="acms-admin-table-admin-edit">
  <tr>
    <th>商品価格</th>
    <td>
      <input type="text" name="price" value="{price}" class="acms-admin-form-width-full"/>
      <input type="hidden" name="field[]" value="price" />
    </td>
  </tr>
  <tr>
    <th>商品画像</th>
    <td>
      <!-- BEGIN productImage@path:veil -->
      <img src="%{ARCHIVES_DIR}{productImage@path}"/>
      <input type="hidden" name="productImage@old" value="{productImage@path}" /><br />
      <label class="acms-admin-form-checkbox">
        <input type="checkbox" name="productImage@edit" value="delete" />
        <i class="acms-admin-ico-checkbox"></i> 削除
      </label>
      <!-- END productImage@path:veil -->
      <input type="file" name="productImage" size="20" /><br />
      <input type="hidden" name="field[]" value="productImage" />
      <input type="hidden" name="productImage:extension" value="image" />
      <input type="hidden" name="productImage@size" value="300" />
      <input type="hidden" name="productImage@filename" value="" />
    </td>
  </tr>
</table>

保存できるか確認

では実際にサイトにログインして、「エントリー作成」ボタンを押して記事編集画面を出してみます。以下の画像のように、商品価格と商品画像というフィールドが追加されていると思います。 実際にデータを入力して記事を保存してみましょう。保存後、編集画面を再度開くと保存されている事が確認できると思います。


追加された独自フィールド

追加された独自フィールド


独自フィールドが保存できた

独自フィールドが保存できた


サイトに表示させる

編集画面ができましたので、作ったカスタムフィールドをサイトに表示させます。

エントリーのカスタムフィールドはEntry_Fieldモジュール、Category_EntryListやCategory_EntrySummary、Entry系モジュールのentry:loop内で使うことができます。 以下のコードでは Entry_Fieldモジュール を使い表示しています。


<!-- BEGIN_MODULE Entry_Field -->
<p>{price}</p>
<!-- END_MODULE Entry_Field -->

表示側のカスタマイズ

SFTPに接続し、/themes/site2015/include/module/entry/body.html の 40行目付近に追記します。

  <h2 class="entryTitle"><a href="{titleUrl}">{title}[raw]</a></h2><!-- END_MODULE Touch_NotEntry -->
</header>
<!-- END title:veil -->

<!-- ここから追記 -->
<table class="acms-admin-table-admin-edit">
  <tr>
    <th>商品価格</th>
    <td>
      {price}
    </td>
  </tr>
  <tr>
    <th>商品画像</th>
    <td>
      <!-- BEGIN productImage@path:veil -->
      <img src="%{ARCHIVES_DIR}{productImage@path}"/>
      <!-- END productImage@path:veil -->
    </td>
  </tr>
</table>
<!-- ここまで追記 -->

<!-- BEGIN entry:veil -->
<div class="acms-entry entryColumn">
  <div class="acms-grid-r">

独自フィールドのサイト表示

独自フィールドのサイト表示


カスタムフィールドの追加からサイトへの表示まで一通り行ってみました。HTMLのみで追加・表示できるので表現の幅が広がると思います。またコードのみで追加できるので、バージョン管理ツールなどで管理しやすくなるのもメリットです。

詳しいカスタムフィールドのドキュメントは以下よりご覧ください。


カスタムフィールドのドキュメントはこちら


a-blog cmsのインストール

サーバへの接続

カスタムフィールドを作ってみよう

モジュールを使ってみよう

テーマを編集してみよう

インストールとサーバへの接続について