Magento教程 76：如何建立magento布景主题

Magento 设计常用名词

在开始建立布景主题之前、我们先来了解一下magento的几个名词：

Website, Store, Store View
Interface
Themes
Layouts
Templates
Skins
Blocks
Structural Blocks
Content Blocks

website, store, store-view

magento是一个很强大的购物网站架站系统，不仅可以支援多商店，每个商店又可以有多个不同的store-view。举例来说：欧斯瑞购物是一个购物网站，在这个网站上有B2C的商店也有B2B的商店，二个商店又各有英文、中文等不同语言版本。

Interface

Interface(界面)是由一组或多组theme(布景主题)所组成。他决定了网站的外观和前台的功能。您可以从后台设定整站(website)的界面或是商店(store-view)的界面。

Themes

Theme(布景主题)由layout, template, locale, skin 所组成。这些元素决定了商店的外观和前台的功能。 Magento 可以同时加载多个布景。

预设布景

每一个界面都必须要有一个预设的布景，当您在后台指定一个界面给商店时，Magento会自动载入这个界面的预设布景。预设布景必须包含所有必要的layouts, templates and skins，才能让网站正常运作。当您需要调整布景时，您可以直接修改预设布景的档案或是使用非预设布景来覆盖预设布景。

非预设布景

非预设布景通常只需要包含您所需要的档案即可。当您因为母亲节来临，需要制作一个母亲节的布景时，非预设布景就是一个很好的选择。

Blocks

magento 的页面是由许多的区块(block)所组成，这些区块可分成结构区块(Structural Blocks)和内容区块(content block)。结构区块是页面的主要结构，如：header, left column, main column and footer。内容区块则是组成基本区块的实际的内容，如：购物车、产品列表、轮播图片等。

开始建立Magento 布景主题

建立一个布景主题

每新建立一个布景主题，你都需要建立二个资料夹

1.app/design/frontend/my_interface/my_theme/

这个资料夹包含layout、templates 还有翻译的语言文件

2.skin/frontend/default/my_interface/my_theme/

这个资料夹包含css, javascript还有图片。

建立介面底下的预设布景

预设布景必须包含所有必须的layouts, templates, skins，网站才能正常的运作。因此建议您复制MAGENTO原本的预设布景来修改以免有所遗漏。

建立介面底下的非预设布景

非预设布景不需要包含所有的档案，一般依布景的设计只需要包含和预设布景不同的设定档即可。唯一需要特别注意的便是：必须遵循MAGENTO布景的档案结构，不得任意更改。

参考下图，将我们准备好的布景档案上传到伺服器上

为商店指定布景

接着进到后台，遵循下面图文步骤开始设定：

Step1:

进入System＞Configuration

在左上角Current Configuration Scope 的下拉选单，选择您要设定的层级( website-level 或store view-level )

Step2:

选择Design标签，在Current package name栏位中输入新的布景主题所在的介面名称。在这里我们使用my_interface

Step3:

展开THEME 标签，在Default栏位输入布景主题的名称。在这里我们使用my_theme

Step4:按下右上角的Save Config按钮至此，您已经完成了布景主题的设定。

MAGENTO 布景主题的读取顺序

以我们上面的例子来说，magento共读取三个主题，并且以my_theme为最先优先。

my_interface/my_theme
my_interface/default
base/default/

开始套用布景主题

关闭快取

Step1:

进入管理介面，System > Configuration

Step2:全选所有的核取方块(1)，并设定为Disable(2)

确定页面的结构

例如: home page → 3栏式，product page →2栏左侧边栏，customer page → 2栏右侧边栏

设定页面结构的档案是phtml格式，位于底下路径内：app/design/frontend/my_interface/my_theme/template/page/

  <html>
 <head></head>
 <body>
 <div class="wrapper">
     <div class="header"><?php echo $this->getChildHtml('header') ?></div>
     <div class="middle">
         <div class="col-left"><?php echo $this->getChildHtml('left') ?></div>
         <div class="col-main"><?php echo $this->getChildHtml('content') ?></div>    
     </div>
     <div class="footer"><?php echo $this->getChildHtml('footer') ?></div>
 </body>
 </html>

上面是一个2栏左侧边栏的范例。在这个范例中，每个<?=$this->getChildHtml()?> 都代表了一个区块。

<div class=”header”><?=$this->getChildHtml(‘header’)?></div>在这段程式码中，header就是这个区块的名称。

建立内容区块。 建议依功能建立不同区块。

建立好结构模版之后，我们要开始建立区块的模板。我们建议依功能来切割区块，例如：product tags, newsletter, sign up area…

如果您不确定区块模板存放的位置，可以开启magento的提示功能。

Step1：进到管理后台： System＞Configuration

Step2：点选左侧Developer

Step3：选择商店。

Step4：在Template Path Hints.的下拉选单中选择Yes。

存档之后到商店前台去重整画面，我们会发现商店外观变成底下的样子。其中红色虚线就是每个区块的范围，红底白字的部份就是每个区块的路径和模板的档案名称

以minicart为例，设定minicart的模组文件就放在底下路径中：app/design/frontend/my_interface/default/template/ checkout /cart/minicart.phtml

我们必须修改minicart.phtml以符合我们的设计需求

依设定调整布局

寻找相对应的layout档案

以minicart为例，app/design/frontend/my_interface/default/template/ checkout /cart/minicart.phtml

找到在布景主题> template >之下的第一个资料夹名称(checkout)，并到app/design/frontend/my_interface/default/layout/ 资料夹内寻找相同名称的xml档。

预设布局及更新布局

预设布局(例如page.xml)是几乎适用于商店每一个页面的布局。更新布局则是适用于某些与多数页面不同的特定网页。例如您在page.xml设定多数页面为三栏式页面、但是结果产品目录页面希望是二栏式页面、那么您必须另外建立一个catalog.xml并设定为二栏式的页面。又或者您在每个页面都需要一个订阅电子报的功能、但在会员页面则不需要显示订阅电子报功能、那么您就必须在page.xml设定订阅电子报功能、并建立一个不含订阅电子报功能的customer.xml

Magento的布局(Layouts)

magento 的layout文件是建立在模组(module)的基础上的xml档案，每一个模组(module)都有属于自己的layout文件。您可以借由layout来设定每个页面要包含哪些block。这些layout文件位于底下路径app/design/frontend/your_interface/your_theme/layout/。

一个layout文件会包含<default>标签，当解析页面的时候magento会抓<default>的布局，然后再解析特定页面的更新资讯，最后才呈现出页面最终的样子。

Handle

Handle是layout的识别符号，magento藉由办识Handle来确定如何处理当前的页面。

例如<default>，magento知道必须要先载入<default>的设定，再去加载其他特定的更新。

如果magento发现不是<default>的Handle，将会依照Handle里的资讯决定更新哪些布局。

例如<catalog_product_view>包含了Product View page的更新，<catalog_product_compare_index> 含含了Compare Product page 的更新。 Handle几乎不需要修改，如果没有相当了解magento建议您不要轻易修改Handle。

<block>

type定义<block>的功能不得任何修改

name可供其他<block>参考。

before (and) after在结构区块里定位内容区块，before=”-” and after=”-“表示在结构区块的最顶部或是最底部。

template指定区块使用的模板

例如：<block type=”catalog/category_view” name=”category.products” template=”catalog/category/view.phtml”>

模版的实际位置app/design/frontend/template/catalog/category/view.phtml

action用来控制前端功能，例如加载或缷载某个javascript

例如：<action method=”addJs”><script>prototype/prototype.js</script></action>

as与template文件里所用到的getChildHtml(‘block_name’)相对应。

例如template文件里的<?php echo $this->getChildHtml(‘header’) ?>对应到layout文件里的<block type=”page/html_header” name=”header” as=”header”/>

<reference> 参考另一个<block>。

<reference>标签里的更新资讯将适用于同名的<block>

例如：<reference name=”right”>的目标是<block name=” right “>.

注意：每个xml标签都必须要有结束标签或是自结束标签

实做：在网页下方新增一个迷你购物车

开启Template Path Hint功能。找到相对应的layout文件。

如下图，Template Path Hint功能提示模板的路径为frontend/my_interface/default/template/checkout/cart/minicart.phtml

因为紧临/template/之后checkout就是迷你购物车所在的模组名称，所以我们要到frontend/my_interface/default/layoutl 去找checkout.xml

2. 修改layout文件，在footer新增搜寻框区块

开启checkout.xml，搜寻checkout/cart/minicart.phtml，找到底下的程式码：

  <reference name="header">
             <block type="checkout/cart_minicart" name="minicart_head" template="checkout/cart/minicart.phtml" before="-">
                 <block type="checkout/cart_sidebar" name="minicart_content" template="checkout/cart/minicart/items.phtml">
                     <action method="addItemRender"><type>default</type><block>checkout/cart_item_renderer</block><template>checkout/cart/minicart/default.phtml</template></action>
                     <action method="addItemRender"><type>simple</type><block>checkout/cart_item_renderer</block><template>checkout/cart/minicart/default.phtml</template></action>
                     <action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/minicart/default.phtml</template></action>
                     <action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/minicart/default.phtml</template></action>

                     <block type="core/text_list" name="cart_sidebar.cart_promotion" as="cart_promotion" translate="label" module="checkout">
                         <label>Mini-cart promotion block</label>
                     </block>
                     <block type="core/text_list" name="cart_sidebar.extra_actions" as="extra_actions" translate="label" module="checkout">
                         <label>Shopping Cart Sidebar Extra Actions</label>
                     </block>
                 </block>
             </block>
         </reference>

在原来的程式码底下复制这段程式码，并将<reference name=”header”> 改成<reference name=”footer”>

到这里迷你购物车已经出现在footer里了

接下来我们只要再调整css及关闭Template Path Hints功能即可。

下图就是完成的样子啰。

Just Code

Magento教程 76：如何建立magento布景主题

Magento 设计常用名词

website, store, store-view

Interface

Themes

Blocks

开始建立Magento 布景主题

建立一个布景主题

为商店指定布景

MAGENTO 布景主题的读取顺序

开始套用布景主题

关闭快取

Magento的布局(Layouts)

<block>

<reference> 参考另一个<block>。

注意：每个xml标签都必须要有结束标签或是自结束标签

About Author

Gideon

Add a Comment

Magento 设计常用名词

website, store, store-view

Interface

Themes

Blocks

开始建立Magento 布景主题

建立一个布景主题

为商店指定布景

MAGENTO 布景主题的读取顺序

开始套用布景主题

关闭快取

Magento的布局(Layouts)

<block>

<reference> 参考另一个<block>。

注意：每个xml标签都必须要有结束标签或是自结束标签

Related Posts

Related Posts

About Author

Gideon

Add a Comment