กลับมาพบกันใหม่อีกเช่นเคยนะครับ สำหรับบล็อกเล่าเรื่องราวการทำเว็บของบักสน วันนี้ผมมีเรื่องราวที่เป็นประเด็นน่าสนใจมากๆมาเล่าสู่กันฟัง ซึ่งเหมาะเป็นอย่างยิ่งสำหรับคนที่กำลังอยากจะผันตัวเองก้าวเข้าสู่โลกของการเป็นนักพัฒนาธีม WordPress หรือ WordPress Theme Developer นั่นเองครับ
ปัญหาสมัยที่ผมหัดทำธีมใหม่ๆนั้น สิ่งที่ผมเจอก็คือทำธีมแล้วเว็บเจ๊งหรือทำงานไม่สมบูรณ์ เพราะจาวาสคริตป์ตีกันครับ เช่น ลงปลักอินนี้ไปก็ไม่ทำงาน หรือทำงานแต่ตัวอื่นไม่ทำเอาดื้อๆ ตอนนั้นก็ปวดหัวมาก ไม่รู้ว่าทำไม แต่ปัญหามีไว้ให้เราได้เรียนรู้จากมันครับ ช่วงนั้นผมก็ศึกษาจากการอ่านบทความในอินเตอร์เน็ตนั่นแหล่ะครับ แล้วก็ลองทำความเข้าใจมัน จนทราบว่าจริงๆแล้วเป็นเพราะผมเรียกใช้งานสคริตป์ไม่ถูกต้องนั่นเอง
การเรียกใช้งานสคริปต์ถ้าเขียนในรูปแบบ HTML ง่ายๆ ก็จะเขียนได้ถ่ายแบบนะครับ ไม่ว่าจะเป็นแบบ @import เข้ามา หรือแบบฝัง <script> อะไรแบบนี้ ก็แล้วแต่คนถนัดครับ แต่ถ้าเป็นแบบ WordPress นั้น การเรียกแบบ<script> จะเป็นอะไรที่ตอบโจทย์มากกว่า
แต่ว่าการเรียกแบบ <script> โดยตรงเนี่ย ชีวิตฉิบหายวายวอดได้ครับ เพราะมันจะเกิดการตีกันเองของสคริตป์อย่างที่ผมพูดไปในตอนต้น อ้าว แล้วจะทำอย่างไรดีล่ะ?
ลองดูตัวอย่าง HTML กันก่อนครับ
<script src="js/jquery.js"></script> <script src="js/lightbox.js"></script> <script src="js/slider.js"></script>
ด้านบนคือตัวอย่าง HTML ง่ายๆนะครับ ซึ่งพอเราจะเอามาใช้งานจริงๆ เราจำเป็นต้องเขียนใหม่ โดยใช้หลักการ “ต่อคิว” ครับ ถามว่าทำไมถึงต้องต่อคิวด้วยหล่ะ? ก็เพราะว่าสาเหตุที่ทำให้สคริปต์ตีกันก็เนื่องมากจาก “มีการใช้งานสคริตป์ซ้ำซ้อน” ครับ ยกตัวอย่างเช่น หากคุณต้องการทำสคริปต์สำหรับทำ Lightbox อย่างแรกก็จะมีการเรียกใช้สคริปต์ jquery ขึ้นมาก่อน แล้วก็เรียกสคริตป์สำหรับ Lightbox ส่วนอีกสคริตป์อาจจะเป็นสคริปต์ทำภาพสไลด์ ซึ่งก็ต้องมีการเรียก jquery อีกเช่นกัน ถึงจะเรียนก slider.js ขึ้นมาทำงานได้ จะเห็นว่า สคริตป์ทั้งสองตัวนี้ ต่างก็มีการเรียกใช้งาน jquery เหมือนๆกันครับ แล้วยิ่งถ้าหากเราลงปลักอินเพิ่ม หลายปลักอินก็เรียก jquery ขึ้นมาอีก โอย และเมื่อมีการเรียกไฟล์ซ้ำซ้อนแบบนี้แหล่ะครับ มันถึงได้ทำให้เว็บของเราเอ๋อ ดูงงๆกับชีวิต
[skill2]WordPress เลยตั้งกฎไว้ว่า ถ้าจะให้ดี จงเอาสคริตป์เหล่านั้นมาทำการต่อคิวใช้งาน โดยใช้ฟังก์ชั่นที่เรียกว่า wp_enque_script หลักการของมันก็คือ เหมือนเอาสคริปต์พวกนี้ไปต่อแถวเพื่อเรียกใช้งาน โดยแม้ข้อแม้ว่าถ้าเคยใช้งานมันไปแล้ว ถ้ามันมาต่อคิวอีกรอบ ให้ไล่มันกลับไป พร้อมตวาดด้วยเสียงดังเกิน 800 เดซิเบลว่า แกเคยมาแล้ว จะสาระแนมาอีกทำไม๊ กูไม่รับแล้วโว้ย!!!! และด้วยเทคนิคนี้แหล่ะครับ เป็นเทคนิคที่เลอค่ามาก ที่ช่วยให้การเรียกใช้งานจาว่าสคริปต์ในเว็บของเรา ไม่ต้องเป็นเรื่องน่าปวดหัวอีกต่อไป[/skill2]
เอาละ พอเราทราบแนวทางการแก้ปัญหาแล้ว ต่อมาก็มาดูวิธีการทำจริงๆกันเลยครับ โดยผมจะอ้างอิงจากเว็บ codex ของ WordPress นี่แหล่ะครับ เพื่อจะได้เป็นแนวทางให้เพื่อนๆกลับไปศึกษาเว็บนี้เองได้มากขึ้น เพราะจริงๆแล้วเว็บนี้คือคลังข้อมูลที่เจ๋งสุดยอดสำหรับคนใช้งาน WordPress แต่ผมก็ไม่เข้าใจว่าทำไมหลายๆคนกลับเข้าไปแล้ว กลับมีสภาพเหมือนถูกมอมเหล้ากลับมา
ถ้าหากคุณเข้าไปยังลิงค์ที่ผมแปะ เค้าก็จะเขียนบอกไว้ครับว่า ฟังก์ชั่นนี้มันมีไว้เฮ็ดอีหยัง คร่าวๆก็เหมือนที่ผมพูดไปว่า เอาไว้ป้องกันการตีกันของสคริปต์ ถ้าสคริปต์ไหนถูกเรียกมาใช้งานแล้ว ก็ไม่ต้องเรียกอีก
ต่อมาก็คือวิธีการใช้งาน Usage
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
ดีออก!! หลายคนเห็นโค๊ดบรรทัดด้านบนถึงกับเอามือทาบอก พร้อมอุทานออกมาอย่างลืมตัว เพราะงงว่ามันคืออะไรเนี่ย? อย่าเพิ่งตกใจไปครับ ตัว Usage เค้าเขียนไว้เพื่อให้ดูเป็นแนวทาง หากเราอ่านบรรทัดต่อมาเค้าก็อธิบายไว้อยู่แล้วครับว่า แต่ละตัวมันคืออะไร มามะ หายใจเข้าออก ช้าๆ แล้วไปดูกันครับว่า แต่ละตัวในวงเล็บมันคืออีหยัง สำคัญอย่างไร
ตัวแรก $handle ตัวนี้จำเป็นต้องมีนะครับ ผมพูดให้เข้าใจง่ายๆก็คือ การ “ตั้งชื่อเรียกสคริปต์” แต่ละตัวนั่นเอง โดยจะตั้งชื่ออะไรก็ได้ไม่มีใครว่า แต่ขออย่าให้ซ้ำชื่อกันก็พอ เช่น จากสคริปต์ HTML ด้านบน ตัวแรก ผมก็จะตั้งชื่อว่า “jquery” ตัวที่สองเรียกว่า “script-lightbox” ตัวที่สามเรียกว่า “script-slider” หรือคุณจะตั้งชื่อเป็น “adam”, “Madonna” หรือ “buksohn” อะไรก็ได้ ขอเพียงแค่ตั้งชื่อแล้วคุณเก็ทและเข้าใจว่ามันเป็นสคริปต์ของอะไร
ตัวที่สอง $src ย่อมาจาก source หรือ “ตำแหน่ง” ของสคริปต์นั้นๆครับ จากโค้ด HTML ด้านบน มันอยู่ในโฟลเดอร์ js เราก็เขียนเป็น get_template_directory_uri() . ‘/js/jquery.js ครับ อ้อ คำสั่ง get_template_directory_uri() มีไว้เพื่อเรียก “ตำแหน่งธีม” ของเราครับ คือแทนที่เราจะมานั่งพิมพ์ url ธีมของเราแบบแมนนวล เช่น www.buksohn.com/wp-content/themes/buksohn ซึ่งแหม่ว์ จะมานั่งเขียนมันก็ไม่ใช่ เพราะถ้าหากวันดีคืนดีเราจะเอาธีมของเราไปแปะใช้งานในเว็บอื่น ก็ต้องมานั่งเปลี่ยน url กันให้วุ่น ดังนั้น จึงใช้คำสั่ง get_template_directory_uri() เวิร์คและฉลาดกว่ามากครับ เชื่อดิ
ตัวที่สาม $depts ตัวนี้พูดง่ายๆก็คือ ก่อนจะใช้งานสคริปต์ตัวนี้มันต้องเรียกใช้งานสคริตป์ตัวไหนก่อนหรือเปล่า? ยกตัวอย่างเช่น โค้ด HTML ด้านบน สคริปต์สองตัวล่าง จะทำงานได้ต่างก็ต้องเรียน jquery.js ด้วยกันทั้งคู่ นั่นก็หมายความว่า $depts ของมันทั้งคู่ก็คือ jquery.js นั่นเอง ตรงนี้แหล่ะครับ ที่เป็นจุดที่บอกว่า ถ้าเราเขียนกันแบบเพียวๆแมนนวลแบบไม่ได้ต่อคิว มันจะมีการใช้งานซ้ำซ้อน เพราะต่างฝ่ายต่างก็เรียกไฟล์มาใช้ สำหรับ $depts ให้เขียนโดยใช้ชื่อสคริปต์ที่เราตั้งชื่อไว้ในตอนแรกครับ จำได้ไหม? ก็ตอนเขียนใน $handle ไงครับ แต่มันจะเขียนในรูปแบบของ array(‘ชื่อสคริปต์ที่มันเรียกมาใช้งาน’) ยกตัวอย่าง โค้ดด้านบน สองโค้ดสุดท้ายก็จะเรียก array(‘jquery’) ทั้งคู่ครับ เดี๋ยวคอยดูโค้ดที่สมบูรณ์แล้วอีกที น่าจะเข้าใจมากยิ่งขึ้น
ตัวที่สี่ $ver ย่อมาจาก version ซึ่งก็ไม่ต้องแปลอะไรมาก มันก็คือเวอร์ชั่นของสคริปต์นั่นแหล่ะครับ ตัวนี้จริงๆจะใส่ก็ได้ไม่ใส่ก็ได้ แต่ถ้าใส่แล้วมันก็จะดีสำหรับเว็บที่มีการเก็บ cache ครับ เพราะบางทีอัพเดทแคชแล้วมันไม่อัพเดท เราก็เปลี่ยนตัวเลข version นี้เพื่อให้อัพเดทแคชได้ครับ
ตัวสุดท้าย $in_footer เวลาทำเว็บนะครับ ผมแนะนำให้เรียกไฟล์ javascript ที่ส่วนของ footer ของเว็บ เพราะมันจะทำให้เว็บเราโหลดได้เร็วกว่าการไปเรียกทุกอย่างที่ header ส่วนมากไฟล์ js มีไว้เพื่อสร้างลูกเล่น เอาไว้เรียกตอนท้ายดีที่สุดครับ ดังนั้นตัวนี้มันก็หมายความว่า สคริปต์ตัวนี้เจ้าจะเรียกใช้งานในส่วนของ footer หรือไม่? โดยค่าพื้นฐานมันต้องไว้เป็น false นะครับ ถ้าเราต้องการให้สคริปต์รันที่ footer ก็เขียนไปเลยว่า true ง่ายๆ
คำถามต่อมา แล้วจะเขียนไว้ทีไหนละ? คำตอบก็คือเขียนไว้ในไฟล์ functions.php ที่อยู่ในโฟลเดอร์ธีมของเรานั่นเองครับ มาดูสคริปต์กันเนาะ
<?php
function theme_name_scripts() {
wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery.js', array(), '1.0.0', true );
wp_enqueue_script( 'script-lightbox', get_template_directory_uri() . '/js/jquery.js', array('jquery'), '1.5', true );
wp_enqueue_script( 'script-slider', get_template_directory_uri() . '/js/jquery.js', array(), '', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
?>
ลองดุโค้ดด้านบนแล้วน่าจะเห็นภาพรวมมากขึ้นนะครับ อย่างไรก็แล้วแต่ เนื่องจากผมกำลังสนุกกับการเขียนบล็อก ผมจึงอยากจะแบ่งปันเนื้อหาเชิงลึกมากกว่านี้ เอาแบบโค้ดที่ผมเขียนใช้งานจริงๆมาให้ดูเลยดีกว่าครับ แล้วผมจะอธิบายแต่ละตัวที่พอจะไกด์ให้เพื่อนๆได้ทราบกันว่ามันคืออะไร มีไว้ทำไม โค้ดด้านล่างเป็นโค้ดจริงๆ ที่ผมใช้เวลาทำธีมให้ลูกค้าครับ ผมคอมเมนต์ไว้ในโค้ดแล้ว ลองอ่านกันดูนะครับ
<?php
function web_scripts_load()
{
// Deregister the included library บอก WordPress ให้รู้ว่าเราจะใช้ Jquery ของเราเอง ไม่ใช้ตัวที่ติดมากับ WordPress
wp_deregister_script( 'jquery' );
// จากนั้นลงทะเบียน script ที่เราต้องการจะใช้งาน โดยเริ่มจากตัว jquery หลัก
wp_register_script( 'jquery', get_template_directory_uri() . '/js/jquery-1.10.1.min.js', array(), null, true );
// Register the script like this for a theme:แล้วลงทะเบียนสคริตป์ตัวอื่นๆ
wp_register_script( 'script-lightbox', get_template_directory_uri() . '/js/lightbox.js', array( 'jquery' ), '', true );
// Register the script like this for a theme:แล้วลงทะเบียนสคริตป์ตัวอื่นๆ
wp_register_script( 'script-slider', get_template_directory_uri() . '/js/slider.js', array( 'jquery' ), '', true );
// ลงทะเบีบนเสร็จแล้วก็ถึงขั้นตอนการเรียกใช้งานในหน้าเว็บโดยใช้ wp_enque_script
//ตัวนี้ลำดับการเขียนมีความสำคัญโดยในหน้าเว็บจะเรียกไล่ตามที่เราเขียนก่อนหลัง
//จะเห็นว่า เราเรียกมาใช้งานแค่ตัวสคริปต์ย่อยเท่านั้น ตัวเมนหลักไม่ต้องเรียก
wp_enqueue_script( 'script-lightobx','','',true);
wp_enqueue_script( 'scirpt-slider','','',true);
}
add_action( 'wp_enqueue_scripts', 'web_scripts_load' );
?>
บทความนี้ยาวเป็นมหากาพย์จริงๆ แต่ผมเชื่อว่าเป็นบทความที่น่าจะช่วยให้หลายๆคนเห็นภาพรวมของการใช้งานสคริปต์กับ WordPress ได้มากขึ้นไม่มากก็น้อยนะครับ อย่าลืมนะครับว่า การอ่านอย่างเดียวโดยไม่เอาไปลงทำดูเอง มันก็ไม่ค่อยเกิดประโยชน์ครับ การทำธีมได้ไม่ใช่เพียงแค่อ่าน แต่ต้องอ่านและลงมือทำ ทำมากๆ ก็จะได้ประสบการณ์เยอะๆ หากทำไปแล้วเจอปัญหา ให้มองว่านั่นคือการเปิดโอกาสให้เราได้ฉลาดขึ้นครับ ยิ่งเจอปัญหามาก ยิ่งหมายความว่าเรากำลังจะได้พัฒนาตัวเองไปมากขึ้นอีก อย่าท้อครับ ความสำเร็จมันไม่ได้สร้างกันได้ง่ายๆเพียงชั่วข้ามคืน ผมเองกว่าจะมาสร้างธีมได้ก็อาศัยทั้งอ่าน ทั้งทำ ลองผิดลองถูกมาเยอะครับ ยิ่งเมื่อก่อนหาคนทำ WordPress ยากด้วย แต่เดี๋ยวนี้สบายกว่ามาก สู้ๆครับ
