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

conflict

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

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

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

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

การตีกันของ 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 ด้วยตัวเองอยู่ ก็อย่าลืมเอาเทคนิคนี้ไปใช้นะครับ แล้วชีวิตจะแฮปปี้ขึ้นเยอะ

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

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
Manage Consent Preferences
  • คุกกี้ที่จำเป็น
    Always Active

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

  • คุกกี้เพื่อการวิเคราะห์

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

  • คุกกี้เพื่อปรับเนื้อหาให้เข้ากับกลุ่มเป้าหมาย

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

บันทึก