สอนเขียน WordPress Theme ฉบับมือใหม่ตอนที่ 3 – สร้าง Layout สำหรับ Header, Footer และ Sidebar

เอาหล่ะครับหลังจากที่เราทราบโครงสร้างของการจัดวางไฟล์ในการสร้าง WordPress Theme กันแล้วนะครับ บทความนี้เราจะมาลุยกันต่อในการสร้าง Layout กันเลยครับ เพราะว่าปกติทั่วไปแล้วงานออกแบบหรือพัฒนาเว็บไซต์เราจะเริ่มจากการวาง Layout กันซะก่อนแล้วค่อยขยับไปถึง การวางเนื้อหาภายใน Layout อีกทีครับ

ก่อนที่เราจะทำการสร้าง Layout ให้เราทำการออกแบบก่อนว่าเราจะวาง Layout อย่างไร สำหรับผมเองก็ได้ออกแบบมาเรียบร้อยแล้วครับ ดูได้จากรูปภาพด้านล่างเลยครับ อาจจะเป็น Layout ง่าย ๆ นะครับ เพราะผมออกแบบมาเพื่อสำหรับประกอบการสอนเท่านั้นครับ

ผมได้แบ่ง Layout ออกเป็น 4 ส่วนย่อยคือ Heaer, Content, Sidebar และ Footer โดยแต่ละส่วนก็ใช้สำหรับการแสดงผลตามชื่อของมันเลยครับ เอาหล่ะครับตอนนี้เราก็ออกแบบ Layout เสร็จแล้วต่อไปเราก็จะเริ่มทำการแปลง Layout ที่เราออกแบบให้เป็น HTML บน WordPress Theme กันเลยครับ

ให้เราสร้าง HTML ให้ได้ Layout ตามที่เราต้องการบน index.php ก่อนครับ เพื่อน ๆ สามารถสร้าง HTML ได้ดังนี้ครับ

<html>
<head>
    <title>everduck. WordPress theme layouting</title>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/everduck.css" />
</head>
<body>
    <div class="wrapper">
        <div>
            <div class="top">
                <div class="header">
                    HEADER
                </div>
            </div>
            <div class="middle">
                <div class="content">
                    CONTENT
                </div>
                <div class="sidebar">
                    SIDEBAR
                </div>
            </div>
            <div class="bottom">
                <div class="footer">
                    FOOTER
                </div>
            </div>
        </div>
    </div>
</body>
</html>

จาก Code ด้านบนนะครับเราจะสังเกตุเห็นว่ามีการนำเข้า CSS ไฟล์นะครับ และจะเห็นว่ามีการเรียก PHP เพื่ออ้างไปยัง Directory สำหรับ Folder Theme ของเราด้วยฟังก์ชั่น get_template_directory_uri ถึงตรงนี้คงจะเดากันออกใช่ไหมครับว่า ต่อไปเราจะต้องไปสร้างไฟล์ css/everduck.css ครับ

เอาหล่ะครับต่อไปเราไปสร้างไฟล์ css/everduck.css ครับ และเมื่อสร้างไฟล์เสร็จแล้วให้เราเขียน CSS ตามที่เราได้ออกแบบไว้ในตอนแรกกันเลยนะครับ ในขั้นของการเขียน CSS นี้ผมอยากแนะนำว่าให้ลองใช้ SASS ในการเขียน CSS กันนะครับ สำหรับผมเขียน CSS ได้ดังนี้ครับ (ผมอาจจะเขียน CSS ไม่เก่งนะครับ)

body {
  padding: 0px;
  margin: 0px;
}

.wrapper {
  padding: 0px;
  margin: 0px;
  font-size: 20px;
  font-weight: bold;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.wrapper .top {
  width: 100%;
}

.wrapper .top .header {
  text-align: center;
  box-sizing: border-box;
  padding: 20px;
  background-color: #d7d7d7;
}

.wrapper .middle {
  width: 100%;
}

.wrapper .middle .content {
  float: left;
  width: 80%;
  text-align: center;
  box-sizing: border-box;
  padding: 70px 0px 70px 0px;
  background-color: #cecece;
}

.wrapper .middle .sidebar {
  float: right;
  width: 20%;
  text-align: center;
  box-sizing: border-box;
  padding: 70px 0px 70px 0px;
  background-color: #cbcbcb;
}

.wrapper .bottom {
  width: 100%;
  clear: both;
}

.wrapper .bottom .footer {
  text-align: center;
  box-sizing: border-box;
  padding: 20px;
  background-color: #bbbbbb;
}

เอาหล่ะครับตอนนี้ Layout ของเราเป็นรูปเป็นร่างแล้วนะครับ ขั้นตอนต่อไปก็คือการแยก Layout ของเราออกเป็นส่วน ๆ ให้ได้โครงสร้างที่ WordPress ต้องการครับ เมื่อเราพิจารณาจากการออกแบบแล้วเราจะแยกออกมาได้ทั้งหมด 5ไฟล์นะครับ

  1. index.php – สำหรับหน้ารวม Layout เข้าด้วยกัน
  2. header.php – สำหรับแสดงเนื้อหาในส่วนหัว
  3. content.php – สำหรับแสดงเนื้อหาในส่วน content
  4. sidebar.php – สำหรับแสดงเนื้อหาในส่วน sidebar
  5. footer.php – สำหรับแสดงเนื้อหาในใส่วน footer

สร้างไฟล์ header.php เราจะเริ่มจากการทำส่วนหัวก่อนเลยครับ ให้เราสร้างไฟล์ header.php ขึ้นมาครับ จากนั้นแบ่งเอา code ส่วนหัวมาแปะได้เลยครับ สำหรับผม code ส่วนหัวเป็นดังนี้ครับ

<html>
<head>
    <title>everduck. WordPress theme layouting</title>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/everduck.css" />
</head>
<body>
    <div class="wrapper">
        <div>
            <div class="top">
                <div class="header">
                    HEADER
                </div>
            </div>

ถ้าเพื่อน ๆ ลองสังเกตุดูจะเห็นว่ามีการเปิด <div> และปิด </div> ไม่ครบ นั้นก็เพราะว่าเมื่อเรานำมารวมกันทั้ง Header และ Footer จะเปิด <div> และปิด </div> ครบพอดีครับ

สร้างไฟล์ footer.php หลังจากที่เราได้ header แล้วเราก็จะทำ footer ตามมาครับ เพื่อให้มันครบการเปิด <div> และปิด </div> ครับ สร้างไฟล์ footer.php แล้วใส่ code ดังนี้ครับ

            <div class="bottom">
                <div class="footer">
                    FOOTER
                </div>
            </div>
        </div>
    </div>
</body>
</html>

สร้างไฟล์ sidebar.php เราจะต้องทำการ sidebar ก่อนที่จะสร้าง content เพราะว่า sidebar นั้นจะถูกฝังไปกับ content ครับ หลังจากสร้างไฟล์ sidebar.php แล้วให้เราใส่ code ดังนี้ครับ

<div class="sidebar">
    SIDEBAR
</div>

สร้างไฟล์ content.php ให้เราสร้างไฟล์ content.php สำหรับแสดงผลในส่วนของ middle ครับ แล้ววาง code ดังนี้ครับ

<div class="middle">
    <div class="content">
        CONTENT
    </div>
    <?php
        get_sidebar();
    ?>
</div>

เพื่อน ๆ คงสังเกตุเห็นว่ามีการเรียกใช้งาน get_sidebar() นั้นเป็นฟังก์ชั่นของ WordPress เพื่อให้แสดงผล sidebar บริเวณนี้ และ sidebar ที่เรากล่าวถึงนั้นก็คือไฟล์ sidebar.php นั้นเองครับ

สร้างไฟล์ index.php ถือว่าเป็นจุดที่สำคัญที่สุดเลยครับ เพราะจะเป็นจุดที่รวม header, content และ footer (sidebar ถูกรวมที่ content แล้ว) ให้เราเขียน code ดังนี้ครับ

<?php get_header(); ?>
<?php get_template_part('content'); ?>
<?php get_footer(); ?>

เอาหล่ะครับตรงนี้เพื่อน ๆ จะสังเกตุเห็นว่ามีฟังก์ชั่น get_template_part นั้นก็คือการที่เอาไฟล์ template ที่เราแยกมาเป็นส่วนเดียวกัน เช่นตัวอย่างสร้างไฟล์ content.php ไว้ เมื่อเราเรียกใช้ get_template_part(‘content’) แล้ว WordPress ก็จะไปเอาเนื้อหาใน content.php มาใส่ให้ครับ **ไม่มีฟังก์ชั่น get_content() ให้ใช้นะครับ

เมื่อเรากลับไปที่ Browser แล้วทำการ Refresh เพื่อดูผลลัพธ์เป็นดังนี้ครับ

เอาหล่ะครับทีนี้ Layout ของเราก็พร้อมจะใช้งานแล้วครับ ในบทความต่อไปก็จะเป็นเรื่องการเอาเนื้อหาต่าง ๆ มาใส่ใน Layout ที่เราเพิ่งออกแบบเสร็จไปครับ ขอให้เพลิดเพลินกับการทำ WordPress Theme กันนะครับ