ヘッダーにカテゴリを表示します。
CSSハックでドロップダウンメニューにも対応。
一応管理画面からだけで設定可能なシンプル版です。
まずcategoryブロックを複製（ここでは管理画面から直接作成。
ブロックを新規入力。
ブロック名は「ヘッダーカテゴリー」／ファイル名は「category_2」
下記コードを記入し登録。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!--{strip}--> <ul id="header_left" class="menu"> <li> <ul class="menu"> <!--{elseif $levdiff == 0 && $firstdone == 1}--> <!--{elseif $levdiff < 0}--> <!--{section name=d loop=`$levdiff*-1`}--></ul> </li> <!--{assign var=preLev value=1}--> <!--{assign var=firstdone value=0}--> <!--{section name=cnt loop=$arrTree}--> <!--{assign var=level value=`$arrTree[cnt].level`}--> <!--{assign var=levdiff value=`$level-$preLev`}--> <!--{if $levdiff > 0}--> <!--{/section}--> <!--{/if}--> <li> <a href=""<!--{$smarty.const.ROOT_URLPATH}--">products/list.php?category_id=<!--{$arrTree[cnt].category_id}-->"<!--{if in_array($arrTree[cnt].category_id, $tpl_category_id)}--> class="onlink"<!--{/if}-->><!--{$arrTree[cnt].category_name|h}-->(<!--{$arrTree[cnt].product_count|default:0}-->)</a> <!--{if $firstdone == 0}--><!--{assign var=firstdone value=1}--><!--{/if}--> <!--{assign var=preLev value=`$level`}--> <!--{* セクションの最後に閉じタグを追加 *}--> <!--{if $smarty.section.cnt.last}--> <!--{if $preLev-1 > 0}--> <!--{section name=d loop=`$preLev-1`}--></li> <!--{/section}--> <!--{else}--> </ul> <!--{/if}--> <!--{/if}--> <!--{/section}--> <!--{/strip}--> |
次にヘッダーを編集。
デザイン管理>PC>ヘッダー／フッター設定から編集します。
下記コードを最終行辺りのDIVが二つ閉じるよりも前に記入。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<div id="header_navi"> <div id="header_navi_left"> <ul id="header_left"> <li id="header_left"> <img src="<!--{$TPL_URLPATH}-->img/common/btn_header_left.jpg" alt="" /></li> <li id="header_left"> <a href="<!--{$smarty.const.HTTPS_URL}-->index.php">ホーム</a></li> <!--{include_php file=`$smarty.const.HTML_REALDIR`frontparts/bloc/category_2.php}--> </ul> </div> <div id="header_navi_right"> <ul> <li id="header_right"> <img src="<!--{$TPL_URLPATH}-->img/common/btn_header_right.jpg" alt="" /></li> <li id="header_right"> <a href="<!--{$smarty.const.HTTPS_URL}-->mypage/login.php">マイページ</a></li> <li id="header_right"> <a href="<!--{$smarty.const.ROOT_URLPATH}-->entry/kiyaku.php">会員登録</a></li> <li id="header_right"> <a href="<!--{$smarty.const.CART_URLPATH}-->">カートの中</a></li> </ul> </div> </div> |
後はDIVの外にCSSの記入でOKです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!-- /* ヘッダーナビ - */ div#header_navi { float: left; width: 1080px; height: 29px; background: url('../img/common/btn_header_menu.jpg') repeat-x; display:block; } div#header_navi_left { float: left; width: 70%; height: 29px; background: url('../img/common/btn_header_menu.jpg') repeat-x; display:block; } div#header_navi_right { float: left; width: 30%; height: 29px; background: url('../img/common/btn_header_menu.jpg') repeat-x; display:block; } div#header_navi ul { text-align:left; height:29px; } div#header_navi ul li { display: block; line-height:29px; } div#header_navi ul a{ padding:0px 10px 0px 10px; color:#FFF; } div#header_navi ul span{ display: block; float: right; } #header_left{ display:block; float:left;} #header_right{ display:block; float:right;} ul.menu { margin: 0; padding: 0; } ul.menu li { position: relative; display: inline-block; white-space: nowrap; float: left; border: none; margin: 0; padding: 0; } ul.menu a { position: relative; display: inline-block; text-decoration: none; margin: 0; padding: 0px 10px; } ul.menu a:visited { } ul.menu ul { position: relative; display: none; list-style: none; margin: 0; padding: 0; } ul.menu > li { } ul.menu > li li { clear: left; border-top: none; } ul.menu > li li a { width:100px; background: #222; padding: 0px 10px; } ul.menu li:hover > a { color: #000000; } ul.menu li:hover > ul { display: inline-block; position: absolute; top: 100%; left: 5px; } ul.menu li a:hover { color: #ffffff; } ul.menu li li:hover ul { top: 0px; left: 100%; } --> |
ある程度文章が長いので、外部CSSにすることをお勧めします。
※defaultだとcommon.cssとかぶる箇所(#header_navi)があるのでその場合上書き。
使用画像はuser_data/packages/default/img/commonにアップ。
以下使用画像。
btn_header_left.jpg
btn_header_menu.jpg
btn_header_right.jpg
—-以下取り急ぎ追記—-2011.11.24
このままでは表示出来ないので下記の手順を実行で可能になるかと思います。
インストールフォルダのfrontparts/bloc/に”category_2.php”を作成。
内容は下記。
[php]
<!–?php<br /–><!–?php /* * This file is part of EC-CUBE * * Copyright(c) 2000-2011 LOCKON CO.,LTD. All Rights Reserved. * * http://www.lockon.co.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 realpath(dirname(__FILE__)) . ‘/../../require.php’; require_once CLASS_EX_REALDIR . ‘page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Category_Ex.php’; // }}} // {{{ generate page $objPage = new LC_Page_FrontParts_BLoc_Category_Ex(); $objPage—>blocItems = $params[‘items’];
register_shutdown_function(array($objPage, "destroy"));
$objPage->init();
$objPage->setTplMainpage(‘category_2.tpl’);
$objPage->process();
?>
[/php]
さらにphp_pathをDBに通さないと表示出来ませんでした。
下記の画像の右から２つ目のような感じで完成です。
自己スレ
この機能ってサイドメニュー（カテゴリ）要らないのが前提で作っています。
だって、横にも上にもカテゴリーメニューいらんし、しかもFooterにも表示させようとすると、多すぎるし。
管理人様
はじめまして。いつも記事を参考にさせていただいております。
この記事の新規ブロックのヘッダーへのインクルードについて、質問させてください。
この記事にあるように、新規ブロックを作成し、ヘッダーにインクルードしたのですが、表示されません。
※ｐｈｐはcategory.phpをコピーし、修正してcategory2.phpを作成し、ＥＸ等も作成しました。
そこで、tplを読み込もうと思い、
としたところ、ブロック自体は表示されているのですが、ブロック内のＰＨＰで処理した内容が反映されずカテゴリは表示されません。
このブロックは、管理画面のレイアウトの変更からドロッグ&ドロップすると正常に表示されます。
私が行ったことは下記のとおりです。
１．新規ブロック作成
２．ＤＢにて、ＰＨＰパスの関連付け
もしよろしければ、ヒント等いただけると助かります。
また、当たり前の質問であり、場違いでありましたら本当に申し訳ありません。
■構築環境
EC-CUBE ： 2.11.1
サーバOS： Linux
DBサーバ： MySQL 5.1.59
MySQL ：5.1.59
PHP：5.2.17
初めまして。レス遅れて申し訳ないです。
こちらの表記ミスで最後の手順を書き忘れていたようです。
一応こちらでも再テストしてみましたがヘッダー表示用に、frontparts/bloc/内に手動で表示用のPHPをサーバーに上げないと反映されませんでした。
追記の手順を踏んでいただければ表示されるようになるかと思います。
お手数かけてすいません・・・orz
サイトの方拝見させていただきました＾＾
動的な物が多く参考になりました＾＾