サポートカテゴリ: テーマのカスタマイズ

デザインはテーマという概念で設計されており、１つのデザインを１テーマとして扱います。テーマはシステム本体のコアスクリプトとは分離されており、HTMLの出力のみを行います。 複数のテーマをインストールすると、管理画面で簡単にテーマを切り替えることができます。 新しいデザインを作成する際は、既存のテーマを編集するのではなく新しいテーマを追加することで、既存のテーマから簡単に切り替えることができます。

ファイル構成

テーマは、以下のファイルで構成されています。 テーマのフォルダ名がtheme_Xの場合、下記の各ディレクトリ内にファイルが分類されています。

ページ管理で登録したページは動的に生成されるため、各ページに対応するPHP(HTML)ファイルは存在しません。

ディレクトリ構成

Live Commerceのディレクトリは以下のような構成になっています。

• core – システムのコアファイルが含まれます。随時自動でバージョンアップされます。

• themes – テーマファイルが含まれます。Live Commerceバージョンアップの影響を受けません。
  FTPでアクセスできるのは、このディレクトリに限られます。
  各テーマは以下のようなフォルダ構成になっています。
  テーマフォルダの直下には、トップページや商品詳細ページなどの各ページに対応するPHPファイルがあります。
  
• plugin – プラグインファイルが含まれます。プラグインごとに随時自動でバージョンアップされます。

• upload – 管理画面からアップロードした画像ファイルが含まれます。Live Commerceバージョンアップの影響を受けません。
  以下のようなフォルダ構成になっています。
  

Live Commerceのデザインをカスタマイズするには、HTML,CSSの編集スキルが必要です。
編集するには、Live Commerceのテーマ編集エディタ、もしくはDreamweaverなどのオーサリングソフトを使用します。
編集する文字コードはUTF-8（BOMなし）、改行コードはLFを用いるようにしてください。

ここでは、Live Commerceのテーマ編集エディタを使って標準でインストールされているテーマ、theme_oneを編集する手順について説明します。

テーマをコピーして新しいテーマをつくる

テーマは直接編集するのではなく、テーマのコピーを作成して編集することをお勧めします。テーマを切り替えることで、いつでも初期状態に戻すことができます。
以下の手順でテーマのコピーを作成します。

1. FTPソフトをお持ちでない場合は、FileZilla(Client)などのフリーソフトをダウンロードします。（FFFTP非推奨）
   FTPソフトを起動し、お申し込み時に送付される「Live Commerce納品メール」に記載されたFTP情報(ホスト名/ユーザー名/パスワード)を使ってサーバに接続します。
2. リモートサイト側(ここでは画面右側)に、Live Commerceサーバ内のテーマディレクトリが表示されます。theme_oneのテーマフォルダを選択し、ローカルサイト(ローカルPC)の保存したいディレクトリを選んだ状態でドラッグ&ドロップするか、マウス右メニューで「ダウンロード」を選択します。
   
3. ファイル管理ソフト(Windows エクスプローラーまたはMac Finder)で、theme_oneフォルダがお使いのパソコン上にコピーされたことを確認します。
   
4. コピーしたtheme_oneフォルダの直下にある、config.phpファイルをテキストエディタで開きます。’class theme_one’のtheme_の後を変更し、別のクラス名にして保存します。ここではtheme_eva とします。
   

   必須ではありませんが、テーマの情報を編集すると管理画面で分かりやすくなります。
   ここでは、テーマ名($_thmName)とテーマの説明($_desc)の値を編集しています。
   
5. ファイル管理ソフト(Windows エクスプローラーまたはMac Finder)で、フォルダ名をtheme_oneからクラス名(theme_eva)に変更します。
6. theme_evaフォルダを、ドラッグ&ドロップでサーバにアップロードします。
   
7. サイト設定 > テーマ管理 を開き、theme_evaが表示され、テーマ名とテーマの説明が変更されていることを確認します。
   

テーマを編集する

FTPを利用してファイル編集

テーマファイル一覧を参考にFTPにてファイル編集を行います。

オンラインのテーマ以外のテーマの確認方法

サイトのURLの後ろに、テーマ名を指定してアクセスします。
http://サイトのURL/theme/テーマ名
例えば、http://サイトのURL/login/index/theme/テーマ名　とした場合は、ログインページを指定したテーマで表示します。

テーマへの文言の記述

1言語しか扱わないサイトなら、サイトに表示する文言をテーマファイルに直接記述しても問題ありませんが、多言語で運営するサイトではテーマに直接文言を記述しないようにします。サイトの表示言語を切り替えると文言が適切な言語で表示されるように、言語翻訳で多言語のデータを登録し、登録したコード名をテーマに記述します。

テーマファイルに含まれるファイルと、それぞれのファイルが行っている機能の一覧です。 (並び順: A-Z)

themeフォルダ内

theme_0など、theme_xフォルダの直下にあるファイルです。

includeフォルダ内

cssフォルダ内

その他のフォルダ

テーマをカスタマイズするウェブデザイナー向けに、Live Commerceのデザインレイアウトとテーマの統合方法について解説します。

Live Commerceのカタログ画面数は、40画面あります。
40画面を4つのレイアウトパターンで対応しています。

4つのレイアウトパターン

以下はLive Commerceの標準テンプレートで配置された4つのレイアウトです。
(画面イメージをクリックすると、大きい画像で確認できます)

• 青色部分　>>　ヘッダー、フッター
• 赤色部分 >> コンテンツ部分
• 黄色部分　>>　サイドバー

1.トップページ A-1カラム トップページは単一ページになるため、自由設計のレイアウトでも問題ありません。	2.カテゴリページ、商品一覧ページ B-2カラム サイドバーは左側に設置	3.コンテンツページ C-2カラム ページ管理で作成されたページのテンプレートとして利用されます。	4.商品詳細ページ、その他のページ D-1カラム このページが全ページの基本テンプレートとして利用されます。

テンプレートファイルとレイアウトパターンの相関関係

Live Commerceのカタログ画面で表示されるデザインパターンは下図の通りです。

HTMLコーディングとテーマへの統合

コーディングする際は、以下の点を遵守してください。

1. HTML5 CSS3 Bootstrap
2. Table-less CSS markup
3. Safari , Google Chrome Support
4. SEO Semantic Coding
5. Load Speed Optimization

HTMLへのコーディングが完了したら、Live Commerceのテーマファイルに統合していきます。

Live Commerceへの統合についての注意

コーディングする箇所は、ヘッダー(header.php)、フッター(footer)、サイドバー(sidebar)、CSSファイル(/css/) のみで、40テンプレートファイルのコンテンツ部分を再コーディングすることは推奨していません。

次のソースコードをご覧ください。

これはテーマにある404．phpというテンプレートファイル内に記述されたHTMLソースです。404．phpファイルを含むすべてのコンテンツ表示部分は共通して大外枠にはdivにid=”contents”　がセットしてあります。コーダーはこのコーディングルールを確認し、先にHTMLコーディングしたソース内の共通コンテンツ部分には、404．php　を参考に同一のクラス名またはセレクタ名をセットしておく必要があります。もしコーダーが独自にクラス名をセットした場合は逆にLive Commerce側のテーマすべてを修正する必要があります。

<?php include('include/header.php'); ?>
<!--body -->
<div id="contents" class="clearfix">
  <div class="fullFrame">
    <div class="categoryFrame">
      <h1><?php echo TEXT_404_TITLE ; ?></h1>
      <br />
      <br />
      <p><?php echo TEXT_404_MSG; ?></p>
    </div>
  </div>
</div>
<!--body //-->
<?php include('include/footer.php'); ?>

コンテンツ部分とは、40画面で表示される個別のHTMLソースのことで、テーマに含まれる40のテンプレートファイル（*.php)のことです。この40ファイルをコーディングすることなくCSSとヘッダー、フッター、サイドバーだけでオリジナルデザインになるようにすることが重要です。（そうすれば最小限の労力でオリジナルデザインへ適用することができます）

そのためには、ヘッダーとフッター部分以外の中間に入るソースコードをLive Commerceのオリジナルのコードと一致させておく必要があります。これは絶対条件ではありませんが、コーディング作業を低減するための１つの手段です。

具体的には下記のコードです。このコードをheaderとfooterのセレクタの中間に採用します。

<!--body --> 
<div id="contents" class="clearfix"> 
  <div class="mainFrame clearfix">

Live Commerceへの統合手順

1. 全ページで共通して利用する文字装飾に関するCSSコードを css/common.css にコピーしておきます。
2. 全ページで共通して利用するレイアウトに関するCSSコードを css/layout.css にコピーしておきます。
3. HTMLコーディングしたヘッダーとフッターのHTMLソースを include/header.php と include/footer.phpに挿入し既存のLive Commerceのテンプレートタグに注意しながら1つ1つ置換します。HTMLソースのみをコピーし、外部インクルードされたファイルはcssフォルダ、Jsフォルダにそれぞれコピーするようにしてください。
4. サイドバーのHTMLソースを include/sidebar.php に挿入して既存のテンプレートタグに注意しながら1つ1つ置換えします。
5. ここまでの作業で、正しいレイアウトになっているかどうかをブラウザで確認しておきましょう。

Live Commerceでは以下のページを、テーマで用意されたものではなく独自のデザインファイル（ページテンプレート）で表示することができます。

• メーカーページ
• カテゴリページ
• 商品一覧ページ
• 商品詳細ページ
• 単独ページ（ページ管理で作成します)

例えば、特定のカテゴリページは既存テーマのデザインとは分離して、任意に作成したデザインファイルを適用させることが可能です。
 

ページテンプレートの利用例

カテゴリ別に、カテゴリページ、商品一覧ページ、商品詳細ページをそれぞれ独自テンプレートに統一すれば、例えば3つの異なるカテゴリを1つのサイト上で異なるデザインで別々に運用することが可能になります。これは本来なら3つのサイト(URL)と3つの管理画面が必要になります。

例えば、アパレル、釣り具、コンサートチケット販売などの全く異なるサイトを1つのサイトで運用することを考えてみましょう。

この場合は、各カテゴリ別に異なるデザインの独自テンプレートを作成して、カテゴリ毎に独自テンプレートを割り当てることで釣り具のサイトの訪問したユーザーは他の2つのカテゴリの存在を知ることなくネットショッピングすることができます。ただしトップページとショッピングカートページ以降は共通で利用するため、ユーザーが混乱しないように、共通部分のレイアウト(サイトのフッターなど)に注意書きをしておくなどの対策は必要です。

テンプレート適用例

ページテンプレートの作成

ページテンプレートは以下の手順で作成します。

1. 以下のディレクトリに、拡張子.phpのファイルを設置します。

   public_html/resources/c_media/themes/[現在テーマ]/original/

   標準で、以下のファイルが用意されていますので、これらのファイルを参考にしてください。

   • tpl-brand-sample.php 　メーカーページ
   • tpl-category-sample.php　 カテゴリページ
   • tpl-listing-default.php 　商品一覧ページ
   • tpl-product-sample.php　　商品詳細ページ
   • tpl-page-sample.php　　単独ページ
   • *tpl-ipad.php は、商品詳細ページテンプレートの例で、サンプル商品として登録されているiPadでテンプレートに指定しています。
2. 各テンプレートファイルの先頭には次のタグを埋め込む必要があります。’テンプレートの名称’は管理画面のプルダウンでテンプレートを選択するときの名称です。

   <?php
   /*
   Template Name: テンプレートの名称
   */

3. ファイル内のそれぞれのプログラムは、通常のテンプレートファイルと同様になります。

   例えば、単独ページのテンプレートを作成したい場合は、最小構成のプログラムで次のようになります。
   以下のHTMLソースはページ表示しているテーマ内のファイル(new-page.php)と基本的には同一です。

• テンプレートにはテーマで利用している全てのタグ、関数が共通して利用できます。
• テンプレートで利用するCSSやJavascriptは既存のテーマのパスと同一となります。(originalというフォルダ名の中に保存されますが、表示する際のパスは既存のテーマと同一となります）