CS-Cart.jp開発者ドキュメント
  • はじめに
  • Getting Started
    • CS-Cart開発者向け注意事項
    • CS-Cartの構成
    • デバッグ方法
  • コア
    • Hooks
    • コントローラー
      • Pre&Post コントローラー
    • データベース
      • データベースの構造と命名規則
      • データベース・プレイスホルダー
      • 他のデータベースへの接続
    • ショップフロント
      • ブロック
      • blockメインスキーマ—
      • Dynamic Objects
      • ajaxリクエストの使用方法
      • 特別なCSSセレクター
      • マイクロフォーマット Microformats
      • 通知システム
      • ツールチップ
    • 設定
    • コア関数
    • イベントの通知
    • 言語変数
    • スキーマー
  • アドオン開発
    • フック
      • PHPフック
      • テンプレートフック
    • アドオンチュートリアル
      • 「Hello World」チュートリアル
      • Advanced Add-on チュートリアル
      • 商品リスト、詳細ページのカスタムテンプレートを作成
      • 支払方法の開発
    • アドオンの管理プロセス
    • Add-on スキーマー
      • アドオンの互換性
      • 他のアドオンとの競合・依存設定
    • APIの拡張
    • スキーマーの拡張
    • アドオンのディレクトリ構造
    • アドオンの言語変数
    • .poファイルによる言語ファイルの作成
  • テーマ開発
    • テーマ開発の概要
    • テーマの複製
    • レイアウトの管理
    • トップパネルとヘッダー
    • テーマを使用したショップの設定の変更
    • CSS
    • テーマの言語変数
    • メディアファイル
    • 親テーマ
    • スタイルとビジュアルエディター
    • レイアウトエディター
    • テンプレート
  • デバッグ
    • デバッガー
    • ファイルエディター
GitBook提供
このページ内
  • 用語集
  • テーマの構造
  • manifest.json
  1. テーマ開発

テーマ開発の概要

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

最終更新 7 か月前

用語集

  • 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 ファイル・・・テーマの情報を含みます。

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'] 設定によって定義されます。

Cascading Style Sheets