カスタマイズデザインを残したままZen-Cartのアップグレードを行う方法

Zen-Cartでは今適用しているデザインなどをそのままに、スムーズにアップグレードしていただくための方法としてOverRideという機能を有しています。

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

Zen-Cartは、あなたの作った特定フォルダ内にあるファイルを優先して読み込み、そこに無いファイルに関しては今までどおりのファイルを読み込みます。

この仕組みのおかげで、コアプログラムに手を加えることなくカスタマイズを行うことができます。またアップグレードの際にも、あなたの作成したディレクトリを残しておくことで、システムはアップグレードされても、あなたが加えた変更点は継承されるのです!

以下にOver-Rideを正しく行う方法を記します。

ここでは

  • 独自に作るtemplateの名前はcustomとする
  • 独自に作るディレクトリの名前はcustomとする として説明していきます。

※テンプレートの追加についてはhttp://zen-cart.jp/mos/content/view/38/44/を参照してください。

例1 文言を修正したい

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

/includes/languages/japanese.php

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

というファイルで構成されています(「japanese」の部分は使用している言語で置き換えて下さい)。

ページ名はZen Cartを利用している際に表示している各画面毎のURLが http://yourdomain.com/インストールしたディレクトリ/index.php?main_page=?????? のような形式になっていると思いますが、この??????の部分で決定されます。たとえば、ログインページなら/includes/languages/japanese/login.phpとなります。

/includes/languages/japanese/ページ名.phpには、現在表示しているページで表示される文言が定義されます。

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

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

この時 /includes/languages/japanese.php 内の該当箇所を直してしまうと、アップグレードの際、修正した箇所が元に戻ってしまいます。こうならないように、Over-Rideを使う方法は次のようになります。

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

Zen-Cartは [/includes/languages/]と [/includes/languages/custom]に同じ名前のファイルが存在する場合、 [custom]内にあるファイルを優先して読み込みます。

つまり、 [/includes/languages/japanese.php]を変更したかどうかに関わらず、 [/includes/languages/custom/japanese.php]に加えた変更を優先します。

【注意!】 シングルクォーテーションを取ったり、行そのものを削除したりすると、うまく動かない場合があります。

次に、/includes/languages/japanese/ページ名.phpをOver-Rideを使って変更する場合は次のようになります。

たとえば、あなたが、マイページの文言を変更したい場合、該当ページは http://yourdomain.com/インストールしたディレクトリ/index.php?main_page=accountというURLになっていますので、修正したいファイルは /includes/languages/japanese/account.php ということになります。 これをOver-Rideを使って変更する場合は、まず、 /includes/languages/japanese/custom というディレクトリを作成します(customは使用しているテンプレートの名前です)。

ここに/includes/languages/japanese/account.phpをコピーし、そして /includes/languages/japanese/custom/account.phpを変更するようにします。 こうしておくと、Zen Cartは /includes/languages/japanese/account.php よりも、/includes/languages/japanese/custom/account.phpを優先して解釈してくれます。

例2 テンプレートファイルを改変し、独自のHTMLコードを書きたい

  1. あなたのテンプレートを納めておくディレクトリ [/includes/templates/custom]の中に [templates]という名のディレクトリを作ります。 [/includes/templates/custom/templates]となるはずです。
  2. [tpl_account_default.php] を [/includes/templates/custom/templates]以下にコピーします。
  3. コピーしたファイル [/includes/templates/custom/templates/tpl_account_default.php] のHTMLコードを修正します。

例3 サイドボックスのテンプレートを編集したい

例2と同じ方法でOverRideを使うことが出来ます。

例4 サイドボックスのinformation.phpの内容を変更したい

  1. サイドボックスの格納されているディレクトリ[/includes/modules/sideboxes]の中に [custom]という名のディレクトリを作成します。 ※[/includes/modules/sideboxes/custom]となるはずです。
  2. [/includes/modules/sideboxes/information.php]を [/includes/modules/sideboxes/custom]の中にコピーします。
  3. コピーした[/includes/modules/sideboxes/custom/information.php]を編集します。
  4. 管理者画面から各種ツール>サイドボックスのレイアウト設定を開いて、「ボックスファイル名」の項目が赤字で表示されていれば成功です。

例5 独自のファイル[about_us]を作り、このファイルに対してfilenameを割り当てて呼び出したい。

/includes/filenames.php

に新しい定義を書くのではなく、filenameを

/includes/extra_datafiles

の中から呼び出したほうが良いです。

ここでは[about_us_filenames.php]というファイルを作り、[/includes/extra_datafiles]の中に配置します。

そのphpファイルの中に下記の記述をしてください。

<?php
// About Us Filename Define
  define('FILENAME_ABOUT_US', 'about_us');
?>

こうすることで自動的に呼び出されます、同様にしていくつも作成することが可能です。これによって、あなたのZen-Cartの中でオリジナルのfilenameを呼び出すことが出来ます。

例えば独自のファイルblahを作りたいのなら、新しく作るファイル名は blah_filenames.php になります。

例6 新しく配送トラッキングシステム用のフィールドups_trackをDBに追加し、table nameを定義したい

[/includes/database_tables.php]に新しい定義を書くのではなく、 filenameを[/includes/extra_datafiles} の中から呼び出したほうが良いです。

[ups_track_database_tables.php]というファイルを新しく作り、 [/includes/extra_datafiles]の中に配置します。

このファイルの中に

<?php
// UPS Tracking Table
define('TABLE_UPS_TRACK', 'ups_track');
?>

と記述します。

こうすることで自動的に呼び出されます。 同様にいくつも作成することが可能です。 これによって、あなたのZen-Cartの中でオリジナルのデータベースフィールドを呼び出すことが出来ます。

例7 オーダー終了時にcheckout_success.phpから呼び出すJavaScriptを新しく追加したい

/includes/modules/pages/checkout_success というディレクトリの中に jscript_bizrate.js というファイルを新規作成してください。

このファイル内にJSのコードを書きます。 例えばこうです。

<script language="javascript" type="text/javascript">

!-- whatever the heck bizrate gave you

</script>

GoogleのコンバージョントラッカーのJSも同様にして組み込めるでしょう。 その場合作成されるファイルの名前は jscript_google.php になるでしょう。

例8 オリジナルのスタイルシートを適用したい

既に存在するCSSファイル /includes/templates/custom/css/stylesheet.css をいじるのではなく、同じディレクトリ /includes/templates/custom/css/ の中に 新しいスタイルシート、例えば stylesheet_YOURFILENAME.css を作ってその中に独自のスタイル定義をします。

以上で、OverRideの仕組みがおわかり頂けたでしょうか。 あなたのサイト独自のファイルは、全て新規に作成したディレクトリの中に収められているのです。

ではアップグレードを行いましょう。もしあなたがOverRideしたファイルに新しいコードを追加されている場合はどうすればよいか? その場合は新しく上書きされるCorefileと、あなたが作成したオリジナルのファイルとを比較します。

例えばアップグレードにより /includes/languages/english.php に新しいコードが追加された場合、 あなたが作ったcustomディレクトリ内のOverRide用のファイル /includes/languages/custom/english.php file にも変更点を加えないといけません。

一番簡単にファイルの比較を行うにはファイルの比較ユーティリティを使うことです。

例えばFind Difference JP http://www.forest.impress.co.jp/lib/sys/file/filecompare/finddiffjp.html

diffrencer http://www.vector.co.jp/soft/win95/util/se302819.html

のようなものです。

[2004-08]-27]

新しいテンプレートのセットを作成したり、追加するには?

  1. 最初にカスタムテンプレートを置くディレクトリを作成します。
  2. [includes/templates/]を開き、ディレクトリを追加します。 ※名前は自由に決めてかまいませんが、ここでは[template_custom]と名づけることにします。
  3. [includes/templates/template_custom]ディレクトリの中にさらにもう一つのディレクトリを作成し、[images]という名前を付けます。 ディレクトリの構成は下記のようになっているはずです。

    includes/templates/template_custom/images/

  4. 次に今回新しく作成した[template_custom]ディレクトリの中に [includes/templates/template_default/css]というディレクトリと [includes/templates/template_default/css/stylesheet.css]のファイルをコピーします。
  5. [includes/templates/template_default/template_info.php]というファイルを [includes/templates/template_custom/]というディレクトリの中にコピーします。
  6. [includes/templates/template_custom/template_info.php]をテキストエディタで開き、

    $template_name = 'Default Theme';

    という文を探して

    $template_name = 'Custom Theme';

    と書き換えて下さい。 ※独自のバージョン名、編集者署名と説明を加えることが出来ます。
  7. 管理画面から、各種ツール>テンプレート設定>編集ボタンをクリックします。 ドロップダウンメニューよりCustom Templateを選択し更新ボタンをクリックします。
  8. 各種ツール>サイドボックスのレイアウト設定を選び、画面最下部のリセットボタンをクリックします。

[2004-05-28]

Powered By Zen-Cartのロゴをオリジナルロゴと差し替えるには?

テンプレートはそのまま流用し、Gif画像だけを取り替える場合

ロゴ画像のファイル名を"logo.gif"とし、 [Your_Template/images/directory]以下にアップロードします。

独自のカスタムテンプレート・ディレクトリを作成していて、ロゴのイメージフォーマットを変えたい場合

  1. まず[includes/languages/english/classic/header.php]のバックアップを取っておきます。
  2. [includes/languages/english/classic/header.php]を開き、ロゴ画像ファイルに相当する箇所に新しく作成したロゴ画像ファイルの名前を記入します。
  3. "sales message text"部分を変更します。
  4. ファイルを保存し、新しいディレクトリを[includes/languages/english/]の下に作ります。 ※新しいディレクトリ名は使用するテンプレートと同じ名前である必要があります。
  5. 保存した[header.php]をアップロードして下さい。

[2004-05-28]

Congratuations! You Have Successfully~の画面を変更するには?

変更したいページ、モジュールと同じ名前のついた言語ファイルの位置を指定することで可能になります。

[2004-04-08]

デフォルトのテンプレートの幅を変えるには?

includes/templates/template_default/css/stylesheet.cssを開き、 width: 750px;部分を目的の幅(px)に変えます。 widthについては複数の場所で設定されているため、全てを変更する必要があります。

【例】テンプレートの幅を100%にするには、下記のwidth: 750px; 部分をすべて width: 100% に書き換える。

.centershop {
   ・・・・
    width: 750px !important;
   ・・・・
    }

TABLE.header {
    ・・・
    width: 750px !important;
    ・・・・
    }

.main_page {
    width: 750px !important;
    ・・・
    }

TD.headerNavigation {
    width: 750px !important;
    ・・・
    }

[2004-05-28]

チュートリアルを除去したいのですが?

管理画面から「設定」内の「ショップ情報」を表示させ、「チュートリアル」をクリックして、ステータスを0に設定ます。

[2004-04-08]

サイドボックスを取ったり、並び順を変えるには?

  1. 管理画面から入って、メニューバー>Toolsを選択します。
  2. Layout Boxes Controllerを開きます。目的のサイドボックスをクリック、編集をクリックし、変更を加えます。
  3. アップデートをクリックして保存します。

[2004-05-28]

色とフォントを変更するには?

テキストエディタでスタイルシート(CSSファイル)を編集します。 ファイルは[/includes/templates/YOUR_TEMPLATE/css/stylesheet.css]にあります。

全てのページは、[classes]と呼ばれるパーツに分解することが出来ます。それぞれのclassesにはスタイルが設定されています。

スタイルシート内のclass stylesはフォント種類、フォント色、フォントサイズ、ボーダー、背景画像などです。

CSSの要素を取り除くには、使用したくない行をコメントアウトします。

【コメントアウト例】 コメントアウトしたい範囲を/* と */で囲みます。 複数行にまたがってもかまいません。

<例>
/* この間がコメント行になります
    この間がコメント行になります */

ボタン類を隠したり、変更するには?

ボタンのリストは[/includes/templates/Your_Template/buttons/YOUR_LANGUAGE/]にあります。

画像編集ソフト(PhotoshopやFIreWorksなど)で新しくボタンを作成します。

  • 必ずGIF形式で保存してください。
  • 差し替えたいボタンと同じファイル名で保存してください。

注意 もし複数の言語でサイトを運営している場合は、各言語ごとにボタンのセットを作成する必要があります。

[2004-04-08]

レイアウトガイドのようなものは何処かで見ることが出来るか?

残念ながら今のところレイアウトガイドはありませんが、以下のスレッドに有用な記述があります。

:Table Layout Guide(英語) |http://www.zen-cart.com/modules/ipb/index.php?showtopic=1525&st=0

[2004-05-28]

ブラウザーバーに表示されるTitleの部分 "Zen-Cart、The Art Of~"を変える方法

テキストエディタで [includes/languages/Your_language.php] を開き、下記2箇所を編集します。

// page title define('TITLE','ZenCart') ;

'TITLE' の後ろの['(シングルクォート)]で囲まれたテキスト(ここでは'ZenCart')がブラウザバーに表示される部分です。

//Site Tagline define ('SITE_TAGLINE','The Art Of E-commerce');

'SITE_TAGLINE' の後ろの['(シングルクォート)]で囲まれたテキスト(ここでは'The Art Of E-commerce')がタグラインです。

[2004-05-28]

Zen-Cartで作ったサイトを公開する前にするべきことは?

以下は、サイトを公開する前にカスタマイズするべき箇所の一覧です。

  • includes/languages/english/checkout_success.php
  • includes/languages/english/conditions.php
  • includes/languages/english/index.php
  • includes/languages/english/privacy.php
  • includes/languages/english/shippinginfo.php

これらのファイルのコピーを作り、必要な部分を書き換え、 [includes/ languages/ YOUR_LANGUAGE/ YOUR_TEMPLATE/] の中に配置します。

必要に応じてさらにディレクトリを作ることも出来ます。あなたがカスタマイズしたファイル専用のディレクトリを作ることによって、Zen Cartのアップデート時にファイルが上書きされてしまうことを防げます。

もし、組込み済みの画面表示要素やボタン・グラフィックなどを変更したい場合、以下のファイルを編集することが必要になります。

  • includes/templates/template_default/buttons/english/*.*
  • includes/templates/template_default/common/tpl_header.php
  • includes/templates/template_default/common/tpl_footer.php
  • includes/templates/template_default/common/tpl_main_page.php
  • includes/templates/template_default/css/stylesheet.css
  • includes/templates/template_default/images/logo.gif
  • includes/templates/template_default/images/tile_back.jpg
  • includes/templates/template_default/templates/tpl_index_default.php

上と同じように、これらのファイルのコピーを作り、必要な箇所の変更を行い、貴方が作成した[TEMPLATE]ディレクトリに格納します。 Zen-Cartのプログラムコードをアップデートした時にファイルが上書きされてしまうことを防げます。

[2004-05-28]

横に配置されるコラム類の幅を変更するには?

コラム類の幅を変更するには、

  1. 管理画面よりメニューバー内のConfigurationを選択します。
  2. ドロップダウンメニューよりレイアウトセッティングを選択します。
  3. 編集を行いたいコラムボックスをクリックします。 コラム幅はデフォルトでは150pxに設定されており、ピクセルで指定するか、表示ウインドウに対する%で設定することが出来ます。 そのコラムを消したければ、Widthを0にします。

【Tips】 もしリキッドデザインを使用していてコラムボックスも伸縮させたい時は、コラム幅を20%に、そしてBOXを100%に設定します。

[2004-04-08]