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

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 単位だけなく　%　での指定もできます。

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