【a-blog cms】ユニットの拡張機能を使ってみよう！

ユニットを拡張してみる

この記事は、平日毎日ブログをリレーの7/9日のエントリーになります。

a-blog cmsでの記事の書き方は、いわゆるWYSIWYGエディタではなく、ユニットと呼ばれる記事のパーツをいくつも積み重ねて記事を書いていくようになっています。

ユニットには以下のようなものがあるよ！

• テキスト
• 画像
• ファイル
• マップ
• ビデオ
• 画像URL
• 引用
• メディア
• カスタム

これだけでも十分に記事は書く事は出来るのですが、今回はユニットを拡張してもっと使いやすくしてみたいと思います。

画像見出しを作ってみる

見出しをつける場合、普通はテキストユニットの見出しタグを使いますが、今回はこの見出しを画像を使った見出しに拡張してみましょう！

実装方法

まずは、管理画面でユニットの拡張の準備をします。 コンフィグ > 編集設定 > ユニット追加ボタン で 画像ユニットを拡張したユニットボタンを作ります。 この時モードは拡張を選び、横の入力欄には画像ユニット + アンダーバー + 適当な文字を入力します。 この形式がポイントです。

次に コンフィグ > ユニット設定 にいくと、先ほど追加したボタンの設定が増えているので、画像見出しのボタンを押して画像の編集画面を追加します。ここでは、画像ユニットを拡張しているので、画像の編集画面が追加されました。

ここまで出来れば編集画面で画像見出しユニットが追加できるようになるはずです。ただこの段階では保存しても表示側を作っていないので表示はされません。

表示側をカスタマイズ

拡張ユニットの保存は出来るようになったので、表示側をカスタマイズしてみましょう！ カスタマイズするテンプレートは

• /system/include/unit.html

になります。このテンプレートを自分のテーマに持ってきましょう。

• /自分のテーマ/include/unit.html

<!-- 見出し画像ユニット -->
<!-- BEGIN unit#image_h3 -->
<h3 id="h{utid}"><img src="%{ROOT_DIR}{path}" alt="{alt}" width="{x}" height="{y}" /></h3>
<!-- END unit#image_h3 -->

こんな感じで書けば、見出し画像をユニットで登録出来るようになります。 ポイントはユニットを囲むブロックを unit# + 設定したモードでブロックを書く事によりそのブロックのテンプレートが使われるようになります。

ユニットの拡張を使うと様々なユニットの表現の仕方が出来ると思います。是非お試しを！

おまけ

少し邪道かもしれませんが、このユニット拡張を使う事により、カスタムフィールドをユニットの途中に出力する事ができるようになります。

実装方法

今回説明したように適当でいいので拡張ユニットを用意します。テキストユニットの拡張が無難だと思います。

次に表示するカスタムフィールドを拡張ユニットにフィールドモジュールと一緒に書けばOKです。 これで拡張ユニットが表示される所にカスタムフィールドが挿入されるようになりました。

<!-- BEGIN unit#text_efield -->
<!-- BEGIN_MODULE Entry_Field -->
{hoge}
<!-- END_MODULE Entry_Field -->
<!-- END unit#text_efield -->