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

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

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

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

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

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

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

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

目次

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

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

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

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

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

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

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

各ステップの詳細

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

URL修正前(/sample)
URL修正後(/lists/sample)

なお、操作には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の表記とページ表示の方法が変わります。詳しくは以下記事を参考にしてください。

STEP
Controllerファイルをアップ

先程作成したControllerを「app/Customize/Controller」フォルダにアップします。
(すでに作成したControllerファイルを直接修正した場合は不要)

「app/Customize/Controller」に「SamplePageController.php」をアップ。

【データベース】新規ページのデータを変更

データベースにアクセスし、対象ページ情報の「url」を変更します。

「url」を “sample” から “lists_sample” に変更します。

「url」には、変更後のURLの “/” を “_”に変えて入力します(〇〇/△△ であれば 〇〇_△△)。

また、「edit_type」が “0” になっていたら “2” に変更してください。

【EC-CUBE 管理画面】キャッシュを削除

ここまでで準備完了です。
管理画面からキャッシュを削除して、ページにアクセスしてみましょう。

キャッシュ管理からキャッシュを削除できます。
URLを「ドメイン名/lists/sample」に変更できました!

まとめ

以上、管理画面から作成したページのURLを複数階層にする方法を紹介しました。

こちらの方法を応用すれば、もっと階層の長いURLを設定したり、EC-CUBEで用意されている既存ページのURLを変更したりもできちゃいます。

・・・とはいえ、誤った操作をしてしまうと取り返しのつかない事態になりかねないので(特に既存ページを修正する場合は要注意)、バックアップをとっておくなどの対処はしておきましょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次