[ไลฟ์สดสอนทำเว็บครั้งที่ 1] แนะนำ Seed 2

วันอาทิตย์ที่ 4 สิงหาคม เวลา 16:00 – 1700 น. ทีมงาน SeedThemes จะสอนทำเว็บโดยไลฟ์สดผ่านเฟซบุ๊กนะครับ ทุกคนสามารถดูได้ฟรีขณะไลฟ์ ส่วนสมาชิก Seed Kit สามารถดูย้อนหลังได้ครับ

ประเด็นของเนื้อหาที่จะพูดครั้งนี้

1. VSCode และ Extensions ที่แนะนำ

การแก้ไขโค้ดต่างๆ นั้น ต้องทำผ่านโปรแกรม Text Editor ซึ่งในคอร์สจะขอแนะนำ VSCode (Visual Studio Code) เป็นหลัก เพราะฟรีและดีมาก รวมทั้งมี Extension ที่เหมาะกับการทำเว็บในปัจจุบัน โดยแนะนำให้ลง Extension ที่จำเป็นดังนี้

1. Easy Compile ช่วยแปลงไฟล์ SCSS ให้เป็น CSS ทำให้เราเขียน SCSS ได้ง่ายขึ้น
2. Prettier – Code formatter ช่วยจัดระเบียบโค้ด CSS และ JS ให้ แค่กด Save โค้ดก็สวยเลย
3. Format HTML in PHP ช่วยจัดระเบียนโค้ด HTML ที่อยู่ในไฟล์ธีม (แต่ไม่จัด PHP นะ ยังไม่เจอตัวที่จัดแล้วถูกจริตเท่าไหร่ครับ เพราะธีม WordPress มันประกอบด้วยโค้ด HTML มากกว่าโค้ด PHP)
4. SFTP ทำให้เวลา save ไฟล์ สามารถส่งไฟล์ขึ้นเว็บทดสอบผ่าน FTP ได้ทันที ต่อไปจะได้ไม่มักง่ายโดยการแก้ไฟล์ผ่าน FTP, มาแก้ผ่านเครื่อง แล้วส่งเข้า Git กันเถอะ!

นอกจากนั้น เป็น Extension ที่เราเห็นว่าควรลง จะลงหรือไม่ก็ได้

1. GitLens — Git supercharged ทำให้เห็นรายละเอียดว่า เราเคยแก้บรรทัดไหนไปเมื่อไหร่ (เมื่อใช้ร่วมกับ Git)
2. WordPress Snippets เวลาพิมพ์คำสั่ง WordPress จะได้มีตัวช่วยเติมคำให้
3. vscode-icons-mac ทำให้ไอคอนสวยดี หาไฟล์ง่ายหน่อย

2. SCSS – ซีเอสเอสตัวร้าย

SCSS อ่านว่า “เอสซีเอสเอส” ย่อมาจาก Sassy Cascading Style Sheets ซึ่งแปลประมาณว่าการเขียน CSS แบบร้ายๆ ทันสมัย ซึ่ง SCSS นั้นเป็นภาษาสำหรับเขียน CSS ล่าสุด เกิดหลัง LESS และ Sass

ข้อดีคือ เอาโค้ด CSS แบบเดิมเขียนปนไปได้เลย (หรือใช้ตัวช่วยแปลง เช่น CSS2SCSS.COM) แต่ถ้าเริ่มใช้ฟีเจอร์ต่างๆ เป็นก็จะง่ายขึ้น โดย SeedThemes จะแนะนำให้เริ่มต้นใช้ตัวแปร, คำสั่ง import และก็ไวยากรณ์ที่ทำให้เขียนโค้ดแล้วโครงสร้างซับซ้อนน้อยลง

คำแนะนำ:

1. ไม่จำเป็นต้องเขียนให้ selector ซ้อนกันตามจริง มันซับซ้อนไป ควรมีแค่ 2-3 ชั้นพอละ
2. SeedThemes ตั้งชื่อตามหลักการ RSCSS (ภาษาไทยอ่านที่ rscss.in.th) ทำให้ชื่อคลาสสั้น ใช้ซ้ำๆ ง่าย

3. Mobile CSS และ Desktop CSS

เนื่องจากธีม Seed 2 นี้ คิดแบบ Mobile First ทำให้เราแบ่ง CSS ให้โหลด mobile.css ก่อน แล้วจอขนาดใหญ่ค่อยโหลด desktop.css ซึ่งจะทำให้เว็บโหลดเร็ว ไม่มีโค้ดที่ไม่จำเป็น และอาจไปบล็อกการแสดงผล

ส่วนคนที่อยากใช้ไฟล์ style.css ก็ทำได้ แต่ต้องไปแก้ $GLOBALS[‘s_style_css’] ในไฟล์ functions.php ให้เป็น enable นะครับ

หมายเหตุ: จากการทดสอบหน้าเว็บที่มีเนื้อหาไม่มากนัก ธีม Seed สามารถทำคะแนน Page Speed ได้สูง 90-100 คะแนน

4. Variable [SCSS]

ตัวแปรที่น่าสนใจ

$primary / $primary-hover	เปลี่ยนสีหลักของเว็บ, ปุ่ม
$heading-font	เปลี่ยนฟอนต์พาดหัว
$base	สีฟอนต์ตัวอ่าน
$body-font	เปลี่ยนฟอนต์ตัวอ่าน
$space-m	ระยะระหว่างชิ้นส่วน (gutter) บนมือถือ
$space-d	ระยะระหว่างชิ้นส่วน (gutter) บนจอคอม

5. Font [SCSS]

ในธีมนี้ จะมีฟอนต์ที่เตรียมให้มากับธีมคือ

1. IBM Plex Thai ของบริษัท IBM เป็นฟอนต์แจกฟรีที่ผมว่าสวยที่สุดในขณะนี้เลย
2. Maledpan ของเราเอง มีให้ทั้งตัวธรรมดาและตัวหนา โดยฟอนต์ที่ให้นี้ใช้ผ่านเว็บเท่านั้นนะครับ
3. Sarabun ฟอนต์สารบัญในโครงการ Google Fonts อันนี้ใหม่กว่า Sarabun New จะเห็นว่าดูบนมือถือเนี้ยบมาก
4. Seed Icons ฟอนต์ไอคอนที่เราสร้างไว้ให้ โดยใช้เว็บ icomoon.io เวอร์ชั่นนี้มี Social ต่างๆ เพิ่มมาให้ละครับ คลิกตามลิงก์จะเห็นชื่อคลาสที่ต้องใช้

ที่แยกไฟล์ _font.scss นี้ไว้ต่างหาก เพราะเวลาจะสร้าง web font / icon font ต่างๆ ผมมักจะเอามาใส่ที่ไฟล์นี้ครับ สะดวกดี ไม่ปนกับไฟล์อื่น

6. Functions PHP

สิ่งสำคัญคือ “ตัวแปรต่างๆ” ที่เคยมีใน Seed 1 (เช่น จะให้แสดงหน้ารวมข่าวสาร กี่คอลัมน์ ฯลฯ) นำมาเพิ่มการตั้งค่าให้รองรับมือถือ แยกจากจอคอม (เช่น แสดงบทความแบบ Card โดยมือถือ แสดง 2 คอลัมน์ แต่จอคอม แสดง 4 คอลัมน์)

• สามารถเลือกใช้งาน jQuery หรือไม่ก็ได้ ถ้าเลือก ระบบจะเรียกไฟล์ js/main-jquery.js ด้วย
• สามารถเลือกใช้งาน FontAwesome 5 ได้ (แต่ผมว่ามันอ้วนไปหน่อย)
• สามารถเลือกใช้งาน Flickity ได้ อันนี้เป็น Slider + Carousel ที่เบา ใช้ร่วมกับ jQuery หรือไม่ก็ได้ เจ๋งมากๆ ใช้บนมือถือก็ลื่นมาก

หมายเหตุ: ถ้าปิด jQuery ไปได้ ส่วนใหญ่จะทำให้เว็บโหลดเร็วขึ้นเกือบ 1 วินาที (ฟังดูอาจจะน้อย แต่เว็บยุคปัจจุบันโหลดเกิน 3 วินาทีคนก็ไม่ค่อยรอแล้วนะครับ)

7. Vanilla JS

มีฝรั่งเขียนเว็บ vanilla-js.com เป็นมุกว่า Vanilla JS เป็นเฟรมเวิร์คแบบใหม่ ทำงานได้ 12 ล้านคำสั่งต่อวินาที ในขณะที่ jQuery ทำงานได้สามแสนห้า

ซึ่งความเร็วนั้นเป็นเรื่องจริง แต่ว่า Vanilla JS ไม่ใช่เฟรมเวิร์ค มันคือ “ภาษา JavaScrip เปล่าๆ” ที่ถ้าใช้ IE รุ่นใหม่หน่อย (แนะนำเวอร์ชั่น 10 ขึ้นไป) คำสั่งมันไม่ยุ่งยากและมีปัญหาเหมือนยุคเก่าแล้ว

ทีม SeedThemes พยายามมาตั้งแต่ต้นปี (หลังจากฟัง น้องตั้ง พูดเรื่องการเอา jQuery ออกจากธีม) ปัจจุบันโค้ดหลักของธีม Seed 2 ไม่ต้องใช้ jQuery แล้ว สนใจลองดูตัวอย่างโค้ดที่เขียนใน /js/main-vanilla.js ได้ ส่วน scripts.js เป็นการเอาโค้ด JS ต่างๆ มาใส่ (โดยเฉพาะที่เป็น minify)

คำแนะนำ: เว็บไซต์ You might not need jQuery เป็นเว็บที่รวมคำสั่งต่างๆ สำหรับคนที่คุ้นกับ jQuery แล้วต้องการหาคำสั่งแบบ Vanilla JS

8. Page Template

เป็นเทมเพลตสำหรับ “หน้า (Page)” แบบต่างๆ เช่น มี Sidebar ด้านซ้าย / Sidebar ด้านขวา / Sidebar ทั้งสองด้าน (ซึ่งไม่ค่อยแนะนำให้ใช้เท่าไหร่นะครับ แต่มีคนทำเว็บราชการจำนวนมากอยากได้ เลยใส่ไว้ให้) หรือหน้าเปล่าๆ ไม่มี header/footer ไว้ทำ landing page

9. Template Parts

คือการเรียก​ “ชิ้นส่วน” สำหรับหน้ารวมเรื่อง (Post Archive) มาแสดงนะครับ ที่เตรียมไว้ให้ก็คือ

Content Card	แสดงแบบ Card มีรูปอยู่ด้านบน
Content List	แสดงแบบ List คือรูปอยู่ด้านซ้าย
Content Hero	แสดงแบบรูปขนาดใหญ่ด้านซ้าย เนื้อหาอยู่ด้านขวา
Content Caption	แสดงรูปเป็นพื้นหลัง ปรับทึบลง 20% แล้วแสดงชื่อทับรูป
Content	เนื้อหาแบบเรียบสุด ไม่มีการตกแต่ง แสดงรูปอยู่ด้านบน

โดย Content Card / Content จะแสดง Excerpt / Summary (เกริ่นนำ) ไว้ด้วย หากต้องการซ่อนไป ให้ใส่คลาส .hide-summary ครอบไว้

10. ตัวอย่าง WP_Query

ไฟล์ page-seeddemos.php / front-page.php.demo จะมีตัวอย่างโค้ดให้นำไปใช้ ซึ่งหลักๆ คือการนำเนื้อหาต่างๆ มาแสดง โดยใช้คำสั่ง wp_query (ลองดูบล็อกเก่าของ SeedThemes ที่ แสดงเรื่องที่ต้องการ ด้วย WP_Query ตอนที่ 1)

11. S-GRID

ในยุคก่อนหน้านี้ เวลาจะแสดงเนื้อหาเป็นแนวแคตาล็อก หรือ กริด (grid) เราจะใช้คำสั่ง CSS จำพวก Float ซึ่งจัดเลย์เอาต์ยาก แต่ละการ์ดสูงไม่เท่ากัน ยุคปัจจุบันเราจะใช้คำสั่ง display: flex กับ display: grid มาช่วยแล้ว (IE 10+)

โดยคำแนะนำของผมก็คือ display: flex เหมาะกับใช้เนื้อหาที่มีบรรทัดเดียว ส่วน display: grid เหมาะกับเนื้อหาที่มีหลายบรรทัด

ทำให้ธีม Seed เตรียมคลาส .s-grid มาให้ด้วย โดยมีคลาสเพิ่มดังนี้

คลาสหลัก	คำอธิบาย
.s-grid	ทำให้แต่ละชิ้นห่างกันเท่ากับ $space_m / $space_d ที่ตั้งไว้ (เช่น 16px และ 30px) แสดง 1 คอลัมน์
.s-grid.-m2	ทำให้บนมือถือแสดง 2 คอลัมน์ ส่วนบนจอคอม ใช้ค่าตามมือถือคือ 2 คอลัมน์
.s-grid.-m2.-d4	ทำให้มือถือแสดง 2 คอลัมน์ ส่วนจอคอมแสดง 4 คอลัมน์

12. S-SLIDER

อีกปัญหาก็คือ เราอยากให้ Slide แบบเลื่อนซ้ายขวาได้ด้วย และอยากแบ่งได้ว่า จะแสดงทีละหนึ่งหรือหลายคอลัมน์

ทำให้ธีม Seed เตรียมคลาส .s-slider ซึ่งจะไปเรียกใช้ flickity อัตโนมัติ

คลาสหลัก	คำอธิบาย
.s-slider	ทำให้แสดงเนื้อหาในรูปแบบ slider / carousel
.s-slider.-m1.2	ทำให้บนมือถือแสดง 1.2 คอลัมน์ ส่วนบนจอคอม 2 คอลัมน์
.s-slider.-m2.-d4	ทำให้มือถือแสดง 2 คอลัมน์ ส่วนจอคอมแสดง 4 คอลัมน์

13. Page & Post Banner

เวลาสร้างหน้า (Page) หรือเรื่อง (Post) ธีม Seed จะเปิดให้ตั้งค่าได้ว่า จะแสดงชื่อเรื่องหรือเปล่า ถ้าแสดงจะให้เป็นแค่ชื่อเฉยๆ หรือมีพื้นหลังด้วย ตามค่าดังนี้

Title Style	คำอธิบาย
Banner	แสดงชื่อ พร้อมให้พื้นหลังเป็นรูปภาพ ถ้ามีการแนบรูปในฟีลด์ Banner Image ก็จะรูปนั้น ถ้าไม่มี ก็จะใช้รูปประจำเรื่อง (Featured Image)
Minimal	แสดงชื่อตามปกติ
Hidden	ซ่อนไว้ เหมาะกับคนที่ใช้ Page Builder สร้างเนื้อหาต่างๆ เอง

ทำให้ธีม Seed ตั้งค่ารูปพื้นหลังให้เบลอไว้ก่อน แต่สามารถแก้ได้ในแต่ละเรื่อง แต่ละหน้า ถ้าหากลงปลั๊กอิน Advanced Custom Fields ไว้ (เวอร์ชั่นฟรีก็เพียงพอ)

โดยในธีม Seed จะมีไฟล์ _acf-field-groups.json ไว้สำหรับ import เข้าปลั๊กอิน ACF นะครับ

14. Github

Github.com เป็นเว็บที่เราสามารถนำโค้ดไปไว้ และเก็บประวัติการแก้ไขทุกอย่างได้ สามารถทำงานร่วมกันคนอื่นๆ ได้ โดยโค้ดเหล่านี้จะเปิดเผยต่อสาธารณะ หรือปิดไว้สำหรับเราและทีมก็ได้ โดยเริ่มต้นใช้งานได้ฟรี

ดังนั้น แนะนำให้ทุกคนที่ทำธีม ใช้ Github เก็บโค้ดไว้นะครับ จะทำให้เราไม่ต้องกังวลว่าโค้ดหาย เซฟไฟล์ทับ หรือเว็บลูกค้ามีปัญหาในอนาคต

ผู้ใช้ทั่วไปหรือนักออกแบบไม่น่าถนัดใช้ Command Line เท่าไหร่ ดังนั้นผมจะแนะนำให้ใช้ GitHub Desktop เป็นหลักนะครับ โหลดลงเครื่อง แล้วสร้าง Repository (คลังเก็บโค้ด) ของแต่ละงานได้เลย

สำหรับการเขียนธีมที่ไม่ได้เผยแพร่ต่อสาธารณะ เราอาจจะใช้วิธีที่ง่ายที่สุดคือ ไม่ต้องสร้าง Branch ก็ได้ (กรณีเขียน 1-2 คน) ให้ทำการ save โดย commit และ push ไปเรื่อยๆ เมื่อต้องเปิดเว็บ ก็สร้างเวอร์ชั่น 1.0 แล้วใช้งานบนเว็บจริงไป หลังจากนั้นหากพัฒนาต่อ ก็แก้ไขต่อใน Master Branch เลย

วิธีนี้จะไม่ค่อยได้ใช้ประโยชน์จาก Github เต็มที่ แต่คิดว่าดีกว่าการ Backup Code แบบเดิมๆ หรือแก้ธีมผ่าน FTP มากแล้ว นับเป็นก้าวแรกที่จะทำให้เราหัดใช้ Git ครับ

หมายเหตุ: ในธีม Seed 2 มีไฟล์ที่ซ่อนอยู่ (ชื่อ ขึ้นต้นด้วย . ) หากจะก๊อบไปใส่ folder อื่น สำหรับเครื่อง Mac ต้องกด cmd + shift + . ก่อน ระบบจะแสดงไฟล์ที่ซ่อนอยู่ออกมา ให้ก๊อบไปทั้งหมด ยกเว้น .git

สรุป

ธีม Seed 2 ออกแบบมาเพื่อเป็นธีมเริ่มต้น (Starter Theme) สำหรับแก้โค้ดเพื่อทำธีมต่อ ในธีมจะไม่มีการแนบปลั๊กอินหรือโค้ดที่เสี่ยงกับการต้องอัปเดต ทำให้สามารถใช้งานได้เรื่อยๆ จนกว่า WordPress จะเปลี่ยนเวอร์ชั่นไปมากๆ หรือเว็บถึงเวลาต้องทำใหม่ (ซึ่งโดยทั่วไปคือประมาณ 3-5 ปี)

ดังนั้น เราเลยมองว่า Seed 2 จะไม่มีระบบอัปเดตนะครับ เหมือนแนวทางของธีม Underscore เลย นำโค้ดไปแก้ แล้วก็ใช้ต่อไปได้เลย

จุดเด่นของ Seed 2

1. Mobile First • เน้นให้โหลดมือถือได้เร็ว และเก็บรายละเอียดต่างๆ ให้เหมาะกับมือถือก่อน (อย่าลืมว่าเว็บทั่วไป 80% เข้าผ่านมือถือ)
2. Speed • เมื่อไม่มีโค้ดรกๆ หรือปลั๊กอินอ้วนๆ ที่ไม่ได้ใช้ ทำให้เว็บโหลดได้เร็วมาก อาจทำคะแนน Page Speed ได้ถึง 90-100 คะแนนน ซึ่งจะส่งผลต่อการติดอันดับ Google หรือ Search Engine อื่นๆ
3. SEO • เว็บออกแบบตามมาตรฐาน W3C และตามมาตรฐานของเวิร์ดเพรส ทำให้ติดอันดับได้ง่าย หลายๆ เว็บที่ทำ ใช้เวลาไม่กี่วันก็ขึ้นอันดับใน Google ได้
4. Flexible • แต่นอกจากความเร็ว สิ่งที่เราเตรียมไว้ ก็พร้อมปรับไปให้เข้ากับดีไซน์ในรูปแบบต่างๆ ได้ เพราะเราก็นำไปทำเว็บให้ลูกค้าในดีไซน์ต่างๆ เหมือนกันครับ 😀

• Share
• Tweet
• Line