สอนเขียน 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 ได้ดังนี้ครับ

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

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

เอาหล่ะครับตอนนี้ 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 ส่วนหัวเป็นดังนี้ครับ

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

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

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

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

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

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

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

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

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

April 26, 2017