Wordpress Theme Baby to Ninja

ในหัวข้อนี้ผมจะมาเสนอหลักสูตรสอนเขียน 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

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

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

11:00

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

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

14:28

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

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

9:37

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

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

9:44

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

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

2:38

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

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

5:03

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

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

การออกแบบโครงร่างหน้า Service

4:50

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

ออกแบบโครงร่างหน้า Portfolio

3:50

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

ออกแบบหน้า Archive

6:53

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

ออกแบบโครงร่างหน้า Contact

3:28

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

ออกแบบโครงร่างหน้า Search

3:02

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

ออกแบบโครงร่างหน้า 404

5:16

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

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

41:06

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

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

39:7

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

ออกแบบ Contact Page

ออกแบบ Contact Page

12:37

ออกแบบ Service Page

การออกแบบ Service Page

7:17

ออกแบบ Portfolio Page

การออกแบบ Portfolio Page

6:49

ออกแบบ Archive Page

การออกแบบ Archive Page

17:49

ออกแบบ Search Page

การออกแบบ Search Page

5:06

ออกแบบ About US

การออกแบบ About US

7:55

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

พื้นฐาน jQuery Travelsing and Filtering

พื้นฐาน jQuery Travelsing and Filtering

27:11

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

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

9:38

พื้นฐาน jQuery KeyBoard Events

พื้นฐาน jQuery KeyBoard Events

14:49

พื้นฐาน jQuery Link layover

พื้นฐาน jQuery Link layover

7:04

พื้นฐาน jQuery Taming CSS

พื้นฐาน jQuery Taming CSS

9:34

พื้นฐาน Jquery Animation

พื้นฐาน Jquery Animation

10:58

แนะนำ Bootstrap 3

แนะนำ Bootstrap 3

5:28

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

แปลงไฟล์ Portfolio

แปลงไฟล์ Portfolio

10:33

แปลงไฟล์ Service

แปลงไฟล์ Service

4:46

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

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

29:44

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

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

22:03

แปลงไฟล์ Search

แปลงไฟล์ Search

10:43

แปลงไฟล์ 404 page

แปลงไฟล์ 404 page

21:47

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

Chapter 2 - WordPress Theme Workshop