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>