以前からa-blog cmsに興味を持っていて、勉強会でお話を伺うなどしていたのですが、先日ついにa-blog cmsを使う案件が入り、僕が構築を担当しました。普段はMTを使っていて、案件でa-blog cmsを使うのは初めてだったので色々戸惑いもありましたが、ある程度知識がストックできていたので無事ローンチが迎えられそうです。
作業中に2点バグを見つけましたので、報告させて頂きました。1点目はバージョン2.5.0.1で解決されました。
画像を伴った見出しの実現
一つ迷ったのは、見出しの頭にデザインが入った数字が入るパターンをどうするか、というものでした。例えば次の画像のように頭に丸数字の画像が入り、後ろに見出しのテキストが続くようなものです。
最初はWYSIWYGで入れるしか無いかなと思ったのですが、ふと思いついたのが校正オプションの拡張でした。これならば、一定の書式に従って入力しさえすれば、割と簡単に実現できます。
(追記)思いつきで作ったのでドキュメントを読んでいなかったのですが、編集モードを拡張にしてtext_h3withNumber
とし、テンプレートはinclude/unit/tag-select.htmlに書くと良いようですね。
1. テキストタグセレクトの設定
まずテキストタグセレクトの設定をします。タグh3withNumber.hdg-with-num-01
を新たに作成しました。クラス名を付けたのは、標準のh3要素のスタイルを上書きするためです。
2. ユニットのテンプレートの編集
include/unit.htmlのテキストユニットに関するテンプレート部分に次のコードを追加しました。校正オプションnumberImage
を追加指定します。
<!-- BEGIN h3withNumber -->
<h3 <!-- BEGIN_IF [/nem] -->id=""<!-- END_IF -->>[numberImage|nl2br]</h3><!-- END h3withNumber -->
3. 校正オプションの拡張
次のようにnumberImage校正オプションを作成しました。正規表現を用いた置換を利用して、[03]シェラトンホテルズ
を<img src="/themes/[theme_name]/images/txt_number_03.png" alt="3">シェラトンホテルズ
のような出力に書き換えます。
class ACMS_User_Corrector
{
public static function numberImage($txt)
{
$imageDir = '/' . THEMES_DIR . '[theme_name]/images/';
preg_match('/\[(\d+)\](.*)/', $txt, $matches);
$image = '<img src="' . $imageDir . 'txt_number_' . $matches[1] . '.png"' .
'alt="' . preg_replace('/^0/', '', $matches[1]) . '">';
return $image . $matches[2];
}
}
色々な種類のカスタムユニットを作りたい
1種類のカスタムユニットですみましたが、案件によってはエントリー毎・カテゴリー毎に異なるカスタムユニットを作りたくなるのでは?と考えました。ドキュメントによれば、admin/entry/unit/custom.htmlに入力フォームを作成するとあるので、IFブロックで条件分岐するしかないのかなと考えました。試したところ、意図通り動作しました。ただ、ユニット追加ボタンのラベル付けに困りますね。
<!-- BEGIN custom_unit:veil -->
<!-- BEGIN_IF [%/eq/23] -->
エントリーID23の場合のカスタムユニット
<!-- ELSE -->
未設定
<!-- END_IF -->
<!-- BEGIN custom_unit:veil -->
スケジュールで複数行のテキストを入力したい
これは、admin/schedule/edit-data.htmlのitemの入力フィールドをtextarea要素に変更するだけで実現できました。入力フィールドを柔軟に変更できるのがいいなと感じました。