Webnocode : แหล่งความรู้ Wordpress

Menu

WordPress Hook ตัวช่วยที่ WP Developer ทุกคนต้องรู้ ฉบับจัดเต็ม

WordPress Hook ตัวช่วยที่ WP Developer ทุกคนต้องรู้ ฉบับจัดเต็ม

WordPress hook
Kollayuth @offyWordPress Programming
Line

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

โดยเขาจะมีรูปแบบการเขียนโค้ดที่ทำมาเพื่อให้นักพัฒนา หรือ โปรแกรมเมอร์ เรียกใช้งานสำหรับปรับ แก้ หรือโม โดยไม่ต้องไปยุ่งกับไฟล์ core ของ WordPress หรือแม้แต่ไฟล์ Templates ต่างๆ

ไฟล์ core คือไฟล์ที่อยู่นอกเหนือโฟล์เดอร์ /wp-content/
การทำงานจริง แนะนำว่าห้ามไปยุ่งกับไฟล์ core นะครับ
เพราะนอกจากปัญหาตอนอัพเดทเวอร์ชั่นแล้ว 
ยังจะพบเจอปัญหาอื่นๆ ที่ตามมาอีกมากมาย

WordPress Hook คืออะไร

Hook หากแปลตามตัวจะแปลว่า ตะขอ แล้วตะขอมันเกี่ยวยังไงกับ WordPress มาดูกันครับ

โฟลว์ฟังก์ชั่นการทำงานในส่วนของการแสดงผลหน้าเว็บ

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

  • header ( ดึงข้อมูลจาก template ที่ชื่อ header.php )
  • sidebar ( ดึงข้อมูลจาก template ที่ชื่อ sidebar.php )
  • content ( ดึงข้อมูลจาก template ที่ชื่อ single.php )
  • footer ( ดึงข้อมูลจาก template ที่ชื่อ footer.php )

หากเราต้องการแก้ไขส่วน header เราก็ต้องไปแก้ไขที่ header ใช่ไหมครับ หรืออยากจะแก้ไขส่วนอื่นๆ เราก็จะต้องไปทำการแก้ไขไฟล์อื่นๆ อีกด้วย

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

โฟลว์ฟังก์ชั่นการทำงานในส่วนของการแสดงผลหน้าเว็บที่เพิม hook เข้าไป

จากรูปจะเห็นว่าหลายๆ จุดมีตะขอห้อยอยู่ นี่ละครับคือ Hook ที่ WordPress เตรียมไว้ให้เรา ส่วนสิ่งที่เราจะเอาไปเกี่ยวหรือห้อยไว้ก็คือโค้ดที่เราเขียนขึ้นนั่นเอง เช่น เราเอาฟังก์ชั่นการนับยอดผู้อ่านบทความไปแขวนไว้ที่ header WordPress ก็จะรันฟังก์ชั่นนั้นทันทีที่ Flow ถึงการโหลด header โดยเราไม่ต้องไปยุ่งกับไฟล์ header.php เลยครับ ตรงนี้ละครับที่ช่วยพวกเราได้เยอะมากๆ

ใน Theme WordPress header.php 
จะมีหน้าที่ในการโหลดสคริปต่างๆ ที่อยู่ในส่วน <head></head> 
ไปจนถึงเมนูของเว็บไซต์ครับ

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

โดย WordPress Hook นั้นมี 2 ประเภทด้วยกันคือ Action และ Filter

WordPress Hook ชนิด Action คืออะไร และใช้งานอย่างไร

ตัวอย่าง wordpress theme hooks ที่ header และ content

Hook Action จากรูปคือตัว A สีเขียว ซึ่งมันจะทำหน้าที่แทรกฟังก์ชั่นที่เราเอาไปห้อยไว้ ลงในบริเวณที่ WordPress จัดไว้ให้ เช่น จากภาพเราเอาฟังก์ชั่น hook_action_count_view แขวนไว้ที่ header ด้วย Action ที่ชื่อว่า wp_head ซึ่งดึงข้อมูลมาจากไฟล์ header.php ดังนั้นการที่เรา hook ก็เปรียบเสมือนเราเอาฟังก์ชั่นชื่อ hook_action_count_view ไปแทรกไว้ในไฟล์ header.php นั่นเอง เพียงแต่เราไม่ต้องเข้าไปแก้ไขไฟล์ header.php

ตัวอย่างตำแหน่งที่แท้จริงของ action : wp_head

wp_header ที่ header.php ในส่วน theme template
header.php
ฟังก์ชั่น wp_header ที่ประกาศใช้ hook

จากรูปข้างต้นจะเห็นว่ามีฟังก์ชั่นที่ชื่อว่า wp_head() อยู่ ซึ่งภายในฟังก์ชั่นนี้ คือการประกาศ WordPress Hook ชนิด action ด้วยฟังก์ชั่น do_action และตั้งชื่อว่า wp_head

ต่อไปหากเราต้องการใช้งาน action : wp_head ก็เพียงประกาศการใช้งานดังนี้

add_action( ‘wp_head’, ‘hook_counter_view’ );

โดย hook_counter_view นั้นก็จะเปลี่ยนไปเป็นชื่อฟังก์ชั่นอื่นๆ ตามที่เราต้องการ โดยเราสามารถเขียน WordPress Hook ทุกๆ ตัว ( ทั้ง action และ filter ) ไว้ได้ที่ไฟล์เดียวกัน เช่นที่ functions.php

WordPress Hook ชนิด Filter คืออะไร และใช้งานอย่างไร

Hook Filter จากรูปคือตัว F สีเหลือง ทำหน้าที่เหมือนกันกับ action แต่ต่างกันตรงที่จะต้องมีการรับค่าตัวแปรเข้ามาด้วย ซึ่งถ้าดูตามภาพด้านบน ก็จะเห็นว่า Filter มีลิงน้อยห้อยอยู่ แต่ Action ไม่มีลิงห้อย ตรงนี้จะสื่อว่า Filter จะต้องมีการส่งค่าตัวแปรอะไรสักอย่างมาให้ฟังก์ชั่นที่เราเขียนขึ้น และ ต้องคืนค่ากลับไปด้วย

Action แม้จะไม่มีลิง แต่จริงๆ ก็ส่งตัวแปรเข้าไปในฟังก์ชั่นของเราได้ แต่ไม่ได้บังคับ และไม่จำเป็นต้องคืนค่าอะไรกลับมาด้วย

การเรียกใช้งาน Filter จะใช้ฟังก์ชั่นที่ชื่อว่า add_filter แทน add_action ส่วนตอนประกาศ Hook Filter ก็จะใช้ apply_filters แทน do_action เช่น

apply_filters( ‘the_content’, $content );

add_filter( ‘the_content’ ,’hook_filter_show_credit’);

หากเราต้องการส่งตัวแปรให้ Filter มากกว่า 1 ตัวแปลจะต้องมีการเพิ่มตัวแปลเข้าไปนิดหน่อยดังนี้

apply_filters( ‘filter_name’, $var1, $var2 );

  • $var1 คือตัวแปรตัวที่ 1 ที่เราส่งไป
  • $var2 คือตัวแปรตัวที่ 2 ที่เราส่งไป
  • หากมีมากกว่า 2 ตัวก็ส่งไปได้อีกเป็น $var3, $var4, … เป็นต้น

add_filter( ‘filter_name’, ‘my_functions’, 10, 2 );

  • เลข 10 : คือ priority ( เนื่องจากการใช้งาน WordPress Hook ทั้ง action และ filter นั้นสามารถแขวนฟังก์ชั่นเท่าไหร่ก็ได้ ทำให้ต้องมี priority มาระบุว่าจะให้ฟังก์ชั่นไหนทำงานก่อนและหลัง โดยค่าเริ่มต้นคือ 10 แต่หากตั้งเป็น 9 ฟังก์ชั่นของเราก็จะถูกเรียกใช้งานก่อนฟังก์ชั่นอื่นๆ ที่ตั้งค่าไว้ที่ 10 หรือมากกว่านั่นเอง )
  • เลข 2 : คือจำนวนตัวแปรที่ส่งไป

หากเราส่งตัวแปรมา 2 ตัว ฟังก์ชั่นที่ถูกเรียกใช้ก็ต้องรับตัวแปร 2 ตัวด้วยเช่นกัน

function my_functions( $var1, $var2 ){ … }

อีกนิยามเกี่ยวกับ Action และ Filter ผมอ่านเจอในเว็บต่างประเทศ เขาบอกว่า

Action คือการที่โทรไปบอกใครสักคนว่า “คุณไปทำไอ้นั่น ไอ้นี่ให้ผมหน่อย”
ส่วน Filter คือการที่โทรไปบอกใครสักคนว่า “คุณเอาข้อมูลนี้ไปแก้ไขให้ผมหน่อย”

ขออภัยจำไม่ได้ว่าอ่านมาจากที่ไหนครับ

ตัวอย่างการใช้งาน WordPress Hook

จากเนื้อหาก่อนหน้า เราได้เข้าใจการใช้งาน WordPress Hook ทั้ง 2 ชนิดกันไปแล้ว ที่นี้เราจะมาเริ่มทดลองใช้งานจริงกันครับ

นับจำนวนคนเข้าเว็บด้วย Hook ชนิด Action

โค้ด wordpres hook wp_header นับจำนวนคนเข้าชม

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

มาดูคำอธิบายโค้ดกันครับ

function hook_action_count_view(){
        global $post; //เรียกใช้ตัวแปร $post ซึ่งคือตัวแปรที่เก็บรวมรวมข้อมูลทั้งหมดของบทความนั้นๆ ไว้
        $post_id = $post->ID; //สร้างตัวแปรเก็บค่า ID ของบทความ
        $old_count_view = get_post_meta( $post_id, 'count_view', true); //รับค่าจำนวนคนอ่านปัจจุบัน
        $new_count_view = $old_count_view + 1; //นำค่าจำนวนคนอ่านปัจจุบันมาบวกเพิ่มอีก 1 คือมีคนอ่านเพิ่มอีก 1 ครั้ง
        update_post_meta( $post_id, 'count_view', $new_count_view ); //อัพเดทค่าจำนวนคนอ่าน
}
add_action( 'wp_head', 'hook_action_count_view' );

เพิ่มเครดิตให้บทความด้วย Hook ชนิด Filter

หากเราต้องการเพิ่มเครดิตไว้ที่ท้ายบทความของทุกบทความเช่น “เขียนโดย xxx” เราก็ต้องไปเพิ่มที่ท้ายเนื้อหาใช่ไหมครับ ดังนั้น hook ที่ใช้งานก็ต้องเป็น filter ที่ชื่อว่า the_content ที่มีหน้าที่แสดงเนื้อหาบทความนั่นเอง

โค้ด wordpres hook the_content เพิ่มข้อความเครดิต

มาดูคำอธิบายโค้ดกันครับ 

function hook_filter_show_credit( $content ){
        $credit = "เขียนโดย Kollayuth @offy"; //ประกาศตัวแปรข้อความเครดิต
        return $content.$credit; //นำตัวแปรข้อความเครดิตไปต่อท้าย $content 
}
add_filter( 'the_content', 'hook_filter_show_credit' );

จะเห็นว่าช่วยได้เยอะมากๆ เลยนะครับ โค้ดแค่ 2-3 บรรทัด เราก็เพิ่มข้อความต่อท้ายเนื้อหาบทความทุกบทความได้แล้ว

แหล่งรวมลิสต์ WordPress Hook

  • Code reference( wordpress hooks and filters list ) ของ wordpress.org ( เข้าไปแล้วค้นหาตามต้องการได้เลยครับ )
  • Hook reference ของ WooCommerce ( อันนี้แถมให้ครับ สำหรับคนที่ต้องการโมหรือเขียนปลั๊กอินที่ใช้งานร่วมกับ WooCommerce )
  • ลิสต์ Hook ภาษาไทย ที่ทางเราจัดทำขึ้นครับ ยังมีไม่เยอะมาก แต่จะทยอยเขียนเพิ่มขึ้นเรื่อยๆ นะครับ

สรุป : เรื่อง WordPress Hook

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

Line

เรียน Wordpress
พร้อมรับการแจ้งเตือนเนื้อหาใหม่ ๆ
ฟรี!! ทั้งหมด สมัครเลย

เกี่ยวกับเรา

การติดต่อ

ติดตามเรา

ติดต่อเรา