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