Thai (ภาษาไทย) translation by Artapon Rittirote (you can also view the original English article)
บทความก่อนหน้า "การพัฒนาธีมระบบมาเจนโต้ด้วย Bootstrap" เราได้พัฒนาธีมเตรียมไว้บางส่วนแล้ว ในบทความนี้ผู้เขียนจะสอนการปรับแต่ง หน้าแรกของธีมเพิ่มเติม ซึ่งจะลงรายละเอียดที่ลึกกว่าเดิมและใช้คำสั่งที่ยากขึ้น มากกว่าบทความที่ผ่านๆ มา
ก่อนอื่น ผู้เขียนขออธิบายทบทวนก่อนว่า ในบทความที่ผ่านๆมา ผู้เขียนได้สอนอะไรไปบ้างแล้ว ย้อนกลับไปบทความแรก ผู้เขียนได้สอนการปรับแต่ง แก้ไขไฟล์เลย์เอ้าท์หลัก และ ไฟล์ header.phtml เพียงบางส่วน บทความต่อมา ผู้สอนได้สอนการปรับแต่งส่วนประกอบอื่นๆ เพิ่มเติม เช่น ตัวเลือกค่าเงิน ตัวเปลี่ยนภาษา ฯลฯ
ก่อนที่จะเริ่มการพัฒนาธีม ให้ผู้อ่านเข้าไปที่ระบบจัดการเพื่อเปิด ฟังก์ชั่นสำหรับแสดงโครงสร้างของธีม โดยเข้าไปที่ System > Developer > Debug และ ผู้อ่านต้องแน่ใจว่า กำลังเปิดใช้งานการตั้งค่านี้ ที่ เว็บไซต์หลัก เท่านั้น เมื่อฟังก์ชั่นสำหรับแสดงโครงสร้างของธีมถูกเปิด จะปรากฎกล่องสีแดงขึ้นมา ตามภาพที่แสดงด้านล่าง
ผู้อ่านจะเห็นว่า กล่องสีแดงที่แสดงแบ่งสัดส่วนกันอย่างชัดเจน ช่วยให้เห็นโครงสร้างและจัดการหน้าเพจได้ง่ายมากขึ้น จากนั้นให้ผู้อ่านเปิดโฟลเดอร์จนกว่าจะเห็นไฟล์ 1column.phtml ตามตัวอย่างพาธ frontend/rwd/default/template/page/1column.phtml และเพื่อหลีกเลี่ยงการแก้ไขไฟล์ .phtml ในธีม RWD โดยตรง เราจะอาศัยความสามารถ "การสืบทอดคุณสมบัติ" จากธีมอื่นของระบบมาเจนโต้ โดยเราจะทำการ "สร้างโฟลเดอร์ page " ในธีมใหม่ให้ให้ตรงกับตำแหน่งโฟลเดอร์ของธีมที่เราสืบทอดมา ตัวอย่างพาธ frontend/tutsplus/vstyle/template/page จากนั้นให้เราคัดลอกไฟล์ .phtml จากโฟลเดอร์ page ของธีม RWD มายัง โฟลเดอร์ page ในธีมที่เราสร้างใหม่ ไฟล์ที่อยู่ในโฟลเดอร์ page ตามพาธ frontend/rwd/default/template/page จะประกอบไปด้วย 1column.phtml, 2column-left.phtml, 2column-right.phtml และ 3column.phtml หลังจากที่คัดลอกไฟล์ทั้งหมดเสร็จเรียบร้อยแล้ว ให้ผู้อ่านเปิดไฟล์ 1column.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>
ต่อจากนี้เราจะทำการปรับแต่งคำสั่งด้านบนให้มีโครงสร้างเหมือนกับธีม HTML ต้นฉบับ โดยเราจะทำการเพิ่ม คลาสชื่อว่า คอนเทรนเนอร์ และเพิ่มคำสั่ง 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>
กรุณาแก้ไขไฟล์อย่างระมัดระวัง เมื่อคุณเปรียบเทียบไฟล์ที่กำลังแก้ไขกับไฟล์ index.html และ ปรับแก้ตามที่คุณต้องการ
ภาพด้านล่างเป็นหน้าตาของเว็บไซต์หลังจากทำการแก้ไขไฟล์ต่างๆ ไปแล้ว ผู้อ่านจะสังเกตุว่าหน้าตาของเว็บไซต์ ยังไม่เปลี่ยนแปลงมากนัก แต่ผู้อ่านไม่ต้องตกใจ เราจะทำการแก้ไขเพิ่มเติมในขั้นตอนต่อไป
ต่อไปเราจะทำการแก้ไขไฟล์ header.phtml ก่อนที่จะเริ่มให้แก้ไข ให้ผู้อ่านเปิดไปยังตำแหน่งโฟลเดอร์ในธีม RWD ตามพาธ 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 เสร็จเรียบร้อยแล้ว
ถึงตรงนี้คุณจะเห็นว่า ยังมีส่วนอื่นที่ต้องทำการแก้ไขเพิ่มเติม เช่น ตัวเลือกในการเปลี่ยนภาษา , ตัวเลือกเปลี่ยนค่าเงิน , ภาพสไลด์เดอร์ , เมนู , ช่องค้นหา ฯลฯ โดยเราจะเริ่มจากแก้ไขตัวเลือกเปลี่ยนค่าเงินและเปลี่ยนภาษา เพื่อความสะดวกในการแก้ไข ผู้เขียนแนะนำให้เปิดใช้งาน ตัวแสดงโครงสร้างขอเทมเพลต (template hints) เพื่อให้รู้ตำแหน่งไฟล์ที่ต้องการแก้ไข เมื่อผู้อ่านเปิดใช้งานแล้วจะพบว่าตำแหน่งไฟล์ที่เราจะคัดลอกคำสั่งไปยังธีมใหม่อยู่ที่ base/default/template/page/switch/languages.phtml จากนั้นให้ผู้อ่านทำการแปลงคำสั่งจากไฟล์ต้นฉบับ languages.phtml ให้เข้ากับโครงสร้าง HTML ในเทมเพลตของเรา
<?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; ?>
หลังจากแก้ไขเสร็จเรียบร้อยแล้ว ผู้อ่านจะเห็นว่าตอนนี้ปุ่มเปลี่ยนภาษาของเรายังไม่ขึ้น ผู้อ่านต้องเข้าไปที่่ระบบจัดการเว็บ จากนั้นเข้าไปที่เมนู System > Configuration > General > Currency Setup และเปิดใช้งานบางภาษา ต่อไปเข้าไปที่ Manage Currency > Rates เพื่อตั้งค่าของเงิน เมื่อผู้อ่านกลับไปหน้าแรกจะเห็นว่าตัวเลือกสำหรับเปลี่ยนค่าเงินสามารถใช้งานได้แล้ว จากนั้นทำการเปิดใช้งานส่วนแสดงโครงสร้างเทมเพลตอีกครั้ง ผู้อ่านจะเห็นตำแหน่งไฟล์ในธีม RWD ที่เราต้องคัดลอกนำมาไว้ในธีมใหม่ของเราคือ 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 เทลมเพลตที่เราออกแบบไว้ ( สำหรับไฟล์ HTML เทมเพลต ผู้อ่านสามารถดาวน์โหลดไฟล์ต้นฉบับ ได้จาก บทความ "Magento Theme Development: Getting Started" ) วิธีการแก้ไข ให้ผู้อ่านเข้าไปที่เมนู System > Configuration > General > Design > Header และแก้ไขคำในช่อง Welcome Text หลังจากแก้ไขและบันทึกแล้ว ผู้อ่านจะเห็นความเปลี่ยนแปลงไปตามรูปด้านล่าง
ถ้าผู้อ่านทำตามขั้นตอนได้อย่างถูกต้อง ผู้อ่านจะได้ธีมที่มีหน้าตา ตามรูปที่แสดงด้านบน สำหรับบทความนี้ ผู้เขียนขอหยุดไว้เท่านี้ก่อน ในบทความต่อไป เราจะปรับแต่งส่วนหัวของธีมเพิ่มเติม และ ปรับแต่งในส่วน ภาพสไลด์เดอร์ (Slider) ด้วย
กรุณาบอกประโยชน์ที่ได้รับจากบทความนี้ให้ผู้เขียนได้ทราบ ผ่านคอมเม้น ด้านล่าง
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
