นำเสนอในงานอบรมของ DomeCloud https://register.dome.press/

1. รู้จักกับเวิร์ดเพรส และ ซี้ด ธีมส์
เม่น: จักรกฤษณ์ ตาฬวัฒน์
&

2. สร้างเว็บไซต์?
Content Management System: CMS
ระบบผู้ใช้งาน เนื้อหา การนําเสนอ ฟีเจอร์อื่นๆ

3. CMS ที่ใช้ในไทย
26%
4%
21%
49%
WordPress
Joomla!
Drupal
อื่นๆ
http://trends.builtwith.com/cms/country/Thailand

4. ทําเว็บ = ทําธีม
ระบบผู้ใช้งาน เนื้อหา
การนําเสนอ
ฟีเจอร์อื่นๆ
Theme

5. Theme
‣ เป็นตลาด/ดังสุด/หลากหลายสุด
‣ เน้นถูก/สวย/เยอะ
‣ ธีมส่วนใหญ่โหลดช้า/ใช้ยาก
‣ มี Divi Page Builder ชูโรง
‣ สวยเรียบ/ประสิทธิภาพดี
‣ ธีมไม่เยอะนัก

6. Theme
‣ สร้าง Framework เอง เจ๋งมาก
‣ เลยต้องเรียนรู้ใหม่หมด T T
‣ สวยเรียบ/ประสิทธิภาพดี
‣ เป็นแค่โครง สร้างโดยทีมงานเวิร์ดเพรส
‣ ไม่สวย แต่ประสิทธิภาพดีที่สุด
‣ มาตรฐานสุด รองรับทุกฟีเจอร์

7. อยากเป็นอย่างเค้าบ้าง
สวย/หลากหลาย
มี Page Builder ที่ใช้งานง่าย
สามารถสร้าง Child Theme ได้
ประสิทธิภาพดี ตามมาตรฐานเวิร์ดเพรสทุกอย่าง
+ รองรับภาษาไทยได้ดี

12. ผู้ใช้เวิร์ดเพรส นักพัฒนาธีม&
WordPress User Theme Developer

13. แก้ไขข้อความ จัดหน้า ผ่าน Page Builder
ผู้ใช้เวิร์ดเพรส

14. ธีม: Seed + Page Builder

15. Post Loop Widget
‣ Content List/Card + Excerpt
‣ Product List/Card + Excerpt

18. นักพัฒนาธีม

19. นักพัฒนาธีม
footer.php
header.php
sidebar.php
The Loop

20. นักพัฒนาธีม
footer.php
header.php
sidebar.php
The Loop

21. นักพัฒนาธีม
footer.php
header.php
sidebar.php
archive.php
search.php
category.php
single.php
page.php
front-page.php

22. https://developer.wordpress.org/themes/basics/template-hierarchy/
Template Hierarchy

23. ธีม: Seed ‣ ตามมาตรฐานเวิร์ดเพรส รองรับ Template Hierarchy

24. ธีม: Seed
‣ แยก CSS ให้จัดการง่าย
‣ เพราะสุดท้ายปลั๊กอิน Caching จะรวมไฟล์ให้อยู่ดี
‣ มีให้เลือกแสดงเนื้อหาได้หลายแบบ
‣ เช่น Card / List ทั้งส่วนเนื้อหาและสินค้า
‣ มี Bootstrap มาให้ (เลือกปิดได้)
‣ โค้ดจากแหล่งอื่น สามารถอัพเดทได้อิสระ

25. เพิ่มลด CSS/JS ใน functions.php
Bootstrap CSS
Bootstrap JS

26. ธีม: Berry
‣ ไฟล์ CSS และ JS เป็นไฟล์เปล่าๆ ไว้สําหรับแก้โค้ดตามต้องการ
‣ ไฟล์ functions.php ไว้ประกาศค่า/เพิ่มโค้ดอื่นๆ
‣ ธีมลูก (Child Theme) ของ Seed
CSS
JS

27. ธีม Seed
ผู้ใช้เวิร์ดเพรส
นักพัฒนาธีม
‣ ใช้เป็นธีมเอนกประสงค์
‣ ใช้ร่วมกับ Page Builder ได้ดี
‣ Starter Theme แก้เลย ไม่ต้อง update อีก
‣ Parent Theme สร้าง Berry ของตัวเอง
อยู่ในมาตรฐาน WordPress & มีประสิทธิภาพดี

28. รับโหลด? แคช? ทําไฟล์ให้เล็ก?
Desktop Cache
Mobile Cache
Browser Caching
GZIP
Image Optimization
ใช้ปลั๊กอินง่ายสุด!
Minify HTML
Minify CSS
Combine CSS
Combine JS

29. Caching Plugin
WP Fastest CacheW3 Total Cache WP-Rocket
ตัวฟรีที่เจ๋งสุด
ตั้งค่าได้เยอะมาก
ใช้ยาก
ตัวฟรีที่เจ๋งพอควร
ตั้งค่าได้ไม่เยอะมาก
ใช้ง่ายมาก
ตัวเสียตังค์ที่ (น่าจะ) เจ๋งสุด
ตั้งค่าได้พอสมควร
ใช้ร่วมกับ Cloudflare ได้ดี

30. ลดขนาดรูป
imagifyEWWW Image Optimizer
ฟรีไม่จํากัด
ไม่หรูหราเท่า Imagify
ฟรีเดือนละ 25 MB
มากกว่านั้นเสียตังค์
หรือใช้โปรแกรมในเครื่อง เตรียมรูปให้ดีก่อน

31. SeedThemes.com
เม่น: จักรกฤษณ์ ตาฬวัฒน์
&
ข้อมูลเพิ่มเติมที่