Magento主题开发：主页，第1部分

最新推荐文章于 2023-03-28 23:11:03 发布

cunjie3951

最新推荐文章于 2023-03-28 23:11:03 发布

阅读量186

点赞数

文章标签： java git 抽象类 refactoring wordpress

正如我们在上一篇引导文章中所设定的那样，现在是时候真正地深入研究代码并开始进行更改了。显而易见的选择是，我们将从首页开始编辑过程。

在第一篇文章中，我们将部分编辑标题部分。我们将编辑默认的包装器文件和header.phtml文件，然后开始编辑header的不同组成部分，例如货币，语言选择器等。因此，事不宜迟，我们将开始编辑过程。

首先，我们将在管理面板中启用模板提示 ，方法是转到“ 系统”>“开发人员”>“调试” ，同时确保“ 当前配置范围”设置为“ 主网站”。 通过启用模板提示，我们将知道哪个模板负责标题样式。这是打开模板提示时主页的外观。

如您所见，其中包含所有其他文件的最外层包装来自于RWD主题的frontend/rwd/default/template/page/1column.phtml ，因为我们已经从该默认主题继承了主题主题。无需直接在RWD主题中编辑此文件，我们将在以下位置的vstyle主题中创建一个类似的文件夹： frontend/tutsplus/vstyle/template/page 。然后，我们将这些文件复制到该文件夹中，然后在其中进行编辑。因此，我们将转到frontend/rwd/default/template/page目录，并将1column.phtml ， 2column-left.phtml ， 2column-right.phtml和3column.phtml到此新创建的文件夹中。

如果我们看一下1-column.phtml的代码，则是这样的：

<!DOCTYPE html>

<!--[if lt IE 7 ]> <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js"> <!--<![endif]-->

<head>
<?php echo $this->getChildHtml('head') ?>
</head>
<body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('after_body_start') ?>
<div class="wrapper">
    <?php echo $this->getChildHtml('global_notices') ?>
    <div class="page">
        <?php echo $this->getChildHtml('header') ?>
        <div class="main-container col1-layout">
            <div class="main">
                <?php echo $this->getChildHtml('breadcrumbs') ?>
                <div class="col-main">
                    <?php echo $this->getChildHtml('global_messages') ?>
                    <?php echo $this->getChildHtml('content') ?>
                </div>
            </div>
        </div>
        <?php echo $this->getChildHtml('footer_before') ?>
        <?php echo $this->getChildHtml('footer') ?>
        <?php echo $this->getChildHtml('global_cookie_notice') ?>
        <?php echo $this->getChildHtml('before_body_end') ?>
    </div>
</div>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>

现在，我们必须对其进行修改以匹配index.html文件，因此我们将使用我们的body和container类，并添加一些额外的div，编辑后的代码将如下所示：

<!DOCTYPE html>
<html>

<head>
    <?php echo $this->getChildHtml('head') ?>
</head>
<body id="home" <?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('after_body_start') ?>

<div class="wrapper">
    <?php echo $this->getChildHtml('global_notices') ?>

    <?php echo $this->getChildHtml('header') ?>

    <div class="container_fullwidth">
        <div class="container">
            <?php echo $this->getChildHtml('global_messages') ?>
            <?php echo $this->getChildHtml('content') ?>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="footer">
        <?php echo $this->getChildHtml('footer_before') ?>
        <?php echo $this->getChildHtml('footer') ?>
        <?php echo $this->getChildHtml('global_cookie_notice') ?>
        <?php echo $this->getChildHtml('before_body_end') ?>
    </div>
</div>

<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>

同样，我们还将编辑2column-left.phtml ， 2column-right.phtml和3column.phtml文件。这就是修改后的代码对2-column-left.phtml ：

<!DOCTYPE html>
<html>

<head>
    <?php echo $this->getChildHtml('head') ?>
</head>
<body id="home" <?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('after_body_start') ?>

<div class="wrapper">
    <?php echo $this->getChildHtml('global_notices') ?>

    <?php echo $this->getChildHtml('header') ?>

    <div class="container_fullwidth">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <?php echo $this->getChildHtml('left') ?>
                </div>
                <div class="col-md-9">
                    <?php echo $this->getChildHtml('global_messages') ?>
                    <?php echo $this->getChildHtml('content') ?>
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="footer">
        <?php echo $this->getChildHtml('footer_before') ?>
        <?php echo $this->getChildHtml('footer') ?>
        <?php echo $this->getChildHtml('global_cookie_notice') ?>
        <?php echo $this->getChildHtml('before_body_end') ?>
    </div>
</div>

<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>

接下来， 2columns-right.phtml在编辑后将如下所示：

<!DOCTYPE html>
<html>

<head>
    <?php echo $this->getChildHtml('head') ?>
</head>
<body id="home" <?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('after_body_start') ?>

<div class="wrapper">
    <?php echo $this->getChildHtml('global_notices') ?>

    <?php echo $this->getChildHtml('header') ?>

    <div class="container_fullwidth">
        <div class="container">
            <div class="row">
                <div class="col-md-9">
                    <?php echo $this->getChildHtml('global_messages') ?>
                    <?php echo $this->getChildHtml('content') ?>
                </div>
                <div class="col-md-3">
                    <?php echo $this->getChildHtml('right') ?>
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="footer">
        <?php echo $this->getChildHtml('footer_before') ?>
        <?php echo $this->getChildHtml('footer') ?>
        <?php echo $this->getChildHtml('global_cookie_notice') ?>
        <?php echo $this->getChildHtml('before_body_end') ?>
    </div>
</div>

<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>

最后，我们将像这样编辑3columns.phtml ：

<!DOCTYPE html>
<html>

<head>
    <?php echo $this->getChildHtml('head') ?>
</head>
<body id="home" <?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('after_body_start') ?>

<div class="wrapper">
    <?php echo $this->getChildHtml('global_notices') ?>

    <?php echo $this->getChildHtml('header') ?>

    <div class="container_fullwidth">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <?php echo $this->getChildHtml('left') ?>
                </div>
                <div class="col-md-6">
                    <?php echo $this->getChildHtml('global_messages') ?>
                    <?php echo $this->getChildHtml('content') ?>
                </div>
                <div class="col-md-3">
                    <?php echo $this->getChildHtml('right') ?>
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="footer">
        <?php echo $this->getChildHtml('footer_before') ?>
        <?php echo $this->getChildHtml('footer') ?>
        <?php echo $this->getChildHtml('global_cookie_notice') ?>
        <?php echo $this->getChildHtml('before_body_end') ?>
    </div>
</div>

<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>

仔细查看我们在这些模板文件中所做的更改。当您将其与我们HTML网站的index.html文件进行比较时，这对您很有意义。

这是网站编辑这些文件后的外观。您不会看到太大的差异，但是我们正在朝着正确的方向前进。

接下来，我们将编辑header.phtml文件，因为我们可以看到该文件具有header部分的包装内容。因此，我们将复制frontend/rwd/default/template/page/html/header.phtml文件，将其移至frontend/tutsplus/vstyle/template/page/html文件夹，然后开始进行编辑。当前，其代码如下所示：

<div class="header-language-background">
    <div class="header-language-container">
        <div class="store-language-container">
            <?php echo $this->getChildHtml('store_language') ?>
        </div>

        <?php echo $this->getChildHtml('currency_switcher') ?>

        <p class="welcome-msg"><?php echo $this->getChildHtml('welcome') ?> <?php echo $this->getAdditionalHtml() ?></p>
    </div>
</div>

<header id="header" class="page-header">
    <div class="page-header-container">
        <a class="logo" href="<?php echo $this->getUrl('') ?>">
            <img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" class="large" />
            <img src="<?php echo $this->getLogoSrcSmall() ?>" alt="<?php echo $this->getLogoAlt() ?>" class="small" />
        </a>

        <?php // In order for the language switcher to display next to logo on smaller viewports, it will be moved here.
              // See app.js for details ?>
        <div class="store-language-container"></div>

        <!-- Skip Links -->

        <div class="skip-links">
            <a href="#header-nav" class="skip-link skip-nav">
                <span class="icon"></span>
                <span class="label"><?php echo $this->__('Menu'); ?></span>
            </a>

            <a href="#header-search" class="skip-link skip-search">
                <span class="icon"></span>
                <span class="label"><?php echo $this->__('Search'); ?></span>
            </a>

            <div class="account-cart-wrapper">
                <a href="<?php echo $this->helper('customer')->getAccountUrl(); ?>" data-target-element="#header-account" class="skip-link skip-account">
                    <span class="icon"></span>
                    <span class="label"><?php echo $this->__('Account'); ?></span>
                </a>

                <!-- Cart -->

                <div class="header-minicart">
                    <?php echo $this->getChildHtml('minicart_head'); ?>
                </div>
            </div>


        </div>

        <!-- Navigation -->

        <div id="header-nav" class="skip-content">
            <?php echo $this->getChildHtml('topMenu') ?>
        </div>

        <!-- Search -->

        <div id="header-search" class="skip-content">
            <?php echo $this->getChildHtml('topSearch') ?>
        </div>

        <!-- Account -->

        <div id="header-account" class="skip-content">
            <?php echo $this->getChildHtml('topLinks') ?>
        </div>
    </div>
</header>


<?php echo $this->getChildHtml('topContainer'); ?>

我们将其与HTML的标头部分进行比较，并开始对其进行以下更改：

<div class="header">
    <div class="container">
      <div class="row">
          <div class="col-md-12 col-sm-10">
          <div class="phoneNum pull-left">
          	<p>Call us now! 0800-123-456-78</p>
          </div>    
          <div class="header_top">
            <div class="row">
              <ul class="option_nav">
                  <li class="dropdown"><a href="checkout.html" class="log"><img src="images/language.jpg" alt=""></a>
                    <ul class="subnav">
                      <li><a href="#">Eng</a></li>
                      <li><a href="#">Vns</a></li>
                      <li><a href="#">Fer</a></li>
                      <li><a href="#">Gem</a></li>
                    </ul>
                  </li>
                  <li class="dropdown"><a href="checkout.html" class="log"><img src="images/doller.jpg" alt=""></a>
                    <ul class="subnav">
                      <li><a href="#">USD</a></li>
                      <li><a href="#">UKD</a></li>
                      <li><a href="#">FER</a></li>
                    </ul>
                  </li>
                </ul>
              <ul class="usermenu">
                  <li><a href="checkout.html" class="log"><img src="images/user.jpg" alt=""></a></li>
              </ul>
              <ul class="option">
                  <li class="option-cart"><a href="#" class="cart-icon">cart <!--<span class="cart_no">02</span>--></a>
                <ul class="option-cart-item">
                  <li>
                    <div class="cart-item">
                      <div class="image"><img src="images/products/thum/products-01.png" alt=""></div>
                      <div class="item-description">
                        <p class="name">Lincoln chair</p>
                        <p>Size: <span class="light-red">One size</span><br>
                          Quantity: <span class="light-red">01</span></p>
                      </div>
                      <div class="right">
                        <p class="price">$30.00</p>
                        <a href="#" class="remove"><img src="images/remove.png" alt="remove"></a></div>
                    </div>
                  </li>
                  <li>
                    <div class="cart-item">
                      <div class="image"><img src="images/products/thum/products-02.png" alt=""></div>
                      <div class="item-description">
                        <p class="name">Lincoln chair</p>
                        <p>Size: <span class="light-red">One size</span><br>
                          Quantity: <span class="light-red">01</span></p>
                      </div>
                      <div class="right">
                        <p class="price">$30.00</p>
                        <a href="#" class="remove"><img src="images/remove.png" alt="remove"></a></div>
                    </div>
                  </li>
                  <li><span class="total">Total <strong>$60.00</strong></span>
                    <button class="checkout" onClick="location.href='checkout.html'">CheckOut</button>
                  </li>
                </ul>
              </li>
            </ul>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

我们将将此HTML插入header.phtml文件中，并用相关的动态模板标签（例如货币切换器，商店语言，徽标，菜单，搜索栏等）替换差异部分。这是这些编辑后代码的样子：

<div class="header">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-10">
                <div class="phoneNum pull-left">
                    <p><?php echo $this->getChildHtml('welcome') ?> <?php echo $this->getAdditionalHtml() ?></p>
                </div>
                <div class="header_top">
                    <div class="row">
                        <ul class="option_nav">
                                <?php echo $this->getChildHtml('currency_switcher') ?>
                                <?php echo $this->getChildHtml('store_language') ?>
                        </ul>
                        <ul class="usermenu">
                            <li><a href="<?php echo Mage::getUrl('customer/account'); ?>" class="log"><img src="<?php echo $this->getSkinUrl('images/user.jpg'); ?>" alt=""></a></li>
                        </ul>
                        <ul class="option">
                            <li class="option-cart">
                                <?php echo $this->getChildHtml('minicart_head'); ?>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<div class="logoContainer">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-sm-2">
                <div class="logoBox">
                    <a class="logo" href="<?php echo $this->getUrl('') ?>">
                        <img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" class="large" />
                        <img src="<?php echo $this->getLogoSrcSmall() ?>" alt="<?php echo $this->getLogoAlt() ?>" class="small" />
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="menu">
    <div class="container">
        <div class="row">
            <div class="col-md-9 col-sm-10">
                <div id="header-nav" class="skip-content">
                    <?php echo $this->getChildHtml('topMenu') ?>
                </div>
            </div>
            <div class="col-md-3 col-sm-2">
                <div class="search">
                    <div id="header-search" class="skip-content">
                        <?php echo $this->getChildHtml('topSearch') ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<?php echo $this->getChildHtml('topContainer'); ?>

编辑header.phtml文件后，标题部分的外观如下：

现在您可以看到，我们需要修改正在使用的不同部分的代码，例如语言和货币选择器，滑块，菜单，搜索栏等。首先，我们将编辑货币和语言选择器。如果再次启用模板提示，我们可以看到语言选择器部分来自base/default/template/page/switch/languages.phtml ，因此我们将文件复制到相同位置的主题中，然后开始编辑它以匹配我们HTML代码。原始的languages.phtml文件如下所示：

<?php if(count($this->getStores())>1): ?>
<div class="form-language">
    <label for="select-language"><?php echo $this->__('Your Language:') ?></label>
    <select id="select-language" title="<?php echo $this->__('Your Language') ?>" onchange="window.location.href=this.value">
    <?php foreach ($this->getStores() as $_lang): ?>
        <?php $_selected = ($_lang->getId() == $this->getCurrentStoreId()) ? ' selected="selected"' : '' ?>
        <option value="<?php echo $_lang->getCurrentUrl() ?>"<?php echo $_selected ?>><?php echo $this->escapeHtml($_lang->getName()) ?></option>
    <?php endforeach; ?>
    </select>
</div>
<?php endif; ?>

语言和货币选择器的原始HTML代码如下所示：

<ul class="option_nav">
                  <li class="dropdown"><a href="checkout.html" class="log"><img src="images/language.jpg" alt=""></a>
                    <ul class="subnav">
                      <li><a href="#">Eng</a></li>
                      <li><a href="#">Vns</a></li>
                      <li><a href="#">Fer</a></li>
                      <li><a href="#">Gem</a></li>
                    </ul>
                  </li>
                  <li class="dropdown"><a href="checkout.html" class="log"><img src="images/doller.jpg" alt=""></a>
                    <ul class="subnav">
                      <li><a href="#">USD</a></li>
                      <li><a href="#">UKD</a></li>
                      <li><a href="#">FER</a></li>
                    </ul>
                  </li>
                </ul>

在我们修改languages.phtml以匹配HTML之后，它将如下所示：

<?php if(count($this->getStores())>1): ?>
<li class="dropdown">
    <a href="#" class="log"><img src="<?php echo $this->getSkinUrl('images/doller.jpg'); ?>" alt=""></a>
    <ul class="subnav">
        <?php foreach ($this->getStores() as $_lang): ?>
            <li>
                <a href="<?php echo $_lang->getCurrentUrl() ?>">
                    <?php
                        $langName = $this->escapeHtml($_lang->getName());
                        $langName = substr("$langName", 0, 3);
                        $langName = strtoupper($langName);
                        echo $langName;
                    ?>
                </a>
            </li>
        <?php endforeach; ?>
    </ul>
</li>
<?php endif; ?>

如您所见，货币选择器暂时没有出现在我们的网站上。我们必须首先从管理面板启用货币选择器。在系统>配置>常规>货币设置中 ，您必须首先启用某些语言，然后在系统>管理货币>汇率中设置货币汇率。然后，您会看到您的网站上启用了货币选择器。通过再次启用模板提示，我们可以看到其模板为rwd/default/template/directory/currency.phtml ，并且其当前代码如下所示：

<?php if($this->getCurrencyCount()>1): ?>
<div class="currency-switcher">
    <label for="select-currency"><?php echo $this->__('Your Currency:') ?></label>
    <select id="select-currency" name="currency" title="<?php echo $this->__('Your Currency') ?>" onchange="setLocation(this.value)">
        <?php foreach ($this->getCurrencies() as $_code => $_name): ?>
        <option value="<?php echo $this->getSwitchCurrencyUrl($_code) ?>"<?php if($_code==$this->getCurrentCurrencyCode()): ?> selected="selected"<?php endif; ?>>
            <?php echo $_name ?> - <?php echo $_code ?>
        </option>
    <?php endforeach; ?>
    </select>
</div>
<?php endif; ?>

我们将对其进行编辑以匹配我们HTML，因此修改后的代码将如下所示：

<?php if($this->getCurrencyCount()>1): ?>
    <li class="dropdown">
        <a href="#" class="log"><img src="<?php echo $this->getSkinUrl('images/language.jpg'); ?>" alt=""></a>
        <ul class="subnav">
            <?php foreach ($this->getCurrencies() as $_code => $_name): ?>
                <li>
                    <a href="<?php echo $this->getSwitchCurrencyUrl($_code) ?>">
                        <?php echo $_code ?>
                    </a>
                </li>
            <?php endforeach; ?>
        </ul>
    </li>
<?php endif; ?>

接下来，我们将编辑欢迎信息以匹配我们HTML设计。为此，我们必须转到系统>配置/常规/设计/标题/欢迎文本 。编辑后，标题将如下所示：

如果正确执行了所有步骤，希望您可以在首页的外观中看到很多进步。现在，我们已经部分编辑了标题部分，我们将继续在下一篇文章中编辑标题部分，并且还将在该文章中编辑主滑块。

请在评论部分中说明您的经历！

翻译自: https://code.tutsplus.com/articles/magento-theme-development-home-page-part-1--cms-24626

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Magento主题开发：主页，第1部分

正如我们在上一篇引导文章中所设定的那样，现在是时候真正地深入研究代码并开始进行更改了。显而易见的选择是，我们将从首页开始编辑过程。在第一篇文章中，我们将部分编辑标题部分。我们将编辑默认的包装器文件和header.phtml文件，然后开始编辑header的不同组成部分，例如货币，语言选择器等。因此，事不宜迟，我们将开始编辑过程。首先，我们将在管理面板中启用模板提示，方法是转到“...
复制链接

扫一扫