Wordpress Theme Baby to Ninja

Web Design

ในหัวข้อนี้ผมจะมาเสนอหลักสูตรสอนเขียน WordPress Theme ในขั้น Advanced ครับ แต่อย่าพึ่งตกใจไปครับ ถึงผมจะบอกว่า Advanced ผมไม่ปล่อยให้ผู้เรียนเผชิญชะตากรรมในขณะเรียนแน่นอนครับ ในคอร์สนี้ผมได้รวบรวมองค์ความรู้ที่จำเป็นทั้งหมดมาให้ผู้เรียนแล้วครับ ไม่ว่าจะเป็นเรื่องของการออกแบบโดยจะสอนตั้งแต่เรื่องของหลักการการออกแบบ ทฤษฎีของสี การจัดการเรื่อง White Space และรวมไปถึงการออกแบบเทมเพลตเว็บไซต์ด้วยโปรแกรม Photoshop CC 2014 และ 2015 ซึ่งเป็นเวอร์ชั่นล่าสุดในขณะนี้ หลังจากที่เราออกแบบเสร็จเรียบร้อย ผมก็จะพาผู้เรียนไปทำความรู้จักการเขียนเว็บไซต์ขั้นพื้นฐาน โดยที่ผมจะปูพื้นความรู้ให้ทั้งหมดไม่ว่าจะเป็น Html, CSS, CSS3, JavaScript, Jquery และ Bootstrap 3 ที่จำเป็นต้องใช้ในการแปลงไฟล์จาก PSD เป็น HTML Template เพื่อใช้ในการแปลงเป็น WordPress Theme ต่อไปครับ ในบทสุดท้ายจะเป็นเรื่องของ WordPress Theme เพียวๆเลยครับ แต่ผมจะแบ่งออกเป็น 2 ส่วนเพื่อให้ผู้เรียนสามารถกลับมาทบทวนได้ง่ายๆครับในส่วนแรกผมจะแบ่งออกเป็นพื้นฐานของ WordPress Theme ครับโดยที่ผมได้แบ่งออกเป็นหัวข้อย่อยๆไว้แล้ว และหลังจากที่จบพื้นฐานแล้วเราจะนำความรู้ทั้งหมดมาใช้เพื่อประยุกต์เป็น WordPress Theme ครับส่วนเรื่องเด่นๆ ที่ผมนำมาใส่ไว้ในคอร์สของ WordPress Theme นั้นก็จะมีพวกการ Hooks ครับและการทำให้ Theme ของเรา Support กับปลักอิน Ecommerce ยอดนิยมอย่าง WooCommerce แค่นี้ยังไม่พอครับ ผมยังได้สอนถึงการ Hooks และ Overrides เจ้าตัว WooCommerce อีกด้วย

Chapter 1 - หลักการออกแบบ

เตรียมเครื่องมือ ตัวอย่าง

  • Photoshop Baby to Ninja เครื่องมือที่เราจะใช้คือ ตามชื่อเลย Photoshop CC 2014 ซึ่งเป็นเวอร์ชั่นล่าสุดตัวนี้จะเป็นโปรแกรมในรูปแบบของ Creative Cloud ซึ่งมีค่าบริการรายเดือน ๆ 300 บาท มาพร้อมกับ Adobe Light Room 300 บาท จะได้ทั้ง 2 โปรแกรมนี้ ใช้งานแบบถูกลิขสิทธิ์ สำหรับ Photoshop ผู้เรียนคงรู้แล้วเพรา...
  • 5:53
  • Video

สอนใช้งาน brackets.io ตัวอย่าง

  • สอนใช้งาน brackets.io ตัวนี้จะเป็น code editor หรือที่เรามักจะเรียกกันว่า text editor นั้นเอง ก่อนอื่นเลยสร้าง folder project ไว้ชื่อ html จะสร้างที่ีไหนก็ได้ จากนั้นก็ทำการเปิด brackets ขึ้นมา จากนั้นผมจะลาก Folder html เข้ามายัง ซ้ายของ panels brackets จะติดตั้ง plug-in ก่อนอื่นจะ New flie index.h...
  • 11:00
  • Video

สอนใช้ photoshop cc 2014 เบื้องต้น ตัวอย่าง

  • หลังจากที่เราได้ทดลองใช้งานตัว brackets.io แล้วใน VDO นี้ เราจะมาทำการเรียนรู้ สอนใช้ photoshop cc 2014 เบื้องต้น เปิดโปรแกรมขึ้นมาเลย เดี๋ยวผมจะอธิบายเมนูและการใช้งานอย่างคร่าวๆใน VDO นี้ คำสั่ง File จะเป็นส่วนของ จัดการเอกสารต่างๆที่อยู่ project นี้ แล้วจะมีส่วนของการ Save for Web การ Extract Ass...
  • 14:28
  • Video

หลักการออกแบบ

  • หัวข้อนี้ผมจะพูดถึงการออกแบบนะครับ หลักการออกแบบไม่ได้เฉพาะเจาะจงเรื่องสวยงามเพียงอย่างเดียวนะครับ สิ่งที่ตอบโจทย์ของการออกแบบก็คือ เรื่องของความต้องการของผู้ใช้ การออกของเรามันตอบโจทย์เรื่องของการต้องการของผู้ใช้รึป่าว ถ้าเห็นในรูปตัวอย่างที่ผมยกมาตอนนี้ก็คือรูปของ iPhone ถ้าคนที่เคยใช้ iPhone ตั้ง...
  • 9:37
  • Video

หลักการเลือกใช้สี

  • หลักการเลือกใช้สี สีที่เราเลือกใช้กัน ไม่ใช่ว่าเราเลือก สีแดง สีเขียว เราชอบสีไหนเลือกใช้เลย มันมีหลักการในการเลืืกอยู่ สมมุติว่าเราชอบสีแดง เราก็มาที่โทนสีแดง เราก็มาเลือกหลักการว่าเราจะใช้หลักการอะไรในการตัดสินใจเลืิอก หลักกการหลัก ๆ มี 6 รูปแบบ โดยที่เราจะใช้บ่อย ๆ นะมี 4 รูปแบบ มีสีที่คล้ายกั...
  • 9:44
  • Video

แนะนำเรื่องโครงร่าง หรือ Wireframing

  • Wire framing หลังจากที่เราได้รู้จักกับทฤษฎีและหลักกการในการออกแบบ การใช้สี การรูปภาพ ตัวอักษร ช่องว่างหรือ white Space ทำไมเราต้องมีเรื่องของการออกแบบเว็บไซต์ การที่เราจะออกแบบเว็บไซต์ต้องมีแบบร่างขึ้นมาก่อน เพื่อเป็นต้นแบบหรือแนวทาง ต่อไปในส่วนของการทำ box up หรือ prototype ในเรื่องของ box up หรือ...
  • 2:38
  • Video

หลักการเลือกใช้รูปภาพประกอบ

  • ในหัวข้อนี้จะเป็นการเลือกใช้ภาพในงานออกแบบ การเลือกใช้ภาพในงานออกแบบก็เป็นเรื่องสำคัญ เพราะว่าเวลามีคนเข้ามาดูผลงานของเรา ประเภทเว็บไซต์หรือ portfolio ดึงดูดให้คนเข้ามาดูงานของเราได้ด้วย 3-5 วิแรก การสร้าง first impression ให้กับ User ที่เข้ามาชมเว็บไซต์เรา ตัวแรก Monochromatic Style เป็นภาพของสีโทน...
  • 5:03
  • Video

Chapter 2 - การออกแบบโครงร่างเว็บไซต์

ออกแบบโครงร่าง service

  • การออกแบบโครงร่างหน้า Service
  • 4:50
  • Video

ออกแบบโครงร่าง portfolio

  • ออกแบบโครงร่างหน้า Portfolio
  • 3:50
  • Video

ออกแบบโครงร่าง archive

  • ออกแบบหน้า Archive
  • 6:53
  • Video

ออกแบบโครงร่าง contact

  • ออกแบบโครงร่างหน้า Contact
  • 3:28
  • Video

ออกแบบโครงร่าง search

  • ออกแบบโครงร่างหน้า Search
  • 3:02
  • Video

ออกแบบโครงร่าง 404

  • ออกแบบโครงร่างหน้า 404
  • 5:16
  • Video

ออกแบบโครงร่าง index

  • ออกแบบโครงร่าง index
  • 41:06
  • Video

ออกแบบโครงร่าง about

  • ออกแบบโครงร่าง about
  • 39:7
  • Video

Chapter 3 - การออกแบบเว็บไซต์จริง

ออกแบบ Contact Page

  • ออกแบบ Contact Page
  • 12:37
  • Video

ออกแบบ Service Page

  • การออกแบบ Service Page
  • 7:17
  • Video

ออกแบบ Portfolio Page

  • การออกแบบ Portfolio Page
  • 6:49
  • Video

ออกแบบ Archive Page

  • การออกแบบ Archive Page
  • 17:49
  • Video

ออกแบบ Search Page

  • การออกแบบ Search Page
  • 5:06
  • Video

ออกแบบ About US

  • การออกแบบ About US
  • 7:55
  • Video

Chapter 4 - พื้นฐานการเขียนเว็บไซต์

พื้นฐาน jQuery Travelsing and Filtering

  • พื้นฐาน jQuery Travelsing and Filtering
  • 27:11
  • Video

พื้นฐาน jQuery Expanding on()

  • พื้นฐาน jQuery Expanding on()
  • 9:38
  • Video

พื้นฐาน jQuery KeyBoard Events

  • พื้นฐาน jQuery KeyBoard Events
  • 14:49
  • Video

พื้นฐาน jQuery Link layover

  • พื้นฐาน jQuery Link layover
  • 7:04
  • Video

พื้นฐาน jQuery Taming CSS

  • พื้นฐาน jQuery Taming CSS
  • 9:34
  • Video

พื้นฐาน Jquery Animation

  • พื้นฐาน Jquery Animation
  • 10:58
  • Video

แนะนำ Bootstrap 3

  • แนะนำ Bootstrap 3
  • 5:28
  • Video

Chapter 5 - การแปลงไฟล์ PSD เป็น HTML

แปลงไฟล์ Portfolio

  • แปลงไฟล์ Portfolio
  • 10:33
  • Video

แปลงไฟล์ Service

  • แปลงไฟล์ Service
  • 4:46
  • Video

แปลงไฟล์ Archive ตอนที่ 1 ส่วน Blog List

  • แปลงไฟล์ Archive ตอนที่ 1 ส่วน Blog List
  • 29:44
  • Video

แปลงไฟล์ Archieve ตอนที่ 2 ส่วน Side bar

  • แปลงไฟล์ Archieve ตอนที่ 2 ส่วน Side bar
  • 22:03
  • Video

แปลงไฟล์ Search

  • แปลงไฟล์ Search
  • 10:43
  • Video

แปลงไฟล์ 404 page

  • แปลงไฟล์ 404 page
  • 21:47
  • Video

Chapter 1 - พื้นฐานการสร้าง WordPress Theme

Chapter 2 - WordPress Theme Workshop

กลับขึ้นบน