26
Apr

มาสร้าง Theme WordPress ด้วยตัวเองกันเถอะ

Category: Blog / 2,448 views

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

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

และนอกจากจะใช้งานง่ายแล้ว มันยังทำธีมใช้เองง่ายอีกด้วย! ผมไม่ได้โม้นะครับ เพราะเว็บที่ผมพัฒนาให้กับลูกค้าทุกราย ผมก็ใช้ WordPress เป็นหลักครับ และเกือบทุกรายผมก็เป็นคนทำธีมให้เองกับมือ :)

นั่นแน่ อยากจะทำธีมเป็นแล้วใช่ไหมละครับ?  ผมรู้ครับว่าหลายคนในที่นี้อยากรู้ใจแทบขาดว่า แอร๊ยยยย เค้าทำธีมกันยังไงฟร่ะ ลองศึกษาเองก็ปวดหัวหลายคนจึงหนีไปมี……กันหมด ทั้งๆที่ในเว็บ wordpress.org เค้าก็เขียนไว้อย่างละเอียด แต่ทำไม๊ทำไม อ่านยังไงก็ไม่ออสโมซิสเข้าสมองบ้างเลย

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

เมาท์มานาน มาดูกันว่าหลักๆแล้ว ผมจะสอนอะไรคุณบ้าง มาดูกันครับผม

รู้จักเนื้อหาภายใน WordPress

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

ในขั้นตอนนี้ผมจะสอนให้รู้จักการวางแผน การวิเคราะห์เว็บไซต์ที่จะทำครับว่ามันต้องมีการจัดเก็บข้อมูลอย่างไร และจะแสดงออกมาอย่างไร มีอะไร

รู้ซึ้งถึง WordPress Theme Template

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

WordPress Theme Functions

แน่นอนว่าการจะทำธีมให้โดดเด่นมีลูกเล่น เราคงหนีไม่พ้นที่จะต้องรู้จักการเขียนโปรแกรม แต่ช้าก่อน! อย่าเพิ่งกลัวไปครับ ผมพูดจนหูแทบระเบิดว่าการทำธีม WordPress ไม่ยาก และภาษาเชิงโปรแกรมมิ่งก็ไม่ได้น่ากลัวอะไรเลย แค่คุณรู้ภาษาอังกฤษพื้นฐาน เช่น title, content, category, tag, date อะไรทำนองนี้ คุณก็เอาชีวิตรอดแล้วแหล่ะครับ!

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

เตรียมลงมือทำ WordPress Theme

โห! เมาท์มาตั้งนาน ยังไม่ถึงขั้นตอนการลงมือทำธีมเหรอเนี่ย? ฮ่าๆ อย่าเพิ่งบ่นไปครับ แนวสอนของผมไม่ใช้มาถึงก็โยนงานตู้มๆ ให้คุณทำ แต่ผมต้องการให้คุณเรียนรู้ทีละขั้นตอน ฝึกให้คุณได้คิด และคุ้นเคยกับสิ่งที่คุณ “จำเป็นต้องรู้” ให้มากที่สุด สิ่งสำคัญในการเรียนรู้คือเรียนอย่างเข้าใจอย่างเป็นระบบครับ เพราะนี่จะช่วยให้คุณต่อยอดองค์ความรู้เองได้ อย่าลืมครับว่าโลกใบนี้ความรู้มันมีอยู่เยอะมาก แม้แต่ผมเองก็ไม่สามารถสอนได้ทุกสิ่งอย่างบนโลกใบนี้ แต่ถ้าคุณรู้ว่าสิ่งเหล่านี้คืออะไร สำคัญอย่างไร คุณจะมองภาพออกและสามารถลงมือทำได้เอง หรือรู้วิธีค้นหาวิธีทำได้ด้วย

สเต็ปนี้ผมจะเอาไฟล์ HTML ที่มีอยู่มาให้คุณได้เห็นว่า เนี่ย ธีมที่เราจะทำเนี่ยมันเป็นแบบนี้นะ และเราจะได้ลงมือแปลง HTML ให้อยู่ในรูปแบบ WordPress Theme กันครับ

เปลี่ยนเว็บ Static ให้อยู่ในรูปแบบของ WordPress Theme

จากไฟล์ HTML ที่มีมาให้ เราจะเริ่มนำมาแปลงให้อยู่ในรูปแบบ WordPress ได้อย่างไร และจะเข้ามูลจริงๆมาแสดงได้อย่างไร ขั้นตอนนี้จะเผยทุกทีเด็ด ไม่มีหมกเม็ดให้เสียอารมณ์  ขั้นตอนไม่ยาก จับชำแหละ แปะๆ ตบๆ จบ!

เพิ่มขีดความสามารถให้ WordPress Theme ด้วยการ Extend Functions

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

Launch Your Website!

ทำเว็บเสร็จแล้ว ก็ได้เวลาเอาไปใช้งานจริงครับ ขั้นตอนนี้ก็จะสอนการย้ายข้อมูลจากที่หนึ่งไปอีกที่หนึ่งว่าทำกันอย่างไรบ้าง

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

Feedback จากคนเรียนล่าสุด สดๆร้อนๆ

Feedback จากคนเรียนล่าสุด สดๆร้อนๆ

สำหรับค่าเล่าเรียน ผมคิดคนละ 7,500 บาทเท่านั้นครับ เรียนกันสองวัน วันละ 7 ชั่วโมง เอาโน๊ตบุคมาเองนะครับ แต่ผมมีเน็ตให้ เรียนกันที่ออฟฟิศผม อยู่ติด MRT สามย่าน (เดี๋ยวผมรับที่ MRT) ผมเปิดสอนแค่ 3 คนเท่านั้น ช้าหมด อดเรียนรอบนี้ รอรอบหน้าอีกเป็นเดือนครับ ฮ่าๆ

ถ้าสนใจ ก็ส่งเมลมาบอกผมได้ครับที่ sohn.cu@gmail.com

แต่..ช้าก่อน ผมจะบอกว่า ณ ตอนนี้เหลือเพียงหนึ่งที่นั่งสุดท้ายเท่านั้นครับ

 

Tags:


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