รู้จัก WordPress Hooks: Actions และ Filters

สวัสดีครับ พบกันกับบทความใหม่อีกแล้วนะครับ วันนี้ยังคงอยู่ในเรื่องของ WordPress ในระดับความยากแบบขั้นสูง (Advance) กันอยู่นะครับ  โดยวันนี้เราจะมาพูดเรื่องของ WordPress Hooks กันครับว่ามันคืออะไร หลายๆ ท่านคงเคยได้ยินกันมาบ้างว่าให้ทำ Hook สิ แก้ไขได้ อะไรประมาณนี้ วันนี้เราจะมาดูรายละเอียดและวิธีกันครับ

WordPress Hooks คืออะไร

WordPress Hooks ก็คือ วิธีการหนึ่งที่ทาง WordPress มีไว้เพื่อให้เราทำการเพิ่ม ลด แก้ไข ปรับแต่ง หรือมีส่วนร่วมในการแก้ไขโค้ดของเวิร์ดเพรส ธีมหรือปลั๊กอิน (WordPress / Themes / Plugins) โดยไม่จำเป็นที่จะต้องไปยุ่งกับโค้ดจริงของมัน ทำให้เราสามารถทำการปรับแต่งหน้าตาหรือความสามารถของเว็บไซต์ได้ตรงกับความต้องการครับ ในกรณีที่เราสร้างธีมหรือปลั๊กอินขึ้นมาเอง เราก็สามารถสร้าง Custom Hooks ที่เฉพาะเจาะจงสำหรับธีมหรือปลั๊กอินของเราได้เองด้วยครับ

ประเภท WordPress Hooks มีอะไรบ้าง

WordPress Hooks นั้นมีอยู่ 2 ประเภทหลักๆ ครับ ได้แก่ Actions และ Filters Hooks ซึ่งทั้งสองอย่างนี้ก็ใช้งานแตกต่างกันครับ ได้แก่ Actions และ Filters Hooks

Actions

Actions คือ Hooks ที่มีไว้ให้เราเข้าไปทำเพิ่มหรือลดอะไรบางอย่าง แต่ไม่ได้แก้ไขโค้ดเดิมขณะทำการประมวลผลของระบบ WordPress หรือ Themes หรือ Plugins

กระบวนการสร้าง Actions – Hooks มี 2 ขั้นตอน

1. การสร้างฟังก์ชั่นเรียกกลับ (Callback function) ในกรณีนี้คือฟังก์ชั่นปกติทั่วไปที่เราสร้างขึ้นมา เราสามารถเก็บไว้ในไฟล์ functions.php หรือที่ไหนก็ได้ที่สามารถเรียกใช้งานได้ ในฟังก์ชั่นนี้อาจจะมีการเรียกใช้พารามิเตอร์หรือไม่ก็ได้
2. ทำการเพิ่มฮุกให้กับฟังก์ชั่นเรียกกลับ (Assign hook your callback function) กระบวนการนี้เป็นขั้นตอนถัดมาโดยเราจะทำการเพิ่มคำสั่ง add_action() เพื่อทำการ Action Hook กับฟังก์ชั่นดังกล่าว ในส่วนของ add_action() นั้นจะต้องมีพารามิเตอร์อยู่ภายในจำนวนอย่างน้อย 2 ตัวด้วยกัน
3. พารามิเตอร์ตัวแรกจะเป็นชื่อของฮุก (Hook) นี้
4. พารามิเตอร์ที่สองจะเป็นชื่อของฟังก์ชั่น Callback function

ตัวอย่าง

function wporg_callback() {
   // do something
}
add_action( 'init', 'wporg_callback' );

นอกจากนี้ ในขั้นตอนการฮุก (Hook) ยังสามารถมีพารามิเตอร์เสริม (Additional Parameter) เป็นพารามิเตอร์ที่ 3 ซึ่งพารามิเตอร์นี้เป็นพารามิเตอร์ที่บอกถึงลำดับความสำคัญ (Priority) ของฟังก์ชั่นที่เราใช้ในการฮุก (Hook)

ลำดับความสำคัญ (Priority) นี้จะมีค่าเป็นตัวเลขบวกโดยทั่วไปอยู่ระหว่าง 1 ถึง 20  แต่สามารถเพิ่มขึ้นได้ถึง 100 โดยค่าเริ่มต้นจะถูกกำหนดไว้ที่ 10 ในกรณีที่ไม่ใส่ค่าใดๆ ฟังก์ชั่นที่มีค่ามากกว่าจะประมวลผลหลังจากฟังก์ชั่นที่มีลำดับความสำคัญน้อยกว่า เช่น ฟังกชั่นที่มีลำดับความสำคัญที่ 11 จะประมวลผลหลังจากฟังก์ชั่นที่มีลำดับความสำคัญที่ 9 เป็นต้น

add_action('init', 'wporg_callback_run_me_late', 11);
add_action('init', 'wporg_callback_run_me_normal');
add_action('init', 'wporg_callback_run_me_early', 9);
add_action('init', 'wporg_callback_run_me_later', 11);

จากตัวอย่างด้านบนมีการฮุก (Hook) ไปที่ init ที่เดียวกัน ลำดับการเรียกจะเป็นดังนี้ คือ ‘wporg_callback_run_me_early() เป็นลำดับแรกเพราะมีลำดับความสำคัญที่ 9 และลำดับถัดมาจะเรียก wporg_callback_run_me_normal() เพราะมีค่าเป็น 10 โดยพื้นฐาน ในส่วนถัดมาก็จะมาเรียกในส่วนของ wporg_callback_run_me_late() และสุดท้ายก็จะไปที่ wporg_callback_run_me_later() เป็นลำดับท้ายสุด

นอกจากนั้นแล้ว ในส่วนท้ายสุดยังมีพารามิเตอร์อีกตัวที่เป็นตัวเลขเช่นกัน มีไว้เพื่อกำหนดจำนวนพารามิเตอร์ (The number of Argument) ที่เราต้องการเรียกใช้ในฟังก์ชั่นของเรา ยกตัวอย่างเช่น add_action(‘save_post’, ‘wporg_custom’, 10, 2 ); เลข 2 ก็คือจำนวนพารามิเตอร์ที่จะถูกเรียกใช้ โดยฟังก์ชั่นที่เราเขียนจะเป็นดังนี้ครับ

function  wporg_custom( $post_id, $post ) {
	// do something
}

จะเห็นว่ามีการกำหนดพารามิเตอร์ขึ้นมา 2 ตัว ได้แก่ $post_id และ $post ครับ

ตัวอย่างที่ใช้บ่อย

• การประกาศว่าธีมที่เรากำลังเขียนมีความสามารถอะไรบ้าง โดยฮุกไปที่ after_setup_theme

 add_action( 'after_setup_theme', 'wpdocs_i_am_a_function' );
 function wpdocs_i_am_a_function() {
     add_theme_support( 'title-tag' );
     add_theme_support( 'post-thumbnails' );
     add_theme_support( 'custom-header' );
 }

• การเรียกใช้งานไฟล์ CSS และ JS โดยฮุกไปที่ wp_enqueue_scripts

function themeslug_enqueue_style() {
    wp_enqueue_style( 'my-theme', 'style.css', false );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
 
function themeslug_enqueue_script() {
    wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );

• การเพิ่มข้อความลงไปในส่วนล่างโดยฮุกไปที่ wp_footer

function your_function() {
    echo 'This is inserted at the bottom';
}
add_action( 'wp_footer', 'your_function' );

สำหรับรายการ Action Hook นั้น WordPress ได้ทำการจัดทำรายการ Action Hook ที่เราสามารถใช้ได้ ตามลิงก์เอกสารอ้างอิง Action Reference นี้ครับ

Filters

Filters คือ Hooks ที่มีไว้ให้เราสามารถทำการแก้ไขข้อมูลขณะกำลังทำการประมวลผลของระบบ WordPress หรือ Themes หรือ Plugins

กระบวนการเพิ่ม Filters – Hooks มี 2 ขั้นตอน

1. การสร้างฟังก์ชั่นเรียกกลับ (Callback function) ในกรณีนี้คือฟังก์ชั่นปกติทั่วไปที่เราสร้างขึ้นมา เราสามารถเก็บไว้ในไฟล์ functions.php หรือที่ไหนก็ได้ที่สามารถเรียกใช้งานได้ ในฟังก์ชั่นนี้อาจจะมีการเรียกใช้พารามิเตอร์หรือไม่ก็ได้
2. ทำการเพิ่มฮุกให้กับฟังก์ชั่นเรียกกลับ (Assign hook your callback function) กระบวนการนี้เป็นขั้นตอนถัดมาโดยเราจะทำการเพิ่มคำสั่ง add_filter() เพื่อทำการ Filter Hook กับฟังก์ชั่นดังกล่าว ในส่วนของ add_action() นั้นจะต้องมีพารามิเตอร์อยู่ภายในจำนวน 2 ตัวด้วยกัน

ตัวอย่าง

function wporg_filter_title( $title ) {
    return 'The ' . $title . ' was filtered';
}
add_filter( 'the_title', 'wporg_filter_title' );

ตัวอย่างด้านบนเป็นการทำ Filter Hook ที่ the_title โดยมีฟ้งก์ชั่นที่เราสร้างชื่อ wporg_filter_title( $title ) การทำฮุกนี้มีเป้าหมายเพื่อจะเปลี่ยนหัวข้อจาก $title ธรรมดา เช่นชื่อ Learning WordPress จะถูกเปลี่ยนเป็น The Learning WordPress was filtered แล้วนำไปแสดงผล

ในส่วนของพารามิเตอร์ของ Filter Hooks นี้ จะยังสามารถมีพารามิเตอร์ที่เป็นตัวเลขเพิ่มขึ้นมาเหมือนกับ Action Hooks คือ เรื่องของลำดับความสำคัญ (Priority) และจำนวนพารามิเตอร์ (The number of Argruments) สำหรับอีกตัวอย่างด้านล่างด้านล่างเป็นการเพิ่ม CSS Class ลงไปในส่วนของ body class ที่มีอยู่แล้วด้วยการใช้ Filter Hooks ครับ

function wporg_css_body_class( $classes ) {
    if ( ! is_admin() ) {
        $classes[] = 'wporg-is-awesome';
    }
    return $classes;
}
add_filter( 'body_class', 'wporg_css_body_class' );

ตัวอย่างที่ใช้บ่อย

• การแก้ไขจำนวน excerpt ให้เป็นจำนวน 20 คำ ที่ด้วยฮุกที่ชื่อ excerpt_length

function nd_dosth_custom_excerpt_length() {
    return 20;
}
add_filter( 'excerpt_length', 'nd_dosth_custom_excerpt_length' );

• การเปลี่ยน CSS Class ใน post  class function

add_filter('post_class', 'filter_post_class', 10, 3);

function filter_post_class($classes, $class, $post_id) {

    $temp = implode(' ', $classes); 
    $temp = preg_replace('/\s\btag\-\w*\b/i', '', $temp);

    return explode(' ', $temp);

}

สำหรับรายการ Filter Hook นั้น WordPress ได้ทำการจัดทำรายการ Filter Hook ที่เราสามารถใช้ได้ ตามลิงก์เอกสารอ้างอิง Filter Reference นี้ครับ

การสร้างฮุกขึ้นมาเอง (Custom Hooks)

Custom Hooks คือ ฮุกที่เราสามารถทำการสร้างขึ้นมาเอง โดยไม่ต้องอ้างอิงกับฮุกของ WordPress วิธีการสร้างหรือลงทะเบียนฮุกนั้นก็ใช้วิธีการเดียวกันกับ Hooks ปกติ เพียงแต่ในช่องพารามิเตอร์แรกเราสามารถที่จะกำหนดชื่อของตัวเองได้โดยชื่อที่ตั้งนั้นจะต้องมีการใส่ชื่อธีมหรือปลั๊กอินอยู่ด้านหน้าเพื่อป้องกันการซ้ำซ้อนของโค้ด เช่น ถ้าเราต้องการสร้างฮุกสำหรับส่วนเนื้อหาของอีเมล์ เราก็ให้มีคำว่าชื่อธีม wporg_ นำหน้า จะกลายเป็น wporg_email_body หรือถ้าเขียนในรูปแบบฮุกก็จะเป็น add_action( ‘wporg_email_body’, ‘myprefix_custom_email’ ); ครับ

ส่วนวิธีการเรียกใช้ เราจะใช้ do_action() สำหรับ Action Hook ไปวางในตำแหน่งที่ต้องการ และ apply_filter() สำหรับ Filter Hook ในการแก้ไขดังตัวอย่าง

• การเรียกใช้ด้วย do_action()

do_action( 'wporg_after_settings_page_html' );

• การเรียกใช้ด้วย apply_filters()

function wporg_create_post_type()
{
    $post_type_params = [/* ... */];
 
    register_post_type(
        'post_type_slug',
        apply_filters( 'wporg_post_type_params', $post_type_params )
    );
}

สรุป

WordPress Hook สามารถช่วยให้เราทำงานกับระบบของ WordPress ได้ง่ายขึ้น ไม่ว่าจะเป็นการเพิ่ม ลด หรือแก้ไขฟังก์ชั่นของ WordPress Core, Theme หรือ Plugin และเรายังสามารถที่จะเขียนขึ้นมาเอง (Custom Hook) ได้อีกด้วย หากเรานำไปใช้ก็จะมีความสะดวกและทำให้เราสามารถพัฒนาระบบของเราได้เร็วขึ้นด้วย หวังว่าบทความนี้จะช่วยให้ทุกท่านเข้าใจระบบของ WordPress มากขึ้นนะครับ แล้วรอพบกับบทความใหม่ๆ กันอีกนะครับ สวัสดีครับ !