วิธีสร้างเทมเพลตใน WordPress (และปรับแต่งเอง)

เผยแพร่แล้ว: 2022-08-04

ธีม WordPress ของคุณกำหนดลักษณะต่างๆ ของไซต์ได้หลายประการ รวมถึงรูปแบบโพสต์และหน้า อย่างไรก็ตาม คุณอาจต้องการปรับแต่งการออกแบบให้เหมาะกับความต้องการเฉพาะของคุณ ดังนั้น คุณอาจกำลังมองหาวิธีสร้างเทมเพลตใน WordPress

โชคดีที่ WordPress Full Site Editing (FSE) และ Site Editor ใหม่ช่วยให้คุณเข้าถึงเทมเพลตของธีมได้อย่างง่ายดาย จากนั้นคุณสามารถปรับแต่งและสร้างใหม่โดยใช้บล็อก ดียิ่งขึ้นไปอีก: คุณไม่จำเป็นต้องแตะบรรทัดโค้ดเพื่อทำเช่นนั้น

ในบทความนี้ เราจะให้ภาพรวมของเทมเพลตหน้า WordPress และกรณีการใช้งาน จากนั้น เราจะอธิบายวิธีสร้างและปรับแต่งเทมเพลตเหล่านี้โดยใช้ฟีเจอร์การแก้ไขเว็บไซต์แบบเต็ม มาเริ่มกันเลย!

สารบัญ:

  • ข้อมูลเบื้องต้นเกี่ยวกับเทมเพลตใน WordPress
  • วิธีสร้างเทมเพลตใน WordPress ด้วยการแก้ไขเว็บไซต์แบบเต็ม
  • วิธีปรับแต่งเทมเพลตหน้าที่มีอยู่
วิธีสร้างและปรับแต่งเทมเพลตหน้าใน #WordPress ผ่านการแก้ไขเว็บไซต์แบบเต็ม
คลิกเพื่อทวีต

ข้อมูลเบื้องต้นเกี่ยวกับเทมเพลตใน WordPress

เทมเพลตคือไฟล์ที่กำหนดเลย์เอาต์และโครงสร้างของธีมของคุณ เทมเพลตอาจกำหนดหน้าตาเฉพาะของคุณ เช่น หน้า 404 บล็อกโพสต์ และที่เก็บถาวร

คุณยังสามารถเจาะจงมากขึ้นได้อีกด้วย เช่น การสร้างเทมเพลตพิเศษที่ใช้กับโพสต์บล็อกในบางหมวดหมู่เท่านั้น ตัวอย่างเช่น หากคุณเผยแพร่บทวิจารณ์และบทช่วยสอน คุณอาจใช้เทมเพลตที่แตกต่างกันสำหรับโพสต์ประเภทต่างๆ เหล่านั้น

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

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

การแก้ไขไซต์แบบเต็มช่วยให้คุณสามารถปรับแต่งเลย์เอาต์เว็บไซต์ของคุณเพื่อให้ตรงกับแบรนด์ของคุณและปรับปรุงประสบการณ์ผู้ใช้ (UX) ของคุณ นอกจากนี้ คุณสามารถเพิ่มความเร็วในกระบวนการออกแบบโดยไม่ต้องลงทุนกับผู้สร้างเพจหรือปลั๊กอินระดับพรีเมียม

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

โปรดทราบว่าขณะนี้คุณจำเป็นต้องใช้ธีมบล็อกของ WordPress เพื่อเข้าถึงการแก้ไขเว็บไซต์แบบเต็ม คุณจะต้องมีอย่างน้อย WordPress 5.9 ในเว็บไซต์ของคุณ

หากต้องการค้นหาธีมที่รองรับการแก้ไขไซต์แบบเต็ม คุณสามารถใช้ตัวกรองคุณลักษณะการ แก้ไขไซต์แบบเต็ม ได้ที่ WordPress.org - คลิกที่นี่เพื่อไปที่ธีมเหล่านั้นโดยตรง

วิธีสร้างเทมเพลตใน WordPress ด้วยการแก้ไขเว็บไซต์แบบเต็ม

ขึ้นอยู่กับธีมที่คุณเลือก คุณจะสามารถสร้างเทมเพลตใหม่สำหรับหน้าต่างๆ บนเว็บไซต์ WordPress ของคุณ สำหรับบทช่วยสอนนี้ เราจะใช้ Twenty Twenty-Two ซึ่งเป็นธีมบล็อกเริ่มต้นในปัจจุบัน

  • ขั้นตอนที่ 1: เข้าถึงตัวแก้ไขไซต์
  • ขั้นตอนที่ 2: สร้างเทมเพลตของคุณ

ขั้นตอนที่ 1: เข้าถึงตัวแก้ไขไซต์

เมื่อคุณติดตั้งและเปิดใช้งานธีมบล็อกแล้ว ให้ไปที่ ลักษณะที่ ปรากฏ > ตัวแก้ไข ในแดชบอร์ด WordPress ของคุณ

จำไว้ว่า หากคุณไม่เห็น Site Editor ในแดชบอร์ด แสดงว่าธีมปัจจุบันของคุณไม่เข้ากันกับ Full Site Editing

การดำเนินการนี้จะเปิดตัวแก้ไขไซต์ใหม่ ซึ่งจะแสดงหน้าแรกของคุณโดยค่าเริ่มต้น:

ตัวแก้ไขไซต์ WordPress

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

การดูเทมเพลตธีมในตัวแก้ไขไซต์ WordPress

ตอนนี้ เลือก โลโก้ WordPress ที่มุมบนซ้ายแล้วคลิก เทมเพลต :

วิธีสร้างเทมเพลตใน WordPress

จากนั้นเลือกปุ่ม เพิ่มใหม่ ที่มุมบนขวา ขึ้นอยู่กับธีมของคุณ คุณจะสามารถเลือกจากรายการประเภทเทมเพลต เช่น Front Page , Author และ Category :

ประเภทของเทมเพลต WordPress

หากคุณต้องการแก้ไขเทมเพลตเริ่มต้นของโพสต์ คุณสามารถค้นหาได้ในรายการนี้ ( เพิ่มเติมในหัวข้อถัดไป )

อย่างไรก็ตาม หากคุณต้องการสร้างเทมเพลตที่กำหนดเองสำหรับโพสต์หรือเพจบางประเภท คุณจะต้องเปิดเพจหรือโพสต์ใหม่ก่อน จากนั้นเลือก เทมเพลต จากแผงการตั้งค่าและคลิกที่ ใหม่ :

การสร้างเทมเพลตใหม่ใน WordPress

จากนั้น คุณจะได้รับแจ้งให้ตั้งชื่อเทมเพลตของคุณ:

การสร้างเทมเพลตที่กำหนดเองใน WordPress

เพียงคลิกที่ สร้าง เพื่อสิ้นสุดกระบวนการ ตอนนี้คุณสามารถเริ่มทำงานกับเทมเพลตของคุณได้

ขั้นตอนที่ 2: สร้างเทมเพลตของคุณ

เมื่อคุณสร้างและตั้งชื่อเทมเพลตใหม่แล้ว คุณจะเห็นหน้าว่างที่มีลักษณะดังนี้ หรือหากคุณแก้ไขเทมเพลตที่มีอยู่แล้ว คุณจะเห็นเนื้อหาของเทมเพลตนั้น:

เทมเพลตหน้าเปล่าแบบกำหนดเองใน WordPress

ตอนนี้เป็นเพียงเรื่องของการแทรกและปรับแต่งบล็อกเพื่อสร้างเพจของคุณ กระบวนการนี้ทำงานเหมือนกับว่าคุณกำลังสร้างบทความหรือหน้า WordPress ปกติ อย่างไรก็ตาม คุณจะได้รับบล็อกธีมพิเศษที่จะช่วยคุณสร้างเทมเพลต เช่น บล็อกสำหรับใส่ชื่อหรือเนื้อหาของโพสต์

คุณยังสามารถเข้าถึงส่วนแม่แบบในขณะที่สร้างแม่แบบของคุณ คุณสามารถทำได้โดยเลือก ส่วนเทมเพลต จากรายการบล็อก WordPress และเลือกตัวเลือกจากหน้าต่างป๊อปอัป:

ส่วนเทมเพลตในเทมเพลต WordPress แบบกำหนดเอง

ในตัวอย่างของเรา เรากำลังสร้างเทมเพลตสำหรับรีวิวผลิตภัณฑ์ ดังนั้นเราจึงเพิ่ม ส่วนหัว และ ชื่อโพสต์ นอกจากนี้ เรายังเพิ่มข้อความที่ ตัดตอนมา ที่จะสรุปผลิตภัณฑ์ที่ดีที่สุดสำหรับบทวิจารณ์แต่ละรายการและ ประวัติผู้แต่ง ที่ด้านล่างของโพสต์

โปรดทราบว่าองค์ประกอบเหล่านี้จะไม่ปรากฏให้เห็นในขณะที่คุณเขียนโพสต์ เนื่องจากเป็นเทมเพลตของเพจ คุณจะต้องดูตัวอย่างโพสต์ที่ส่วนหน้าเพื่อดูส่วนเทมเพลต

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

เทมเพลตที่กำหนดเองใน WordPress

เมื่อพร้อมแล้ว ให้คลิก บันทึก ที่ด้านบนขวา คุณสามารถทำตามขั้นตอนเดียวกันเพื่อสร้างเทมเพลตใหม่สำหรับหน้าต่างๆ ในไซต์ของคุณ อย่างไรก็ตาม อย่าลืมเพิ่มส่วนหัวและส่วนท้าย เนื่องจากอาจไม่ได้รวมไว้ตามค่าเริ่มต้นเมื่อทำงานกับเทมเพลตที่กำหนดเอง

เมื่อคุณทำงานในโพสต์หรือเพจ คุณสามารถเลือกเทมเพลตจากเมนูด้านขวาเพื่อนำไปใช้กับเนื้อหาของคุณ:

การเลือกเทมเพลตโพสต์

โปรดทราบว่าคุณจะไม่เห็นเทมเพลตทั้งหมดสำหรับธีมของคุณในเมนูแบบเลื่อนลงนี้ เทมเพลตบางตัวสามารถใช้ได้กับเนื้อหาที่สร้างขึ้นโดยอัตโนมัติเท่านั้น เช่น หน้า ผู้แต่ง หรือ หมวดหมู่ ดังนั้น ถ้าคุณต้องการเลย์เอาต์ที่คุณสามารถนำไปใช้กับโพสต์หรือเพจใดๆ คุณจะต้องใช้ประเภท กำหนดเอง

วิธีปรับแต่งเทมเพลตหน้าที่มีอยู่

คุณยังสามารถปรับแต่งเทมเพลตของเพจที่มีอยู่เพื่อให้เหมาะกับความต้องการและการสร้างแบรนด์ของคุณได้ดียิ่งขึ้น วิธีนี้มีประโยชน์หากคุณพอใจกับประเภทเทมเพลตที่มี แต่ต้องการปรับแต่งเลย์เอาต์และการออกแบบ

  • ขั้นตอนที่ 1: เข้าถึงเทมเพลต
  • ขั้นตอนที่ 2: แก้ไขและบันทึกเทมเพลต

ขั้นตอนที่ 1: เข้าถึงเทมเพลต

ในการเข้าถึงเทมเพลตที่มีอยู่ ให้ไปที่ ลักษณะที่ ปรากฏ > ตัวแก้ไข และคลิกที่ ไอคอน WordPress จากนั้นเลือก เทมเพลต และคลิกที่เทมเพลตที่คุณต้องการแก้ไข:

การเลือกเทมเพลตในการแก้ไขเว็บไซต์แบบเต็ม

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

การแก้ไขเทมเพลต WordPress

ทั้งสองวิธีจะนำคุณไปยังหน้าจอแก้ไขเทมเพลต ซึ่งคุณสามารถเริ่มเปลี่ยนเลย์เอาต์และรูปลักษณ์ของเทมเพลตได้ จำไว้ว่าการเลือกเทมเพลตที่มีจะแตกต่างกันไป ขึ้นอยู่กับธีมของคุณ

ขั้นตอนที่ 2: แก้ไขและบันทึกเทมเพลต

ตอนนี้ คุณเพียงแค่ต้องย้าย เพิ่ม และลบบล็อคเพื่อปรับแต่งเทมเพลตที่มีอยู่ อีกครั้ง คุณจะสามารถดูบล็อคปัจจุบันทั้งหมดใน มุมมองรายการ ทำให้คุณสามารถจัดลำดับใหม่ได้อย่างง่ายดาย:

แม่แบบหน้าแรก

เมื่อคุณพอใจกับการเปลี่ยนแปลงของคุณแล้ว ให้คลิกที่ บันทึก เทมเพลตของคุณจะได้รับการอัปเดต

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

ไปที่ด้านบน

สร้างเทมเพลตใน WordPress วันนี้

การสร้างเทมเพลตใหม่ด้วยการแก้ไขไซต์แบบเต็มเป็นวิธีที่ง่ายที่สุดวิธีหนึ่งในการปรับแต่งรูปลักษณ์ของเว็บไซต์ของคุณ ด้วยการเปิดตัว WordPress 5.9 คุณสามารถใช้ Site Editor ใหม่เพื่อสร้างและแก้ไขเทมเพลตสำหรับธีมบล็อกของคุณได้

วิธีสร้างและปรับแต่งเทมเพลตหน้าใน #WordPress ผ่านการแก้ไขเว็บไซต์แบบเต็ม
คลิกเพื่อทวีต

หากคุณต้องการความยืดหยุ่นมากขึ้นในการสร้างเทมเพลตของคุณ คุณยังสามารถใช้รูปแบบบล็อกสำหรับเทมเพลตหรือติดตั้งปลั๊กอินบล็อกเพื่อเพิ่มคุณสมบัติใหม่

คุณมีคำถามเกี่ยวกับวิธีสร้างเทมเพลตใน WordPress หรือไม่? แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!

คู่มือฟรี

5 เคล็ดลับสำคัญในการเร่งความเร็ว
เว็บไซต์ WordPress ของคุณ

ลดเวลาในการโหลดลงได้ 50-80%
เพียงทำตามคำแนะนำง่ายๆ

ดาวน์โหลดคู่มือฟรี