制作你自己的Magento主題

1、制作你自己的Magento主題-Building Your Theme星期二, 08/19/2008 - 22:19 foolsky 建立你自己的主題（Theme）Magento是建立在完全模塊化的模式基礎(chǔ)上的，這為你的網(wǎng)店帶來無限的可擴(kuò)展性和靈活性。這章我們介紹如何開發(fā)magento主題。區(qū)塊（Blocks）和布局（ Layout）在Magento之前你很可能已經(jīng)使用過其他電子商務(wù)程序。因此在開始之前，我們希望你拋棄所有按以往經(jīng)驗(yàn)得來的期待，這并不意味者你要學(xué)習(xí)一個(gè)全新的語言，也不意味著你要改變所有的工作流程，只是你要學(xué)習(xí)一些新的技巧來開發(fā)Magento的主題。掌握這些工具并且始終注意關(guān)注他

2、們，你會(huì)喜歡上這種結(jié)構(gòu)的。下面我們開始介紹：1. 結(jié)構(gòu)區(qū)塊（Structural Blocks） 2. 內(nèi)容區(qū)塊（Content Blocks） 3. 布局（Layout）  建立心理導(dǎo)圖為了使你更清楚的理解區(qū)塊和布局的含義，這里提供一些心理導(dǎo)圖工你參考：1. 想象一個(gè)長方區(qū)塊的輪廓(就想圖例1 Diagram 1). 2. 現(xiàn)在想象整個(gè)區(qū)塊的輪廓被填滿 3. 現(xiàn)在想象兩個(gè)區(qū)塊，他們的輪廓疊加在一起 4. 現(xiàn)在想象三個(gè)區(qū)塊，輪廓疊加在一起 5. 然后想象四個(gè)。Diagram 16. 然后我們來看一下Magento網(wǎng)店的首頁縮略圖: Diagram 27. 看看上面縮略圖可以

3、被分割成幾部分，以兩種方式分割。Diagram 3Diagram 4 你剛建立的思維導(dǎo)圖給你在概念和真實(shí)區(qū)塊之間一個(gè)平行的比較，我知道你也許完全糊涂了，讓我來解釋一下：從概念角度看，圖2中的框架是結(jié)構(gòu)區(qū)塊。他們是內(nèi)容區(qū)塊的父區(qū)塊，他們幫助去定內(nèi)容區(qū)塊在一個(gè)網(wǎng)店頁面中顯示的區(qū)域位置（如在圖3中 ） 。這些結(jié)構(gòu)塊的存在形式為頁眉區(qū)，左欄地區(qū)，右欄.等等有助于創(chuàng)建網(wǎng)店的視覺結(jié)構(gòu)。;l另一方面，內(nèi)容區(qū)塊概念上就是裝點(diǎn)結(jié)構(gòu)區(qū)塊的獨(dú)立顏色的區(qū)塊。在一個(gè)網(wǎng)店內(nèi)容里，他們才是真正的內(nèi)容。內(nèi)容區(qū)塊代表著頁面內(nèi)的每一個(gè)功能特性（比如分類列表，標(biāo)注和產(chǎn)品標(biāo)簽等等），并且使用模板文件生成(x)HTML插入到

4、父結(jié)構(gòu)區(qū)塊里。布局Layout布局就是用來分配內(nèi)容區(qū)塊到結(jié)構(gòu)區(qū)塊的工具。布局以XML 文本文件的形式存在，通過修改布局，你可以移動(dòng)區(qū)塊和分配模板到內(nèi)容區(qū)塊來產(chǎn)生結(jié)構(gòu)區(qū)塊的標(biāo)簽。事實(shí)上，通過一些布局文件的幫助，你可以修改網(wǎng)店每頁的可視布局。更多關(guān)于布局的信息可以參考下面這個(gè)連接介紹布局 Layouts在magento里你不再需要left_column.ext這個(gè)模板文件， 取而代之的是通過管理每個(gè)功能性基礎(chǔ)元素來管理模板。你可以通過一些布局命令載入或者卸載功能元素來控制網(wǎng)店頁面。一步一步建立主題Theme下面是Magento建立主題的全部工具：1. 模板Templates 2. 布局Layout

5、s 3. 區(qū)塊Blocks 4. 皮膚Skins (images, CSS and block-specific Javascript)  要建立一套網(wǎng)店的模板，你需要按照一下這些步驟完成：第一步：關(guān)閉系統(tǒng)緩存system cache到管理界面Administration Panel ( 然后 System -> Cache Management.  在'All Cache' 選擇 'Disable' 然后保存。這樣會(huì)忠實(shí)的展現(xiàn)你對(duì)頁面的修改。第二步：確定你網(wǎng)店可能使用的所有結(jié)構(gòu)類型你可以做一個(gè)如下的列表：· 主頁使用三欄結(jié)構(gòu)

6、 three column structure. · 分類列表頁使用兩欄結(jié)構(gòu)包括右邊欄two column structure that includes a right column. · 客戶頁面使用兩欄結(jié)構(gòu)包括左邊欄 two column structure that includes a left column. 骨架模板Skeleton template做完了上面的列表，你就可以為每個(gè)結(jié)構(gòu)類型創(chuàng)建一個(gè)(X)HTML  標(biāo)記并保存為骨架模板Skeleton template，將它保存在 app/design/frontend/your_interface/

7、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

8、 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 layou

9、t. Skeleton templates are assigned to the store through the layout. 第三步： 根據(jù)功能性修剪你的(X)HTML建立好骨架模板之后 skeleton templates, 你需要為每個(gè)內(nèi)容木塊創(chuàng)建模板你需要為每個(gè)功能修改(X)HTML標(biāo)簽。比如，設(shè)計(jì)一個(gè)mini-cart區(qū)域，這個(gè)區(qū)域的標(biāo)簽將成為它自己的模板文件。其他諸如產(chǎn)品標(biāo)簽，登陸區(qū)等等也一樣。這些功能Magento已經(jīng)提供了，所以你只要參考已有的模板標(biāo)簽來創(chuàng)建自己的標(biāo)記邏輯就可以了。那么模板保存到那里呢？ 網(wǎng)店任何頁面的全文標(biāo)記是通過一個(gè)模板數(shù)組完成，

10、 數(shù)組中每一個(gè)都描述一個(gè)模塊的功能。為了找出在網(wǎng)頁上您想要修改的模板，您可以打開模板路徑的提示。通過：Diagram 51. 到管理頁面 admin 然后 System -> Configuration2. 選擇你的網(wǎng)店 （通過 website/store selector）3. 頁面刷新后，選 'Developer' tab ，然后在Template Path Hints 選'Yes'.做完之后回到前臺(tái)，刷新頁面之后你就可以看到所有模板列表的路徑了。只要通過路徑修改相關(guān)的模板就可以了。第四步：改變布局以適應(yīng)你的設(shè)計(jì)那么布局文件在哪？在這里 app/des

11、ign/frontend/your_interface/your_theme/layout/. 和模板文件一樣, 布局文件也是按照基于每個(gè)模塊的方式存儲(chǔ)的，這樣你就可以方便的按模板提示修改。首先，激活模板提示，刷新要修改的頁面，找尋模板提示的模板路徑。比如你想移動(dòng)mini cart，參考模板路徑(ex:app/design/frontend/default/default/checkout/cart/sidebar.phtml) ，用主題文件夾里第一個(gè)文件夾名（字體加重的那個(gè)）來尋找相關(guān)布局文件。所以在這個(gè)例子里，我們要尋找'checkout.xml'來修改mini cart的

12、位置。默認(rèn)布局 VS 布局更新（Layout Updates）一共有兩種布局-默認(rèn)（default）和更新（updates）。 默認(rèn)布局 default layout (page.xml) 是默認(rèn)應(yīng)用到自身或者幾乎每個(gè)頁面的布局。所有其他的布局文件都是更新布局Layout Updates，也就是基于每個(gè)默認(rèn)布局基礎(chǔ)上的布局。讓我們舉例說明一下骨架模板（skeleton template):在默認(rèn)布局里，你已經(jīng)設(shè)置為三欄結(jié)構(gòu)，就是說，默認(rèn)幾乎所有的頁面都是三欄結(jié)構(gòu)。但是在產(chǎn)品頁面并不需要三欄，對(duì)產(chǎn)品頁面來說，你需要一個(gè)包括右邊欄的兩欄的結(jié)構(gòu)。為了實(shí)現(xiàn)這一點(diǎn)，你要不管默認(rèn)布局，打開catalog.xml文件，在其中修改布局命令。這就是所謂升級(jí)一個(gè)布局（updating a layout）.Example way of assigning