AnotherCustomFields＋MTAppjQuery＋SplitToHashによるマルチチェックボックス(その2)

昨日の続きで、AnotherCustomFieldsプラグイン＋MTAppjQueryプラグイン＋SplitToHashプラグインで、マルチチェックボックスを作ることについて解説します。
今日は、ブログ記事のテンプレートを書き換えて、個々のブログ記事に、チェックされた項目を別々に出力する方法を解説します。

1.出力の考え方

マルチチェックボックスで入力した内容は、コンマ区切りのテキストに変換されて保存されます。
例えば、「赤」と「青」のチェックをオンにした場合、「赤,青」のようなテキストが保存されます。
そのため、テンプレートタグでフィールドの値を出力すると、「赤,青」のようなテキストが出力されるだけです。

チェックされた項目を別々に出力するには、SplitToHashプラグインを利用して、以下のようにテンプレートを組みます。
「テンプレートタグ名」には、追加したフィールドのテンプレートタグ名を指定します。
「配列名」には、「マルチチェックボックス選択肢」のテンプレートモジュールで定義した配列の名前を指定します。
また、「ハッシュ名」には、ハッシュに付ける名前を自分で決めて指定します。

<$mt:Include module="マルチチェックボックス選択肢"$>
<$テンプレートタグ名 split_to_hash="," setvar="ハッシュ名"$>
<mt:Loop name="配列名">
  <mt:If name="ハッシュ名" key="$__value__">
    チェックがオンの時に出力する内容
  <mt:Else>
    チェックがオフの時に出力する内容
  </mt:If>
</mt:Loop>

1行目のMTIncludeタグで、チェックボックスの選択肢の配列を読み込みます。
2行目では、チェックされた項目をハッシュに代入します。
3～9行目で、選択肢の各項目を順に繰り返します。MTLoopタグによって、個々の選択肢は、変数__value__に代入されます。

4行目は、チェックされた項目のハッシュの中で、キーの値が選択肢（__value__）と同じになっているものがあるかどうかを調べています。
これは、選択肢の個々の要素がチェックされているかどうかを調べる処理です。

例えば、選択肢が青／赤／黄／緑／紫で、チェックされたのが青と黄だとします。
この場合、配列とハッシュは以下のようになっています。

繰り返しの一回目では、変数__value__の値は、配列の0番の要素の「青」になっています。
一方、ハッシュの中で、キーが変数__value__の値（青）になっている要素を見ると、値が1になっています。
したがって、<mt:If name="ハッシュ名" key="$__value__">のMTIfタグの条件が成立して、「チェックがオンの時に出力する内容」の部分が出力されます。

また、繰り返しの二回目では、変数__value__の値は、配列の1番の要素の「赤」になっています。
一方、ハッシュには、キーが変数__value__の値（赤）になっている要素はありません。
したがって、<mt:If name="ハッシュ名" key="$__value__">のMTIfタグの条件が成立せず、「チェックがオフの時に出力する内容」の部分が出力されます。

同様にして、「黄」のチェックはオンなので、「チェックがオンの時に出力する内容」が出力されます。
一方、「緑」「紫」のチェックはオフなので、「チェックがオフの時に出力する内容」が出力されます。

なお、マルチチェックボックスのフィールドを複数作った場合は、MTIncludeタグを除く部分を、個々のフィールドに対して書きます。

2.事例その1（チェックされている項目だけ出力する）

例えば、ブログ記事の編集画面で以下の画面のように青と黄のチェックをオンにしたとします。

この時、ブログ記事には、以下の画面のようにチェックした項目だけ一覧で出力したいとします。

この例では、チェック一覧を出力する部分を以下のように組みます。
チェックされた項目を「color_checked」というハッシュに代入した後、前述の繰り返しを行っています。
また、この例ではチェックされていない項目は出力しないので、MTElseタグと「チェックがオフの時に出力する内容」を省略しています。

<$mt:Include module="マルチチェックボックス選択肢"$>
<$mt:EntryColor split_to_hash="," setvar="color_checked"$>
<div>
色：
<ul class="colors">
<mt:Loop name="colors">
  <mt:If name="color_checked" key="$__value__">
    <li><span><$mt:GetVar name="__value__"$></span></li>
  </mt:If>
</mt:Loop>
</ul>
</div>

なお、上記の例ではスタイルシートに以下を追加しています。

ul.colors {
    display : inline;
    margin : 0;
    padding : 0;
}
ul.colors li {
    display : inline;
    padding : 0;
    margin : 0 5px 0 0;
}
ul.colors li span {
    border : 1px solid black;
    padding : 1px 3px;
}    

2.事例その2（全項目を出力し、チェックされているかどうかで表示を変える）

以下の画面のように、マルチチェックボックスの全項目を出力し、チェックがオンのものとオフのものとで表示方法を変えたいとします。

この例では、テンプレートを以下のように組みます。
チェックのオン／オフに応じて、値を囲むspan要素のクラスを切り替えています（7行目と9行目）。

<$mt:EntryColor split_to_hash="," setvar="color_checked"$>
<div>
色：
<ul class="colors">
<mt:Loop name="colors">
  <mt:If name="color_checked" key="$__value__">
    <li><span class="checked"><$mt:GetVar name="__value__"$></span></li>
  <mt:Else>
    <li><span class="not_checked"><$mt:GetVar name="__value__"$></span></li>
  </mt:If>
</mt:Loop>
</ul>
</div>

なお、上記の例では前述のスタイルシートの後に以下を追加しています。

ul.colors li span.not_checked {
    background-color : #cccccc;
    color : #ffffff;
}