WEB制作、マーケティングに関する情報をお届けします。ホームページ制作会社、テラのブログ

EC CUBE3.0 新着情報をカスタマイズする方法。

タグ:

スライドショーのカスタマイズ
EC CUBE3.0の新着情報をカスタマイズする方法を紹介します。
デフォルトではdlタグで構成されています。
自分の使いたいタグ(liタグ・span・div等)に関数を入れ込むだけなので、簡単に出来てしまいます。
関数等の訳も含めて解説します。

1.編集画面にアクセス

コンテンツ管理→ブロック管理→新着情報をクリックして編集画面に入りましょう。
新着情報の編集画面にアクセス
アクセスすると下記の画面になります。
赤枠の部分を修正していきます。
編集画面

2.タグの解説

初期のコードは下記です。 それぞれの関数を簡単に下記にまとめておきます。
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タグに書き換えた例です。 以上でliタグでの出力が可能になります。
あとは、idやclassをつけてスタイルを追加するだけでオッケーです。

4.スタイルの編集

style.cssのファイルはhtml→template→custom(テンプレート名)→css→style.cssです。
CSSファイルの場所
新しく個別のcssを追加する方法については後日紹介します。