จะเพิ่มรหัสส่วนหัวและส่วนท้ายใน WordPress ได้อย่างไร?

เผยแพร่แล้ว: 2021-09-06

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

สิ่งนี้มักเกิดขึ้นเมื่อคุณพยายามรวมบริการต่างๆ เช่น Google AdSense, Google Analytics และ Google Search Console เข้ากับเว็บไซต์ของคุณ

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

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

มาดูรายละเอียดกันเลย!

สารบัญ

  • การเพิ่มโค้ดส่วนหัวและส่วนท้ายใน WordPress – 2 วิธีง่ายๆ
    • วิธีที่ 1: การเพิ่มโค้ดในส่วนหัวและส่วนท้ายของ WordPress โดยใช้ Plugin
    • วิธีที่ 2: การเพิ่มโค้ดส่วนหัวและส่วนท้ายใน WordPress . ด้วยตนเอง
  • บทสรุป

การเพิ่มโค้ดส่วนหัวและส่วนท้ายใน WordPress – 2 วิธีง่ายๆ

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

ต่อไปนี้คือข้อดีบางประการของการใช้ปลั๊กอินเพื่อเพิ่มโค้ดในส่วนหัวและส่วนท้ายของ WordPress:

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

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

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

วิธีที่ 1: การเพิ่มโค้ดในส่วนหัวและส่วนท้ายของ WordPress โดยใช้ Plugin

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

นี่คือวิธีเพิ่มโค้ดส่วนหัวและส่วนท้ายใน WordPress โดยใช้ปลั๊กอินนี้:

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

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

บันทึก:

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

วิธีที่ 2: การเพิ่มโค้ดส่วนหัวและส่วนท้ายใน WordPress . ด้วยตนเอง

วิธีการแบบแมนนวลนั้นมีเทคนิคมากกว่าวิธีแรกเล็กน้อย คุณต้องเตรียมข้อมูลโค้ดของคุณแล้วเพิ่มลงในไฟล์ functions.php ของ WordPress ก่อนทำการปรับเปลี่ยนใด ๆ อย่าลืม สร้างข้อมูลสำรองของ WordPress

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

นักพัฒนาหลายคนเสนอธีมย่อยสำหรับธีม WordPress เฉพาะ อย่างไรก็ตาม หากคุณไม่มี ให้ดู วิธีการติดตั้งธีมลูกใน WordPress

ตอนนี้ หลังจากสร้างการสำรองข้อมูล WordPress และติดตั้งธีมย่อยแล้ว ให้ทำตามขั้นตอนด้านล่างเพื่อเพิ่มโค้ดส่วนหัวและส่วนท้ายด้วยตนเอง:

ขั้นตอนที่ 1: เตรียมข้อมูลโค้ด

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

ข้อมูลโค้ดสำหรับส่วนหัว

 /* Describe the code snippet for your header */ add_action('wp_head', 'your_function_name'); function your_function_name(){ ?> PASTE HEADER CODE HERE <?php };

โค้ดสำหรับส่วนท้าย

 * Describe the code snippet for your footer*/ add_action('wp_footer', 'your_function_name'); function your_function_name(){ ?> PASTE FOOTER CODE HERE <?php };

สำหรับแต่ละตัวอย่างเหล่านี้ อย่าลืมเปลี่ยนสิ่งต่อไปนี้ด้วยตัวเอง:

  • “อธิบายข้อมูลโค้ดสำหรับส่วนหัว/ส่วนท้ายของคุณ”
  • “ _function_name ของคุณ ()”
  • “วางรหัสส่วนหัว/ส่วนท้ายที่นี่”

ขั้นตอนที่ 2: การเพิ่มข้อมูลโค้ดไปยัง functions.php File . ของธีมลูกของคุณ

หลังจากเตรียมข้อมูลโค้ดสำหรับส่วนหัวและส่วนท้ายแล้ว คุณต้องเพิ่มโค้ดเหล่านั้นลงในไฟล์ functions.php ของธีมของคุณ

นี่คือวิธีที่คุณสามารถทำได้:

  • ไปที่ ลักษณะที่ ปรากฏ > ตัวแก้ไขธีม จากแผงการดูแลระบบ WordPress ของคุณ
การตั้งค่าตัวแก้ไขธีม
  • คลิกไฟล์ “ functions.php
  • ตอนนี้ วางรหัสของคุณที่ส่วนท้ายของไฟล์
  • คลิกที่ปุ่ม Update File เพื่อบันทึกการตั้งค่า
เพิ่มรหัสส่วนหัวและส่วนท้ายในฟังก์ชัน

หากคุณต้องการเพิ่มรหัสไปยังหน้าหรือโพสต์เฉพาะ คุณสามารถเพิ่มคำสั่ง “ if “ ได้ดังนี้:

สำหรับส่วนหัว :

 /* Describe the code snippet for your header */ add_action('wp_head', 'your_function_name'); function your_function_name(){ if(is_single(73790)) { ?> PASTE HEADER CODE HERE <?php };

สำหรับส่วนท้าย:

 /* Describe the code snippet for your footer*/ add_action('wp_footer', 'your_function_name'); function your_function_name(){ if(is_single(73790)) { ?> PASTE FOOTER CODE HERE <?php };

หมายเหตุ : อย่าลืมแทนที่หมายเลข “ 73790 ” ด้วยเพจหรือรหัสโพสต์ของคุณ

บทสรุป

เหตุผลหลักในการเพิ่มโค้ดส่วนหัวและส่วนท้ายใน WordPress คือการใช้บริการของบุคคลที่สาม เช่น Google AdSense, Google Analytics, Facebook Pixel และเครื่องมืออื่นๆ อย่างไรก็ตาม อาจมีสาเหตุหลายประการเช่นกัน

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

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