【EC-CUBE 4】新規ページの作成／ページのURLを変更する方法

2024年8月10日

この記事では、管理画面から新規ページを作成する方法と、作成済みページのドメイン名以下のURLを変更（「user_data」が入らないURLに変更）する方法を紹介します。

【動作環境】
EC CUBEのバージョン：4.2.2
サーバー：Xserver

開発前にデバッグモードの設定をお薦めします

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

【EC-CUBE 4】デバッグモードの設定/解除方法

カスタマイズ後は、デバッグモードの解除を忘れないように。

管理画面から新規ページを作成する方法

管理画面の「コンテンツ管理」→「ページ管理」と進み、新規作成ボタンをクリックします。
ページ名／URL／ファイル名を入力するフォームがあるので、例えば以下のように入力してページを作成します。

EC-CUBEの新規ページ作成画面 — URLを複数階層で設定する場合は ” / ” で区切って登録します。

EC-CUBEで新規作成したページを開いたときの画面 — 「ドメイン名/user_data/products/sample」というURLでページにアクセスできました。

ここで作成したページは、デフォルトでは「ドメイン名/user_data/〜」となってしまいます。
また、「データベースから商品情報を持ってくる」といったデータベースとの連携もやりにくいため、新規ページの作成には以下の方法をお薦めしています。

より自由度の高いページを作りたい方は、参考にしてみてください。

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

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

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

各手順の具体的な方法については以下の通りです。

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

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

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

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

STEP

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

※前回の記事でコピー済みのため、こちらは参考まで。

ファイルサーバーにアクセスし、URLを変更したいページのTwigテンプレート（「app/template/user_data」に格納されています）を「app/template/default」に複製します。

管理画面から新規作成したページのTwigテンプレートは「app/template/user_data」に保存されてます。

対象のTwigテンプレートを「app/template/default」にコピーします。

STEP

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

STEP 2-1

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 [];
    }
}