EC CUBE3固定ページを増やす&メニュー追加

【記事要約】

EC CUBE3にオリジナルの固定ページを追加する方法とそのページへのリンクをメニューに追加する方法を紹介します。テンプレートはデフォルトのテンプレートです。

EC CUBE3でネットショップを構築。

サイト内に「初めての方へ」や「お手入れ方法」などについてのオリジナルのページを追加したいと思い、色々調べたところ、固定ページ自体はすぐに作れるが、メニューに固定ページを追加したい場合に、少しコードの変更が必要でした。今回はその固定ページ追加のやり方を紹介します。

EC CUBEのデフォルトテンプレートを使用していることを前提としています。

1. 固定ページを作る

①メニューのコンテンツ管理 > ページ管理をクリック。

②ページ管理画面、一番下の[新規入力]ボタンをクリック

③新規ページの入力画面に必要項目を入力し、[登録]ボタンを押す

1)作る固定ページにちなんだ名称、URL(半角英数)、ファイル名(半角英数)を入力

2)ファイル名下のテキストエリアにはこの時点では適当に「あああ」など仮テキストを入力

2)必須事項の必要に応じて、author、description、keyword、robotsを入力

④コンテンツ管理 > ページ管理でページ一覧へ戻ると、登録した新しいページが表示される。

2. 固定ページの内容を作る

①ページ一覧(コンテンツ管理 > ページ管理)で新しく作るページの構成に一番近いページ(例えばプライバシーポリシーなど)の「…」マークを押し、[ページ編集]をクリック。

②ファイル名下のテキストエリアの内容をコピーする。

③ページ一覧で新しく作ったページの「…」マークを押し、[ページ編集]をクリック。先ほどコピーした内容をファイル名下のテキストエリアにペーストする。

{% block main %}から{% endblock %}が実際のページの内容になる。

プライバシーポリシーのソースをコピペした場合、

<h1 class=”page-heading”>プライバシーポリシー</h1>を書き換えればメインタイトルが変わる。

さらに、 class=”col-md-10 col-md-offset-1″と記載されいているdivタグの内容を編集すれば、ページコンテンツが出来上がる。

プライバシーポリシーのソースの場合「privacy_box_*****」となっている各divタグのidは削除してOK。

④ページ内容を書き換えたら、忘れずに[登録]ボタンを押そう。

これで、固定ページの出来上がりだ。

ページ編集画面で登録したURLをブラウザに直接打ち込むか、ページ一覧の「…」ボタンから[レイアウト編集]をクリックした画面にある[プレビュー]ボタンより、実際の見え方を確認することができる。

3. メニューに固定ページを追加する

①コンテンツ管理 > ブロック管理からブロック一覧に移動。

②「カテゴリ」の「…」ボタンから[編集]をクリックする。

③「ブロックデータ」のテキストエリアにあるコード一番下を下記のように書き換える。

ソースコードは間違えた時のため、バックアップを取っておいた方が安全。(メモ帳にコピーして保存など)

***元のソースコード***

<nav id=”category” class=”drawer_block pc”>
<ul class=”category-nav”>
{% for Category in Categories %}
{{ _self.tree(Category) }}
{% endfor %}
</ul> <!– category-nav –>
</nav>

***固定ページのリンクを追加***

<nav id=”category” class=”drawer_block pc”>
<ul class=”category-nav”>
{% for Category in Categories %}
{{ _self.tree(Category) }}
{% endfor %}
<li><a href=”http://****ページURLを記載****“>メニュー名称を記載</a></li>
</ul> <!– category-nav –>
</nav>

④[登録]ボタンを押して保存する。

以上で、固定ページを新しく作成し、メニューからリンクすることができるようになる。