8-4: แยกชิ้นส่วนไฟล์ Header Footer Sidebar


 

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

ในหน้าเว็บ ไปที่ View > Developer > Developer Tools เพื่อเข้าสู่โหมดนักพัฒนา

จะเห็นว่าแต่ละกลุ่ม มีการแยกส่วนอย่างชัดเจน

ในส่วนที่คลุมไว้ จะเป็นส่วนของ Header ทั้งหมด Copy ไว้

สร้างไฟล์ใหม่ กดวาง จากนั้นเซฟชื่อว่า header.php

และในส่วนที่คลุมไว้ด้านล่างจะเป็นส่วนของ Footer ให้ Copy ไว้

สร้างไฟล์ใหม่ วางเนื้อหา จากนั้นเซฟชื่อว่า footer.php

ใน wordpress จะมีแท็กให้ใช้สำหรับแทรกส่วนประกอบต่างๆ
get_header(); สำหรับเรียกใช้ชิ้นส่วน header.php
get_footer(); สำหรับเรียกใช้ชิ้นส่วน footer.php

ชิ้นส่วนอื่นๆก็สามารถแยกชิ้นส่วนออกไปจากหน้านี้ได้

สร้างไฟล์ใหม่ วางเนื้อหาส่วนนี้ลงไป บันทึกชื่อ sidebar.php

จากนั้น แทรกแท็ก get_sidebar.php เข้าไปด้วย

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments