การใช้งานธีม Seed
ธีม Seed เป็นธีมเริ่มต้น (Starter Theme) ซึ่งเหมาะกับนักพัฒนาที่ต้องการแก้โค้ดเองนะครับ
แนวทางในการเรียกใช้
จะมี 2 แบบคือ
1. Starter Theme – ใช้เป็นธีมเริ่มต้นแล้วแก้ไปเลย
แนวทางนี้จะเหมือนกับธีม Underscore คือ เอาไฟล์มาแก้จนพอใจ แล้วก็ไม่ต้องอัปเดตธีมอีก เพราะธีมไม่มีปลั๊กอินอะไรแนบมา ไม่ต้องกลัวโดนแฮค เดี๋ยวอนาคตอีก 3-5 ปีจะทำเว็บใหม่ ค่อยสร้างธีมใหม่ไปเลย
แต่ถ้าเจอว่าธีมมีบั๊กบางอย่างที่ต้องการแก้ ก็ใช้วิธีไปเทียบโค้ดกับ Git เอา ทำให้เราเลือกจะนำธีม Seed ขึ้น Github ด้วยนะครับที่ https://github.com/SeedThemes/seed
2. Parent Theme – ใช้เป็นธีมแม่ แล้วแก้ที่ธีมลูก (Child Theme) แทน
แนวทางนี้ ผมไม่ค่อยแนะนำเท่าไหร่ เพราะเท่าที่ทำมาหลายสิบเว็บ สุดท้ายก็ไม่ได้กลับไปอัปเดตธีมแม่อยู่ดีครับ เพราะเราก็กลัวว่าอัปเดตแล้วจะกระทบส่วนอื่นๆ ก็ต้องไปไล่แก้อีก
แต่บางคนที่ต้องการปรับน้อยจริงๆ แค่เปลี่ยน config ใน functions.php หรือเพิ่มโค้ด 1-2 บรรทัด ก็พอเข้าใจได้ เลยทำธีมลูก ชื่อว่า Berry ไว้ให้นะครับ มี Github ที่ https://github.com/SeedThemes/berry ส่วนการโหลดก็โหลดที่หน้าสมาชิกได้เลยครับ
Text Editor ที่แนะนำ
แนะนำ VSCode (Visual Studio Code) เป็นหลัก เพราะฟรีและดีมาก รวมทั้งมี Extension ที่เหมาะกับการทำเว็บในปัจจุบัน โดยแนะนำให้ลง Extension ที่จำเป็นดังนี้
- Live Sass Compiler (อัปเดต 16/7/2022 ต้องใช้ของ Glenn Marks นะครับ) ช่วยแปลงไฟล์ SCSS ให้เป็น CSS ทำให้เราเขียน SCSS ได้ง่ายขึ้น
- Prettier - Code formatter ช่วยจัดระเบียบโค้ด CSS และ JS ให้ แค่กด Save โค้ดก็สวยเลย
- Format HTML in PHP ช่วยจัดระเบียนโค้ด HTML ที่อยู่ในไฟล์ธีม (แต่ไม่จัด PHP นะ ยังไม่เจอตัวที่จัดแล้วถูกจริตเท่าไหร่ครับ เพราะธีม WordPress มันประกอบด้วยโค้ด HTML มากกว่าโค้ด PHP)
- SFTP ทำให้เวลา save ไฟล์ สามารถส่งไฟล์ขึ้นเว็บทดสอบผ่าน FTP ได้ทันที ซึ่งเหมาะกับการแก้ธีมในเครื่อง ดูผลลัพธ์ในเว็บได้ทันที เมื่องานคืบหน้า ก็ส่งธีมเข้า Git เพื่อจัดการโค้ดในระยะยาวได้อย่างมีประสิทธิภาพ (แต่ว่าเวอร์ชั่นล่าสุดมีปัญหาส่งไฟล์ไม่ขึ้น ต้องแก้ตามลิงก์นี้ SFTP error upload no such file after update VS code 1.56.0
แนวทางและเทคโนโลยีที่ใช้
- SCSS ทำให้เขียนโค้ด CSS ได้อย่างมีประสิทธิภาพ
- แยก Mobile CSS และ Desktop CSS ทำให้โหลดได้เร็ว
- CSS Variables ข้อเสียคือ ไม่รองรับใน IE แต่ข้อดีคือทำให้โค้ดสั้น บริหารง่าย เปลี่ยนค่าต่างๆ ทับได้ง่าย
- Web Font ในธีมนี้มีเตรียมฟอนต์ Anuphan / Maledpan ไว้ให้สำหรับตัวพาดหัว และเตรียม Sarabun ไว้ให้สำหรับตัวอ่าน หากต้องการเพิ่มเอง ให้ดูไฟล์ /css/scss/_fonts.scss หรือใช้ปลั๊กอิน Seed Fonts
- ตัวแปรใน Functions PHP ไว้ตั้งค่าต่างๆ ให้ดูที่ไฟล์ /functions.php
- Vanilla JS หากไม่ลงปลั๊กอินที่ต้องการ jQuery ตัวธีมจะใช้ Vanilla JS เป็นหลัก
- Keen Slider สำหรับสร้างสไลเดอร์ที่เบา และลื่นสุด ทดสอบโดยเข้าเว็บ https://seed.seeddemo.com/seeddemo/ ผ่านมือถือดูได้
- Page Template ค่ามาตรฐานคือเต็มความกว้าง แต่มีเทมเพลตให้เลือกคือ มี Sidebar ด้านซ้าย / Sidebar ด้านขวา / Sidebar ทั้งสองด้าน หรือหน้าเปล่าๆ ไม่มี header/footer ไว้ทำ landing page
- Template Parts
- Content Card - แสดงแบบ Card มีรูปอยู่ด้านบน
- Content Hero - แสดงแบบรูปขนาดใหญ่ด้านซ้าย เนื้อหาอยู่ด้านขวา
- Content Caption - แสดงรูปเป็นพื้นหลัง ปรับทึบลง 20% แล้วแสดงชื่อทับรูป
- Content List - แสดงแบบ List คือรูปอยู่ด้านซ้าย
- Content - เนื้อหาแบบเรียบสุด ไม่มีการตกแต่ง แสดงรูปอยู่ด้านบน
- โดย Content Card / Content จะแสดง Excerpt / Summary (เกริ่นนำ) ไว้ด้วย หากต้องการซ่อนไป ให้ใส่คลาส .hide-summary ครอบไว้
- S-GRID เป็น CSS ที่เตรียมไว้ให้สำหรับสร้างเลย์เอาท์
- S-SLIDER เป็น CSS ที่เตรียมไว้ให้สำหรับสร้างสไลเดอร์
- Page & Post Banner เมื่อลงธีมเสร็จ ให้ลงปลั๊กอิน Advanced Custom Fields แล้วไปที่ Field Groups ดูแท็บ Sync Available สั่ง sync / เวลาเขียนบทความ จะมีตัวเลือกการแสดงหัวข้อให้ สำหรับ Page และ Post โดย
- Default - ค่าเริ่มต้น ประกาศใน functions.php
- Banner - แสดงชื่อ พร้อมให้พื้นหลังเป็นรูปภาพ ถ้ามีการแนบรูปในฟีลด์ Banner Image ก็จะรูปนั้น ถ้าไม่มี ก็จะใช้สีพื้นหลังตามประกาศไว้ใน CSS Variables
- Minimal - แสดงชื่อตามปกติ
- Hidden - ซ่อนไว้ เหมาะกับคนที่ใช้ Page Builder สร้างเนื้อหาต่างๆ เอง