EC CUBE3.0 新着情報をカスタマイズする方法。
2016.09.14
カテゴリ：WEB制作
タグ：
デフォルトではdlタグで構成されています。
自分の使いたいタグ(liタグ・span・div等)に関数を入れ込むだけなので、簡単に出来てしまいます。
関数等の訳も含めて解説します。
インデックス
1.編集画面にアクセス
コンテンツ管理→ブロック管理→新着情報をクリックして編集画面に入りましょう。
赤枠の部分を修正していきます。
2.タグの解説
初期のコードは下記です。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{% for News in NewsList %} <dl> <dt> <span class="date">{{ News.date|date("Y/m/d") }}</span> <span class="news_title"> {{ News.title }} </span> {% if News.comment or News.url %} <span class="angle-circle"><svg class="cb cb-angle-down"><use xlink:href="#cb-angle-down" /></svg></span> {% endif %} </dt> {% if News.comment or News.url %} <dd>{{ News.comment|raw|nl2br}} {% if News.url %}<br> <a href="{{ News.url }}" {% if News.link_method == '1' %}target="_blank"{% endif %}> 詳しくはこちら </a>{% endif %} </dd> {% endif %} </dl> {% endfor %} |
| News.date|date(“Y/m/d”) | 日付の取得です。 |
|---|---|
| News.title | タイトルの取得です。 |
| News.comment|raw|nl2br | 新着記事の本文を取得しています。ちなみにrawはエスケープさせずにHTMLの出力、nl2brは改行文字の前に改行タグを挿入します。 |
| if News.url | もし、URLが設定してあれば。if文内を処理します。今回はaタグの付与 |
| News.url | 新着情報登録時のURLが付与されます。 |
| if News.link_method == ‘1’ | もし、新着情報登録時に別ウィンドウを開くにチェックが入っていたらと言う意味でチェックが合った場合はaタグのtarget属性にblankが付与されて別ウインドウで開かれます。 |
3.liタグにカスタマイズ
下記はliタグに書き換えた例です。|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul> {% for News in NewsList %} <li> <a href="{{ News.url }}" {% if News.link_method == '1' %}target="_blank"{% endif %}> <p class="date">{{ News.date|date("Y/m/d") }}</p> <p class="news_title"> {{ News.title }} </p> <p class="excerpt">{{ News.comment|raw|nl2br}}</p> </a> </li> {% endfor %} </ul> |
あとは、idやclassをつけてスタイルを追加するだけでオッケーです。
4.スタイルの編集
style.cssのファイルはhtml→template→custom(テンプレート名)→css→style.cssです。
