カスタムフィールドをユニットとユニットの間に挿入する
a-blog cms のカスタムフィールド
まずは a-blog cms のカスタムフィールドについて軽く復習しておきましょう。 復習が必要ない方は本題まで飛ばしてください。 a-blog cms のカスタムフィールドは管理画面から設定するのではなく、テンプレートにコードを書いて設定するという点が、他の CMS と大きく異なっています。テンプレートのコードをデータベース側が認識してデータを格納するべきフィールドを作ってくれるということだと思います。テンプレートにコードを書くというと少しとっつきにくく感じるかもしれませんが、実際にはカスタムフィールドメーカーで生成したコードをコピペするだけなので慣れるのに時間は必要ありません。この特徴のおかげで
- 案件をまたいでの使い回しが簡単
- JavaScript や CMS の条件分岐等と組み合わせて思い通りの動作にできる
- 管理画面に直接ツールチップや入力時の注意事項を簡単に書ける
- 管理画面と表示画面のレイアウトを近づけて分かりやすくできる
といったメリットがあります。できないことはほとんどないと言っていいくらいです。カスタムフィールドは下記の表に示したテンプレートファイルで設定します。それぞれの field.html や field_foot.html からブログごと、カテゴリーごと、エントリーごとなどで別のカスタムフィールドを設定するやり方は公式テーマ、特に site テーマ や UTSUWA テーマを参考にしてみてください。
| エントリーCF | /admin/entry/field.html および /admin/entry/field_foot.html |
| カテゴリーCF | /admin/category/field.html |
| ブログCF | /admin/blog/field.html |
| モジュールCF | /admin/module/field.html |
| ユーザーCF | /admin/user/field.html |
エントリーカスタムフィールドが表示される場所（通常の場合）
下の図はエントリー詳細ページのどの部分に何が表示されるかを示したものです。article タグで囲まれるメインの場所は、青で示されるユニットの上に field.html の内容、下に field_foot.html の内容が表示されます。
（これはごくオーソドックスな例であって、実際にはカスタマイズ次第でどこにでも何でも表示できます。）
この図は私が数年前に描いたもので間違ってはいないのですが、ユニットの上か下かにしか出せないと思いこんでいたカスタムフィールドの内容をユニットの間に挿入するやり方を知ったのでご紹介したいというのがこのエントリーの本題です。
カスタムフィールドで内容を入力し、カスタムユニットで場所を指定する
ではどうするのかというと、見出しのとおり「カスタムフィールドで内容を入力し、カスタムユニットで場所を指定する」とカスタムフィールドの内容をユニットの間に挿入することができます。
この方法のメリット
- もともとあるカスタムフィールドをユニットの間に挿入できる
- すでに入力データがあるカスタムフィールドをそのまま使えるのでサイトのリニューアル時や機能追加に便利です。
- データが軽い
- つまり管理画面の動作も軽いです。
- コードが簡単
- カスタムフィールドでもカスタムユニットでもカスタムフィールドメーカーで生成できるのでコードが複雑でも問題は少ないですが、後で少しだけ修正したい、というような場合にやはりコードが簡単だと楽です。
- 管理画面がスッキリする
- 特に入力が多い場合はエントリー編集画面の上または下にまとめておけて管理画面がスッキリします。
- カスタムフィールド検索やエントリー表示順に使える
- カスタムユニットはカスタムフィールド検索に対応していませんが、カスタムフィールドなら当然カスタムフィールド検索やエントリー表示順のキーに使えます。
この方法のデメリット
- 違う内容を挿入することはできない
- 同じ内容であればユニットの中に繰り返して表示することは可能ですが、違う内容を挿入することはできません。違う内容が必要な場合は素直にカスタムユニットを使いましょう。
手順
カスタムフィールドを用意する
通常と同じようにエントリーカスタムフィールドを用意します。もちろんカスタムフィールドでもオーケーです。下の例は店舗リスト（group_shop_list）というカスタムフィールドグループを用意し、3件の入力を行った状態です。
カスタムユニットの管理画面側のソース
カスタムユニットは /admin/entry/unit/extend.html に書きます。テーマにこのファイルがない場合は作成し、ある場合は末尾等に次のようなコードを書き足します。ここでは、custom_insert_shop_list という名前にします。
<!-- BEGIN custom_insert_shop_list --> <p>ここに店舗リストを挿入します。</p> <!-- END custom_insert_shop_list -->
カスタムユニットを管理画面からイキにする
ソースにあるカスタムユニットを管理画面からイキにするには2段階の手順が必要です。
- コンフィグ > 編集設定 でユニット追加ボタンの「追加」をクリックし、モードは「拡張」その右隣に custom_insert_shop_list を入力、ラベルには「店舗リスト挿入」等の分かりやすい文言を入力して保存します。
- 次に、コンフィグ > ユニット設定で追加したユニットのボタンをクリックします。
コンフィグ > ユニット設定：ここをクリックすると
コンフィグ > ユニット設定：こんな感じでイキになります！
カスタムユニットの表示画面側のソース
カスタムユニットの表示画面側のソースは /include/unit/extend.html に追加します。通常のカスタムユニットと同様、
<!-- BEGIN unit#custom_hogehoge --><!-- END unit#custom_hogehoge -->
で囲みますが、さらに、エントリーのカスタムフィールドを出すので
<!-- BEGIN_MODULE Entry_Field --><!-- END_MODULE Entry_Field -->
でも囲みます。その他は通常のカスタムフィールドと同様です。今回の場合はこんな感じのソースを書いてみました。
<!-- BEGIN unit#custom_insert_shop_list -->
<!-- BEGIN_MODULE Entry_Field -->
<ul>
<!-- BEGIN group_shop:loop -->
<li><a href="{shop_url}">
<img alt="{shop_photo@alt}" src="%{MEDIA_ARCHIVES_DIR}{shop_photo@path}" style="width: 100px;" />
{shop_name}
</a></li>
<!-- END group_shop:loop -->
</ul>
<!-- END_MODULE Entry_Field -->
<!-- END unit#custom_insert_shop_list -->
あとは自由にスタイリングするだけ！
今回はエントリーカスタムフィールドの場合をご紹介しましたが、たとえば
<!-- BEGIN unit#custom_insert_blog_field -->
<!-- BEGIN_MODULE Blog_Field ctx="bid/%{BID}" -->
{blog_field_name}
<!-- END_MODULE Blog_Field -->
<!-- END unit#custom_insert_blog_field -->のようにしてブログフィールドやカテゴリーフィールド、モジュールフィールド、ユーザーフィールドもユニットとして挿入できるということをこのエントリーを書いていて思いつきました。たとえばショップごとの子ブログがある場合にショップの問い合わせ先をブログフィールドとして用意しておいて、エントリーにユニットとして挿入する等、いろいろな使い方ができそうです。
結論
カスタムユニットは表示用のコードに書いたものがそのままユニットになるので、今回のようにフィールドの値を出したり、特に変数がなくても決まった要素を出したりするのにも使えます。使いこなせるとカスタマイズの幅が広がります。
