Magento 模板制作(3)新建基础模板及其文件的添加、修改

对主题的建立有了大概的了解后,接下来就是对模板的建立进行讲解,关于Magento模板文件结构之间的关系,会在主题建立的过程中遇到的时候再进行讲解;不动手操作,一味的讲理论是不实际的,当您做完一个主题,再回头来看相关理论知识,很多疑惑便都可以得到解答。

新建一个模板,挑选一个原有的简洁的模板做为基础模板即可,最好选blank模板,这个模板很简洁,几乎没有多余的图片、样式等东西;至于其他原有的模板,可以在以后拿来作参考用,如果这些模板有很多是你会用到的,那么挑一个接近你理想模板的一个来作为基础模板也可以。选择blank模板的话,当完成模板后,您学到的东西就会更多。

首先,到目录…\app\design\frontend\default 里头,复制文件夹blank并重命名为你自己的模板名称(如imweb等),添加后路径为:…\app\design\frontend\default\imweb;同样的,到目录…\skin\frontend\default 里头,复制文件夹blank并重命名为你自己的模板名称,添加后路径为:\skin\frontend\default\imweb。接下来的模板制作,就是围绕这两个目录来进行了。

建立好基础模板,需要到后台进行指定,这样才能在前台正常显示。登陆后台,进入System->Configuration->Design,在Themes->Default里填写imweb后点击保存即可,见下图:

mb3

!在模板制作之前,先到后台关闭缓存,以方便以后文件修改后页面的正常显示。登陆后台,进入 System->Cache Management,选择 Select All 和 Action:Disable 然后提交 Submit, Status 显示 DISABLED 即可。

在新模板imweb里,没有相关的模板文件(.phtml、.xml),页面获取的是默认路径: …\app\design\frontend\base\default 里的模板文件;也就是说,Magento系统指定模板里没有的文件,系统会获取默认模板路径里的文件;换句话说,如果要修改相应的模板文件,只需按照base里头的文件一样的目录复制一份出来到imweb里头修改即可(切记不要直接在base里边修改文件,避免出现问题无法恢复)。按照目录结构,先在…\app\design\frontend\default\imweb里添加文件夹layout、template,在后边会用到;而\skin\frontend\default\imweb目录里,后边经常会修改到的是css\styles.css文件。

下面以头部样式修改为例:
如何找到头部(header)部分的页面是受那些文件控制的呢?登陆后台,进入System-> Configuration->Developer点击, 然后在Current Configuration Scope:选择当前的商店(如选择English),接着,把右边Debug->Template Path Hints的No改为Yes并保存,见下图:

mb4

现在回到前台并刷新,会看到首页页面各个部分的文件包含的路径,见下图:

mb5

安装路径显示,页面头部包含在frontend\base\default\template\page/html/header.phtml文件里,这样,我们只需要把…\app\design\frontend\base\default\ template\page\html里的header.phtml按照一样的目录路径复制一份为:…\app\design\frontend\default\imweb\ template\page\html\header.phtml即可编辑修改(这里切记不要把所有文件复制过来,只需要复制修改会用到的文件即可)。

知道了哪些文件控制哪些页面部位,就可以根据需要修改相应的代码来实现。如在header.phtml里加一句<?php echo (‘This is header~’)?>,即可以在页面头部看到(如下图)效果,这里基本会需要用到php语言、html语言。

mb6

相关文章

发表评论

Free WordPress Themes