ドキュメントAPIリファレンスCS-Cart.jp

テーマ開発の概要

独自テーマの開発について

Suggest Edits

用語集

  • CSS - Cascading Style Sheets

  • スタイル（プリセットとも呼ぶ）はカラースキームなど異なるCSSスタイルをひとまとめにしたものです。これらの値はビジュアルエディタで変更できます。

  • ビジュアルエディター (テーマエディターとも呼ぶ) ・・・特定のデザインの外観を変更するために役立つツールです。

  • テンプレート・・・Smartyテンプレートエンジンで動作するテンプレートファイル（.tpl）

  • メディア ・・・画像、アイコン、フォント等

  • レイアウト・・・ストアフロントのブロックのコンテンツやレイアウトスキーム

  • レイアウト・ロケーション・・・特定のページの外観を定義

  • コンテナ・・・グリッドを追加するためのレイアウトエリア。 次の4つのコンテナタイプがあります：トップパネル、ヘッダー、コンテンツ、フッター

  • グリッド・・・グリッドの要素

テーマの構造

テーマにはショップフロントの外観を定義する一連のファイルが含まれています。

テーマはテンプレート、CSSスタイル、メディアコンテンツ、レイアウトスキーム及びショップフロントのブロックコンテンツなどで構成されています。

さらに、テーマには スタイル（プリセット）を含むことができます。

775

CS-Cartのテーマは、design/themes/ ディレクトリに保存されています。
CS-Cartバージョン4.2以降ではレスポンシブ（Responsive）テーマがデフォルトです。

テーマの構造は6つのディレクトリと2つのファイルで構成されます。

  • Layout ディレクトリ・・・レイアウトを構築する.xmlファイル が含まれています。このファイルでさらにレイアウトの詳細を定義することができます。

  • Styles ディレクトリ・・・.lessファイル用の変数とビジュアルエディタ要素の構造を含むファイルが含まれています。

  • Templates ディレクトリ・・・テンプレート (.tpl ファイル)が含まれています。

  • CSS ディレクトリ・・・.less や.css ファイルが含まれています。

  • Media ディレクトリ・・・フォント、アイコン、画像が含まれています。

  • customer_screenshot.png 画像・・・テーマのプレビュー用画像。この画像は管理パネルのデザイン > テーマ セクションに表示されます。

  • manifest.json ファイル・・・テーマの情報を含みます。

manifest.json

このファイルはメインテーマの情報と以下の要素を含みます：

  • title・・・管理パネルのデザイン > テーマ セクションで表示されるテーマ名

  • description・・・テーマの概要

  • theme・・・サイトのロゴへのパス。media/imagesディレクトリにロゴを保存することをおすすめします。

  • developer・・・テーマの作成者（会社名）。個々の開発者がいる場合は、彼らの名前を書きます。これらの情報は管理パネルのデザイン > テーマ セクションに表示されます。

  • favicon・・・テーマのファビコンへのパス。media/images/iconsディレクトリにfaviconを保存することをおすすめします。

  • parent_theme・・・親テーマの名前。レスポンシブテーマをベースに開発したいのであれば、responsiveと書いてください。親テーマは、標準で用意されている2つのテーマを親とする必要があります。BasicかResponsiveのいずれかを指定する必要があります。

あなたがレスポンシブなテーマを開発している場合は、parent_theme をresponsive に設定します。固定幅のテーマを開発している場合、parent_theme を basic へ設定します

新しいテーマを作成する際に、全てのテーマファイルを新たに作る必要はありません。テーマのインストール時に必要なファイルはデフォルトのテーマ（BasicかResponsive）からコピーされます。
parent_theme パラメーターは、manifest.jsonファイルで定義します。

{
    "title": "レスポンシブテーマ",
    "description": "レスポンシブテーマは様々な解像度のディスプレイに対応したテーマです。タブレット端末やスマートフォンでもCS-Cartを快適にご利用いただけます。",
    "logo": "media/images/cart.png",
    "developer": "Simtech",
    "favicon": "media/images/icons/favicon.ico",
    "parent_theme": "responsive"
}

📘

情報

manifest.jsonファイルに「parent_theme」パラメータが存在しない場合、親テーマは$config['base_theme'] 設定によって定義されます。

Updated almost 4 years ago