การใช้งานธีม 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 ที่จำเป็นดังนี้

  1. Live Sass Compiler ช่วยแปลงไฟล์ SCSS ให้เป็น CSS ทำให้เราเขียน SCSS ได้ง่ายขึ้น
  2. Prettier - Code formatter ช่วยจัดระเบียบโค้ด CSS และ JS ให้ แค่กด Save โค้ดก็สวยเลย
  3. Format HTML in PHP ช่วยจัดระเบียนโค้ด HTML ที่อยู่ในไฟล์ธีม (แต่ไม่จัด PHP นะ ยังไม่เจอตัวที่จัดแล้วถูกจริตเท่าไหร่ครับ เพราะธีม WordPress มันประกอบด้วยโค้ด HTML มากกว่าโค้ด PHP)
  4. 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 สร้างเนื้อหาต่างๆ เอง

บล็อกและไลฟ์สอนที่เกี่ยวข้อง

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us