文章彙整

如何設計 Magento佈景主題 (1) – 開發前的準備動作

By Astral Web 2 years agoNo Comments
首頁  /  網頁視覺設計  /  如何設計 Magento佈景主題 (1) – 開發前的準備動作

文章標題圖-如何設計Magento佈景主題(1) - 開發前的準備動作

歐斯瑞準備了一系列「如何開發 Magento佈景主題 」的文章,這一篇文章首先要帶著大家一起進行正式開發前的第一步 ー 建立一個新的Store View。在接下來的示範中、我們要新增一個名為study的Store View。

如何設計 Magento佈景主題 (1) – 開發前的準備動作

首先我們需要建立二個資料夾

  1. app/design/frontend/my_interface/my_theme/
    這個資料夾包含layout、templates 還有翻譯的語言文件
  2. skin/frontend/my_interface/my_theme/
    這個資料夾包含css, javascript還有圖片。

 

第一步 建立相關的資料夾

先在app跟skip裡的rwd底下建立一個study的資料夾,

 

佈景路徑

app\design\frontend\rwd\study

步驟一-如何設計Magento佈景主題(1) - 開發前的準備動作

 

css、images路徑

skin\frontend\rwd\study

步驟二-如何設計Magento佈景主題(1) - 開發前的準備動作

 

建立好資料夾後,因為佈景必須包含layouts, templates, skins,網站才能正常的運作。建議直接複製rwd底下的default的預設佈景來修改,避免有問題。

 

第二步 到後台進行設定

當我們資料夾都安置好後  接下來要到後台設定商店的指定佈景

  1. 首先,請先點選System>Configuration
    步驟三-如何設計Magento佈景主題(1) - 開發前的準備動作
  2. 在右邊的Current Configuration Scope:選擇您要設定的層級( website-level 或 store view-level )因為我們是要新增一個新的佈景 所以選擇Main Website
    步驟四-如何設計Magento佈景主題(1) - 開發前的準備動作
  3. 接下來選擇Design,在Current package name欄位中輸入新的佈景主題的名稱。我們的佈景主題設定在rwd的底下 所以這要輸入rwd。
    步驟五-如何設計Magento佈景主題(1) - 開發前的準備動作點開 Themes,在Default欄位輸入佈景主題的名稱。在這裡我們使用study
    步驟六-如何設計Magento佈景主題(1) - 開發前的準備動作
  4. 最後按下右上角的 Save Config 按鈕,就完成了佈景主題的設定。
    步驟七-如何設計Magento佈景主題(1) - 開發前的準備動作
  5. 要套用佈景 必須先關閉快取。不然會看不到新的佈景關閉方式System > Configuration
    步驟八-如何設計Magento佈景主題(1) - 開發前的準備動作進入Configuration後

 

  • 選擇Select All(全選所有的核取方塊),
  • 到Actions欄位設定為 Disable後,按下Submit清楚快取
    步驟九-如何設計Magento佈景主題(1) - 開發前的準備動作

這樣就完成開發的前置作業囉!

接者請看:如何設計 Magento佈景主題 (2) – 使用sass開發

以上內容由Astralweb 歐斯瑞編寫製作

 100

推薦文章

Categories:
  網頁視覺設計Magento開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。