การใช้ฟังก์ชั่น wp_enqueue_script แทรก JavaScript ใน WordPress

Published on April 19th, 2012

By Armno P.

ปกติเราจะโหลดไฟล์ JavaScript เข้ามาในเพจโดยใช้แท็ก <script>

<script src="js/script.js"></script>

ซึ่งพอมาทำธีม WordPress ผมก็จะมักง่ายโดยการใช้แท็ก <script> อย่างเดิมนี่แหละ

<script src="<?php bloginfo('template_url'); ?>/js/script.js"></script>

จริงๆ แล้ว WordPress มีฟังก์ชั่นสำหรับโหลด JavaScript อยู่แล้วนั่นก็คือ wp_enqueue_script ที่ผลลัพธ์ก็เหมือนกัน คือได้แท็ก <script> ออกมา แต่ฟังก์ชั่นนี้มีประสิทธิภาพมากกว่า ซึ่งก็คือ

จะโหลด JavaScript ก็ต่อเมื่อมันยังไม่ถูกโหลดเท่านั้น ตัวอย่างเช่นเวลาเรามึนๆ ใช้แท็ก <script> โหลดไฟล์ .js เข้ามาในเพจหลายรอบ ก็จะทำให้ทั้งเสียเวลาโหลดหน้าเพจเพิ่มขึ้น เสียเวลารันไฟล์ .js ตัวนั้นอีกโดยที่ไม่จำเป็น แต่ฟังก์ชั่น wp_enqueue_script จะช่วยเช็คให้ว่าไฟล์ที่เราจะใช้นั้นถูกโหลดเข้ามาในหน้าเพจหรือยัง ถ้ามีแล้วก็ไม่ต้องโหลดเข้ามาอีก
เราสามารถระบุไฟล์ .js ที่จำเป็นต้องโหลดก่อนไฟล์นี้ได้ เช่นพวก jQuery Plugin ต่างๆ ต้องโหลดเข้ามาหลังจาก jQuery

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

ผมต้องการโหลด jQuery Colorbox ซึ่งเป็น plugin ของ jQuery เข้ามาใช้งานกับธีม Sera นี้

โหลด jquery.colorbox.min เข้ามาเก็บที่ /wp-content/themes/sera/js/jquery.colorbox.min.js
ในไฟล์ functions.php ของธีม เรียกใช้ฟังก์ชั่น wp_enqueue_script

<?php
wp_enqueue_script(
    'colorbox',
    get_template_directory_uri() . '/js/jquery.colorbox.min.js',
    'jquery',
    '1.3.19'
);

เพียงเท่านี้ เจ้าไฟล์ jquery.colorbox.min.js ก็จะถูกโหลดเข้ามาอย่างถูกหลักอนามัย (ซึ่งก็คือหลังจากที่ jQuery ถูกโหลดเข้ามาแล้วนั่นเอง)

Parameters ของฟังก์ชั่น wp_enqueue_script

$handle (string) ชื่อของ script ที่จะโหลดเข้ามา (lowercase เท่านั้น) WordPress จะเอาตัวนี้แหละไปเช็คว่ามันถูกโหลดเข้ามาในเพจหรือยัง อย่างของผมข้างบนก็เป็นชื่อ colorbox
$src (string) ก็คือ path ที่เก็บไฟล์ .js ที่จะโหลดเข้ามา
$deps (array) ไฟล์ที่จำเป็นก่อนโหลดไฟล์นี้ (dependencies) โค้ดข้างบนบอกว่าเป็น jquery ก็คือต้องโหลด jquery เข้ามาก่อน ถึงค่อยโหลดตัวนี้
$ver (string) เวอร์ชั่นของไฟล์ .js เพื่อให้มั่นใจได้ว่าเครื่องของผู้ใช้จะได้ไฟล์เวอร์ชั่นเดียวกับบนเซิฟเวอร์ โดย WordPress จะเอาไปต่อเป็น query string ให้หลัง path ของไฟล์
$in_footer (boolean) ถ้าต้องการใช้ script นี้โหลดที่ footer แทนที่จะเป็นในแท็ก <head> ก็เซ็ตให้เป็น true ไปครับ (การโหลด .js ไว้ท้ายๆ จะช่วยทำให้เว็บเราโหลดไวขึ้นนิดหน่อย)

ฟังก์ชั่นนี้ไม่ return ค่าอะไรออกมานะครับ ข้อมูลเพิ่มเติมดูได้ที่ WordPress Codex/wp_enqueue_script ได้เลยครับ

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

Tags: