armno.in.th logo

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

Armno's avatar
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> ออกมา แต่ฟังก์ชั่นนี้มีประสิทธิภาพมากกว่า ซึ่งก็คือ

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

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

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

  1. โหลด jquery.colorbox.min เข้ามาเก็บที่ /wp-content/themes/sera/js/jquery.colorbox.min.js
  2. ในไฟล์ 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

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

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

Tags:

Related posts