Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Dismiss
Advertisement
  1. Code
  2. Magento

การพัฒนาธีมระบบมาเจนโต้ : การปรับแต่ง หน้าแรก ตอนที่ 1

by
Length:MediumLanguages:
MagentoCMSWeb DevelopmentHTMLPHP
This post is part of a series called Magento Theme Development.
Magento Theme Development: Bootstrapping
Magento Theme Development: Home Page, Part 2

Thai (ภาษาไทย) translation by Artapon Rittirote (you can also view the original English article)

บทความก่อนหน้า "การพัฒนาธีมระบบมาเจนโต้ด้วย Bootstrap" เราได้พัฒนาธีมเตรียมไว้บางส่วนแล้ว ในบทความนี้ผู้เขียนจะสอนการปรับแต่ง หน้าแรกของธีมเพิ่มเติม ซึ่งจะลงรายละเอียดที่ลึกกว่าเดิมและใช้คำสั่งที่ยากขึ้น มากกว่าบทความที่ผ่านๆ มา

ก่อนอื่น ผู้เขียนขออธิบายทบทวนก่อนว่า ในบทความที่ผ่านๆมา ผู้เขียนได้สอนอะไรไปบ้างแล้ว ย้อนกลับไปบทความแรก ผู้เขียนได้สอนการปรับแต่ง แก้ไขไฟล์เลย์เอ้าท์หลัก และ ไฟล์ header.phtml เพียงบางส่วน บทความต่อมา ผู้สอนได้สอนการปรับแต่งส่วนประกอบอื่นๆ เพิ่มเติม เช่น ตัวเลือกค่าเงิน  ตัวเปลี่ยนภาษา ฯลฯ

ก่อนที่จะเริ่มการพัฒนาธีม ให้ผู้อ่านเข้าไปที่ระบบจัดการเพื่อเปิด ฟังก์ชั่นสำหรับแสดงโครงสร้างของธีม โดยเข้าไปที่ System > Developer > Debug และ ผู้อ่านต้องแน่ใจว่า กำลังเปิดใช้งานการตั้งค่านี้ ที่ เว็บไซต์หลัก เท่านั้น เมื่อฟังก์ชั่นสำหรับแสดงโครงสร้างของธีมถูกเปิด จะปรากฎกล่องสีแดงขึ้นมา ตามภาพที่แสดงด้านล่าง

Homepage with template hints

ผู้อ่านจะเห็นว่า กล่องสีแดงที่แสดงแบ่งสัดส่วนกันอย่างชัดเจน ช่วยให้เห็นโครงสร้างและจัดการหน้าเพจได้ง่ายมากขึ้น จากนั้นให้ผู้อ่านเปิดโฟลเดอร์จนกว่าจะเห็นไฟล์ 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 และ ปรับแก้ตามที่คุณต้องการ

ภาพด้านล่างเป็นหน้าตาของเว็บไซต์หลังจากทำการแก้ไขไฟล์ต่างๆ ไปแล้ว ผู้อ่านจะสังเกตุว่าหน้าตาของเว็บไซต์ ยังไม่เปลี่ยนแปลงมากนัก แต่ผู้อ่านไม่ต้องตกใจ เราจะทำการแก้ไขเพิ่มเติมในขั้นตอนต่อไป

Homepage with wrapper files modified

ต่อไปเราจะทำการแก้ไขไฟล์ 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 เสร็จเรียบร้อยแล้ว

Afer editing headerphtml file

ถึงตรงนี้คุณจะเห็นว่า ยังมีส่วนอื่นที่ต้องทำการแก้ไขเพิ่มเติม เช่น ตัวเลือกในการเปลี่ยนภาษา , ตัวเลือกเปลี่ยนค่าเงิน , ภาพสไลด์เดอร์ , เมนู , ช่องค้นหา ฯลฯ โดยเราจะเริ่มจากแก้ไขตัวเลือกเปลี่ยนค่าเงินและเปลี่ยนภาษา เพื่อความสะดวกในการแก้ไข ผู้เขียนแนะนำให้เปิดใช้งาน ตัวแสดงโครงสร้างขอเทมเพลต (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 หลังจากแก้ไขและบันทึกแล้ว ผู้อ่านจะเห็นความเปลี่ยนแปลงไปตามรูปด้านล่าง 

Header at the end

ถ้าผู้อ่านทำตามขั้นตอนได้อย่างถูกต้อง ผู้อ่านจะได้ธีมที่มีหน้าตา ตามรูปที่แสดงด้านบน  สำหรับบทความนี้ ผู้เขียนขอหยุดไว้เท่านี้ก่อน ในบทความต่อไป เราจะปรับแต่งส่วนหัวของธีมเพิ่มเติม และ ปรับแต่งในส่วน ภาพสไลด์เดอร์ (Slider) ด้วย

กรุณาบอกประโยชน์ที่ได้รับจากบทความนี้ให้ผู้เขียนได้ทราบ ผ่านคอมเม้น ด้านล่าง

Advertisement
Advertisement
Anwar Haq
Anwar Haq
I'm a US based technology writer and Web developer. I also create Website Themes on Themeforest and offer web development services on my own site, webdezyner.com. You can find me on Twitter and Google+.
Weekly email summary

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.

Advertisement
Translations

Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!

Translate this post
Powered by
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.
WordPress Plugins
From $5
PHP Scripts
From $5
JavaScript
From $3
Mobile App Templates
From $5
Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato Elements.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.
Quick LinksExplore popular categories