ZenCartのカスタマイズ

2007年7月22日柴田一志

オーバーライド

オーバーライド

独自のカスタマイズをしたい場合は、特定のディレクトリを作り、その中にカスタマイズ情報を持ったファイルをコピーして内容の変更を行います。

テンプレートを追加する

以下、

・独自に作るtemplateの名前はcustomとする 

・独自に作るディレクトリの名前はcustomとする

として説明します。

[/include/templates]以下に、

新しいテンプレートの元になるテンプレートディレクトリ[custom]を作成します。

その新しいディレクトリに

[/includes/templates/template_default/template_info.php]をコピーします。

そのコピーしたファイルを編集して、テンプレート名などを書き換えます。

$template_name :テンプレート名
$template_version :テンプレートのバージョン
$template_author :テンプレートの作者
$template_description :テンプレートの説明
$template_screenshot :テンプレートのスクリーンショットのファイル名

これで、管理者ツールのテンプレートの設定で、新しいテンプレートを選ぶことが出来るようになります。

管理者ツールの追加設定・ツールのサイドボックスの表示設定で必要なところは、ONにします。

あとは修正したいテンプレートファイルをテンプレートディレクトリ[custom]にコピーして編集していきます。

デフォルトファイル群をコピーして編集するのが良いと思われます。

文言を修正したい

Zen Cartでは、すべての文言はLanguage Packと呼ばれるファイル群によって定義されています。

このファイルは、使用言語が日本語の場合は

/includes/languages/japanese.php

と

/includes/languages/japanese/ページ名.php

というファイルで構成されています。

前者はサイドボックスのタイトルなど、全画面にわたって表示されるような文言が定義されています。

後者は、各ページで表示される文言が定義されています。例えば、ログインページの文言は、

/includes/languages/japanese/login.php

で、定義されています。

これらで定義されている文言を書き直すと、確かに表示内容は変更されますが、アップグレードの際、修正した箇所が元に戻ってしまいます。

アップグレードしても、修正箇所がも戻らないように、をつかいます。

たとえば、Zen-Cart!と表示されている各ページのタイトルをOver-Rideを使って「○○○○オンラインショップ」に修正したいとします。

まず新しくテンプレートを入れるディレクトリを作成します。[/includes/languages/custom]というディレクトリを作ることにします。
このディレクトリの中に、[/includes/languages/japanese.php]をコピーます。
新しく作成したディレクトリ内のファイルを編集することになります。[/includes/languages/custom/japanese.php]をエディターで開き、
```
define('TITLE', 'Zen Cart!'); 
```
と書かれている箇所を、
```
define('TITLE', '○○○○オンラインショップ');
```
のように書き換えます。

Zen-Cartは

[/includes/languages/]と

[/includes/languages/custom]に同じ名前のファイルが存在する場合、

[custom]内にあるファイルを優先して読み込みます。

各ページで表示される文言を修正する場合にも、同様のことをします。

ログインページの文言を修正したいとすると、

[/includes/languages/japanese]にディレクトリ[custom]を作成して、

[/includes/languages/japanese/login.php]を

[/includes/languages/japanese/custom]にコピーして、

[/includes/languages/japanese/custom/login.php]を作成して、そちらを編集します。

[/includes/languages/japanese/custom/login.php]のほうが優先して解釈されます。

テンプレートファイルのHTMLを修正したい

[/includes/templates]の中に

[custom]という名のディレクトリを作ります。

さらにその下に[templates]という名のディレクトリを作ります。

[/includes/templates/custom/templates]となるはずです。
修正したいファイルを作成したディレクトリにコピーします。

例えば、ログインページのHTMLを修正したい場合、

[/includes/templates/template_default/templates/tpl_login_default.php]を

[/includes/templates/custom/templates]以下にコピーします。
コピーしたファイル

[/includes/templates/custom/templates/tpl_login_default.php]

のHTMLコードを修正します。

独自のスタイルシートを使用したい

[/includes/templates/custom]にディレクトリ[css]を追加します。

そのディレクトリに、例えば[stylesheet_hoge.css]といった名前で新たなcssファイルを作成します。

その中で独自のスタイルを定義します。

/includes/templates/template_default/css/stylesheet.css

このcssはデフォルトのメインのスタイルシートであり、常に最初に読み込まれます。

新たに作られたcssに、このデフォルトで定義されているスタイルと同じ名前のものがあった場合、新しい方(後で読み込まれた方)が使用されます。

ロード時間短縮のため、追加するcssには、独自に追加するするスタイルと、デフォルトから変更するスタイルのみ記述するようにします。

メールのテンプレート

ZenCartではアカウント作成や、商品購入などさまざまなところで、メールが送信されます。送信されるメールがHTML形式だった場合、テンプレートを読み込んでメールコンテンツを作成します。

そのテンプレートのディレクトリはZenCartのトップディレクトリの下、[email]である。テンプレートファイルは以下のとおり。

email_template_checkout.html　:　購入処理完了時に利用者に送信される
email_template_contact_us.html　:　お問い合わせフォーム
email_template_coupon.html　:　管理画面、クーポン
email_template_default.html　:　デフォルトテンプレート
email_template_direct_email.html　:　管理画面より顧客にメール送信
email_template_gv_mail.html　:　管理画面より顧客にギフト券を送付
email_template_gv_queue.html　:　ギフト券承認
email_template_gv_send.html　:　ショップ側、ギフト券送信
email_template_low_stock.html　:　ストック少
email_template_newsletters.html　:　メルマガ
email_template_order_status.html　:　注文の処理状況を通知
email_template_password_forgotten.html　:　ショップ側、パスワードを忘れた場合
email_template_product_notification.html　:　新商品紹介
email_template_tell_a_friend.html　:　友達におしえる
email_template_welcome.html　:　アカウント作成時のウェルカムメール

メールテンプレートの共通変数

$EMAIL_TO_NAME(宛先の名前)

$EMAIL_TO_ADDRESS　(宛先のメールアドレス)

$EMAIL_FROM_NAME　(差出人の名前)

$EMAIL_FROM_ADDRESS　(差出人のメールアドレス)

$EMAIL_STORE_NAME　(ショップ名、管理画面で定義されています)

$EMAIL_STORE_OWNER　(サイトオーナー名--管理画面で定義されています)

$EMAIL_STORE_URL　(ショップへのリンク)

$BASE_HREF　(ショップのURL)

$EMAIL_DATE_LONG　(例: Monday June 14, 2004 11:28 am)

$EMAIL_DATE_SHORT　(例: 06/14/2004)

以下の３つは"languages/..../email_extras.php"で定義されています:

$EMAIL_DISCLAIMER　(否認者)

$EMAIL_SPAM_DISCLAIMER　(spam用の否認者)

$EMAIL_FOOTER_COPYRIGHT　(フッタのコピーライト)

ZenCartのスタイルシート

ZenCartのスタイルシートは、テンプレートディレクトリの下の「css」ディレクトリに置かれます。

デフォルトを例とすると、そのディレクトリは次のようになります。

/includes/templates/template_default/css/

このディレクトリには複数のファイルがおくことができ、ファイルがある場合、次に示す順序に読み込まれます。

同一の要素に対して複数のスタイルの指定があった場合、後の指定がつかわれます。

メインとなるスタイルシートであるため必須。

例：stylesheet.css、stylesheet_extra.css
特定言語のスタイルシートであり、「language」の部分は選択されている言語名。

例：japanese_stylesheet.css、english_stylesheet.css
特定ページのスタイルシートであり、「pagename」の部分はmain_pageパラメータで指定されるページ名

例：page_2.css
特定言語、特定ページのスタイルシート。

例：japanese_page_2.css
特定カテゴリのスタイルシートであり、「?」の部分はcPathパラメータで指定されるカテゴリID

例：c_1.css、c_3_10.css
特定言語、特定カテゴリのスタイルシート。

例：japanese_c_2.css、english_c_1.css
特定メーカーのスタイルシートであり、「?」の部分はmanufactures_idパラメータで指定されるメーカーID。

例：m_2.css
特定言語、特定メーカーのスタイルシート。

例：japanese_m_2.css、english_m_1.css
特定商品のスタイルシートであり、「?」の部分はproducts_idパラメータで指定される商品ID。

例：p_19.css
特定言語、特定商品のスタイルシート。

例：japanese_p_19.css、english_p_22.css
プリンタ出力用のスタイルシート。linkタグにはmedia="print"属性がつく。

例：print_stylesheet.css

CSSボタン

管理画面の[一般設定]の[レイアウトの設定]メニューには「CSSボタン」という項目がある。

この項目はデフォルトでは[No]となっており、このとき、各ページのボタンは、テンプレートディレクトリの下の[buttons]ディレクトリ内の画像が使われる。

[Yes]とすると、スタイルシートで見た目を設定したボタンとなる。

	共通のclass属性	固有のclass属性
通常	cssButton	button_*
マウスポインタをあてたとき	cssButtonHover	button_、button_Hover

上の表のように、全てのボタン共通のclass属性と固有のclass属性が設定される。

デフォルトではstylesheet_css_buttons.cssに定義されている。

JavaScriptの読み込み

JavaScriptファイルも、適切なディレクトリに配置いておくことで、自動的に読み込まれる。

HTMLヘッダ内に読み込む

テンプレートディレクトリに次のようにファイルを置くと、全てのページで実行される。(デフォルトを例にすると)

/includes/templates/template_default/jscript/jscript_*.js
/includes/templates/template_default/jscript/jscript_*.php

*はユニークな任意の文字列である。

拡張子[js]のファイルはscriptタグで外部JavaScriptファイルとして読み込まれる。

拡張子[php]のファイルは、require()を使ってPHPファイルとして読み込まれる。そのため、PHPの場合はJavaScriptをscriptタグで囲う形で記述する必要がある。

特定のページでJavaScriptを実行したい場合は、モジュールディレクトリにファイルを置くと良い。

/includes/modules/pages/ページ名/jscript_*.js
/includes/modules/pages/ページ名/jscript_*.php

onloadイベントでJavaScriptファイルを読み込む

次のようにファイルを置くと、ページをロードしたときのonloadイベントで読み込むことも可能である。

全てのページで実行したい場合はテンプレートディレクトリに。

/includes/templates/template_default/jscript/onload/on_load_*.js

特定のページで実行したい場合はモジュールディレクトリに。

/includes/modules/pages/ページ名/on_load_*.js

該当する全てのon_load_*.jsの中身がbodyタグの[INSERT_HEAR]に挿入される。

挿入される部分はダブルクォートで囲われているため、JavaScriptコードではダブルクォートではなくシングルクォートを使用する必要がある。

参考ページ: ZenCartドキュメント、カスタマイズ

バージョン1.2用なので、細かいところが少し違うが、だいたい同じなので、参考にはなります。

by 柴田一志