EC-CUBE3で新しいページを作る方法

Pocket

EC-CUBE3で新しいページの作り方を紹介します。

全て管理画面から作れてしまうので、操作自体は非常に簡単。特設ページなどをWordpressの固定ページの感覚で作成することができます。

EC-CUBE3 新しいページの作り方

新規ページの作成

まずは管理画面メニューのコンテンツ管理>ページ管理を開き、「新規入力」ボタンを押します。
EC-CUBE3で新しいページを作る方法-01

フォームの名称、ページのURL、ファイル名を入力し、テキストエリアにページ内容を入力。URLとファイル名は、-(ハイフン)を入れるとエラーになるため、アンダーバーで代用します。
EC-CUBE3で新しいページを作る方法-02

ページ内容はWordpressのようにコンテンツだけではなく、ベーステンプレートの読み込みなども含めて入力する必要あり。手書きでは大変なので、「当サイトについて」など、すでにあるページからコピーしてくると楽です。

デフォルトテンプレートなら以下のようなコード内容になります。

{% extends 'default_frame.twig' %}

{% block main %}
<div class="main_only">
  <div class="container-fluid inner no-padding">
    <div id="main">
      <h1 class="page-heading">ページタイトル</h1>
      <div id="help_about" class="container-fluid">
        <div class="row">
          <div class="col-md-10 col-md-offset-1">

            コンテンツ内容

          </div><!-- /.col -->
        </div><!-- /.row -->

      </div>
    </div>
  </div>
</div>
{% endblock %}

meta設定を行う場合はそれぞれのフォームに入力してください。
EC-CUBE3で新しいページを作る方法-03

入力が終わったら登録ボタンを押せば完了。
EC-CUBE3で新しいページを作る方法-04

新しく作ったページのレイアウトを編集する方法

新しく作成したページは、レイアウトの変更やページの再編集、削除ができます。
EC-CUBE3でレイアウトを変える方法-05

トップと同じようにメイン下部にブロックを配置してみると…
EC-CUBE3でレイアウトを変える方法-06

ページ内容も変更されました。
EC-CUBE3でレイアウトを変える方法-07

新しく作ったページのテンプレートファイルを編集する方法

EC-CUBE3で新しく作ったページはテンプレートファイルを直接編集することで内容を変更できます。場所は特に指定していなければ、html/user_dataフォルダに入ってます。
EC-CUBE3でレイアウトを変える方法-08

通常のテキストファイルと同じように編集して保存することで、ページ内容を書き換えることが可能です。管理画面だとコーディングしづらいのでエディターを使う方が楽ですね。
EC-CUBE3でレイアウトを変える方法-09