创建Magento基本主题框架

之前郑州seo讲到Magento模板视图结构,seo顾问考虑到对于熟悉了WordPress等主题修改的人来说Magento模板制作相对复杂。我们学习的进度不会很快。我们学习主题制作的目的也相对简单:先熟悉了解怎么样创建一个Magento主题。创建的Magento主题不会很花哨,也没有图片等修饰,仅仅产品图片和logo,仅只有一栏布局。内容或许有些依样画葫芦,但路要一步一步走,步子迈得太大就会扯着蛋。

今天郑州seo将主要创建Magento主题的核心部分,能驱动网站运行的骨架。我们将解释这些各个功能背后的过程。我们也将给出这些代码希望不要直接复制粘帖,有些代码自己输入一遍更有印象。

基本模板

我们将创建的基本模板就是这个样子。左上角的logo必不可少,还有用户导航的菜单(包括用户账户、收藏夹、购物车等等)。中间是一个面包屑导航和内容部分。用户搜索功能在右侧。底部就是版权信息等内容了。

HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en-GB">
  3. <head>
  4. <title>Cirrus - Magento Theme</title>
  5. <link rel="stylesheet" href="css/cirrus.css" />
  6. </head>
  7. <body>
  8. <div id="wrapper">
  9. <div id="header">
  10. <div id="logo"><img src="images/logo.gif" alt="创建Magento基本主题框架" /></div>
  11. <div id="hud">
  12. <h3>Welcome, Sid</h3>
  13. <ul>
  14.             <li><a href="#" title="My Account">My Account</a></li>
  15.             <li ><a href="#" title="My Wish list">My Wish list</a></li>
  16.             <li ><a href="#" title="My Cart">My Cart</a></li>
  17.             <li ><a href="#" title="Checkout">Checkout</a></li>
  18.             <li><a href="#" title="Log Out" >Log Out</a></li>
  19.     </ul>
  20. </div>
  21. </div>
  22. <div id="utilities">
  23. <div id="breadcrumbs">Home » State of Fear</div>
  24. <div id="header-search"><input type="text" value="Search our store" /></div>
  25. </div>
  26. <div id="content">
  27. <h1>Content here</h1>
  28. </div>
  29. <div id="footer">
  30. Help Us to Keep Magento Healthy - Report All Bugs (ver. 1.4.0.1)
  31. © 2008 Magento Demo Store. All Rights Reserved.
  32. </div>
  33. </div>
  34. </body>
  35. </html>


CSS代码

  1. * {
  2.         margin: 0;
  3.         padding: 0;
  4.         border: none;
  5.         outline: none;
  6.         color: #333;
  7.         font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  8.         font-size: 14px;
  9.         list-style: none;
  10.         line-height: 1.3em;
  11. }
  12. a {
  13.         color : #7db000;
  14. }
  15. h1, h2, h3, h4 {
  16.         font-weight: normal;
  17. }
  18. h1 {
  19.         font-size: 32px;
  20.         margin-bottom: 10px;
  21. }
  22. h2 {
  23.         font-size: 24px;
  24.         margin: 10px 0 12px 0;
  25. }
  26. h3 {
  27.         font-size: 20px;
  28.         margin-bottom: 5px;
  29. }
  30. h4 {
  31.         font-size: 20px;
  32. }
  33. .border {
  34.         border: 1px solid #666;
  35. }
  36. /* Base Elements */
  37. #wrapper {
  38.         width: 920px;
  39.         margin: 10px auto;
  40.         padding: 20px;
  41. }
  42. #header {
  43.         margin: 0 0 20px 0;
  44.         overflow: auto;
  45. }
  46. #content {
  47.         margin: 20px 0;
  48.         overflow: auto;
  49. }
  50. #footer {
  51.         padding: 10px;
  52.         border: 1px solid #E1E1E1;
  53.         background: #F3F3F3;
  54.         text-align: center;
  55. }
  56. /* Header content */
  57. #logo {
  58.         float: left;
  59. }
  60. #hud {
  61.         float: right;
  62.         width: 320px;
  63.         height: 50px;
  64.         padding: 10px;
  65.         border: 1px solid #E1E1E1;
  66.         background: #F3F3F3;
  67. }
  68. #hud li a {
  69.         float: left;
  70.         font-size: 12px;
  71.         margin: 0 10px 0 0;
  72. }
  73. #utilities {
  74.         clear: both;
  75.         margin: 20px 0;
  76.         overflow: auto;
  77.         padding: 7px 10px;
  78.         border: 1px solid #E1E1E1;
  79.         background: #F3F3F3;
  80. }
  81. #breadcrumbs {
  82.         float: left;
  83. }
  84. #header-search {
  85.         float: right;
  86. }


创建page.xml文件

Magento使用XML文件来处理页面的布局也同样来定义那个部分来渲染,这样做的目的是为了不与周围的代码混淆,让你编辑XML时不担心其他部分。

每一个view/srceen/module都有自己的XML文件跟随着一个主文件来定义网站的总布局。这个主文件就是我们现在要创建page.xml。

完整的文件看起来就像这个样子。我将解释下面的每一部分。

  1. <?xml version="1.0"?>
  2. <layout version="0.1.0">
  3.     <default translate="label" module="page">
  4.         <label>All Pages</label>
  5.         <block type="page/html" name="root" output="toHtml" template="page/1column.phtml">
  6.                 <block type="page/html_head" name="head" as="head">
  7.                 <action method="addCss"><stylesheet>css/cirrus.css</stylesheet></action>
  8.             </block>
  9.             <block type="page/html_header" name="header" as="header">
  10.                                 <block type="page/template_links" name="top.links" as="topLinks"/>
  11.                                 <block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>
  12.                 <block type="core/template" name="top.search" as="topSearch"/>
  13.             </block>
  14.             <block type="core/text_list" name="content" as="content"/>
  15.             <block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml"/>
  16.         </block>
  17.     </default>
  18. </layout>


不用管初始XML和布局版本声明。他们对我们没有什么意义了。

  1. <block type="page/html" name="root" output="toHtml" template="page/1column.phtml">


首先我们创建一个主要的block块。考虑到这种包裹的div元素我们要使用在HTML代码中。下一步我们将使用page/1column.phtml 作为页面的模板。不要着急我们还没有创建这个文件,将在随后的几个系列中讲到。

  1. <block type="page/html_head" name="head" as="head">
  2.        <action method="addCss"><stylesheet>css/cirrus.css</stylesheet></action>
  3. </block>


接下来我们定义将包含在页面head部分元素。Magento默认会包含载入CSS和JS文件但是我们这里不怎么需要这些功能。因此我们要创建我们自己的CSS文件。

  1. <block type="page/html_header" name="header" as="header">
  2.                                 <block type="page/template_links" name="top.links" as="topLinks"/>
  3.                                 <block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>
  4.                 <block type="core/template" name="top.search" as="topSearch"/>
  5.             </block>


我们将定义那些元素在我们网站的header部分,郑州seo需要顶部的菜单/链接同样还有面包屑和搜索部分。

  1. <block type="core/text_list" name="content" as="content"/>


当然我们需要内容部分,因此我们将包含进我们的内容部分。关于这个部分我们不会定义任何东西由于Magento只加载所有必要的内容在这块。

  1. <block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml"/>


最后我们把footer部分包含进来,我们告诉Magento从什么地方加载这个模板。
你可能想知道为什么我们给一些block块指定一个模板路径而同时忽略了其他的。这是有点深的高层次的话题,但你注意每个块有一个类型属性。当它的类型匹配Magento已经预定义时候,你不需要指定一个模板。它是自动加载的。
到目前为止,我们基础page.xml就完成了。

创建模板骨架

现在我们已经指定我们的布局,我们可以继续创建刚才在XML中指定1column.phtml文件。这个文件就是一个骨架模板根据需要调用header、content和footer部分。郑州seo的文件看起来会是这个样子:

  1. <!DOCTYPE html>
  2. <html lang="en-GB">
  3. <head>
  4. <?php echo $this->getChildHtml('head') ?>
  5. </head>
  6. <body>
  7. <div id="wrapper">
  8. <?php echo $this->getChildHtml('header') ?>
  9. <div id="content">
  10. <?php echo $this->getChildHtml('content') ?>
  11. </div>
  12. <?php echo $this->getChildHtml('footer') ?>
  13. </div>
  14. </body>
  15. </html>


除去我们使用getChildHtml方法请求各块的内容这是非常原始的HTML文件。

 

为我们的块创建模板

现在我们来到了有点难度的部分了:按功能切割我们的核心HTML块,为每一个功能创建需要的模板然后移植这些文件。

我们将按照显示的顺序处理他们。

head部分

getChildHtml(‘head’)直接映射 page/html/head.phtml。我们的文件看起来是:

  1. <title><?php echo $this->getTitle() ?></title>
  2. <link rel="icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon" />
  3. <link rel="shortcut icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon" />
  4. <?php echo $this->getCssJsHtml() ?>
  5. <?php echo $this->getChildHtml() ?>
  6. <?php echo $this->getIncludes() ?>


你看到我们让Magento动态创建标题。除此之外注意到我们调用getCssJsHtml方法。这种方法将导入我们在page.xml文件中指定的所有的CSS和JS文件。

页面头部

getChildHtml(‘header’)直接映射 page/html/header.phtml。我们的文件看起来像:

  1. <div id="header">
  2. <div id="logo"><a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></div>
  3. <div id="hud">
  4. <h3>Welcome</h3>
  5. <?php echo $this->getChildHtml('topLinks') ?>
  6. </div>
  7. </div>
  8. <div id="utilities">
  9. <?php echo $this->getChildHtml('breadcrumbs') ?>
  10. <?php echo $this->getChildHtml('topSearch') ?>
  11. </div>

      我们使用Magento的api首先请求LOGO。接着我们进一步模块化东西,我们取得面包屑、链接和搜索功能的HTML。

注意,该名称是纯粹的语义。正如你所看到的您还可以根据需要添加其他元素。

页面footer部分

getChildHtml(‘footer’) 直接映射在XML文件中指定的 page/html/footer.phtml 。我们的文件看起来就是:

  1. <div id="footer">
  2. <?php echo $this->__('Help Us to Keep Magento Healthy') ?> - <a href="http://www.magentocommerce.com/bug-tracking"
  3. onclick="this.target='_blank'"><strong><?php echo $this->__('Report All Bugs') ?></strong></a>
  4. <?php echo $this->__('(ver. %s)', Mage::getVersion()) ?> <?php echo $this->getCopyright() ?></address>
  5. </div>


在footer部分你可以自由的包含所有你觉得合适的东西。由于我想不出其他比较聪明的方法在这里,我只包含了一些默认的内容。我们的核心元素就完成了,我们就可以继续创建在header部分其他比较小的功能块block比如面包屑、链接以及搜索功能等。

 

顶部链接

getChildHtml(‘topLinks’) 直接映射 page/html/template/links.phtml。我们的文件就是:

  1. <?php $_links = $this->getLinks(); ?>
  2. <?php if(count($_links)>0): ?>
  3. <ul<?php if($this->getName()): ?> id="<?php echo $this->getName() ?>"<?php endif;?>>
  4.     <?php foreach($_links as $_link): ?>
  5.         <li<?php if($_link->getIsFirst()||$_link->getIsLast()): ?><?php endif; ?> <?php echo $_link->getLiParams() ?>><?php echo $_link->getBeforeText() ?><a href="<?php echo $_link->getUrl() ?>" title="<?php echo $_link->getTitle() ?>" <?php echo $_link->getAParams() ?>><?php echo $_link->getLabel() ?></a> <?php echo $_link->getAfterText() ?></li>
  6.     <?php endforeach; ?>
  7. </ul>
  8. <?php endif; ?>


我知道这看起来有点复杂,但它只是遍历一个链接数组然后输出,而如果它是清单中的第一个或最后一个项目,就加上一个特殊的类。

 

面包屑

getChildHtml(‘breadcrumbs’) 直接映射 page/html/breadcrumbs.phtml。我们的文件就是:

  1. <?php if($crumbs && is_array($crumbs)): ?>
  2. <div id="breadcrumbs">
  3.         <?php foreach($crumbs as $_crumbName=>$_crumbInfo): ?>
  4.             <?php if($_crumbInfo['link']): ?>
  5.                 <a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this->htmlEscape($_crumbInfo['title']) ?>"><?php echo $this->htmlEscape($_crumbInfo['label']) ?></a>
  6.             <?php elseif($_crumbInfo['last']): ?>
  7.                 <strong><?php echo $this->htmlEscape($_crumbInfo['label']) ?></strong>
  8.             <?php else: ?>
  9.                 <?php echo $this->htmlEscape($_crumbInfo['label']) ?>
  10.             <?php endif; ?>
  11.             <?php if(!$_crumbInfo['last']): ?>
  12.                 <span>» </span>
  13.             <?php endif; ?>
  14.         <?php endforeach; ?>
  15. </div>
  16. <?php endif; ?>


搜索

getChildHtml(‘topSearch’)直接映射catalogsearch/form.mini.phtml。我们的文件就是:

  1. <div id="header-search">
  2.                 <form id="search_mini_form" action="<?php echo $this->helper('catalogsearch')->getResultUrl() ?>" method="get">
  3.         <input id="search" type="text" name="<?php echo $this->helper('catalogsearch')->getQueryParamName() ?>" value="<?php echo $this->helper('catalogsearch')->getEscapedQueryText() ?>" />
  4. </form>
  5. </div>


  • 2
  • 3,365 views
    A+
发布日期:2012年08月17日  所属分类:实用软件

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  2   博主  0

  1. 脚气好啦 4

    其实WP模板挺好做的,我看过利为汇的WP制作模板教程,觉得挺简单

  2. 长沙SEO 0

    基本主体框架详细具体