Zen Cart でのリンクを記述する方法(おさらい)

Zen Cart 内でリンクを記述する時は、 html_output.php にある zen_href_link() を使用します。

HTMLテンプレート内に記述する方法は、以下の通り。

<?php echo zen_href_link(‘PAGENAME’,’QUERYSTRING’,'{SSL | NONSSL}’); ?>

  • PAGENAME
    ページ名、Zen Cart 内のURLでいうと、/index.php?main_page=contact_us の「contact_us」の部分。
    ちなみに、filenames.php などで、定数(define(‘FILENAME_***’,’***’); とか)が指定されている場合は、定数を記述する事も可能。
  • QUERYSTRING
    zen_href_link ファンクションで展開されたURLの最後にQUERYSTRINGを追加する場合に使用。
    例えば、指定したページの<a name="link1"></a>にページ内リンクしたい場合に「#link1」と記述しておく。
  • {SSL | NONSSL}
    SSL が有効な場合に SSL でアクセスするかどうか。
    NONSSL を指定した場合は、常に http:// でリンクする事になり、 SSL を指定すれば、SSL が有効な場合に https:// でリンクするようになる。

例1: 利用規約ページ(conditions)の第5条(<a name="jou_5">)にリンクする場合。

<a href="<?php echo zen_href_link(‘conditions’,’#jou_5′,’NONSSL’); ?>">利用規約 第5条</a>

例2: ログインページ(login)にリンクする場合。

<a href="<?php echo zen_href_link(‘login’,”,’SSL’); ?>">ログインはこちら</a>

例3: ページ内リンクするだけなら、こういった方法も

<a href="<?php echo zen_href_link(‘conditions’,”,’NONSSL’); ?>#jou_5">利用規約 第5条</a>

インフォメーションに項目追加

ZenCartには、「インフォメーション」と「追加情報」があり、「定番ページの編集」でページの編集ができます。

今回は、S-Pageのhiraさんの「定番ページのタイトルの編集モジュール」を使いつつ、インフォメーションに項目を追加してみます。

今回は、aboutus というページを作ってみます。
URLはhttp://~~~~~.com/index.php?main_page=aboutus といった感じに。

includes/modules/pages/aboutus/header_php.php を作成
header_php.php 内の FILENAME_DEFINE_***** を変更。
$define_page = zen_get_file_directory(DIR_FS_DEFINE_PAGES_DATA . $_SESSION[‘language’] . ‘/html_includes/’, FILENAME_DEFINE_ABOUTUS, ‘false’);

includes/modules/sideboxes/YOUR_TEMPLATE/information.php を編集。
if(DEFINE_TITLE_INFORMATION_ABOUTUS != ”){
$information[] = ‘<a href="’ . zen_href_link(FILENAME_ABOUTUS) . ‘">’ . DEFINE_TITLE_INFORMATION_ABOUTUS . ‘</a>’;
}
適当なところに記述するのですが、メニューの並び替えもここで記述された順になるので、サイトのメニューレイアウトに合わせて編集。

includes/languages/japanese/extra_definitions/YOUR_TEMPLATE/define_title.php を編集。
define(‘DEFINE_TITLE_INFORMATION_ABOUTUS’, $define_title[‘define_aboutus.php’]);

includes/languages/japanese/html_includes/YOUR_TEMPLATE/define_aboutus.php を作成
(内容は管理画面で編集するので、とりあえずこのまま)

includes/languages/japanese/html_includes/define_aboutus.php も作成。
YOUR_TEMPLATE でオーバーライドするのですが、html_includes 直下にもファイルを置いておかないと管理画面(admin)でリスト表示されません。
※html_includes 以下のファイルは、パーミッション(ファイル属性)を666に設定忘れずに!

includes/languages/japanese/YOUR_TEMPLATE/aboutus.php を作成
define(‘NAVBAR_TITLE’, DEFINE_TITLE_INFORMATION_ABOUTUS);
define(‘HEADING_TITLE’, $ini_heading_title[‘define_aboutus.php’]);
define(‘TEXT_INFORMATION’, ”);

includes/extra_datafiles/extra_filename.php を編集。
define(‘FILENAME_ABOUTUS’, ‘aboutus’);
define(‘FILENAME_DEFINE_ABOUTUS’, ‘define_aboutus’);

includes/extra_datafiles/define_titles_data/ 以下のファイルを編集。
[define_titles.php]
define_abutus.php="会社概要"
[define_headings.php]
define_aboutus.php="運営会社について"
englishフォルダも内容に応じて編集、今回は日本語のみの運用なので、japaneseフォルダのみ。

includes/templates/YOUR_TEMPLATE/templates/tpl_aboutus_default.php を編集。

【まとめ】 ★・・既存ファイル更新 ☆・・新規作成

/includes
├ /extra_datafiles/extra_filename.php ★
│ ├ /define_titles_data/japanese/define_titles.php ★
│ └ /define_titles_data/japanese/define_heading_title.php ★
├ /languages
├ └/japanese
├ ├ /extra_definitions/YOUR_TEMPLATE/define_titles.php ★
├ ├ /html_includes/define_aboutus.php ☆
├ ├ /html_includes/YOUR_TEMPLATE/define_aboutus.php ☆
├ └ /YOUR_TEMPLATE/aboutus.php ☆
├ /modules
├ ├ /pages/aboutus/header_php.php ☆
├ └ /sideboxes/YOUR_TEMPLATE/information.php ★
└ /templates/YOUR_TEMPLATE/templates/tpl_aboutus_default.php ☆

今回は、「インフォメーション」に項目を追加したのですが、「追加情報(more_information)」に項目を追加したい場合は、/modules/sideboxes/information.php を more_information.php に置き換えて編集すればOKだと思います。

追記::
定番ページ関連で、これも使える。
WordPressの「最近の投稿」をZen-Cartの定番ページに表示する方法

CSS スタイルシートを極める

という人におすすめ。

これは「ツカエル」と思ったCSSは、ブログでも紹介するんですが、こういうリファレンスがあると、便利かも。

あ、なんか人任せでスミマセン。

あと、最近のサイト制作でのコダワリといえば、最初に YUI.css を読み込ませて、要素をリセットするという事。

YUI(Yahoo User Interface) Library

YUI Reset CSS

IE6でmarginが2倍になる対策

IE8のパブリックベータが公開されていますが、いまだにIE6がIE全体の半数を占めています。

サイト制作の立場から言えば、IE6からのアクセスもまだまだ無視できないですね。

ところがIE6は、CSSの実装に致命的とも思えるバグがあって、表示結果がIE7やFirefoxのそれとは、かなり異なる場合があります。

特に注意したいのがマージンをとったブロック要素をフロートした場合。

IE6では、フロートした側と反対側にマージンを2倍取ってしまうバグがあります。

<style>
.block {
display: block;
float: left;
margin: 5px;
}
</style>

といったCSSを記述した場合に<li class=”block”>~~</li>を2つ並べたとすると、「左側のマージンは、0になり、右端のマージンが10pxになってしまいます。

そこで、IE6では、display:block を display:inline にすることで IE7 や Firefox と同じ表示にします。

<style>
.block {
display: block;
float: left;
margin: 5px;
_display: inline;
}
</style>

2番目に指定している display に _ (アンダースコア、アンバーバー)が付いているのが分かりますでしょうか。

この _display というのは、正確にはCSSの記述としては正しくないのですが、ここもIE6のバグで、「_」のみを無視してそれに続いて記述されているスタイルシートを有効にしてしまうんですね。

IE7 や Firefox の場合は、_で始まる要素は、それ全体を無視するので、上記のスタイルシートの場合、IE7 と Firefox では、display: block。IE6 では、display: inline が適用されます。

IE6 で display: inline にも関わらず height が使えるのもなんだか釈然としないんですが、まあ、実際にブラウザでそうなるんだからよしとします。

他にもIE6に対応させるテクニックは、さまざまなサイトで検証されています。
例えば、ブラウザ毎に読み込ませるスタイルシートを替えたりするのが王道でしょうか。

<link rel=”stylesheet” type=”text/css” href=”style.css” />
<!–[if lt IE 7]>
<link rel=”stylesheet” type=”text/css” href=”ie6.css” />
<![endif]–>

上記の記述では、IEのバージョンが「7未満の場合」に ie6.css を読み込むようになります。

他の IE7 や Firefox の場合、<!–[if lt IE 7]>から<![endif]–>までがコメントとして無視されます。

サイト全体を IE7 と Firefox の環境でコーディングし終えた後で、IE6でチェックして、おかしい部分を ie6.css でスタイルシートを上書きするというやり方。