ユニットを拡張する

ユニットの拡張機能とは

ユニットの拡張機能とは、デフォルトの各種ユニットを拡張する機能のことです。ユニットの拡張機能を使用すれば、デフォルトのユニットが出力するソースコードに足りていないHTMLやCSSを補うことが可能です。

例えば、本来であれば画像ユニットにh2要素はありませんが、ユニットを拡張すれば下記のソースコードのようにh2要素を追加できます。下記の例では、画像ユニットを拡張して画像見出しを実装しています。

出力例

<h2><img class="columnImage" src="/ablogcms/archives/001/201201/4ef13df83cca3.png" alt="ablog cms ロゴ" width="386" height="104"></h2>

入力例

編集画面の表示は画像ユニットと同じです

テンプレートのカスタマイズ方法

ユニットの拡張を利用するには、テンプレートのカスタマイズと管理画面の設定が必要です。まずはテンプレートのカスタマイズ方法を紹介します。

カスタマイズするテンプレート

ご利用のテーマ内の/include/の中にunitディレクトリを作り、テキストユニットを拡張したい場合はtag-select.html、その他のユニットを拡張したい場合はextend.htmlを作成します。tag-select.htmlまたはextend.htmlにユニット拡張のブロックを追加し、ユニットを拡張します。

Ver.2.1.1.4以降より、tag-select.html とextend.htmlが利用できます。

Ver.2.1.1.3以前のバージョンをお使いの方へ

Ver.2.1.1.3以前では、/themes/system/include/の中にあるunit.htmlをお使いのテーマのincludeディレクトリにコピーし編集することで、拡張したいユニットのカスタマイズが可能になります。

拡張ユニットのブロックの記述方法

<!-- BEGIN unit#〇〇〇_△△△ -->~<!-- END unit#〇〇〇_△△△ --> 

〇〇〇の部分は拡張したいユニットのブロック名を使用し、「_（アンダーバー）」で繋いで、△△△の部分はオリジナルな独自の名前をつけてください。

※拡張したいユニットのブロック名は、後述する「ユニットのブロック名の対応表」をご確認ください。

ソースコード例

画像ユニットで、「hoge」というブロックを追加するなら、「image_hoge」になります。実際のテンプレートには、下記のようにブロックを追加します。

<!-- BEGIN unit#image_hoge -->
<h2><img class="columnImage" src="{HTTP_ROOT}{path}" alt="{alt}[delnl]" width="{x}" height="{y}"></h2>
<!-- END unit#image_hoge -->

ユニットのブロック名の対応表

ユニットの拡張は全てのユニットが対象となっており、拡張可能です。

ユニットを管理画面に登録する

拡張したブロックを管理画面で使用するには、編集設定とユニット設定のページで設定を追加する必要があります。

編集設定

管理画面にログインし、コンフィグ＞編集設定の順にページを移動します。

1. 「ユニット追加ボタン」の項目で、新たにユニットを追加する
2. 「モード」を「拡張」にする
3. 「モード」の項目に表示された入力欄にブロック名を記入する（例：image_hoge）
4. 「ラベル」は任意のラベルを設定する（このラベルがエントリー編集画面でボタンのラベルになります）
5. 編集設定を保存する

ユニット設定

編集設定のページでユニットを追加すると、追加したラベルのブロックと同じラベルのボタンが増えています。

1. 追加されたブロックの項目に同じラベルのボタンをクリックする
2. ユニット設定を保存する

編集設定とユニット設定に設定を追加したら、エントリー編集画面に追加した拡張ユニットのボタンが新しく追加されてるはずです。正常に作業ができているか確認しましょう。

実践：実際にスライドするテーブルを作成する

実際にテキストユニットを拡張して、スライドするテーブルを設置する方法をサンプルとして紹介します。

編集設定

実際にテキストユニットを拡張して、スライドするテーブルを設置する方法をサンプルとして紹介します。このときモードを拡張にしましょう。モードのとなりのテキストフィールドにはtext_slidetableのように拡張したいユニット名+アンダーバー+任意の文字列を入力します。

ユニット設定

コンフィグ＞ユニット設定の順にページを移動し、設定したボタンに対して使用するユニットを設定します。今回はスライドテーブルを選択し、タグには「テーブル」を選択しましょう。

テンプレートの編集

次にテンプレートの編集をしていきます。今回はテキストユニットの拡張のため、Ver2.1.1.4以降をお使いの方はtag-select.htmlまたはVer.2.1.1.3以前ではunit.htmlを編集してください。

tag-select.htmlの編集

unit#+拡張したいユニット名+アンダーバー+任意の文字列のブロックを記述します。このブロック内に出力内容を記述します。ここでいう任意の文字列とは、管理画面のコンフィグの編集設定で、拡張ユニットに対して付けた名前になります。

<!-- BEGIN unit#text_slidetable -->
	<!-- BEGIN table -->
		<div class="entry-container slideTable"><table{class}>{text}[table]</table></div>
	<!-- END table -->
<!-- END unit#text_slidetable -->

unit.htmlの編集

unit.htmlはsystemテーマのincludeディレクトリの中にあります。このファイルを現在お使いのテーマにコピーしましょう。 unit.htmlの<!-- BEGIN unit:loop --><!-- END unit:loop -->内に、tag-select.html と同じように追記してください。

CSSの編集

見せ方に応じてCSSを編集しましょう。下は編集例になります。

.slideTable{
	overflow-x:scroll;
}
.slideTable table,
.slideTable tbody,
.slideTable tr,
.slideTable td,
.slideTable th{
	white-space: nowrap;
}

エントリーの編集画面

エントリーの編集画面から下の図のように、スライドテーブルを追加してご利用ください