テーマ開発の概要
最終更新
最終更新
CSS
-
スタイル
(プリセットとも呼ぶ)はカラースキームなど異なるCSSスタイルをひとまとめにしたものです。これらの値はビジュアルエディタで変更できます。
ビジュアルエディター
(テーマエディターとも呼ぶ) ・・・特定のデザインの外観を変更するために役立つツールです。
テンプレート
・・・Smartyテンプレートエンジンで動作するテンプレートファイル(.tpl)
メディア
・・・画像、アイコン、フォント等
レイアウト
・・・ストアフロントのブロックのコンテンツやレイアウトスキーム
レイアウト・ロケーション
・・・特定のページの外観を定義
コンテナ
・・・グリッドを追加するためのレイアウト
エリア。 次の4つのコンテナタイプがあります:トップパネル、ヘッダー、コンテンツ、フッター
グリッド
・・・グリッドの要素
テーマにはショップフロントの外観を定義する一連のファイルが含まれています。
テーマはテンプレート、CSSスタイル、メディアコンテンツ、レイアウトスキーム及びショップフロントのブロックコンテンツなどで構成されています。
さらに、テーマには スタイル
(プリセット)を含むことができます。
<画像>
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
ファイル・・・テーマの情報を含みます。
このファイルはメインテーマの情報と以下の要素を含みます:
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
ファイルで定義します。