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

WordPress hook

เนื่องจาก 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 ตัวไหนเมื่อไหร่ อย่างไร