Magento模板製做入門，超級棒哦~~

製做你本身的Magento主題-Building Your Theme

創建你本身的主題（Theme）

Magento是創建在徹底模塊化的模式基礎上的，這爲你的網店帶來無限的可擴展性和靈活性。這章咱們介紹如何開發magento主題。

區塊（Blocks）和佈局（ Layout）

在Magento以前你極可能已經使用過其餘電子商務程序。所以在開始以前，咱們但願你拋棄全部按以往經驗得來的期待，這並不意味者你要學習一個全新的語言，也不意味着你要改變全部的工做流程，只是你要學習一些新的技巧來開發Magento的主題。掌握這些工具而且始終注意關注他們，你會喜歡上這種結構的。下面咱們開始介紹：

1. 結構區塊（Structural Blocks）
2. 內容區塊（Content Blocks）
3. 佈局（Layout）

 

創建心理導圖

爲了使你更清楚的理解區塊和佈局的含義，這裏提供一些心理導圖工你參考：

1. 想象一個長方區塊的輪廓(就想圖例1 Diagram 1).
2. 如今想象整個區塊的輪廓被填滿
3. 如今想象兩個區塊，他們的輪廓疊加在一塊兒
4. 如今想象三個區塊，輪廓疊加在一塊兒
5. 而後想象四個。。。。。。

Diagram 1

1. 而後咱們來看一下Magento網店的首頁縮略圖:

 

Diagram 2

1. 看看上面縮略圖能夠被分割成幾部分，以兩種方式分割。

Diagram 3

Diagram 4

 

你剛創建的思惟導圖給你在概念和真實區塊之間一個平行的比較，我知道你也許徹底糊塗了，讓我來解釋一下：

從概念角度看，圖2中的框架是結構區塊。他們是內容區塊的父區塊，他們幫助去定內容區塊在一個網店頁面中顯示的區域位置（如在圖3中 ） 。這些結構塊的存在形式爲頁眉區，左欄地區，右欄...等等有助於建立網店的視覺結構。;l

另外一方面，內容區塊概念上就是裝點結構區塊的獨立顏色的區塊。在一個網店內容裏，他們纔是真正的內容。內容區塊表明着頁面內的每個功能特性（好比分類列表，標註和產品標籤等等），而且使用模板文件生成(x)HTML插入到父結構區塊裏。

佈局Layout

佈局就是用來分配內容區塊到結構區塊的工具。佈局以XML 文本文件的形式存在，經過修改佈局，你能夠移動區塊和分配模板到內容區塊來產生結構區塊的標籤。事實上，經過一些佈局文件的幫助，你能夠修改網店每頁的可視佈局。更多關於佈局的信息能夠參考下面這個鏈接

介紹佈局 Layouts

在magento裏你再也不須要left_column.ext這個模板文件， 取而代之的是經過管理每一個功能性基礎元素來管理模板。你能夠經過一些佈局命令載入或者卸載功能元素來控制網店頁面。

一步一步創建主題Theme

下面是Magento創建主題的所有工具：

1. 模板Templates
2. 佈局Layouts
3. 區塊Blocks
4. 皮膚Skins (images, CSS and block-specific Javascript)

 

要創建一套網店的模板，你須要按照一下這些步驟完成：

第一步：關閉系統緩存system cache

到管理界面Administration Panel (http://yourhost.com/admin) 而後 System -> Cache Management.  在'All Cache' 選擇 'Disable' 而後保存。這樣會忠實的展示你對頁面的修改。

第二步：肯定你網店可能使用的全部結構類型

你能夠作一個以下的列表：

• 主頁使用三欄結構 three column structure.
• 分類列表頁使用兩欄結構包括右邊欄two column structure that includes a right column.
• 客戶頁面使用兩欄結構包括左邊欄 two column structure that includes a left column.

骨架模板Skeleton template

作完了上面的列表，你就能夠爲每一個結構類型建立一個(X)HTML  標記並保存爲骨架模板Skeleton template，將它保存在 app/design/frontend/your_interface/your_theme/template/page/.

skeleton template例子：

Upon scanning through the sample skeleton template above, you will notice a PHP method called <?=$this->getChildHtml()?> inside each presentational markup. This is the way Magento loads structural blocks into skeleton templates and hence is able to position all the contents of the structural blocks within a store page.

Each getChildHtml calls on a name as in <div class="header"><?=$this->getChildHtml('header')?></div>, and these names are ways by which each structural blocks are identified in the layout. Skeleton templates are assigned to the store through the layout.

 

第三步： 根據功能性修剪你的(X)HTML

創建好骨架模板以後 skeleton templates, 你須要爲每一個內容木塊建立模板

你須要爲每一個功能修改(X)HTML標籤。好比，設計一個mini-cart區域，這個區域的標籤將成爲它本身的模板文件。其餘諸如產品標籤，登錄區等等也同樣。這些功能Magento已經提供了，因此你只要參考已有的模板標籤來建立本身的標記邏輯就能夠了。

那麼模板保存到那裏呢？

 網店任何頁面的全文標記是經過一個模板數組完成， 數組中每個都描述一個模塊的功能。爲了找出在網頁上您想要修改的

模板，您能夠打開模板路徑的提示。經過：

Diagram 5

1. 到管理頁面 admin 而後 System -> Configuration
2. 選擇你的網店 （經過 website/store selector）
3. 頁面刷新後，選 'Developer' tab ，而後在Template Path Hints 選'Yes'.
作完以後回到前臺，刷新頁面以後你就能夠看到全部模板列表的路徑了。只要經過路徑修改相關的模板就能夠了。

第四步：改變佈局以適應你的設計

那麼佈局文件在哪？

在這裏 app/design/frontend/your_interface/your_theme/layout/. 和模板文件同樣, 佈局文件也是按照基於每一個模塊的方式存儲的，這樣你就能夠方便的按模板提示修改。首先，激活模板提示，刷新要修改的頁面，找尋模板提示的模板路徑。好比你想移動mini cart，參考模板路徑(ex:app/design/frontend/default/default/checkout/cart/sidebar.phtml) ，用主題文件夾裏第一個文件夾名（字體加劇的那個）來尋找相關佈局文件。因此在這個例子裏，咱們要尋找'checkout.xml'來修改mini cart的位置。

默認佈局 VS 佈局更新（Layout Updates）

一共有兩種佈局--默認（default）和更新（updates）。 默認佈局 default layout (page.xml) 是默認應用到自身或者幾乎每一個頁面的佈局。全部其餘的佈局文件都是更新佈局Layout Updates，也就是基於每一個默認佈局基礎上的佈局。

讓咱們舉例說明一下骨架模板（skeleton template):
在默認佈局裏，你已經設置爲三欄結構，就是說，默認幾乎全部的頁面都是三欄結構。可是在產品頁面並不須要三欄，對產品頁面來講，你須要一個包括右邊欄的兩欄的結構。爲了實現這一點，你要無論默認佈局，打開catalog.xml文件，在其中修改佈局命令。這就是所謂升級一個佈局（updating a layout）.

Example way of assigning skeleton template

<reference name="root">      <action method="setTemplate"><template>page/2columns-right.phtml</template></action></reference>