Events Managerのプレースホルダーの覚書

EventsManagerのプラグインにはプレースホルダーが準備されており、イベント詳細やチケットなどの各種設定ができる。

カテゴリー一覧を表示するタグについて

イベントに設定したカテゴリーを一覧表示するためには#_EVENTCATEGORIESというプレースホルダーが準備されている。

#_EVENTCATEGORIES
Shows a list of category links this event belongs to.
#_EVENTCATEGORIESIMAGES
Shows a list of category images this event belongs to. Categories without an image will be ignored.

#_EVENTCATEGORIESはリスト形式でカテゴリーを表示するものだ。
ただ、今回は各リストにCSSで背景色をつけたかった。そのためjQueryを使用して、テキストに基づいてクラスを設定することにした。

サンプル

<ul class="event-categories">
 <li><a href="categories/event1">イベント</a></li>
 <li><a href="categories/event2">展示</a></li>
</ul>

実装前の上記のタグを下記のようにするものである。

<ul class="event-categories">
 <li><a href="categories/event1" class="cat-event1">イベント</a></li>
 <li><a href="categories/event2" class="cat-event2">展示</a></li>
</ul>

jQuery

<script>
$(document).ready(function(){
    $('.event-categories a').each(function() {
        var text = $(this).text().trim(); // テキストを取得し、前後の空白を削除
        // テキストに基づいてクラスを設定
        if (text === "イベント") {
            $(this).addClass("cat-event1");
        } else if (text === "展示") {
            $(this).addClass("cat-event2");
        }
    });
});
</script>

#_CATEGORYCOLORで背景色が取得できる

追記：これでもいけた。カテゴリが一つの場合に限るけど、jQueryを使わずにできたので簡単だった…

<div class="cat-wrapper" style="background:#_CATEGORYCOLOR">
	#_EVENTCATEGORIES
</div>