EC-CUBE で新着情報やお知らせの表示件数を変更する方法

[最新更新] 2022年09月06日
[初回公開] 2007年07月26日

EC-CUBE の過去のバージョンでは新着情報やお知らせは一定の件数を上回ると古い情報が表示されなくなり別途バックナンバーを表示するカスタマイズが必要だったが、最近の EC-CUBE は古いお知らせ情報も表示されるようになったものの表示件数の表示には操作が必要になるため変更する方法を紹介する。

１．EC-CUBE で新着情報やお知らせを多く出すメリット

EC-CUBE で新着情報やお知らせを多く出すメリットとしては、「利便性の向上」と「検索エンジン対策（SEO）」の 2 点が挙げられる。
1 点目の「利便性の向上」とは、取り扱う商品の入れ替えが多いと商品の入荷情報やお勧めの商品がどれか利用者にわかりづらいが、新入荷を通知することで購入促進につながる。

また、発送時期や店舗の休日をお知らせ欄で通知することで利用者はいつ手元に商品が届くのか把握しやすくなるので店舗の信頼度も上がる。

次に 2 点目の「検索エンジン対策（SEO）」とは、掲載する文言や商品へのページへのリンクが多いほど Google など検索サイトの結果画面で上位に表示されやすくなるため、新着情報やお知らせ欄を利用されることが多い。

これらのように利用者により多くの情報を一目でわかるようにトップページで周知したいが、EC-CUBE では表示できる件数が定められているため、設定変更またはカスタマイズで表示件数を増やす必要がある。

２．EC-CUBE の新着情報やお知らせ欄の表示仕様

EC-CUBE の新着情報やお知らせ欄の表示仕様とは、バージョンにより異なっている。
最新のバージョン 4 系では下図のように数件の情報が掲載されており、ボタン「more」をクリックするごとに一定数の新着・お知らせ情報が追加で同じページ内で表示される仕組みになっている。

初期のインストール状態では最大 5 件の新着・お知らせ情報が表示され、ボタンをクリックするとさらに追加で 5 件表示される。
例えば新着情報が計 11 件あったとすると、初回の画面表示では最新の 5 件が表示される。
そこでボタン「more」を押すとさらに 5 件追加されて計 10 件が画面上に表示される。

もう 1 度ボタン「more」を押すと最後の 1 件が表示される。
ボタンを押すごとに表示するようになっているため、過去の新着情報やお知らせを一覧で表示するバックナンバーの画面は用意されていない。

また、バージョン 4 系より古い 1 から 3 系の EC-CUBE ではトップページに日付が最新の順番で新着情報やお知らせが数件表示されるようになっている。

既定の数量を超えた古い情報はバックナンバーとして新着情報一覧の画面で閲覧することができるが、1 系に限っては別途バックナンバーの画面をカスタマイズで用意する必要がある。

３．EC-CUBE で新着情報やお知らせの表示件数を変更する方法

EC-CUBE で新着情報やお知らせの表示件数を変更する方法は、バージョン 4 系とそれ以外で異なっている。
バージョン 4 系ではプログラム内に表示件数が指定されているため、この数値を変更する必要がある。

また、バージョン 1 系についてもトップページに日付の新しい順番で規定数表示されるようになっている。

表示される件数を超えた情報はトップページに表示されないため、別途バックナンバーが閲覧できるように画面を用意する必要がある。

3-1．バージョン 4 系のお知らせ表示数の変更方法

バージョン 4 系でのお知らせ表示数の変更方法として、プログラム（PHP ファイル）を修正する必要がある。
PHP ファイルはサーバ上で次のコマンドで開いて修正するか、手元のパソコンでテキストエディタ等で修正したプログラムファイルをサーバにアップロードすると表示件数が変更できる。

サーバで直接編集する場合は下記のコマンドを実行する。

# vi /{EC-CUBE を設置したフルパス}/src/Eccube/Resource/template/default/Block/news.twig

news.twig は実際に HTML タグ等を記入するテンプレートファイルとなり、下記の矢印で示す行の数値を変更することで画面を開いた直後の初期表示件数を変更することができる。

<script>
$(function() {
  $('.ec-newsRole__news').each(function() {
    var listLength = $(this).find('.ec-newsRole__newsItem').length;
      if (listLength > 5) {　←ここ
        $(this).find('.ec-newsRole__newsItem:gt(4)').each(function() {　←ここ
          $(this).hide();
（略）

次にボタン「more」をクリックした際に追加で新着・お知らせを表示する件数を変更するため、同じく news.twig にある下記の箇所を修正する。

$(this).append('<a id="news_readmore" class="ec-inlineBtn--top">{{ 'more'|trans }}</a>');
  var dispNum = 5;　←ここ
  $(this).find('#news_readmore').click(function() {
    dispNum += 5;　←ここ
    $(this).parent().find('.ec-newsRole__newsItem:lt(' + dispNum + ')').show();
      if (dispNum >= listLength) {
        $(this).hide();
      }
    })
  }
});

3-2．バージョン 1.3.0 で新着情報のバックナンバーの作成方法

バージョン 1.3.0 で新着情報のバックナンバーの作成方法は、「処理する PHP ファイル」と「HTML テンプレートファイル」の 2 つのファイルを用意する。

「処理する PHP ファイル」は index.php がある階層にバックナンバー用のディレクトリを用意する。
ここでは「backnumber」という名称とし、そのディレクトリの中にさらに index.php というファイル名のファイルを用意して下記を記述する。

<?php
require_once("../require.php");

class LC_Page {
　function LC_Page() {
　　/** 必ず指定する **/
　　$this->tpl_mainpage = 'backnumber/index.tpl';
　　$this->tpl_page_category = 'backnumber';
　　$this->tpl_title = 'お知らせ一覧';
　}
}

$objPage = new LC_Page();
$objView = new SC_SiteView();

// レイアウトデザインを取得
$objPage = sfGetPageLayout($objPage, false, DEF_LAYOUT);

//新着情報取得
$objPage->arrNews = lfGetNews();

// 画面の表示
$objView->assignobj($objPage);
$objView->display(SITE_FRAME);
//-------------------------------------------------------
/* 新着情報取得 */
function lfGetNews(){
　global $tmp_id;
　$conn = new SC_DBConn();
　
　$sql = "SELECT 
　　news_id,
　　news_date,
　　rank,
　　news_title,
　　news_comment,
　　news_url,
　　news_select,
　　link_method,
　　creator_id,
　　create_date,
　　update_date,
　　del_flg,
　　cast(substring(news_date,1,10) as date) as news_date_disp 
　　FROM dtb_news 
　　WHERE del_flg = '0' 
　　ORDER BY news_date_disp DESC, news_id DESC";
　　
　　$list_data = $conn->getAll($sql);
　return $list_data;
}

次に HTML テンプレートファイルがある /data/Smarty/templates/ 内にも「backnumber」というディレクトリを作り、「backnumber」ディレクトリの中に下記を記述した index.tpl 名前で保存する。

<table width="" border="0" cellspacing="0" cellpadding="0" summary=" ">
　<tr><td height="15"></td></tr>
　<tr>
　　<td bgcolor="#cccccc" align="center">
　　<table width="" border="0" cellspacing="1" cellpadding="10" summary=" ">
　　<!--{section name=data loop=$arrNews}-->
　　　<tr>
　　　　<td width="100%" bgcolor="#ffffff" class="fs12">
　　　　　<!--{if $arrNews[data].news_url}--><p><a href="<!--{$arrNews[data].news_url}-->" <!--{if $arrNews[data].link_method eq "2"}-->target="_blank"<!--{/if}--> ><!--{/if}--><!--{$arrNews[data].news_title|escape|nl2br}--><!--{if $arrNews[data].news_url}--></a></p><!--{/if}-->  (<!--{$arrNews[data].news_date_disp|escape}-->)
　　　　　<p><!--{$arrNews[data].news_comment|escape|nl2br}--></p>
　　　　</td>
　　　</tr>
　　<!--{/section}-->
　　</table>
　　</td>
　</tr>
</table>

これら 2 つのファイルをサーバにアップロードすれば http://{EC-CUBE のパス}/backnumber/ にアクセスすることで登録している新着情報・お知らせが日付の新しい順に表示されるのが確認できる。

関連記事