12 พฤษภาคม 2010XHTML+CSS to WordPress theme class by @iMenn

สองวันสร้างธีมจริงๆครับ สำหรับคลาสเรียน XHTML + CSS เพื่อไปเป็นธีมสำหรับ WordPress
ซึ่งผมได้ติดต่อพี่เม่นแห่ง imenn.com ผู้เชี่ยวชาญด้านการสร้างเว็บไซต์และธีมใน WordPress มา
เป็นผู้สอนพวกผมและเพื่อนๆ ในครั้งนี้ครับ  รายชื่อนักเรียนก็มีดังต่อไปนี้ครับ

  • เฟรมคุง ผมมาจากโคราช เพื่อมาเรียนโดยเฉพาะครับ (สุดท้ายมันก็ไม่เรียนโดยเฉพาะ - -)
  • โฟน เพื่อนผมมาจากโคราชครับ
  • ฟัก @LifeZ ซึ่งเป็นคนแรกที่ผมชวนคุยเรื่องเรียนคลาสนี้ครับ ทำงานด้วยกัน มาจาก
    นครสวรรค์
  • บี้ @biekub มาจากจังหวัดสกลนคร แต่กำลังจะไปตั้งหลักปักฐานที่เชียงใหม่แล้ว
  • แบงค์ @iBankstory บินตรงมาจากภูเก็ต อย่างเดียวที่แบงค์ไม่ให้บอกคือ อายุ

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

Day 1 : XHTML + CSS Class

วันแรกเราตั้งใจว่า เราจะเรียนตัด XHTML+CSS จากกราฟิกครับ เรื่องสถานที่เรียน เราใช้วิธี
ลิสต์รายชื่อร้านกาแฟที่รองรับพวกเราทั้งหมดในกรุงเทพมหานคร จากนั้นเราก็นำไปใส่กล่องแล้ว
เขย่าๆครับ ก็เลยได้มาเป็นที่ร้านกาแฟวาวี (จริงๆแล้วน้องฟักเลือกมา ไม่เกี่ยวกับจับอะไรมาเขย่า - -”)
ร้านนี้น้องฟักเล่าเหตุผลในการให้พี่เฟรมมาถึงที่นี่ได้ก็เพราะว่า เป็นสถานที่ที่ทวิตเพิลหลายๆคนมาครับ
กับอีกเหตุผลคือมีความทรงจำดีๆที่ร้านนี้ของครูผู้สอน
ผมจึงจำเป็นต้องคล้อยตาม ถึงแม้ว่าผมจะมีใจให้ทองหล่อมากก็ตามที

วิดิโอบรรยากาศขณะรออยู่หน้าร้านกาแฟครับ ไม่ได้ตัดต่อนะครับ ไปชมความรั่วได้

ไม่นานสมาชิกครบ อาจารย์มาแล้ว ! เราก็เดินเข้าไปครับ พี่เม่นติดต่อเรื่องสถานที่ อยากจะใช้
ห้องประชุมใหญ่ชั้นบน ครั้งแรกเราเข้าใจว่าไม่มีค่าใช้จ่ายครับ ด้วยเหตุผลนี้เราเลยยืนอึ้งในร้าน
กันสักพักหนึ่ง ก่อนที่จะมูฟว์ มาที่ทองหล่อ (555)

เราแยกกันเดินทางไปที่ทองหล่อครับ สถานที่ที่เราเล็งๆไว้คือ True Coffee เราตรงกันมาที่
The Eight ทองหล่อ ซ.8 ร้าน True Coffee ครับ ก่อนที่เราจะสั่งกาแฟและเริ่มเรียนกัน

imenn-1

เนื้อหาโดยภาพรวม พี่เม่นพาไปดู CSS พื้นฐานที่จำเป็นครับ โดยเข้าไปดูความเป็นมา เกี่ยวกับ
การแยกเนื้อหา กับ การนำเสนอ ซึ่งก็อาจจะหมายถึง HTML ที่เป็นส่วนเนื้อหา และการกำหนด
รูปแบบนำเสนอให้ CSS ช่วยจัดการ , เรื่องของ CSS Reset ที่กลับไปเคลียร์ค่า stylesheet
เดิม , Box modules ที่เข้าไปเล่นกับ div , padding , margin พี่เม่นสามารถถ่ายทอด
ด้วยการให้ลองทำจริง เขียนกันจริงๆ และเอาเว็บไซต์หลายๆเว็บไซต์มาให้ดูเป็นตัวอย่างด้วยครับ

imenn-2

พี่เม่นจะพูดถึงอะไรที่สำคัญกับงานเราจริงๆครับ การแก้ปัญหา พี่เม่นบอกว่ามันไม่ไม่มีอะไรมาก
ผมก็มองว่ามันไม่มีอะไรมากไปเลย เทพสั่งได้จริงๆครับ
:)

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

เราเริ่มต้นเรียนกันต่อครับ เราลองสร้างไซต์จากไฟล์กราฟิกที่พี่เม่นตัดไว้เป็นตัวอย่างด้วย XHTML
และ CSS ขึ้นเป็นเว็บไซต์ เป็นโครงพื้นฐาน (ซึ่งผมว่าจริงๆแล้ว เรื่องนี้ทั้งหมดมันก็ยากอยู่ตรงนี้)
มีอะไรเล็กๆน้อยๆที่เราจะเห็นตอนทำงาน ซึ่งพี่เม่นก็ไกด์ให้ได้ตลอดทางครับ

imenn-3

ระหว่างเรียนเจอเครื่องแอบงอนพี่เม่นนิดหน่อยครับ เรามาดูกันว่าพี่เม่นจัดการกับ MacBook ยังไง

เฮ้ยยย พี่ทำอย่างงี้เลยเหรอครับเนี่ย !!!

เย็นวันนั้น ก็ได้งานกันทุกคน เราจะต้องกลับไปตัดไซต์มาส่งครูเม่นครับ แต่เรา ไหนๆก็มาเจอกันทั้งที
ขอมาหาอะไรดีๆกินกันที่ทองหล่อหลังจากเลิกเรียนครับ (เอ๊ะ ! หรือนี่มันจะเป็นประเด็นหว่า - - ?)

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

imenn-5

imenn-4

อิ่มแบบ เดินไม่ได้กันเลยทีเดียว ก่อนที่ผมจะเดินตรงไปอีกหน่อย ไปยังสถานที่ ที่ทั้งน้องชาย
ทั้งเพื่อน พ่อแม่พี่น้อง บอกให้ผมไปซื้อมาฝาก นั่นก็คือช็อคโกแลตจากเดี่ยว 8 ร้าน melt-me
นั้นเอง ผมเข้าไปค้นราคาในเน็ตมาก่อนหน้านี้แล้ว แล้วก็เตรียมใจมาแล้วด้วยล่ะ

หน้าร้าน melt me บรรยากาศงดงามมาก

หน้าร้าน melt me บรรยากาศงดงามมาก

ก็จัดไปครับ ได้ฮอกไกโด ดาร์ค ช็อคโกแลตมา ผมจัดการไป ก็เลยลองเหลือมาไว้บ้างครับ ทางร้าน
เค้าไม่รับประกันการละลายที่เกินระยะเวลา 4 ชม. แต่ผมก็ฝืนมันเป็นระยะเวลาร่วมสิบชม. มาถึงบ้าน
ก็พบว่ามันเสียหายเล็กน้อย รีบเอาไปแช่เย็นซะครับ (จะลำบากทำไมเนี่ย - - ”)

พนักงานบริการดีมากครับ 15 ชิ้น สนนราคาอยู่ที่ 250 บาท ช็อคโกแลตเป็นกรัม กรัมละ 3 บาทนะครับ
(ขอค่าโฆษณาด้วยครับ - -’)

Day 2 : XHTML+CSS to WordPress theme

วันนี้พวกผมขนของกันมาด้วยครับ มาถึงร้านแต่เช้า 9 โมง ชั้นบนซึ่งเป็นสถานที่เรียนสุดแสนกว้างขวาง
เปิดให้บริการ 10.30 น. ครับ ผมจึงนั่งคุยปัญหา ขณะทำงาน ให้พี่เม่นฟัง แลกเปลี่ยนและลองทำ
ไซต์เพื่อไปประกอบเป็นธีม WordPress ขณะรอไปพลางๆ ทำงานไปด้วย กินกาแฟกันไปด้วย
(ถือโอกาสขอบคุณพี่เม่นค่ากาแฟด้วยนะครับ ทุกมื้อเลย T T)

dsc00082

กินเวลาไปอยู่นาน กับเรื่อง CSS ครับ เราทำเราเจอปัญหามากมาย ซึ่งตอนนี้คือเราจะต้องทำโครง
สร้างที่เป็น XHTML+CSS เพื่อมารองรับตัวแปร ค่าต่างๆในการทำเป็นธีม WordPress ครับ

dsc00086

เมื่อได้ไฟล์ที่เรานำไปทำเป็น XHTML+CSS เราก็จัดการนำค่าตัวแปรต่างๆ ไปใส่ในธีม WordPress
โดยพี่เม่นได้อธิบายโครงสร้างของธีม 1 ธีม การประยุกต์ใช้ต่างๆ เรียกว่าครบเครื่อง นำไปต่อยอด
ได้เลยครับ โดยทางเราก็หวังว่าเราจะขยัน และลุกขึ้นมาธีมกัน 5555

ก่อนกลับ ถ่ายรูปรวมเป็นที่ระลึกครับ ^^ (ขอบคุณพี่จี้ที่มาเป็นมือกล้องให้ครับ)

ก่อนกลับ ถ่ายรูปรวมเป็นที่ระลึกครับ ^^ (ขอบคุณพี่จี้ที่มาเป็นมือกล้องให้ครับ)

เรียกว่าเป็นประสบการณ์ที่ดีของพวกเราที่ได้ลองทำจริง เรียนรู้จริง กับพี่เม่นเทพเฉพาะทางทางด้าน
นี้โดยตรงครับ การเรียนครั้งนี้ทำให้เราได้เจอปัญหาจริง ลองทำงานจริงๆ เพื่อที่จะทำให้เรามาใช้
ประยุกต์ได้ และคำแนะนำ case study ต่างๆ ทำให้ 2 วัน สามารถเรียนวิธีเนรมิตธีม WordPress
ด้วย CSS+XHTML ได้อย่างเหลือเชื่ออออ !! (ผมท้าพิสูจน์)

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

อ่านบล็อกของเพื่อนๆ ที่พูดถึง #iMennworkshop

  • Share/Save/Bookmark

Tags: , , , ,

16 Responses to “XHTML+CSS to WordPress theme class by @iMenn”

  1. inatmon

    12 พฤษภาคม 2010, 2:47 am

    อยากเรียน..แต่ขาดปัจจัยหลายๆอย่าง มากๆ - -”

  2. iMenn

    12 พฤษภาคม 2010, 2:48 am

    จ๊ากกก พี่ไม่ได้จ้างโฆษณาน้าาาา :D

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

    อยากให้ทำกับรูปแบบอื่นๆ ดูนะครับ แล้วเจอปัญหาจะได้มาช่วยกันแก้ จะถามที่เว็บพี่หรือที่ WordPress.in.th ก็ได้นะครับ :)

  3. BieKuB

    12 พฤษภาคม 2010, 5:47 am

    โอ้ว…คิดถึงร้านบ้านไร่กาแฟจังเลยครับ ~

    ToT

  4. Gotta

    12 พฤษภาคม 2010, 11:44 am

    อยากเรียน ยิ่งไม่เซียนเลยเนี่ย

    ปล. เฟรม นี่เป็นครั้งแรกๆ จริงๆ พี่เห็นเฟรมรั่ว 5555+
    (หรือรั่วก่อนแล้ว? :P)
    ปล.2 หน้าเฟรมตอนคีบปลา แบ๊วไปไหน? lolz
    ปล.3 NB พี่เค้า อาการหนักใช่ย่อย - -”

  5. Lifez

    12 พฤษภาคม 2010, 12:28 pm

    มายืมแนวคิด กับรูปไปใช้นะครับ ^_^

  6. TogetherWay.Com

    12 พฤษภาคม 2010, 7:07 pm

    อยากเรียนง่า..

    เคาะ Macbook ได้เจ๋งมาก
    มี แงะ ออกมาก่อนด้วย 55

  7. uๅeวี

    12 พฤษภาคม 2010, 8:23 pm

    อะไรไม่ฮาเท่าตอนที่ไหว้พระกับพี่เม่นเคาะเรียก Mac ละ 55+

  8. Mekz

    12 พฤษภาคม 2010, 10:26 pm

    น่าไปจังเลยๆๆๆๆๆๆ
    เสียดายๆๆๆๆ (งืมงำๆ)

  9. iBankstory

    12 พฤษภาคม 2010, 11:43 pm

    ฮ่าๆ วันนี้ได้เข้ามาอ่านเต็มๆ เพราะว่า net เล่นไม่ได้หลายวัน
    ประทับใจจริงๆ ได้เจอเด็กเก่งๆเนี้ยยยยย นับถือในความเป็นผู้นำอย่างมาก
    สู้ต่อไปเรื่อยๆนะ (ปล.ขอโต๊ดก๊าบบบที่ลืมใส่ชื่อ ใน My Blog)

  10. Framekung

    13 พฤษภาคม 2010, 1:16 am

    @ inatmon:
    เอาไว้โอกาสหน้า หรือลองทำเอง สงสัยก็ลองมาพูดคุยกันได้นะครับ
    ผมเองจะได้ไม่ลืมด้วย - -”

    @ iMenn:
    ยังไงก็ขอการันตีในความสามารถด้านการถ่ายทอดของพี่เม่นนะครับ
    เป็นกำลังใจ และติดตามผลงานใหม่ๆต่อไปครับ (:

    @ BieKuB:
    คิดถึงเหมือนกันฮ้าฟฟ กาแฟเค้าแหล่มดีนะ มันเข้มข้น (เกิน)

    @ Gotta:
    ครับไปที่นั่นรั่วเยอะครับ 555

    @ Lifez:
    ครับผม

    @ TogetherWay.Com:
    จริงๆแล้วพี่ก็ชวนเรานะ แต่เราไม่สะดวก อิอิ พลาดแล้วๆ

    @ uๅeวี:
    เท่ห์มากครับ มีครั้งนึงเครื่องดับ เคาะๆ เขย่าๆ แล้วเครื่องเปิดนี่ เทพจริงๆ ^^

    @ Mekz:
    ฮ่าๆ เอาเป็นว่าน้องเมษเมพอยู่แล้ว สงสัยตรงไหน ช่วยได้จะช่วยนะครับ ^^

    @ iBankstory:
    ขอบคุณมากครับพี่ เขียนไว้ดี ละเอียด ยาวมาก (ได้ดูรูปจากมุมมองใหม่ๆด้วย
    อ่านของน้องฟักแล้ว เหมือนอ่านบล็อกตัวเองอยู่ 555 ) ขอบคุณมากครับ
    ที่เห็นเฟรมในมุมมองนั้น (แต่กินเยอะนี่ไม่ใช่ตัวตนที่แท้จริงนะ)

  11. นายอาร์ม

    13 พฤษภาคม 2010, 6:58 pm

    555 ไ้หว้พระ
    มันเตรียมการมาดีจริงๆ

  12. NaiTan

    26 มิถุนายน 2010, 1:59 pm

    โอ้โห้ลงทุนไปเรียนกันถึงที่กรุงเตพเลย แถมยังเรียนกับคนเทพๆด้วย ขยันเรียนรู้ดีครับ ช่วงนี้ไม่ค่อยได้ศึกษาหาความรู้อะไรพวกนี้เพิ่มเติมเลย เทอมนี้เยอะ 7 วันไม่มีวันหยุด

  13. turn

    22 กรกฎาคม 2010, 5:15 pm

    สุดยอด นับถือความสามารถเเละขยันจริงๆครับ
    เเบบอย่างที่ดี
    สู้ๆครับ
    ติดตามผลงานตลอด

  14. พ่อปัน ปัน

    5 สิงหาคม 2010, 9:45 pm

    เด็กสมัยนี้มีโอกาศเยอะครับ…พ่อปัน ปัน ขอสนุบสนุนอีกคน
    และอีกอย่างก็เป็น “หลานย่าโม” เหมือนกันครับ

  15. JoeKung

    7 สิงหาคม 2010, 3:24 am

    เห็นแล้วอยากไปเรียนด้วยจังเลย d^_^b”

Leave a Reply