EC CUBE3.0 新着情報をカスタマイズする方法。
2016.09.14
カテゴリ：WEB制作
タグ：
EC CUBE3.0の新着情報をカスタマイズする方法を紹介します。
デフォルトでは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> |
以上でliタグでの出力が可能になります。
あとは、idやclassをつけてスタイルを追加するだけでオッケーです。
4.スタイルの編集
style.cssのファイルはhtml→template→custom(テンプレート名)→css→style.cssです。
新しく個別のcssを追加する方法については後日紹介します。
