テンプレートのカスタマイズ

Q:書店で購入できるZencart に関する書籍や、zen-cart.jp などで公開されているカスタマイズに関する情報は利用できますか？

A:Zencart 1.3.0 以降では、以前のバージョンのテーブルベースのレイアウトから、CSSベースのレイアウトに変更されています。
細かな違いはもちろんありますが、Zencart1.3.8a　をベースにした ZenCartProでは、基本的に Zencart1.3.0 向けに書かれた説明書の内容がほぼあてはまります。
ただし、ベースになる文字コードが UTF-8 である事には注意が必要です。
追加された多くの機能については、別途弊社サイトより情報を取得してください。

Q:新しいテンプレートの作り方を教えてください

A:
大文字で記述したフォルダ名などは、追加したいテンプレート名に置き換えてお読みください。（表示テンプレートがPCである前提で記述しています）

□　まず、includes/templates/ ディレクトリを開き、新しくフォルダを作成します。
名前は自由に決めてください。ただあまり長い名前は避け、スペースの代わりにアンダーバーを使うようにしましょう。
仮に /MY_TEMPLATE ディレクトリを作成したとしましょう。

□　この新しいテンプレートディレクトリの中に　images という名前でフォルダを作成します。
（　 includes/templates/MY_TEMPLATE/images/ という構造になります　）

□　次に、includes/templates/template_default/css ディレクトリとその中のファイルを　includes/templates/MY_TEMPLATE/　フォルダの中にコピーします。

□　さらに、以下の名前で空のフォルダをテンプレートディレクトリ以下に作成します。

/common
/sideboxes
/templates

□　それから includes/templates/template_default/template_info.php, ファイルを　includes/templates/MY_TEMPLATE/　の中にコピーします。

□　次に includes/templates/MY_TEMPLATE/template_info.php をテキストエディタで開き、新しいテンプレートを示すテンプレート名でシングルコーテーションの中にテンプレート名を変更します。
※　シングルコーテーションは絶対に消さないでください。
ここで指定するテンプレート名は、フォルダ名と同一である必要はありません。読みやすいようにスペースを使う事も構いませんが、混乱しないように同じような名前にする事をお勧めします。
template screenshot のフィールドについては、スクリーンショット画像を掲載する必要がなければ空欄にします。

例）

<?php
$template_name = 'My template';
$template_version = 'Version 1.0';
$template_author = '<作者名>';
$template_description = 'コメント';
$template_screenshot = '';
?>

作業が完了すると、以下のようなフォルダ構造になっているはずです。

includes
   /templates
       /MY_TEMPLATE
          /common
          /css
             stylesheet.css
          /images
          /sideboxes
          /templates
       template_info.php

/MY_TEMPLATE フォルダをサーバーにアップしましょう。

□　管理画面から、「追加設定・ツール」＞「テンプレート設定」より『編集』ボタンをクリックします。ドロップダウンメニューより「My template」を選択し更新ボタンをクリックします。
※PC用のテンプレートはDefault(All)、携帯用のテンプレートはMobileを編集してください。

□　続いて、「追加設定・ツール」＞「サイドボックスの表示設定」を選び、画面最下部のリセットボタンをクリックします。

これで準備完了です。

Q：サイドボックスのヘッダ（タイトル部分）に画像を使いたい。

A：以下の方法で画像を表示させることができます。
カテゴリサイドボックスを例にして解説します。

まず画像処理ソフトで、表示させたいカテゴリヘッダ画像を作成してわかり易いようにサイドボックスの名前を付けて includes/templates/CUSTOM/images/ にアップロードします。

次に、includes/japanese/CUSTOM/japanese.php をエディタで開き、以下のコードを探してください。

define('BOX_HEADING_CATEGORIES', 'Categories');

この部分を以下のように変更します：

define('BOX_HEADING_CATEGORIES', 画像ファイル名.jpg');

続いて、 includes/modules/sideboxes/CUSTOM/categories.php を開き以下のコードを探します。

$title = BOX_HEADING_CATEGORIES;

これを以下のように変更します：

$title = zen_image($template->get_template_dir(BOX_HEADING_CATEGORIES, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . BOX_HEADING_CATEGORIES, HEADER_ALT_TEXT);

注意：サイドボックス毎にこれらの修正を行ってください。

すべての必要な修正が完了したら、ファイルをサーバーにアップします。

もう一つの方法として、デフォルトの共通背景画像を置き換えたいだけであれば・・・

まず画像処理ソフトで背景画像を作成し、わかり易い名前を付けて　includes/templates/CUSTOM/images/ 　に保存しサーバーにアップロードします。

次に、 stylesheet.css 　を以下のように編集します。

.leftBoxHeading {
margin: 0em;
background: url(../images/背景画像名.jpg) #ff6699;
padding: 0.5em 0.2em;
}
.rightBoxHeading {
margin: 0em;
background: url(../images/背景画像名.jpg) #ff6699;
padding: 0.2em 0em;
}

編集したスタイルシートをアップロードします。

Q：テンプレートの幅（サイトの横幅）の設定を変えたい。

A：スタイルシートでの設定になります。
ご利用のテンプレートに合わせてその中のCSSを変更してください。

仮に、”custom” テンプレートである場合、

includes/templates/custom/css/stylesheet.css

を開き以下の定義を見つけます。

#mainWrapper {
    background-color: #ffffff;
    text-align: left;
    width: 860px;
    vertical-align: top;
    border-left: 2px solid #666665;
    border-right: 2px solid #666665;
    border-bottom: 2px solid #666665;
    margin-bottom: 1em;
    }

ここで、width を　100% や　750px など好きな値に変更して保存し、スタイルシートをアップロードします。

もし、テンプレートファイル内に該当のスタイルシートが無い場合には、言うまでもなく、　template_default
フォルダ内からディレクトリ構造を守ってコピーした後、編集してください。

Q：ヘッダのロゴ表示部分の高さを変えたい。

A：スタイルシートでの設定になります。
ご利用のテンプレートに合わせてその中のCSSを変更してください。

仮に、”custom” テンプレートである場合、

includes/templates/custom/css/stylesheet.css

を開き以下の定義を見つけます。

#logoWrapper{
   background-image: url(../images/header_bg.jpg);
   background-repeat: repeat-x;
   background-color: #ffffff;
   height:75px;
   margin-top: -0.5em;
   border-bottom: 1px solid #666665;
   }

ここで、height を　200px など好きな値に変更して保存し、スタイルシートをアップロードします。

Q：サイドボックスの幅を変えたい。

A：テンプレートのカスタマイズではなく、管理画面からの設定可能です。
管理画面の「一般設定」＞「レイアウトの設定」の項目から、「左側サイドボックスの横幅」と「右側サイドボックスの横幅」がそれぞれ設定出来ます。

また、左右のカラム（サイドメニュー枠）の幅の指定と、表示・非表示もこのページ内で設定可能です。
サイドボックスの幅と、カラムの幅はそれぞれの幅は px 単位だけなく　%　での指定もできます。

Q：ＣＳＳを追加したいです。

A：スタイルシートは自由に変更・追加可能ですが、以下の約束事を覚えておくと便利でしょう。

まず、スタイルシートは、利用するテンプレート毎に

/includes/templates/{利用しているテンプレートディレクトリ}/css/ 　フォルダ内にあります。

CSSファイルは以下の順序でブラウザに送られます。
（同じパタンの物が複数ある場合にはアルファベット順になります）

style*.css
// 『全てのページ』で必ず呼び出されます。サイト全体の構成を制御するため最低一つはこのファイル名でのスタイルシートが必要です。

language_stylesheet.css
// 「特定の言語」に対してのみ『全てのページ』で呼び出されます。

page_name.css
// 『特定のページ』に対してのみ呼び出されます。 (トップページの場合は、　index_home.css と指定します。また、EZ-pages で作成したページへの指定は page.css となります。注意あり）

language_page_name.css
// 「特定の言語」で『特定のページ』を表示した時のみ呼び出されます。

c_??.css
// 「特定のカテゴリ」の『すべてのインフォページ』で呼び出されます。

language_c_??.css
// 「特定の言語」で「特定のカテゴリ」の『すべてのインフォページ』で呼び出されます。

m_??.css

// メーカーリストページで呼び出されます。

language_m_??.css
// 「特定の言語」で、『メーカーリストページ』で呼び出されます。

p_??.css
// 『商品詳細ページ』で呼び出されます。

language_p_??.css
// 『商品詳細ページ』で呼び出されます。

print*.css

// サイト全体で印刷用としてのみ利用されます。

"stylesheet.css" は、常に初めに読み込まれますので、スタイル定義の大部分が含まれます。
それぞれのファイルは、前に読み込まれたファイルに対して定義を上書きする形で呼ばれます。
むやみに複数のCSSを読み込ませて無駄な動作を発生させないためにも、基本的には上記ファイルで定義を行っておき、必要な変更点が発生する部分のみを付加的なCSS内に定義するようにします。

また、一つのページに対して言語毎に違った定義をオーバーライド出来るようにもなっています。
もし、「英語」への切り替えを利用している場合には、 english_stylesheet.css ファイルによって、英語表示の場合だけ背景画像を変更するなどのようなサイトの全体的なイメージを変更する事が出来るでしょう。

ショッピングカートページだけは、背景画像を変えたり枠線の色を変えたりしたい場合には、shopping_cart.css を作成し、追加・変更したい定義でだけを記載し、オーバーライドさせます。

英語の Privacy ページにだけ、新しく <span class="newtag">　のようにタグを追加したい場合でも、 english_privacy.css ファイルを作成し、
'.newtag { text-transform: uppercase }'
のように定義する事で大文字で表示するよう指定出来ます。

※　お知らせ：
現在のバージョンでは、EZ-pages で作成したページへのスタイルシートは　”page.css” となります。
Zencart 1.3.9h からは、EZ-pages で作成したページ毎にページＩＤ付きで指定できるようになっていますが（page1.css や page2.css のようにページＩＤ付きになります）、反面 EZ-pages 共通で現在のような方式での指定ができないため、新方式のZenCartProシリーズへの反映はまだ行っておりません。

Q:JavaScript を追加したいのですが・・・

A:利用する目的と場所により幾つかの対応方法があります。

＜手法１：　外部ファイルとしてリンクさせる方法＞
■サイト全体で利用する JavaScript の場合

jscript_{ユニークな名前}.js の形式でファイルを準備してください。
上記形式になっていれば好きな名称で問題ありません。

ファイルを以下のディレクトリ内にアップします。

includes/templates/{テンプレートディレクトリ}/jscript/

このディレクトリ以下にある指定フォーマットのファイル名がついたJavaScript は自動的にすべてのページで呼び出されます。

■特定のページに対してのみ利用する JavaScript の場合

ファイル名のフォーマットは同じですが、以下のディレクトリ内にアップします。

/includes/modules/pages/{ページ名}/

このディレクトリ以下にある指定フォーマットのファイル名がついたJavaScript は指定のページで呼び出されます。

ご注意：
jscript_{ユニークな名前}.js ファイルでは、<script ***>...</scirpt> タグが含まれないようにします。
上記タグの間に記載するスクリプト部分のみを記載します。

＜手法２：ブラウザで出力するＨＴＭＬ内のソース内にコードを出力したい場合＞

動的に生成される JavaScript を利用したい場合もあります。
もし、ページ内で特定のPHP変数を JavaScript コード内で利用したい場合や、幾つかの<script>....</script>タグを入れ込みたい場合などには、この方式を利用します。

jscript_{ユニークな名前}.php の拡張子でファイルを準備してください。
ブラウザに出力されるHTMLソースコード内に JavaScript のコードが出力されます。

この方式の場合には、ファイル内に必ず <script ***>...</script>タグを記述する必要があります。

Q：On_Load オーバーライドについて教えてください。

A：サイト全体に対してであれ、特定のページに対してであれ、<body>タグに対して"onload" イベントを簡単に追加する事が出来ます。

まずは、/includes/templates/{テンプレートディレクトリ}/ フォルダ内に
/jscript/on_load/ フォルダを作成します。

このディレクトリ内に on_load_{好きな文字列}.js という規則のファイル名でファイルを設置する事で、javascript on_load() ファンクションを利用してbody タグを変更する事が出来ます。

■　サイト全体に利用する場合・・・

サイト全体に適用する場合には、　on_load.js 　というファイル名で
/includes/templates/{テンプレートディレクトリ}/jscript/on_load/ フォルダ内に設置します。

on_load_{好きな文字列}.js　の形式に合わせて複数のファイルを設置する事も出来ます。

■　特定のページに対して利用する場合・・・

/includes/modules/pages/{ページ名}/ 　フォルダ内にファイルを設置します。

＜ファイルの内容＞

on_load_{好きな文字列}.js ファイルには <body>タグの on_load="" パラメータとして挿入出来るコードだけを記載します。

結果は以下のような形になります
<body onload=".js ファイル内に記述したコード">

重要な事として、ファイルの内容は DOM あるいは jscriptファイルに読み込まれるファンクションを呼び出すようになります。

■on_load オーバーライドの読み込みフロー

1. 初めに "on_load" スクリプトが個々のページに存在するかどうかを確認します。
"/includes/modules/pages/{ページ名}/" フォルダとその中の"on_load_*.js"　形式のファイルを探します。

2. 次に、"includes/templates/TEMPLATE/jscript/on_load/on_load_*.js"　にサイト全体に対してのオーバーライドが無いかどうかをチェックし、後ろに連結します。

＜利用事例＞

例1：　ページ毎の on_load コード

既存のプログラム内に、ちょうど良い事例が2つあります。

一つは "login" ページで、もう一つは "contact_us" ページです。

まずは、"login" ページを例に挙げると…

/includes/modules/pages/login/on_load_main.js 　ファイルの内容を確認してみてください。
ログインページの <body> タグに onload として挿入するための
document.getElementById('email_address').focus();
というコードだけが記載されています。

ログインページが開かれた際にソースコード内に出力されている <body>タグの内容は以下のようになっています。

これは、このページを初めに開いた時に、 "email_address" フィールドに対して、初めにカーソルがあたって点滅するように、選択するための　DOM コールです。

例2：　サイト内の全てのページに対する on_load 呼びだし

サイトのグローバルメニューなどで、ロールオーバー画像を利用するときなどにはpreload したいものです。

次のような2段階の手順で実装します。

１、preload 処理のための JavaScript ファンクションを定義したファイルを準備し、

includes/templates/{テンプレートディレクトリ}/jscript/jscript_preloadimages.js

に設置します。

２、onload コードを用のファイルを

includes/templates/{テンプレートディレクトリ}/jscript/on_load/on_load_image_preload.js

として準備し、1で準備した jsファイルを参照するように以下のファンクションを一つ記述します。

preloadImages();

３、言うまでもなく、このファンクションで動作する画像ファイルなどはサーバー上にアップしておいてください。

テンプレートはオリジナルで制作することも可能ですが、テンプレート販売サイトにも完成度の高いテンプレートが手ごろな価格で多数販売されております。（例　Tenplate Monster.com など）
※　これらのテンプレートはZencart英語版用に作成されたものであるため、 Zencart 日本語版すべてのバージョンにおいて、たとえ対応するバージョンであってもそのまま利用する事は出来ません。　ZenCartPro シリーズに導入する場合にはテンプレート側のカスタマイズが必要になります。