4 วิธีง่ายๆ (3 ไม่มีรหัส)

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

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

ในบทความนี้ เราจะแสดงให้คุณเห็นสี่วิธีในการ แก้ไขส่วนหัวของ WordPress ทั้งที่มีและไม่มีปลั๊กอิน ไปทำงานกันเถอะ!

สารบัญ:

1. แก้ไขส่วนหัวโดยใช้เครื่องมือปรับแต่ง
2. ใช้การแก้ไขไซต์แบบเต็ม (และธีมที่เข้ากันได้)
3. แก้ไขส่วนหัวโดยใช้ตัวสร้างเพจ WordPress
4. เพิ่มรหัสที่กำหนดเองในส่วนหัวโดยใช้ปลั๊กอิน

1. แก้ไขส่วนหัวโดยใช้เครื่องมือปรับแต่ง

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

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

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

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

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

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

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

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

2. ใช้การแก้ไขไซต์แบบเต็ม (และธีมที่เข้ากันได้)

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

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

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

โดยค่าเริ่มต้น ตัวแก้ไขจะเปิดเทมเพลตหน้าแรก ซึ่งควรมีองค์ประกอบ ส่วนหัว :

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

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

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

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

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

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

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

3. แก้ไขส่วนหัวโดยใช้ตัวสร้างเพจ WordPress

ปลั๊กอินตัวสร้างหน้า WordPress บางตัวมีตัวเลือกสำหรับแก้ไขส่วนหัวของ WordPress ตัวอย่างเช่น Elementor Pro มีเครื่องมือสร้างธีมที่คุณสามารถเข้าถึงได้ด้วยใบอนุญาตแบบพรีเมียม

หากคุณไม่มีสิทธิ์เข้าถึง Elementor Pro คุณสามารถใช้ส่วนขยายของบริษัทอื่นได้ฟรี เช่น ปลั๊กอิน Elementor Header & Footer Builder ที่ WordPress.org

เราจะแสดงวิธีการดำเนินการโดยใช้ Elementor Pro และคุณลักษณะ Theme Builder

ในทางปฏิบัติ Elementor Theme Builder ทำงานคล้ายกับการแก้ไขไซต์แบบเต็ม

ในการเข้าถึง Theme Builder ให้ไปที่ Templates > Theme Builder เลือกตัวเลือก ส่วนหัว ภายใต้ SITE PARTS และค้นหาเทมเพลตที่มีอยู่ทางด้านขวา ควรมีเทมเพลตส่วนหัวเดียวเท่านั้น และคุณสามารถคลิกที่ปุ่ม แก้ไข ที่อยู่ถัดจากเทมเพลตนั้นได้:

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

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

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

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

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

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

4. เพิ่มรหัสที่กำหนดเองในส่วนหัวโดยใช้ปลั๊กอิน

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

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

ตัวอย่างที่ยอดเยี่ยมอย่างหนึ่งของปลั๊กอินดังกล่าวคือ Header Footer Code Manager เครื่องมือนี้ช่วยให้คุณสามารถเพิ่มข้อมูลโค้ด HTML, CSS และ JavaScript ลงในส่วนหัวและ/หรือส่วนท้าย และเลือกว่าข้อมูลโค้ดเหล่านี้จะโหลดหน้าใด:

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

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

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

ปรับแต่งส่วนหัวของ WordPress วันนี้

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