WordPress รวบรวมไฟล์เทมเพลต PHP หลายไฟล์เพื่อแสดงเนื้อหาที่อ่านได้ให้กับผู้ใช้ในเบราว์เซอร์ธีม WordPress ประกอบด้วยไฟล์ header.php, footer.php, single.php (สำหรับโพสต์), page.php (สำหรับหน้า) และไฟล์ sidebar.php ธีมล่าสุดใช้ส่วนเทมเพลตเพิ่มเติมเพื่อสร้างเนื้อหาหลัก
เทมเพลตทั้งหมดเหล่านี้ประกอบและแสดงอย่างประณีตเมื่อคุณดูหน้า WordPress ในเบราว์เซอร์ของคุณโดยปกติ คุณไม่จำเป็นต้องแก้ไขไฟล์เหล่านี้ และมีปลั๊กอินให้แทรกฟังก์ชันการทำงานที่กำหนดเองอย่างไรก็ตาม ในบางกรณี คุณต้องแทรกโค้ดในส่วนหัวและส่วนท้ายของ WordPress
ในบทความนี้ เราจะอธิบายวิธีการทำโดยไม่ต้องใช้ปลั๊กอินและปลั๊กอิน
ทำไมต้องใส่รหัสในส่วนหัวหรือส่วนท้าย?
ส่วนหัวและส่วนท้ายมีประโยชน์สำหรับการผสานรวมโค้ดต่างๆ และเพิ่มฟังก์ชันพิเศษให้กับไซต์ของคุณต่อไปนี้คือตัวอย่างที่ดีที่สุดบางส่วนที่คุณต้องใส่โค้ดในส่วนหัวและส่วนท้ายของไซต์ WordPress ของคุณ
- แทรกโค้ดโฆษณาอัตโนมัติจาก Google AdSense หรือโค้ดโฆษณาด้านบนสุดจากโปรแกรมโฆษณาอื่นๆ
- ติดตั้งโค้ดติดตาม Google Analytics และ Facebook Pixel
- แทรก captcha จาก Bing Webmaster Tools, Google Search Console, Baidu, Yandex และแพลตฟอร์มอื่น ๆ เช่น Pinterest
- เพิ่ม CSS ที่กำหนดเองไปที่ส่วนหัว เช่น สไตล์ชีตของ Google Fonts และ JavaScript ในส่วนท้าย
- แทรกส่วนประกอบที่กำหนดเอง เช่น breadcrumbs ในส่วนหัวเมื่อใช้ปลั๊กอิน เช่น Yoast SEO
อย่างที่คุณเห็น รายการจะยาวขึ้นขึ้นอยู่กับความต้องการของคุณ
เพิ่มโค้ดในส่วน Header และ Footer ใน WordPress
ตามค่าเริ่มต้น WordPress ไม่มีตัวเลือกใดๆ ในการแทรกโค้ดในส่วนหัวและส่วนท้ายตัวเลือกที่ง่ายคือการแก้ไขไฟล์โดยตรงและใส่รหัสของคุณอย่างไรก็ตาม ยังมีปลั๊กอินสำหรับจุดประสงค์นี้อีกด้วยในบทความนี้ เราจะอธิบายสองวิธีในการเพิ่มโค้ดลงในส่วนหัวและส่วนท้ายของไซต์ WordPress ใดๆ
- แก้ไขไฟล์ header.php และ footer.php ของธีม WordPress ด้วยตนเอง
- ใช้ปลั๊กอินแทรกส่วนหัวและส่วนท้ายเพื่อเพิ่มโค้ดโดยไม่ต้องแก้ไขไฟล์
นอกจากนี้ เราจะอธิบายการใช้ธีมบางส่วนเพื่อแทรกโค้ดในส่วนหัวและส่วนท้ายโดยใช้ wp_head และ wp_footer hooks
แทรกโค้ดส่วนหัวและส่วนท้ายของ WordPress ด้วยตนเอง
ตัวเลือกนี้จำเป็นต้องแก้ไขไฟล์ header.php หรือ footer.php ในธีมไซต์ WordPress ของคุณ และอาจไม่เหมาะสำหรับผู้เริ่มต้น
- ขั้นแรก เริ่มต้นด้วยการเตรียมข้อมูลโค้ดหรือคัดลอกจากเว็บไซต์บุคคลที่สามเมื่อคุณมีโค้ดส่วนหัวและส่วนท้ายพร้อมแล้ว ให้วางเมาส์เหนือเมนูลักษณะที่ปรากฏในหน้าแดชบอร์ดของไซต์แล้วคลิกแท็บตัวแก้ไขธีม
- ละเว้นข้อความเตือนที่คุณได้รับและเลือกหัวข้อที่ใช้งานอยู่จากรายการดรอปดาวน์ "เลือกหัวข้อที่จะแก้ไข:"
- เลือกไฟล์ "header.php" หรือ "footer.php" ทางขวาของมุมมองปัจจุบัน
- สำหรับส่วนหัว อย่าลืมวางโค้ดใต้แท็กปิด "" จากนั้นโค้ดสำหรับส่วนท้ายควรอยู่ใต้ "" ฉลาก.บางครั้ง คุณอาจต้องแทรกโค้ดก่อนแท็กปิด
- สุดท้าย ให้คลิกปุ่ม "อัปเดตไฟล์" เพื่อบันทึกการเปลี่ยนแปลงในไซต์ของคุณด้วยข้อมูลโค้ดที่เพิ่มเข้ามา
ตรวจสอบให้แน่ใจว่าได้ทดสอบไซต์ของคุณและตรวจสอบว่าคุณลักษณะที่คุณเชื่อมต่อทำงานตามที่คาดไว้หรือไม่
ใส่รหัสส่วนหัวและส่วนท้ายของ WordPress โดยใช้ปลั๊กอิน
ตามค่าเริ่มต้น WordPress อนุญาตให้คุณเพิ่ม CSS ที่กำหนดเองลงในเว็บไซต์ของคุณภายใต้ส่วน ลักษณะที่ปรากฏ > การปรับแต่ง > CSS เพิ่มเติมอย่างไรก็ตาม คุณไม่สามารถแทรก JavaScript ในส่วนนี้มีปลั๊กอินและปลั๊กอินฟรีมากมายสำหรับการแทรกโค้ด ในที่นี้เราจะอธิบายโดยใช้ "WPBeginner แทรกส่วนหัวและส่วนท้าย"ปลั๊กอินมีอินเทอร์เฟซที่เรียบง่ายสุด ๆ ที่ผู้เริ่มต้นใช้งานได้อย่างง่ายดาย
- ขั้นแรก ติดตั้งและเปิดใช้งานปลั๊กอิน "แทรกส่วนหัวและส่วนท้าย"จากแดชบอร์ดไซต์ WordPress ของคุณ ให้วางเมาส์เหนือเมนูปลั๊กอิน แล้วคลิก เพิ่มใหม่
- ใช้คุณลักษณะปลั๊กอินการค้นหาเพื่อค้นหา "แทรกส่วนหัวและส่วนท้าย" และคลิกปุ่ม "ติดตั้งทันที"หลังจากขั้นตอนการติดตั้งเสร็จสิ้น ให้ "เปิดใช้งาน" ปลั๊กอิน
- ไปที่เมนูการตั้งค่า ค้นหาและคลิกเมนูย่อยแทรกส่วนหัวและส่วนท้าย
- ปลั๊กอินมีกล่องสามช่องสำหรับวางสคริปต์ในส่วนหัว เนื้อหา และส่วนท้ายเพื่อแทรกโค้ดในระหว่างนี้ ผู้ให้บริการบุคคลที่สาม เช่น Google Analytics จะแนะนำให้คุณวางข้อมูลโค้ดในช่องใดมิฉะนั้น ตรวจสอบให้แน่ใจว่าคุณทราบตำแหน่งที่ต้องการแทรกโค้ดอย่างแน่ชัด
- วางรหัสเหล่านี้ลงในรหัสที่เหมาะสมแล้วคลิกบันทึกเพื่อทำการเปลี่ยนแปลงไซต์ของคุณให้เสร็จสิ้น
- สคริปต์โค้ดจะถูกโหลดโดยอัตโนมัติไปยังตำแหน่งเฉพาะที่ไซต์ทำงานอยู่
คุณสามารถแก้ไขโค้ดเพิ่มเติมและให้ปลั๊กอินใช้งานได้เสมอ เนื่องจากการปิดใช้งานจะป้องกันการเพิ่มฟังก์ชันที่กำหนดเองและปิดใช้งานสคริปต์ทั้งหมดที่เพิ่มในไซต์ของคุณก่อนหน้านี้
โปรดทราบว่าหากบังเอิญปิดการใช้งานหรือถอนการติดตั้งปลั๊กอิน "แทรกส่วนหัวและส่วนท้าย" โดยไม่ได้ตั้งใจ โค้ดของคุณจะยังคงอยู่ในฐานข้อมูลไซต์ของคุณเพียงติดตั้งใหม่หรือเปิดใช้งานปลั๊กอินอีกครั้งเพื่อให้โค้ดก่อนหน้าใช้งานได้นอกจากนี้ ขอแนะนำให้คุณล้างแคชของไซต์ WordPress เมื่อเพิ่มและบันทึกการเปลี่ยนแปลงในส่วนของโค้ดส่วนหัวและส่วนท้ายในปลั๊กอิน
แก้ไขส่วนหัวและส่วนท้ายด้วยธีม
ไม่ว่าคุณจะแก้ไขไฟล์ธีมด้วยตนเองหรือใช้ปลั๊กอิน โค้ดที่คุณใส่จะมีผลกับทั้งเว็บไซต์ของคุณคุณต้องใช้ปลั๊กอิน เช่น แทรก HTML Snippets หรือลองใช้บล็อก HTML ที่กำหนดเองในโปรแกรมแก้ไข Gutenberg เพื่อแทรกโค้ดที่กำหนดเองในบทความหรือหน้าที่ระบุเท่านั้นอย่างไรก็ตาม คุณสามารถแทรกโค้ดในส่วนหัวและส่วนท้ายด้วยธีมล่าสุด เช่น GeneratePress Premium และ Astra Proธีมเหล่านี้ใช้ wp_head และ wp_footer hooks มาตรฐานและอนุญาตให้ใช้ข้อจำกัดที่กำหนดเองได้ตัวอย่างเช่น คุณสามารถแทรกเบรดครัมบ์ในโพสต์เดียวได้โดยไม่กระทบต่อเพจ
เราจะใช้ชุดรูปแบบ Astra Pro สำหรับคำแนะนำ คุณสามารถดำเนินการขั้นตอนที่คล้ายกันโดยใช้ตัวเลือก "องค์ประกอบ" ในชุดรูปแบบ GeneratePress Premium
- หลังจากติดตั้งโปรแกรมเสริม Astra Pro ให้ไปที่ ลักษณะที่ปรากฏ > ตัวเลือก Astra
- เปิดใช้งานตัวเลือกเค้าโครงแบบกำหนดเองแล้วคลิกลิงก์การตั้งค่าสำหรับตัวเลือกนั้น
- คลิกปุ่ม "เพิ่มใหม่" และวางรหัสที่คุณต้องการแทรกลงในช่อง
- ในส่วน Custom Layout Settings ให้คลิกเมนู Layout ที่ขยายลงมา แล้วเลือกตัวเลือก Hooks
- ในรายการดรอปดาวน์ Action เลือก wp_head สำหรับส่วนหัวและ wp_footer สำหรับส่วนท้าย
- หากคุณใช้ข้อมูลโค้ดเพียงรายการเดียว ให้เว้น "ลำดับความสำคัญ" ว่างไว้อย่างไรก็ตาม เมื่อคุณแทรกโค้ดหลายโค้ดในตำแหน่ง hook เดียวกัน อย่าลืมตั้งค่าลำดับความสำคัญเพื่อแทรกโค้ดคุณสามารถใช้ 10, 20, 30 ฯลฯ เป็นลำดับความสำคัญ ค่าต่ำสุดจะมีความสำคัญเหนือกว่ารายการอื่นๆ
- ระบุรายละเอียดระยะห่างด้านบนและด้านล่างเป็นพิกเซล หากจำเป็น
- เลือกตำแหน่งที่คุณต้องการแสดงรหัสในเมนูแบบเลื่อนลง Display Onคุณสามารถเลือกโพสต์ หน้า หมวดหมู่ หรือแทรกทั้งเว็บไซต์ของคุณ หรือแทรกประเภทโพสต์เฉพาะ เช่น โพสต์ หน้า หรือประเภทโพสต์ที่กำหนดเองที่ใช้ในเว็บไซต์ของคุณ
- ในรายการดรอปดาวน์ บทบาทของผู้ใช้ ให้เลือกบทบาทของผู้ใช้ที่คุณต้องการให้โค้ดใช้งานได้
เมื่อการตั้งค่าทั้งหมดเสร็จสมบูรณ์ ให้คลิกปุ่มเผยแพร่เพื่อให้การเปลี่ยนแปลงมีผล
เหตุผลในการใช้ปลั๊กอินแทรกส่วนหัวและส่วนท้าย
มีข้อเสียมากมายในการแก้ไขไฟล์ธีมหรือการใช้ธีมที่กำหนดเอง ซึ่งคุณจะต้องยึดติดกับปลั๊กอินนี่คือประโยชน์บางประการที่คุณจะได้รับจากการใช้ปลั๊กอิน ยกเว้นว่าคุณอาจไม่ใช่ช่างเทคนิคหรือคุณอาจเป็นมือใหม่
- เนื่องจากร้านปลั๊กอินเพิ่มสคริปต์ในตำแหน่งที่แยกต่างหาก คุณไม่จำเป็นต้องกังวลเกี่ยวกับการลบโค้ดในระหว่างการอัปเกรด อัปเดต หรือเปลี่ยนธีมคุณไม่จำเป็นต้องมีธีมย่อย เนื่องจากปลั๊กอินทำงานโดยไม่ขึ้นกับธีมของไซต์ของคุณ
- ทำให้การเพิ่มโค้ดที่กำหนดเองในส่วนหัวและส่วนท้ายทำได้ง่ายและรวดเร็วนอกจากนี้ยังช่วยรักษาการจัดระเบียบข้อมูลโค้ดในที่เดียว
- เป็นไปได้ที่จะพบข้อผิดพลาดเมื่อเลือกแก้ไขธีม WordPress ดังนั้นการใช้ปลั๊กอินสามารถช่วยโบกมือ ป้องกัน และหลีกเลี่ยงข้อผิดพลาดดังกล่าวได้
ความคิดสุดท้าย
ในหลายกรณี คุณต้องเปลี่ยนรูปลักษณ์ เปลี่ยนวิธีการ หรือเพิ่มฟังก์ชันการทำงานอื่นๆ ให้กับไซต์ WordPress ของคุณไม่ว่าในกรณีใด เมื่อคุณไม่มีแนวโน้มในทางเทคนิค อย่าลืมใช้วิธีปลั๊กอินเพื่อแทรกโค้ดส่วนหัวและส่วนท้ายแม้ว่าธีมอย่าง Astra และ GeneratePress จะช่วยคุณได้ แต่คุณจะต้องซื้อเวอร์ชันพรีเมียมนอกจากนี้ยังทำให้การเปลี่ยนธีมทำได้ยาก ซึ่งคุณจะต้องมองหาปลั๊กอินเพื่อใช้งาน
กระทู้ที่เกี่ยวข้อง:
