20
Apr

เทคนิคทำธีม WordPress ตอนป้องกัน Script conflict

Category: Blog / 307 views

conflict

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

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

เพราะการทำได้ทำธีมเอง มันจะเป็นการยกระดับความรู้และทักษะพร้อมกับตำแหน่งของตัวเองเพิ่มขึ้นไปด้วย นั่นก็คือสามารถผันตัวเองจาก User ธรรมดา ให้กลายเป็น Developer ได้ไงหละครับ

อย่างไรก็แล้วแต่ การทำธีม WordPress ถึงแม้ว่ามันจะง่าย แต่เมื่อไหร่ก็ตามที่ธีมที่เราจะทำมีการเรียกใช้ javascript เยอะๆ นั่นแหล่ะครับ เรื่องปวดหัวใจกำลังจะเกิดขึ้น เพราะบางครั้งบางที พอเราใช้งาน javascript เยอะๆ มันดันไม่ทำงานเอาดื้อๆ เนื่องจากว่ามันตีกันครับ!

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

แล้วจะแก้ไขอย่างไรละ?

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

<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
pauseOnAction: false,
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>

โค้ดด้านบนตัวอย่างสคริปต์ Slider ที่ผมเขียนไว้ก่อนปิด </body> ครับ โค้ดนี้จะมีโอกาสเกิดปัญหา conflict แน่ๆ เพราะมีการใช้สัญลักษณ์ $ ซึ่ง WordPress มีการสงวน $ ไว้เพื่อการใช้งานสำหรับ Prototype library ครับ ดังนั้นถ้าเอามาใช้ใน script มันจึงก่อให้เกิดปัญหาได้ WordPress จึงแนะนำว่า ถ้ามีการเขียนสคริปต์ให้ใช้ JQuery แทน $ เพื่อป้องกันปัญหานั่นเอง เอาล่ะ เราเปลี่ยน $ ให้เป็น JQuery แทนเลยครับ (มันทำงานได้เหมือนกัน) นั่นก็คือ จะได้โค้ดนี้ไปใช้งานแทน

<script type="text/javascript">
jQuery(window).load(function(){
jQuery('.flexslider').flexslider({
animation: "slide",
pauseOnAction: false,
start: function(slider){
jQuery('body').removeClass('loading');
}
});
});
</script>

เทคนิคนี้เป็นเทคนิคที่ดีมากๆ และ WordPress เองก็แนะนำเพื่อป้องกันไม่ให้มันเกิดการ conflict กับ javascript library อื่นๆครับ สำหรับคนที่กำลังหัดพัฒนาธีม WordPress ด้วยตัวเองอยู่ ก็อย่าลืมเอาเทคนิคนี้ไปใช้นะครับ แล้วชีวิตจะแฮปปี้ขึ้นเยอะ

แล้วเจอกันในบทความตอนต่อไปครับผม

Tags:


Phraisohn Siripool is a Graphic Designer and Website Developer. Contact Buksohn for Your Business Endeavours