บทความนี้เราจะมาต่อกันเรื่องระบบการเรียกใช้ assets ไฟล์พวก css, javascript, images, font และ สิ่งเหล่านี้ ผมจะเอาตัวอย่างจากธีม Default ที่ติดมากับ WordPress เป็นตัวอย่างนะครับ เผื่อท่านใดอยากศึกษาเองเพิ่มเติมก็จะสามารถเข้าไปอ่านแกะโค้ดได้

  • สร้าง Strcutre Assets
  • ฟังก์ชั่น funstions.php
  • อธิบายเรื่อง add_action
  • การเรียกใช้ Style และ Scripts

สร้าง Strcutre Assets

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

ก็จะแยกเป็นโฟลเดอร์ Assets, Dist ภายในFolder Assets และ Dist จะมีโฟลเดอร์ย่อยเป็น css js fonts images scss  เหมือนๆกัน สาเหตุที่แยกแบบนี้เพราะ Assets จะเป็นที่เก็บไฟล์ปกติของที่เอาไว้เขียนโค้ด ส่วน Dist เป็นไฟล์ที่ได้หลังจากการคอมไพล์แล้ว ส่วนโฟลเดอร์ข้างในก็ตามชื่อเลยครับ css ก็เก็บไฟล์ css , js ก็เก็บไฟล์ Javascript, Fonts ก็เอาไว้เก็บ Fonts, Images ก็เอาไว้เก็บภาพของระบบธีมที่เราจะเอามาประกอบ สุดท้าย SCSS ส่วนนี้คือถ้าเราจะเขียนไฟล์ โดยใช้ SASS รูปแบบ SCSS ( *เรื่อง SCSS เอาไว้ผมจะมาเขียนบทความอธิบายเพิ่มเติมในอนาคตนะครับ ) ก็ให้เอาไว้ที่นี่

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

ฟังก์ชั่น functions.php

จากบทความแรก เราจะเห็นว่ามีไฟล์ๆ หนึ่ง ที่ไม่ได้อยู่ template hierachy ของ เวิร์ดเพลส ไฟล์ที่ชื่อว่า funtions.php ไฟล์นี้เป็นไฟล์ที่สำคัญมาก ไฟล์หนึ่งซึ่งไม่ว่าเราจะทำ event หรือฮุค ใดๆ ในเว็บไซต์ เราต้องมาทำที่ไฟล์นี่ หรือถ้าเราต้องการจะ include, require php ไฟล์อื่นๆ ก็ให้มาทำที่นี่

เราสามารถเขียน ฟังก์ชั่นเพิ่ม หรือเขียน action เพื่อ ลบ ฟังก์ชั่นของเดิมที่มีอยู่ก็สามารถทำได้ที่นี่นะครับ นี่คือ ความสามารถของไฟล์นี้ เดี๋ยวหัวข้อต่อไปเราจะมาเริ่มเขียนกันเลย

Add_Action

add_action คือ ฟังก์ชั่นในการเรียกใช้ มีพารามิเตอร์ ร่วมเป็น add_action( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 ) ดูเพิ่มเติมได้ที่ Click  อธิบาย Parameter ทีละตัว

  • $tag คือ พารามิเตอร์ ประเภท สตริง จะให้ฮุคตอนไหน อธิบายโดยง่ายคือ ทำเมื่อไหร่ ตัวอย่างเช่น init = เมื่อเริ่มสร้างเวิร์ดเพลส เป็นต้น บทต่อๆ ไปผมจะมาแปลทีหล่ะอันนะครับ ว่า Hook อันนี้ ทำเมื่อไหร่ ส่วนตอนนี้ถ้าใครสนใจ สามารถเข้าไปดูเพิ่มได้ที Action_Reference
  • $function คือ Callable หรือหมายถึง ให้ไปทำที่ ฟังก์ชั่นใหนต่อ พูดง่ายๆ คือ เมื่อถึงตอนนี้ ให้ไปทำที่นี่ ตรงจุดนี้เราสามารถเขียน ฟังก์ชั่นมาเพื่อรับ อีเว้น ตอนนี้ได้เลย
  • $priority คือ ลำดับความสำคัญ คือ เมื่อมีฟังก์ชั่นที่ประมวลผล ทำพร้อมๆ กัน จะให้ลำดับความสำคัญตัวเลขจากน้อยไปมาก ค่าเริ่มต้น 10
  • $accepted_args คือ จำนวน อากิวเม้นต์ ที่ฟังก์ชั่นนี้ได้รับ ค่าเริ่มต้นเป็น 1

ขอให้โฟกัสไปที่สอง พารามิเตอร์แรกนะครับ ตัวที่สาม สี่ อาจจะยังไม่ค่อยได้ใช้เท่าไหร่ แต่สองตัวแรกเราจะพบได้บ่อยมาก ต่อไป เราจะเอา ฟังก์ชั่น add_action() ไปใช้งานจริงให้การ เรียกใช้ assets ไฟล์

การเรียกใช้ Style และ Scripts

Scripts ไฟล์ javascript ของเรา และ Style ไฟล์ CSS ของเรา จากบทที่แล้วจะเห็นว่าผมเรียกใช้มันตรงๆ ที่ด้านล่างของธีมเลย ทีนี้เราจะมาทำมันให้ถูกกับระบบของเวิร์ดเพลสนะครับ เริ่มจากสร้างไฟล์ที่ Assets -> js จากเนื้อหาด้านบน เราจะมาเรียกใช้ add_action สำหรับการเรียกใช้ assets พวกนี้. Hook ที่เอาไว้เรียกชื่อว่า wp_enqueue_scripts สามารถดูเพิ่มเติมได้ที่ลิงค์เลยนะครับ ส่วนการใช้ไงจะเป็นแบบนี้

function themeslug_enqueue_style() {
	wp_enqueue_style( 'core', 'style.css', false ); 
}

function themeslug_enqueue_script() {
	wp_enqueue_script( 'my-js', 'filename.js', false );
}

add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );

จะเห็นว่าใช้ add_action ในการเรียกใช้ ฟังก์ชั่น ให้ทำงานเรียกไฟล์ assets เข้ามา แล้วไปเข้าตามฟังก์ชั่นที่เขียนไว้ อย่างอันแรก themeslug_enqueue_style ก็จะไปเข้า function themeslug_enqueue_style แล้วในฟังก์ชั่นก็จะเรียกใช้ใช้ ฟังก์ชั่นต่ออีกที ที่ชื่อ wp_enqueue_style ส่วน themeslug_enqueue_script ก็จะไปเรียกฟังก์ชั่น themeslug_enqueue_script แล้วก็จะเรียกใช้ฟังก์ชั่น wp_enqueue_script อีกที. อธิบายฟังก์ชั่นที่ใช้ในส่วนนี้ชัดๆ นะครับ จะพบกับ ฟังก์ชั่น wp_enqueue_style และ wp_enqueue_script

wp_enqueue_script

ดูดีๆ นะครับ ฟังก์ชั่น wp_enqueue_script ไม่ใช่ ฮุค wp_enqueue_scripts คนหล่ะอย่าง คนหล่ะชื่อกัน wp_enqueue_scripts เป็นฮุค สั่งทำงานจาก add_action ส่วน wp_enqueue_script เป็นฟังก์ชั่นทั้งสองชื่อนี้ไม่เหมือนกันอีกอันมี s เอาไว้ทำ action อีกอัน ไม่มี s เป็นฟังก์ชั่นไว้เรียกไฟล์ ระวังสับสนนะครับ

มาต่อรูปแบบการใช้งานจะเป็น wp_enqueue_script( string $handle, string $src = ”, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false ) โดย จะมี พารามิเตอร์ดังนี้

  • string $handle คือ ชื่อที่เราจะตั้งให้กับการไฟล์ที่เราเรียกตัวนี้ ต้องไม่ซ้ำกับตัวอื่นๆ ที่มีอยู่นะครับ หากซ้ำจะเรียกไฟล์ล่าสุดเสมอ
  • string $src คือ ที่อยู่ของไฟล์ที่เราจะเรียก ถ้าทำตามที่ผมบอกมา ที่อยู่จะได้เป็น ~root/wp-content/theme/i-makeweb/assets/js/app.js คือถ้าสังเกตุเนี่ย โครตยาวเลย ถ้าเราไม่ชอบที่จะเขียนเองยาวๆ WordPress ก็มีฟังก์ชั่นที่เราไว้เรียกพาร์ทนี้อีก ชื่อว่า get_template_directory_uri() ซึ่งจะได้ผลลัพท์ออกมาเป็น Domain ต่อด้วย template theme directory เพราะฉะนั้นจากตัวอย่างเราจึงเขียนได้เป็น get_template_directory_uri().’/assets/js/app.js’ ซึ่งจะสั้นลงไปและไม่ว่าจะใช้ Domain อะไร ก็จะเปลี่ยนให้เองด้วย
  • array $deps คือ การสั่งเรียกไฟล์นี้หลังจากไฟล์ที่เรากำหนดใน $deps
  • $ver คือ ตัวอักษร ที่เป็นตัวกำหนดเลขเวอร์ชั่นของไฟล์ๆ นี้
  • $in_footer เป็น Boolean จะมีค่าเป็น TRUE หรือ FALSE เท่านั้น เป็นตัวกำหนดว่าต้องการให้ไฟล์นี้อยู่ในส่วนของ header หรือ footer มีค่าเป็น FALSE

 

wp_enqueue_style

ส่วนรูปแบบ พารามิเตอร์ จะมีได้ตาม รูปแบบ นี้นะครับ wp_enqueue_style( string $handle, string $src = ”, array $deps = array(), string|bool|null $ver = false, string $media = ‘all’ ) มาอธิบายกันต่อในพารามิเตอร์แต่หล่ะตัว

  • string $handle คือ ชื่อที่เราจะตั้งให้กับการไฟล์ที่เราเรียกตัวนี้ ต้องไม่ซ้ำกับตัวอื่นๆ ที่มีอยู่นะครับ หากซ้ำจะเรียกไฟล์ล่าสุดเสมอ
  • string $src คือ ที่อยู่ของไฟล์ที่เราจะเรียก ถ้าทำตามที่ผมบอกมา ที่อยู่จะได้เป็น ~root/wp-content/theme/i-makeweb/assets/css/app.css คือถ้าสังเกตุเนี่ย โครตยาวเลย ถ้าเราไม่ชอบที่จะเขียนเองยาวๆ WordPress ก็มีฟังก์ชั่นที่เราไว้เรียกพาร์ทนี้อีก ชื่อว่า get_template_directory_uri() ซึ่งจะได้ผลลัพท์ออกมาเป็น Domain ต่อด้วย template theme directory เพราะฉะนั้นจากตัวอย่างเราจึงเขียนได้เป็น get_template_directory_uri().’/assets/css/app.css’ ซึ่งจะสั้นลงไปและไม่ว่าจะใช้ Domain อะไร ก็จะเปลี่ยนให้เองด้วย
  • array $deps คือ การสั่งเรียกไฟล์นี้หลังจากไฟล์ที่เรากำหนดใน $deps
  • $ver คือ ตัวอักษร ที่เป็นตัวกำหนดเลขเวอร์ชั่นของไฟล์ๆ นี้
  • $media เป็นตัวกำหนดประเภทของ css นะครับ สามารถกำหนดเป็นได้ทั้ง  ‘all’, ‘print’ and ‘screen’, or media queries เป็นต้นนะครับ

จากบทความที่ผมพยายามอธิบาย ข้างบน ที่นี้เราจะนำเรื่องทั้งหมดมารวมกันนะครับ มาเริ่มที่เปิดไฟล์ functions.php ที่เราสร้างไว้ใน ธีม ขึ้นมา แล้วทำการ ฮุค ด้วย add_action() โดยให้ทำการเรียก scripts ( style, script ) ทั้งหมด โดยต้องการให้เรียก css ไว้ด้านบน และ เรียก javscript ไว้ด้านล่างนะครับ ลองทำดูนะครับ พอทำสำเร็จแล้ว ลองดูว่าผลลัพธ์เป็นตามที่กำหนดหรือปล่าวหรือถ้าสงสัย ลองดู code ที่ผมทำนะครับ

 

ก็จะได้ผลลัพธ์ตามภาพนะครับ แต่!!! ไม่จำเป็นต้องเป็นแบบผมเสมอไปนะครับ อาจจะเป็นแบบนี้ก็ได้

function themeslug_enqueue_scripts() {
        wp_enqueue_style( 'app-style', get_template_directory_uri().'/asset/css/app.css' ); 
        wp_enqueue_script( 'app-js', get_template_directory_uri().'/asset/js/app.js', array(), '', true ); 
    }

    add_action('wp_enqueue_scripts', 'themeslug_enqueue_scripts');

เขียนรวมกันที่ฟังก์ชั่นเดียวก็ได้นะครับ ไม่มีรูปแบบที่กำหนดไว้ขนาดนั้น ต่อมาถ้าผมถามว่า อยากจะใช้ jQuery หล่ะทำยังไง หลายๆ ท่านอาจจะตอบได้ว่า เพิ่มไฟล์เข้ามาที่ js แล้วก็เพิ่มมาอีกบรรทัด คำตอบคือ ใช่ครับ มันคือ 1 วิธีที่ใช้ได้ แต่ WordPress ได้ Pack ไฟล์ที่เราใช้กันบ่อยๆ หลายๆ อย่างมาให้อยู่แล้ว  เข้าดูได้ที่นี่ครับ Default Scripts Included and Registered by WordPress

วิธีการดูและเรียกใช้งานนั้นง่ายกว่าที่คิดครับ คือให้ดูตรง แถว Handle นั้นหล่ะ วิธีการใช้งานก็คือ จากตัวอย่างเมื่อกี้ก็ต่อไปอีก 1 บรรทัดเป็น

function themeslug_enqueue_scripts() {
        wp_enqueue_style( 'app-style', get_template_directory_uri().'/asset/css/app.css' ); 

        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'app-js', get_template_directory_uri().'/asset/js/app.js', array(), '', true ); 
    }

    add_action('wp_enqueue_scripts', 'themeslug_enqueue_scripts');

เท่านั้นเอง ง่ายขึ้นเยอะ ต่อมาผมต้องการให้เรียกไฟล์ app.js ทีหลัง ไฟล์ jQuery  เพราะเดี๋ยวเกิดปัญหา เรียกไฟล์ไม่ทันกัน เรียกใช้ก่อนจะเรียกสร้าง หน่ะครับ จาก ฟังก็ชั่นที่มี parameter $deps ให้ใส่ ก็สามารถเอา Handle เข้ามาใส่ได้เลย ตัวอย่าง โค้ดก็จะเป็น

function themeslug_enqueue_scripts() {
        wp_enqueue_style( 'app-style', get_template_directory_uri().'/asset/css/app.css' ); 

        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'app-js', get_template_directory_uri().'/asset/js/app.js', array('jquery'), '', true ); 
    }

    add_action('wp_enqueue_scripts', 'themeslug_enqueue_scripts');

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

ทีนี้หลายๆคนที่เคยทำเว็บก็จะเจอปัญหาเรื่องพวกการแก้ไขแล้วหน้าเวปไม่เปลี่ยนแปลง เพราะโดนเรียกจาก แคช มา ทำให้ไม่เปลี่ยนแปลง wordpress เลยมีการต่อ parameter เข้ามาที่พวก assets ไฟล์ เช่น css  ถ้าสังเกตุว่ามักจะมี app.css?ver=4.8 ต่อท้ายมาด้วย เพราะเมื่อโดนเก็บแคช url  เต็มๆ http://i-makeweb.app/wp-content/themes/i-makeweb/asset/css/app.css?ver=4.8 ก็จะถูกเก็บไว้ โดย browser ทีนี้ เราสามารถแก้ไขมันได้ โดยในทุกๆ ครั้งที่เราแก้ไขไฟล์

ตัวอย่างภาพที่เรียกแบบปกติ จะมี status เป็น 200 แต่ถ้าถูกเรียกโดน แคช จะมี status เป็น 304 พร้อมกับบอกเวลาที่แคชจะหมดอายุ

wordpress no cache
no cache

ดึงแบบให้ผลลัพธ์ปกติ

wordpress cache
cache

ดึงผ่านแคช เราจะมาใส่เลข version ให้กับไฟล์ก็สามารถใส่ได้ที่

function themeslug_enqueue_scripts() {
        wp_enqueue_style( 'app-style', get_template_directory_uri().'/asset/css/app.css', array(), '1' ); 

        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'app-js', get_template_directory_uri().'/asset/js/app.js', array('jquery'), '1', true ); 
    }

    add_action('wp_enqueue_scripts', 'themeslug_enqueue_scripts');
wordpress version asset
version asset

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