Magento主题开发：自举

最新推荐文章于 2020-07-10 08:05:17 发布

cunjie3951

最新推荐文章于 2020-07-10 08:05:17 发布

阅读量223

点赞数

文章标签： java python html web js ViewUI

在Magento主题开发系列的第二篇文章中，我们将建立新主题的基础。我们将设置新主题的基本目录结构，从Magento的默认响应主题继承它，将CSS，JS和图像放置在适当的位置，并为新主题创建一个新的local.xml文件以包括这些主题CSS和JS文件放入我们网站的标题中。因此，让我们开始吧。

创建一个新的主题文件夹结构

创建新的Magento主题的第一步是设置文件夹结构，我们可以在其中放置新的主题文件。我们需要将主题文件放在两个位置：

在app/design/frontend文件夹中，我们将在其中添加phtml和xml文件
在skin/frontend文件夹中，我们将在其中添加CSS，JS和与主题相关的图像文件

在我们开始在上述目录中创建新目录之前，最好先确定我们将要连续使用的两个名称。第一个将是我们程序包的名称-可以是您的公司名称，主题作者的名称或其他任何名称-第二个将是主题的名称。在本教程中，我们将使用“ tutsplus ”作为程序包名称，并使用“ vstyle ”作为主题名称。确定这两个名称后，让我们开始创建文件夹。

首先，让我们在应用程序和皮肤文件夹中创建以下路径：
[Magento Directory]/app/design/frontend/{package_name}/{theme_name}/
[Magento Directory]/skin/frontend/{package_name}/{theme_name}/

在我们的情况下，它将变为：
[Magento Directory]/app/design/frontend/tutsplus/vstyle/
[Magento Directory]/skin/frontend/tutsplus/vstyle/

创建这些文件夹后，让我们在app/design/frontend/tutsplus/vstyle目录中添加这四个文件夹：

布局
模板
地区
等等

而skin/frontend/tutsplus/vstyle文件夹中的这四个文件夹：

CSS
图片
js
字型

激活主题

现在让我们激活主题，看看外观如何。为此，转到系统>设置>设计 ，在“ 当前程序包名称”字段中输入“ tutsplus”，在“ 模板”字段中输入“ vstyle”，然后保存。现在，刷新我们商店的首页，您会发现整个页面混乱了。没关系; 我们将在下一步中通过从Magento的默认响应主题继承来使其工作。

遗产

在Magento 1.9之前，Magento没有子主题功能。我们曾经依靠Magento的后备模型来使用Magento的默认主题来处理许多功能。但值得庆幸的是，现在在Magento 1.9版中，我们可以将任何主题作为子主题，并且可以毫无问题地扩展其外观和功能。

在本教程中，我们将使新主题成为Magento RWD主题的子主题。为此，我们只需要在以下文件夹位置创建一个新的theme.xml文件： app/design/frontend/tutsplus/vstyle/etc

将此代码放在以下XML文件中：

<?xml version="1.0"?>
<theme>
    <parent>rwd/default</parent>
</theme>

现在，刷新Magento商店的首页，您将看到一个可以正常使用的网站。

该网站现在运行良好的原因是，我们现在已经从RWD主题继承了我们的新主题。这意味着，在渲染我们的新主题时，如果Magento在该新主题中找不到任何文件，它将转到Magento RWD主题中，如果找到该文件，Magento将使用它。

由于我们的新主题尚无任何文件，因此所有文件均从Magento的RWD主题中检索到，因此我们网站的当前外观与RWD主题相同。但是现在，我们可以通过在需要的地方创建我们自己的主题文件来灵活地编辑这些外观，所有其他文件都将从RWD主题继承。

使用此方法的另一个优点是，随着Magento版本的更新，Magento RWD主题也经常更新。这样，我们的主题将始终保留最新的Magento主题，以提供对最新功能和错误修复的支持。

放置CSS，JavaScript和图像文件

现在，我们将开始修改刚刚创建的这个新的子主题。为此，让我们首先将HTML站点中CSS，JS和图像文件复制到Magento商店中的此位置：

skin/frontend/tutsplus/vstyle/

如上所述，我们在此位置创建了三个文件夹，分别是js，images ， fonts和css 。将CSS，JS和图像文件放置在各自的文件夹中。

创建一个新的local.xml文件

仅将这些CSS和JS文件放置在那里，就不会在您的Magento网站中包含它们。为此，我们必须手动将它们添加到我们的Magento HTML的标题块中。

就本教程而言，我们将只创建一个XML文件，并将所有更改放入该文件中。我们将XML文件命名为local.xml，因为此文件在所有其他XML文件的末尾呈现，并且它还将覆盖其他XML文件的功能。我们将在以下文件夹位置创建此文件：

app/design/frontend/tutsplus/vstyle/layout

创建此文件后，我们将在此文件中添加以下代码，以将CSS和JS文件包含在我们的网站标题中。

<layout version="0.1.0">
    <default>

        <reference name="head">
            <!--Adding JS Files Styles-->
            <action method="addItem"><type>skin_js</type><name>js/bootstrap.min.js</name><params/></action>
            <action method="addItem"><type>skin_js</type><name>js/jquery.carouFredSel-6.2.1-packed.js</name><params/></action>
            <action method="addItem"><type>skin_js</type><name>js/jquery.easing.1.3.js</name><params/></action>
            <action method="addItem"><type>skin_js</type><name>js/jquery.elevatezoom.js</name><params/></action>
            <action method="addItem"><type>skin_js</type><name>js/jquery.flexslider.js</name><params/></action>
            <action method="addItem"><type>skin_js</type><name>js/owl.carousel.js</name><params/></action>
            <action method="addItem"><type>skin_js</type><name>js/jquery.sequence-min.js</name><params/></action>
            <action method="addItem"><type>skin_js</type><name>js/script.min.js</name><params/></action>

            <!--Adding CSS Files Styles-->
            <action method="addCss"><stylesheet>css/bootstrap.css</stylesheet><params/></action>
            <action method="addCss"><stylesheet>css/bootstrapTheme.css</stylesheet><params/></action>
            <action method="addCss"><stylesheet>css/font-awesome.min.css</stylesheet><params/></action>
            <action method="addCss"><stylesheet>css/flexslider.css</stylesheet><params/></action>
            <action method="addCss"><stylesheet>css/owl.carousel.css</stylesheet><params/></action>
            <action method="addCss"><stylesheet>css/owl.theme.css</stylesheet><params/></action>
            <action method="addCss"><stylesheet>css/sequence-looptheme.css</stylesheet><params/></action>
            <action method="addCss"><stylesheet>css/style.css</stylesheet><params/></action>
            <action method="addCss"><stylesheet>css/style8.css</stylesheet><params/></action>
        </reference>

    </default>
</layout>

让我逐步解释上面的代码。在布局（暗示此句柄与布局相关）和默认句柄（这将用于所有默认情况）下，我们创建了一个新块并将其引用为“ head”，这意味着这些更改将仅在“头”块。接下来，我们使用了两种操作方法分别添加CSS和JS文件。为了添加JS文件，我们使用了以下XML代码：
<action method="addItem"><type>skin_js</type><name>js/{javascript_file_name}.js</name><params/></action>

为了包括CSS文件，我们使用了以下XML代码：
<action method="addCss"><stylesheet>css/{css_file_name}.css</stylesheet><params/></action>

为确保这些CSS和JS文件实际上包含在我们的新主题中，请刷新商店的首页，然后按Control-U检查该页面的源代码。在头部的此处，您应该在这里看到新添加CSS和JS文件。单击每个链接，以确保它们链接到正确的文件，并且没有损坏的链接。

希望到现在，您已经开始看到网站外观的一些变化。我们刚刚开始编辑此主题。在本课程的下一篇文章中，我们将开始编辑页眉，页脚和其他模板页面的phtml文件。这就是我们现阶段的主题。

在下面的评论部分，让我们知道您是否能够按照说明进行操作。另外，如果您喜欢这篇文章，请告诉我。我们希望听到您的意见。

翻译自: https://code.tutsplus.com/articles/magento-theme-development-bootstrapping--cms-24590

cunjie3951

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Magento主题开发：自举

在Magento主题开发系列的第二篇文章中，我们将建立新主题的基础。我们将设置新主题的基本目录结构，从Magento的默认响应主题继承它，将CSS，JS和图像放置在适当的位置，并为新主题创建一个新的local.xml文件以包括这些主题CSS和JS文件放入我们网站的标题中。因此，让我们开始吧。创建一个新的主题文件夹结构创建新的Magento主题的第一步是设置文件夹结构，我们可以在其中...
复制链接

扫一扫