วิธีเพิ่มรหัสส่วนหัวและส่วนท้ายใน WordPress

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

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

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

ทำไมคุณอาจต้องเพิ่มรหัสส่วนหัวและส่วนท้ายใน WordPress

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

ตัวอย่างยอดนิยมบางส่วน ได้แก่ Google Analytics, Search Console, Facebook Pixel และเครื่องมืออื่นๆ ที่เกี่ยวข้องกับการติดตามเว็บไซต์

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

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

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

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

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

วิธีเพิ่มรหัสส่วนหัวและส่วนท้ายใน WordPress (2 วิธี)

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

เริ่มต้นด้วยการพูดถึงแนวทางของปลั๊กอิน

1. ใช้ Plugin เช่น Head, Footer, Post Injections

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

แม้ว่าจะมีปลั๊กอินดีๆ ให้เลือกมากมาย แต่คำแนะนำสำหรับงานของเราคือ ปลั๊กอิน Head, Footer และ Post Injections

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

ในการเพิ่มปลั๊กอิน ไปที่ Plugins > Add New ภายในแดชบอร์ดของคุณ และใช้คุณลักษณะการค้นหาเพื่อค้นหาปลั๊กอิน คลิกที่ติดตั้ง จากนั้นเปิดใช้งานปลั๊กอิน

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

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

สำหรับรหัสส่วนกลาง ตรวจสอบให้แน่ใจว่าคุณวางข้อมูลโค้ดเหล่านั้นลงในช่อง ในทุกหน้า อย่างไรก็ตาม หากคุณต้องการเพียงโค้ดเพื่อรันบนโฮมเพจของคุณ ให้ใช้ตัวเลือก Only On The Home Page

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

2. เพิ่มข้อมูลโค้ดผ่านไฟล์ functions.php ของคุณ

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

คุณสามารถเพิ่มโค้ดลงใน ไฟล์ header.php หรือ footer.php ของธีมที่ใช้งานอยู่ได้โดยตรง คุณสามารถค้นหาไฟล์เหล่านี้ได้ในไดเร็กทอรี /public_html/wp-content/themes/ โดยเปิดโฟลเดอร์ของธีมที่ใช้งานอยู่และมองเข้าไปข้างใน:

คุณสามารถเข้าถึงไฟล์เหล่านั้นได้ผ่านทาง File Transfer Protocol (FTP) และแก้ไขโดยใช้โปรแกรมแก้ไขโค้ดที่คุณชื่นชอบ อย่างไรก็ตาม การแก้ไขไฟล์ส่วนหัวและส่วนท้ายโดยตรงอาจทำให้ยุ่งเหยิงได้ ด้วยเหตุนี้ เรามีคำแนะนำสองข้อหากคุณวางแผนที่จะใช้แนวทางปฏิบัติด้วยตนเอง:

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

ตามหลักการแล้ว คุณควรใช้ธีมลูกเสมอ หากคุณวางแผนที่จะปรับแต่งธีมประเภทใดก็ได้ คุณสามารถเข้าถึงไฟล์ functions.php ของธีมลูกของคุณในโฟลเดอร์ภายในไดเร็กทอรี /wp-content/themes

เปิดไฟล์ functions.php ในตัวแก้ไขโค้ดของคุณ หากต้องการเพิ่มโค้ดที่ต้องการ คุณต้องใช้ wp_head   หรือ wp_footer   ตะขอ.

ข้อมูลโค้ดต่อไปนี้จะเพิ่มโค้ดที่กำหนดเองของคุณไปที่ส่วนหัวของไซต์ของคุณ:

 add_action('wp_head', 'test_script'); function test_script() { ?> <!-- Here comes your custom code in HTML format. --> <?php }

คุณสามารถใช้ wp_footer hook แทน wp_head หากคุณต้องการวางโค้ดในส่วนท้ายของคุณ คุณยังสามารถเปลี่ยนชื่อฟังก์ชัน (test_script) ได้หากต้องการ

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

บทสรุป

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

คุณสามารถเพิ่มข้อมูลโค้ดลงในส่วนหัวและส่วนท้ายได้ 2 วิธี คุณสามารถใช้ปลั๊กอิน เช่น 'Head, Footer and Post Injections' หรือเพิ่มข้อมูลโค้ดผ่านไฟล์ functions.php ของคุณ

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