カスタムフィールドの使い方

目次

複雑なカスタムフィールドグループのサンプル

サンプルを使うと、画像のようなレイアウトにできます


入力フォーム、テキストエリア、画像の項目を含んだカスタムフィールドグループのサンプルです。
カスタムフィールドグループを利用したい方はぜひ参考にしてください。

<table class="js-fieldgroup-sortable">
  <!-- BEGIN bfd_field_unit_group:loop -->
  <tr class="sortable-item">
    <td class="item-handle">
      <img width="17" height="17" class="arrowHandle" src="/images/admin_arrow_vertical.gif" />
        <br />
      (&nbsp;<a class="item-delete" href="#" onclick="return false;">×</a>&nbsp;)
    </td>
    <td>
      <table class="nestTable">
        <tr>
          <th>小画像</th>
          <th>小見出しとURL</th>
          <th>小概要</th>
        </tr>
        <tr>
          <td>
            <!-- BEGIN bfd_field_unit_image:veil -->
            <img src="%{ARCHIVES_DIR}{bfd_field_unit_image@path}" /><!-- END bfd_field_unit_image:veil --><br />
            <label><input type="checkbox" name="bfd_field_unit_image@edit[{i}]" value="delete" /> 削除</label>
            <input type="hidden" name="bfd_field_unit_image@old[{i}]" value="{bfd_field_unit_image@path}" />
            <input type="file" name="bfd_field_unit_image[{i}]" />
            <input type="hidden" name="bfd_field_unit_image@width[{i}]" value="200" />
          </td>
          <td>
            <input type="text" name="bfd_field_unit_lead[{i}]" value="{bfd_field_unit_lead}" size="30" />
            <br /><br />
            %{HTTP_ROOT}
            <br /><input type="text" name="bfd_field_unit_url[{i}]" value="{bfd_field_unit_url}" size="15" />
          </td>

          <td>
            <textarea name="bfd_field_unit_summary[{i}]" cols="40" rows="5" class="formSizeL">{bfd_field_unit_summary}</textarea>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <!-- END bfd_field_unit_group:loop -->
  <tr class="sortable-item item-template">
    <td class="item-handle"><img width="17" height="17" class="arrowHandle" src="/images/admin_arrow_vertical.gif" /></td>
    <td>
      <table class="nestTable">
        <tr>
          <th>小画像</th>
          <th>小見出しとURL</th>
          <th>小概要</th>
        </tr>
        <tr>
          <td>
            <input type="file" name="bfd_field_unit_image[]" />
            <input type="hidden" name="bfd_field_unit_image@width[]" value="200" />
          </td>
          <td>
            <input type="text" name="bfd_field_unit_lead[]" value="" size="30" />
            <br /><br />
            %{HTTP_ROOT}
            <br /><input type="text" name="bfd_field_unit_url[]" value="" size="15" />
          </td>
          <td>
            <textarea name="bfd_field_unit_summary[]" cols="40" rows="5" class="formSizeL"></textarea>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tfoot>
    <tr>
      <td colspan="3"><input type="button" class="item-insert btnAddition" value="+ 項目を追加する" /></td>
    </tr>
  </tfoot>
</table>

<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_lead" />
<input type="hidden" name="field[]" value="bfd_field_unit_lead" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_url" />
<input type="hidden" name="field[]" value="bfd_field_unit_url" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_summary" />
<input type="hidden" name="field[]" value="bfd_field_unit_summary" />

<input type="hidden" name="bfd_field_unit_image:extension" value="image" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@path" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@x" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@y" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@edit" />
<input type="hidden" name="@bfd_field_unit_group[]" value="bfd_field_unit_image@old" />
<input type="hidden" name="field[]" value="bfd_field_unit_image" />
<input type="hidden" name="field[]" value="@bfd_field_unit_group" />

管理画面での表示



出力側のHTMLのサンプル

出力するHTMLのサンプルです。

<h2>複雑なカスタムフィールドのサンプル</h2>
<!-- BEGIN_MODULE Blog_Field -->
<!-- BEGIN bfd_field_unit_group:loop -->
<div style="width:200px; float:left; margin-right:20px;">
  <!-- BEGIN bfd_field_unit_image:veil -->
  <img src="%{ARCHIVES_DIR}{bfd_field_unit_image@path}" alt="" width="200">
  <!-- END bfd_field_unit_image:veil -->
  <h3><a href="%{HTTP_ROOT}{bfd_field_unit_url}">{bfd_field_unit_lead}</a></h3>
  <p>{bfd_field_unit_summary}</p>
</div>
<!-- END bfd_field_unit_group:loop -->
<!-- END_MODULE Blog_Field -->

スケジュール(Plugin_Schedule)にカスタムフィールドを利用する

営業日等のカレンダーを表示する機能として、「サイト管理>スケジュール」があります。
標準機能では、登録項目としてテキスト入力とセレクトによる選択があります。
カスタムフィールドを使って項目を追加する方法を説明します。

表示されていないカスタムフィールドの値を削除しないようにする

通常、エントリーデータの変更時にはカスタムフィールドの値は全更新が行われます。そのエントリー ※1 に登録されているカスタムフィールドの値を全て削除したのちに、入力されている値を登録します。
例えば、新規エントリー登録時には、カスタムフィールドとしてTEL、FAXの項目があったとします。編集時に入力項目としてTELしかなかった場合 ※2 編集データの登録が行われると画面になかったFAXの値は削除されます。
※1 カテゴリーのカスタムフィールド、ブログのカスタムフィールドも同様です。
※2 hiddenではなくHTMLのソース上に存在しないの意味

全て削除してから登録するのではなく、画面に存在している値のみ上書きするには、下記の2行を field.html の中にご記入ください。

<input type="hidden" name="updateField" value="on" />
<input type="hidden" name="field[]" value="updateField" />

デモサイトのようにタイトルや説明を変更したい

カスタムフィールドによる情報の書き換え

a-blog cmsのデモサイトでは、サイトタイトルや説明、フッターのテキストはカスタムフィールド(自由に追加できるエントリー、カテゴリー、ブログ固有の入力フィールド)でできています。

ブログのカスタムフィールドはご利用のテーマに /admin/blog/field.html を置くことで読み込むことができます。

ブログカスタムフィールドの記述に関するファイル

/themes/(ご利用のテーマ)/admin/blog/field.html

a-blog cmsをダウンロードしていただき、v2.0 以降に同梱されている「site2014」テーマのブログカスタムフィールドを参考にしてみてください。

site2014のブログカスタムフィールドの記述に関するファイル

/themes/site2014/admin/blog/field.html

カスタムフィールドの基本的な使い方(後編)

カスタムフィールドの情報を表示する

カスタムフィールドの情報を表示するには、フィールドモジュールを使う方法と、各ビルトインモジュールを使う方法があります。

フィールドモジュールを使う方法

フィールドモジュールの中にカスタムフィールドの変数を記述すると内容を出力することができます。