【EC-CUBE 4】新規ページのURLを複数階層にする方法

2022年5月29日2022年9月21日

管理ページから作成した新規ページのURLから「user_data」を消し、

「ドメイン名/products/list」
「ドメイン名/help/about」

のようなを階層の長いURLを設定するには？

この記事では、管理ページから作成した新規ページのURLを自由に設定する方法を紹介します。
EC-CUBE 4のカスタマイズを行いたい方の参考になればと思います！

【動作環境】
EC CUBEのバージョン：4.1.2
サーバー：Xserver
ブラウザ：Google Chrome

なおデバッグモードを設定しておくと、エラーが起きたときに詳細情報が表示されるようになります。
エラー箇所を探しやすくなるので、開発前に設定しておくのをオススメします。
デバッグモードの設定方法についてはこちらの記事で解説しています。

各種プラグインとの整合性は確認しておりませんので、ご留意お願いします。
まず流れを掴んでおくために、この記事と同じ「Sampleページ」を試しに作ってみることをオススメします。

管理画面から新規に作成する方法

管理画面から新規ページを作成するときに、URLを以下のように ” / ” で区切って複数階層で登録します。

「ドメイン名/user_data/products/sample」というURLでページにアクセスできました。

ここから「user_data」を消したい場合は、以下の記事を参考にしてください。

作成済ページのURLを変更する方法

すでに作成済ページのURLを変更したい場合、対象となるControllerの作成とデータベースの修正を行います。
ざっくりとした全体の流れは以下の通り。

ファイル管理にて、対象ページのTwigファイルを「app/template/default」にコピー。
※管理画面から作成したページのTwigファイルは「app/template/user_data」にあります。
変更後URLと対象ページをつなぐためのcontrollerファイルを、「app/Customize/Controller」に作成。
データベースにて、対象ページの「url」と「edit_type」を修正。
EC CUBE 管理画面にて、キャッシュを削除。

各ステップの詳細

「◯◯(ドメイン名)/sample」というURLから、
「◯◯(ドメイン名)/lists/sample」に変更するときの手順を紹介します。
元のページはこちらの記事で作成した「user_data」削除済のページを使っています。

なお、操作にはEC-CUBEの管理画面に加えて、ファイルサーバーとデータベースにアクセスする必要があります。
（著者はXserverを使用しているので、以降の説明にはXserverの操作画面が出てきます。）

またControllerファイルを作成する必要があるので、VS Codeなどのエディターがあると便利です。

ファイルサーバーやデータベースを操作するときは、誤って他のファイルやデータを消したり変更したりしないよう注意してください！

【ファイル管理】Twigファイルを「app/template/default」フォルダにコピー

前回の記事でコピー済なので、こちらは参考まで

ファイルサーバーにアクセスし、先程作成したページのTwigファイル（app/template/user_dataに格納されています）を「app/template/default」に複製します。

「app/template/user_data」に「sample.twig」ファイルが作成されています。

「app/template/default」に「sample.twig」ファイルをコピー。

【ファイル管理】Controllerファイルを作成し「app/Customize/Controller」フォルダにアップ

STEP

Controllerファイルの作成

変更したいURLにアクセスした際に、先程コピーしたTwigファイルが表示されるためのControllerをサーバーにアップします。

VS codeなどのエディター、もしくはメモ帳などを使って、以下のようなファイルを作成します。
（前回の記事ですでに作成済の場合は、それを修正してください。）

<?php

namespace Customize\Controller;

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

class SamplePageController extends AbstractController
{
    /**
     * @Route("/lists/sample", name="lists_sample")
     * @Template("sample.twig")
     */
    public function index(Request $request)
    {
            return [];
    }
}

ファイル名とクラス名（10行目）は同じ名前にしておくこと。（違う名前にするとエラーになるかも？）
上の例では「SamplePageController」としました。
前回の記事からの変更点は、@Route(“/lists/sample”, name=”lists_sample”) の部分です（13行目）。

管理画面から新規作成した「user_data」を含むページのControllerを作成する場合

Routingの表記とページ表示の方法が変わります。詳しくは以下記事を参考にしてください。