テーマ開発の概要

用語集

CSS - Cascading Style Sheets
スタイル（プリセットとも呼ぶ）はカラースキームなど異なる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 ファイル・・・テーマの情報を含みます。

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"
}

INFORMATION

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

前へ.poファイルによる言語ファイルの作成次へテーマの複製

最終更新 5 か月前