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) ด้วย
กรุณาบอกประโยชน์ที่ได้รับจากบทความนี้ให้ผู้เขียนได้ทราบ ผ่านคอมเม้น ด้านล่าง
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post