正如我们在上一篇引导文章中所设定的那样,现在是时候真正地深入研究代码并开始进行更改了。 显而易见的选择是,我们将从首页开始编辑过程。
在第一篇文章中,我们将部分编辑标题部分。 我们将编辑默认的包装器文件和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