EC CUBE ロゴ
EC CUBE ロゴ

EC CUBEにサイトマップを追加しました！

既存のものでは、検索エンジン用のものはありますが、

普通のページでのサイトマップが欲しかったので

カスタマイズに挑戦しました。

EC CUBEにカテゴリーのサイトマップを追加してSEO最適化

サイトマップ
サイトマップ

今後の事を考えると、カテゴリーが増えても

自動で追加してくれる機能をつけた方が管理がしやすくなります。

なので、管理画面のカテゴリー登録を利用して

カテゴリーを追加したら、自動で追加されるようにしました。

そのカテゴリーサイトマップ作成の覚書を

ここに残しておきます。

既存のファイルをコピーして表示用のファイルを作成して各sitemapフォルダに保存

  1. 【html/contact/index.php】 をコピーして、【html/sitemap/index.php】を作成。
  2. 【data/class_extends/page_extends/contact/LC_Page_Contact_Ex.php】をコピーして、
    【data/class_extends/page_extends/sitemap/LC_Page_Contact_Sitemap_Ex.php】を作成。
  3. 【data/class/pages/contact/LC_Page_Contact.php】をコピーして、【data/class/pages/contact/LC_Page_Sitemap.php】を作成。
  4. 【data/Smarty/templates/default/sitemap/sitemap.tpl】を作成

まず、上記の順番でファイルをコピーします。

どのファイルを使ってもいいので今回はお問合わせを利用しました。

html/sitemap/index.php を修正

indexファイルを下記のように修正します。

<?php
/*
 * This file is part of EC CUORE
 *
 * Copyright(c) 2009-2011 CUORE CO.,LTD. All Rights Reserved.
 *
 * http://ec.cuore.jp/
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
 */

// {{{ requires
require_once("../require.php");
require_once(CLASS_EX_REALDIR . "page_extends/sitemap/LC_Page_Sitemap_Ex.php");

// }}}
// {{{ generate page

$objPage = new LC_Page_Sitemap_Ex();
register_shutdown_function(array($objPage, "destroy"));
$objPage->init();
$objPage->process();
?>

data/class_extends/page_extends/sitemap/LC_Page_Sitemap_Ex.php を修正

次に、LC_Page_Sitemap_Exファイルを下記のように修正します。

<?php
// {{{ requires
require_once(CLASS_REALDIR . "pages/sitemap/LC_Page_Sitemap.php");

/**
 * ヘルプ のページクラス(拡張).
 *
 * @package Page
 * @author CUORE CO.,LTD.
 * @version $Id$
 */
class LC_Page_Sitemap_Ex extends LC_Page_Sitemap {

// }}}
 // {{{ functions

/**
 * Page を初期化する.
 *
 * @return void
 */
 function init() {
 parent::init();
 }

/**
 * Page のプロセス.
 *
 * @return void
 */
 function process() {
 parent::process();
 }

/**
 * デストラクタ.
 *
 * @return void
 */
 function destroy() {
 parent::destroy();
 }
}
?>

data/class/pages/sitemap/LC_Page_Sitemap.php を修正

【LC_Page_Sitemap】ファイルを下記のように修正します。

中身は管理画面で使用しているカテゴリー登録【page/admin/LC_Page_Admin_.php】を利用しました。

※【category_id】を呼び出すために必要だと思うものだけを残してます。

ひょっとしたらいらない部分もあるかもしてません。

その時は環境に合わせて修正してください。

<?php
// {{{ requires
require_once CLASS_EX_REALDIR . 'page_extends/LC_Page_Ex.php';

/**
 * ヘルプ のページクラス.
 *
 * @package Page
 * @author CUORE CO.,LTD.
 * @version $Id: LC_Page_Sitemap.php 1 2009-08-04 00:00:00Z $
 */
class LC_Page_Sitemap extends LC_Page_Ex {

// }}}
 // {{{ functions

/**
 * Page を初期化する.
 *
 * @return void
 */
 function init() {
 parent::init();
 $this->tpl_page_category = 'sitemap';
 }

/**
 * Page のプロセス.
 *
 * @return void
 */
 function process() {
 parent::process();
 $this->action();
 $this->sendResponse();
 }

/**
 * Page のアクション.
 *
 * @return void
 */
 function action() {
 $objDb = new SC_Helper_DB_Ex();
 $objFormParam = new SC_FormParam_Ex();

$parent_category_id = $objFormParam->getValue('parent_category_id');
 // 空の場合は親カテゴリを0にする
 if (empty($parent_category_id)) {
 $parent_category_id = 0;
 }
 // 親カテゴリIDの保持
 $this->arrForm['parent_category_id'] = $parent_category_id;
 // カテゴリ一覧を取得
 $this->arrList = $this->findCategoiesByParentCategoryId($parent_category_id);
 // カテゴリツリーを取得
 $this->arrTree = $objDb->sfGetCatTree($parent_category_id);
 }

/**
 * パラメーターの初期化を行う
 *
 * @param SC_FormParam $objFormParam
 * @return void
 */
 function initParam(&$objFormParam) {
 $objFormParam->addParam("親カテゴリID", "parent_category_id", null, null, array());
 $objFormParam->addParam("カテゴリID", "category_id", null, null, array());
 $objFormParam->addParam("カテゴリ名", "category_name", STEXT_LEN, 'KVa', array("EXIST_CHECK", "SPTAB_CHECK", "MAX_LENGTH_CHECK"));
 }

/**
 * 親カテゴリIDでカテゴリを検索する.
 *
 * - 表示順の降順でソートする
 * - 有効なカテゴリを返す(del_flag = 0)
 *
 * @param SC_Query $objQuery
 * @param int $parent_category_id 親カテゴリID
 * @return array カテゴリの配列
 */
 function findCategoiesByParentCategoryId($parent_category_id) {
 if (!$parent_category_id) {
 $parent_category_id = 0;
 }
 $objQuery =& SC_Query_Ex::getSingletonInstance();
 $col = "category_id, category_name, level, rank";
 $where = "del_flg = 0 AND parent_category_id = ?";
 $objQuery->setOption("ORDER BY rank DESC");
 return $objQuery->select($col, "dtb_category", $where, array($parent_category_id));
 }

/**
 * デストラクタ.
 *
 * @return void
 */
 function destroy() {
 parent::destroy();
 }

// 並びが1つ下のIDを取得する。
 function lfGetDownRankID($objQuery, $table, $pid_name, $id_name, $id) {
 // 親IDを取得する。
 $col = "$pid_name";
 $where = "$id_name = ?";
 $pid = $objQuery->get($col, $table, $where, $id);
 // すべての子を取得する。
 $col = "$id_name";
 $where = "del_flg = 0 AND $pid_name = ? ORDER BY rank DESC";
 $arrRet = $objQuery->select($col, $table, $where, array($pid));
 $max = count($arrRet);
 $down_id = "";
 for($cnt = 0; $cnt < $max; $cnt++) {
 if($arrRet[$cnt][$id_name] == $id) {
 $down_id = $arrRet[($cnt + 1)][$id_name];
 break;
 }
 }
 return $down_id;
 }

// 並びが1つ上のIDを取得する。
 function lfGetUpRankID($objQuery, $table, $pid_name, $id_name, $id) {
 // 親IDを取得する。
 $col = "$pid_name";
 $where = "$id_name = ?";
 $pid = $objQuery->get($col, $table, $where, $id);
 // すべての子を取得する。
 $col = "$id_name";
 $where = "del_flg = 0 AND $pid_name = ? ORDER BY rank DESC";
 $arrRet = $objQuery->select($col, $table, $where, array($pid));
 $max = count($arrRet);
 $up_id = "";
 for($cnt = 0; $cnt < $max; $cnt++) {
 if($arrRet[$cnt][$id_name] == $id) {
 $up_id = $arrRet[($cnt - 1)][$id_name];
 break;
 }
 }
 return $up_id;
 }

function lfCountChilds($objQuery, $table, $pid_name, $id_name, $id) {
 $objDb = new SC_Helper_DB_Ex();
 // 子ID一覧を取得
 $arrRet = $objDb->sfGetChildrenArray($table, $pid_name, $id_name, $id);
 return count($arrRet);
 }

function lfUpRankChilds($objQuery, $table, $pid_name, $id_name, $id, $count) {
 $objDb = new SC_Helper_DB_Ex();
 // 子ID一覧を取得
 $arrRet = $objDb->sfGetChildrenArray($table, $pid_name, $id_name, $id);
 $line = SC_Utils_Ex::sfGetCommaList($arrRet);
 $sql = "UPDATE $table SET rank = (rank + $count) WHERE $id_name IN ($line) ";
 $sql.= "AND del_flg = 0";
 $ret = $objQuery->exec($sql);
 return $ret;
 }

function lfDownRankChilds($objQuery, $table, $pid_name, $id_name, $id, $count) {
 $objDb = new SC_Helper_DB_Ex();
 // 子ID一覧を取得
 $arrRet = $objDb->sfGetChildrenArray($table, $pid_name, $id_name, $id);
 $line = SC_Utils_Ex::sfGetCommaList($arrRet);
 $sql = "UPDATE $table SET rank = (rank - $count) WHERE $id_name IN ($line) ";
 $sql.= "AND del_flg = 0";
 $ret = $objQuery->exec($sql);
 return $ret;
 }
 }

?>

sitemap用のテンプレートを作成

次にテンプレートを作成します。

これも管理画面のカテゴリー登録を利用しています。

カテゴリー登録の左カラムの部分だけです。

カテゴリー登録ではカテゴリー番号を取得しているので、その番号をリンク先として表示するようにしてます。

あと、親カテゴリーで1つのボックスになるように再編しています。

<!--▼CONTENTS-->
<div id="undercolumn">
 <h2 class="title">カテゴリー別サイトマップ</h2>
 <div id="sitemap_category">
 <!--{assign var=before_level value=0}-->
 <!--{section name=cnt loop=$arrTree}-->
 <!--{assign var="i" value=$smarty.section.cnt.index+1}-->
 <!--{if $arrTree[cnt].level == 1}-->
 <!--{if $before_level > 0}-->
 </div><!-- category_box end -->
 <!--{/if}-->
 <div class="category_box">
 <!--{/if}-->
 <h4><img src="<!--{$TPL_URLPATH}-->img/common/point.gif" alt="ポイント" /><span class="title"><!--{$arrTree[cnt].category_name}--></span>&emsp;<span class="small"><a href="<!--{$smarty.const.HTTP_URL}-->products/list.php?category_id=<!--{$arrTree[cnt].category_id}-->">【こちら】</a></span></h4>
 <!--{else}-->
 <p>
 <!--{* 繰り返し *}-->
 <!--{section name=n loop=$arrTree[cnt].level-1}-->&emsp;<!--{/section}-->
 <!--{if $arrTree[$i].level == $arrTree[cnt].level}-->
 <img src="<!--{$TPL_URLPATH}-->img/sitemap/list1.gif" alt="レベル" />
 <!--{else}-->
 <img src="<!--{$TPL_URLPATH}-->img/sitemap/list2.gif" alt="レベル最後" />
 <!--{/if}-->
 <a href="<!--{$smarty.const.HTTP_URL}-->products/list.php?category_id=<!--{$arrTree[cnt].category_id}-->"><!--{$arrTree[cnt].category_name}--></a>
 </p>
 <!--{/if}-->
 <!--{* 現在のレベルを一時保存 *}-->
 <!--{assign var=before_level value="`$arrTree[cnt].level`}-->
 <!--{/section}-->
 </div><!-- category_box end -->
 </div><!-- sitemap_category end -->
</div>
<!--▲CONTENTS-->

データベースの【dtb_pagelayout】に、以下のような感じで新規レコードを入力

device_type_id は端末種類を示します。

『10』はPC、『1』はMobile、『2』はスマホを表しています。

今回はPCの場合を使用するので『10』を指定します。

【page_id】は【device_type_id】ごとに重複のない番号を使用します。

あらかじめ他のレコードの【page_id】を調べること。

ここでは『30』を指定しています。

【page_name】はファイル名。

【url】は、フロント側のURLを htmlディレクトリを除いた形で入れます。

【filename】は、任意のファイル名を英数で入れます。

 Column | Value
----------------+-----------------------------
 device_type_id | 10
 page_id | 30
 page_name | サイトマップ
 url | sitemap/index.php
 filename | sitemap/index
 header_chk | 1
 footer_chk | 1
 edit_flg | 2
 author |
 description |
 keyword |
 update_url |
 create_date | now()
 update_date | now()

これで、後はアクセスしてみて表示されるかどうか確認してみます。

カテゴリーが表示されていれば問題なしです。

後は、表示したいカテゴリーがあれば調整して下さい。

カテゴリー表示はできたけどレイアウトが気になる

並んだ色鉛筆
並んだ色鉛筆

カテゴリー一覧の表示はできたのですが、

カテゴリーが縦に並んでいたため、表示が長くなって見づらくなってました。

CSSでfloatさせて見えるようにしたのですが、

子カテゴリーの中身が多いものと少ないものがあるので

大きさが違うのに、大きいサイズの方に合わされてしまうので

空白が多くてバランスが悪く見た目のわるさにが気になりました。

そこで、色々方法を考えていたとこころ、いいものが見つかりました。

【自動整列プラグインjQuery masonry】という物です。

下記リンク先で解説しているので、

よかったら記事を読んでみて下さい。

自動整列プラグインjQuery masonryを使ってレイアウトをしました。

関連記事:

EC CUBEEC CUEB(2.11.4)にレビュー一覧を追加 EC CUBEEC CUEB(2.11.4)にレビュー一覧ブロック作成 EC CUBE(EC-CUBE2.11.4)お問い合わせメールの件名に名前を入れる EC CUBE(EC-CUBE2.11.4)管理画面：商品管理の商品マスターで一括で公開・非公開と削除できるようにする。 EC CUBE(ECUBE2.11.4) お問い合わせページを追加する EC CUBEEC-CUBE(2.11.4)　Smartyパス一覧 paypalPayPalでIPN通信設定をする EC CUBE(ECCUBE 2.11.4) お問い合わせ用のメールテンプレートを新しく作成する