EC-CUBE4でお知らせ詳細ページを作成する方法

「EC-CUBE4ってお知らせ詳細ページがないの?」

はい、ありません。

EC-CUBE4では、お知らせ(新着情報)をデフォルトで投稿できるようになっています。
タイトルや本文、URLまで設定できるので便利です。

しかし、お知らせの詳細ページは用意されていません
デフォルトでも、アコーディオンで表示はされますが、個別に詳細ページが欲しい場合があります。

そんな場合のために、お知らせの詳細ページの作成方法を説明します。
とても簡単にできるので、参考にしてみてください。

以下の環境で説明します。
EC-CUBE 4.1.2

目次

完成形

まずは、カスタマイズした結果、どういったものが出来るのかの確認です。
新着情報で投稿したお知らせをクリックすると、詳細ページに遷移します。

新着情報
お知らせの詳細ページ

手順の確認

簡単です。

  • NewsControllerを作成する
  • お知らせの詳細ページを作成する
  • 新着情報ブロックを修正する

たったこれだけで、複雑なことは必要ありません。

NewsControllerを作成する

まずは、NewsControllerを作成します。
ECCUBEROOT/src/Eccube/Controller/TopController.phpをコピーします。ECCUBEROOT/app/Customize/Controller以下に貼り付けます。
ECCUBEROOT/app/Customize/Controller/TopController.phpファイル名を、NewsController.phpに変更します。

ここまでできたら、NewsController.phpの中身を次のように書き換えます。

<?php

/*
 * This file is part of EC-CUBE
 *
 * Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
 *
 * http://www.ec-cube.co.jp/
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

namespace Customize\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Symfony\Component\Routing\Annotation\Route;
use Eccube\Controller\AbstractController;
use Eccube\Entity\News;

class NewsController extends AbstractController
{
    /**
     * @Route("/news/detail/{id}", name="news_detail", methods={"GET"})
     * @Template("@user_data/News/detail.twig")
     *
     * @param News $News
     *
     * @return array
     */
    public function detail(News $News)
    {
        return [
            'News' => $News,
        ];
    }
}

これでNewsControllerの作成は完成です。

お知らせの詳細ページを作成する

続いて、お知らせの詳細ページを作成します。

管理画面からコンテンツ管理のページ管理をクリックします。
新規作成をクリックし、ページ名、URL、ファイル名を入力します。
今回は、ページ名をお知らせ詳細ページ、URLをnews_detail、ファイル名をNews/detailとしました。

ここのURLは、先程作成したNewsControllerのRouteアノテーションと紐づいています。
URLを変更する場合は、NewsControllerのRouteアノテーションと紐づくようにしてください。

少し下にスクロールして、レイアウト設定の箇所を変更します。
PCに下層ページ用レイアウトを設定します。
ここまでできたら、右下の登録ボタンをクリックして登録します。

続いて、コードを編集していきます。
エディターからでも管理画面からでも問題ありません。

エディターの場合は、ECCUBEROOT/app/template/user_data/News/detail.twigを編集します。
管理画面からの場合は、先程のページ管理からお知らせ詳細ページをクリックします。

コードの箇所を次のように変更します。

{% extends 'default_frame.twig' %}

{% block main %}
    <div>
        {{ News.publish_date|date_day }}
        {{ News.title }}
    </div>

    <div>
        {{ News.description|raw|nl2br }}
        {% if News.url %}
            <br>
            <a href="{{ News.url }}" {% if News.link_method == '1' %}target="_blank"{% endif %}>{{ '詳しくはこちら'|trans }}</a>
        {% endif %}
    </div>
{% endblock %}

News.publish_dateが公開日時、News.titleがタイトル、News.descriptionが本文、News.urlがURLです。

これでお知らせの詳細ページが作成できました。
見た目をデザインしたい場合は、コーディングする時と同じようにHTMLとCSSを書いて調整すれば出来ます。

新着情報ブロックを修正する

最後に、新着情報ブロックを修正します。
エディターでも管理画面からでも問題ありません。

エディターの場合は、ECCUBEROOT/app/template/default/Block/news.twigを編集します。
管理画面からの場合は、コンテンツ管理のブロック管理から、新着情報をクリックします。

コードの箇所を、次のように修正します。

{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% set NewsList = repository('Eccube\\Entity\\News').getList() %}

{% block stylesheet %}
    <style>
    .ec-newsRole__newsItem {
        display: block;
    }
    </style>
{% endblock %}

{% block javascript %}
    <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();
                    });
                    $(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();
                        }
                    })
                }
            });

            /*
            $('.ec-newsRole__newsHeading').on('click', function() {
                $newsItem = $(this).parent('.ec-newsRole__newsItem');
                $newsDescription = $newsItem.children('.ec-newsRole__newsDescription');
                if ($newsDescription.css('display') == 'none') {
                    $newsItem.addClass('is_active');
                    $newsDescription.slideDown(300);
                } else {
                    $newsItem.removeClass('is_active');
                    $newsDescription.slideUp(300);
                }
                return false;
            });
            */
        });
    </script>
{% endblock %}
<div class="ec-role">
    <div class="ec-newsRole">
        <div class="ec-secHeading">
            <span class="ec-secHeading__en">{{ 'NEWS'|trans }}</span>
            <span class="ec-secHeading__line"></span>
            <span class="ec-secHeading__ja">{{ '新着情報'|trans }}</span>
        </div>
        <div class="ec-newsRole__news">
            {% for News in NewsList %}
                <a href={{ url('news_detail',  {'id': News.id}) }} class="ec-newsRole__newsItem">
                    <div class="ec-newsRole__newsHeading">
                        <div class="ec-newsRole__newsDate">
                            {{ News.publish_date|date_day }}
                        </div>
                        <div class="ec-newsRole__newsColumn">
                            <div class="ec-newsRole__newsTitle">
                                {{ News.title }}
                            </div>
                            {# {% if News.description or News.url %}
                                <div class="ec-newsRole__newsClose">
                                    <a class="ec-newsRole__newsCloseBtn">
                                        <i class="fas fa-angle-down"></i>
                                    </a>
                                </div>
                            {% endif %} #}
                        </div>
                    </div>
                    {# <div class="ec-newsRole__newsDescription">
                        {{ News.description|raw|nl2br }}
                        {% if News.url %}
                            <br>
                            <a href="{{ News.url }}" {% if News.link_method == '1' %}target="_blank"{% endif %}>{{ '詳しくはこちら'|trans }}</a>
                        {% endif %}
                    </div> #}
                </a>
            {% endfor %}
        </div>
    </div>
</div>

コメントアウト箇所は、通常は不要なので削除しますが、変更箇所をわかるようにするためにコメントアウトしています。
ec-newsRole__newsItemクラスのdivタグをaタグに変えたので、CSSを追加してdisplay: block;を指定しています。

ここまで出来たら、後は動作確認です。
管理画面の新着情報から、新しいお知らせを投稿します。
TOPページの新着情報のお知らせをそれぞれクリックして、お知らせ詳細ページに遷移し、それぞれの内容が表示されたら成功です。

まとめ

お知らせ詳細ページの作成は、簡単です。
既存の新着情報機能をそのまま使用することができます。

カスタマイズをすれば、アイキャッチを表示出来るようになったり、WordPressのように文字に色をつけたりすることができます。

EC-CUBE4のカスタマイズに困っている方は、参考にしてみてください。

EC-CUBE等のECサイト制作、WordPress等のWebサイト制作でお困りの方は、ご相談ください。
相談無料ですので、お気軽にお問い合わせください。

目次
閉じる