เปลี่ยนธีมอันใหม่ให้บล็อก

ธีมตัวเก่า Wide Blog Happens Theme โดย @imenn

ธีมตัวเก่าใช้มาเกือบจะ 4 ปี แล้ว ใช่ว่าไม่อยากเปลี่ยนธีมใหม่ให้ทันสมัยนะ แต่เหตุผลหลักๆที่ทำให้ไม่ได้เปลี่ยนสักที พอสรุปได้ดังนี้ครับ

  • Hard code ลงในธีมเยอะมาก ทั้งใน header.php , page.php, post.php จะเปลี่ยนทีต้องใช้เวลานานพอสมควรเลย
  • ภาพที่ใช้ประกอบในบล็อก ค่อนข้างทำ size ให้เหมาะกับธีมเดิม ต้องหาธีมที่กระทบกับโพสอันเก่าให้น้อยที่สุด คงไม่มีทางมานั่งแก้โพสเกือบ 500 โพสให้เข้ากับธีมใหม่แน่ๆ ตัวเลือกเลยน้อยลงไปอีก
  • โพสอันเก่าไม่ได้ทำ feature image ไว้เลย แต่ใช้ plugin เป็นตัวช่วยดึงมา ธีมสมัยใหม่จะใช้ข้อมูลอันนี้เกือบหมดแล้ว เป็นอีกหนึ่งเหตุผลที่จะทำให้โพสอันเก่ามีปัญหา
  • คิดว่าธีมอันเก่านั้นค่อนข้างโอเคในระดับที่ยังยอมรับได้อยู่

แล้วเหตุใดจึงต้องเปลี่ยนธีมใหม่

  • อยากได้ Responsive theme ซึ่งจะทำให้บล็อกเปลี่ยนเลเอาท์ให้เหมาะสมกับขนาดหน้าจอของอุปกรณ์ที่เปิดใช้งาน คิดว่าตอนนี้คนเข้าดูเว็บไม่ได้ดูผ่านทางคอมพิวเตอร์อย่างเดียวแล้ว แม้จะมี plugin ช่วยอยู่ก็ตาม แต่คิดว่าสู้ Responsive theme ไม่ได้หรอก เท่กว่าเยอะ
  • คิดว่าถ้าทิ้งปัญหาต่างๆของด้านบนไว้นานๆจะยิ่งทำให้การเปลี่ยนธีมในอนาคตทำได้ยากขึ้นอีก
  • บล็อกเก่ามีติด Google Adsense ไว้ใต้หัวข้อโพสก่อนจะเริ่มเนื้อหา เป็นตำแหน่งที่ตัวเองก็ไม่ชอบนัก แต่เป็นตำแหน่งที่ทำให้คลิกเยอะสุดแล้วเมื่อเทียบกับตำแหน่งอื่นๆ อยากจะเปลี่ยนแปลงตรงนี้ แต่ไม่กระทบรายได้ของบล็อกมากนัก (แต่เพราะมันเป็นตัวหล่อเลี้ยงเว็บไซต์อื่นๆที่ทำตามใจอีกกว่า 5 เว็บไซต์) ซึ่งธีมใหม่ถือว่าช่วยได้ในระดับที่น่าพอใจเลย
  • ธีมเก่าไ่ม่มี feature post เลย เคยพยายามทำแล้ว แต่ทำยังไงก็ออกมาดูไม่ดีเลย เปลี่ยนธีมใหม่ไปเลยน่าจะเป็นคำตอบ

เกณฑ์ในการเลือกธีมใหม่

  • ต้องเป็น Responsive theme
  • เลือกแบบฟรีก่อน แต่ถ้าถูกใจจริงๆจะซื้อก็ได้ แต่จะไม่เอาธีมอันที่คนอื่นทำขายมาใช้ฟรี
  • มีตำแหน่งของการติดแบนเนอร์ที่เหมาะสมไม่รบกวนตรงเนื้อหามากเกินไป
  • ต้องมีตำแหน่ง feature post ที่ดี
  • ดูดี เข้าถึงโพสล่าสุดได้ง่าย เน้นให้คล้ายแมกกาซีน หรือเว็บข่าว

พอตั้งเกณฑ์ได้ประมาณนี้เลยช่วยให้ค้นหาและเลือกธีมที่มีอยู่มากมายได้ง่ายมากขึ้น พอค้นเจอก็ลองเปิดดู demo theme นั้นก่อน ซึ่งส่วนใหญ่เว็บแจกธีมมักจะมีตัวอย่างให้ดูอยู่แล้ว พอเข้าข่ายก็ดาวน์โหลดเก็บไว้ จากนั้นติดตั้งเข้าไปเลย ตอนแรกเลือกมาประมาณ 15 ธีม แล้วก็ลองเปิดพรีวิวดูในบล็อกของตัวเอง แล้วค่อยตัดตัวเลือกออกทีละตัวจนเหลือ 3 ตัวสุดท้าย แล้วลอง activate ธีมนั้นดู ลองปรับแต่งสักเล็กน้อยดูว่าเหมาะแค่ไหน แล้วจึงเลือกเอาอันที่คิดว่าเหมาะสมที่สุด

สุดท้ายก็เลือกธีม Oxygen 

ธีมใหม่ของบล็อก

เกี่ยวกับ Oxygen theme

เป็นธีมที่ใช้ Hybrid Core framework รองรับการทำ child themes ออกแบบมาสำหรับเว็บไซต์แนวแมกกาซีน ซึ่งตัวเองดูแล้วค่อนข้างชอบ เป็นธีมฟรี แต่ฟรีไม่สมบูรณ์แบบนัก เพราะถ้าอยากได้รายละเอียดในการติดตั้ง การปรับแต่งต่างๆ จะต้องสมัครเป็นสมาชิกแบบจ่ายตังค์ของเว็บไซต์ที่เป็นคนแจก หลังๆเห็นธีมใช้โมเดลนี้เยอะเลย แต่อย่างไรก็ตาม มันไม่ได้ยากเกินไปนักที่จะปรับแต่งตามใจต้องการ ดูโค้ดธีมประกอบพอช่วยได้

รายละเอียดของการติดตั้งธีมใหม่ 

  • ลดการใช้ hard code ให้ได้มากที่สุด เน้นใช้ plugin ช่วย
  • ไม่เอา Feature post อันใหญ่ของธีม เพราะขาดใหญ่มาก คิดว่าอาจเสียเวลาโหลดนานเกินไป
  • Feature post ด้านบนใช้ Plugin WP Featured Content Slider แล้วแก้ไข css เองอีกนิดหน่อย
  • Ralated Post ใช้ Plugin Related Posts Thumbnails
  • ปรับแต่ง css อีกนิดหน่อย

ใช้เวลานานพอสมควรเลยกว่าจะออกมาได้ประมาณนี้ ตอนนี้อาจจะยังไม่สมบูรณ์เต็มที แต่ส่วนตัวคิดว่าโอเคแล้ว อาจจะต้องปรับอีกนิดหน่อย

ว่าแล้วก็ เชิญติชมธีมใหม่ได้เลยครับ

CSS Trick ตัวอย่างเว็บไซต์ใช้ CSS สุดเจ๋ง

เมื่อวานเปิดดู WordCamp TV ของ Sara Cannon พูดเรื่อง CSS Trick ตอนแรกเห็นเธอน่ารักสดใสเลยขอดูนิดหนึ่ง แต่สุดท้ายดูจบก็ได้อะไรมาเหมือนกัน มีตัวอย่าง Showcase ของ CSS ที่เธอเอามาโชว์ประกอบการนำเสนอ พบว่ามันเจ๋งดี เลยคัดเอาส่วนที่น่าสนใจมาบันทึกเก็บไว้

อันแรกเป็นการออกแบบเกี่ยวกับ Scrolling  ลิงค์เว็บไซต์ https://lostworldsfairs.com/atlantis ทดลองเลื่อนหน้าเว็บไซต์ลงไปข้างล่างเรื่อยๆ จะพบว่าคนในท่อจะวิ่งตามลงไปด้วย ระดับความลึกก็เปลี่ยนตาม

Atlantis

เว็บที่สองเป็นการโชว์ความสามารถการใส่พื้นหลังหลายภาพ (ซ้อนกัน) เว็บเหล่านี้จะพบว่าพื้นหลังของเว็บมันมีความน่าสนใจมากขึ้นเยอะเลย ตัวอย่าง https://silverbackapp.com มีพื้นหลังอยู่ถึง 4 ภาพ ย่อขยายหน้าเว็บจะเห็นว่ามีเลเยอร์ของ ด้านหลังซ้อนกันอยู่

https://silverbackapp.com

และอีกตัวที่ผมเห็นแล้ว พบว่ามันเท่มากคือ เว็บ https://www.nikebetterworld.com ลอง Scrolling ลงไปข้างล่างจะเห็นการนำเสนอที่เจ๋งจริงๆ พื้นหลังจะเปลี่ยนไปเรื่อยๆ

https://www.nikebetterworld.com/

และส่วนที่น่าสนใจที่สุดคือ เป็นความสามารถของการใช้ CSS Grids ควบคุมการแสดงผลแตกต่างกัน ตามขนาดของหน้าจอ เช่นหน้าจอของ PC, iPad, Mobile ขนาด ตำแหน่งของเมนู เปลี่ยนแปลงตามขนาดของหน้าจอที่เรียกใช้งาน ลองเปิดดูที่ https://hicksdesign.co.uk/ และ https://colly.com แล้วลองย่อขนาดของเว็บไซต์ดูครับ

hicksdesign.co.uk ขนาดจอ PC
https://hicksdesign.co.uk ขนาดจอมือถิอ
https://colly.com แสดงหน้าจอ PC
https://colly.com แสดงหน้าจอมือถือ

ยังมี resource และเว็บไซต์ที่น่าสนใจอื่นๆอีก ตามดูการนำเสนอของ Sara Cannon ในหัวข้อ CSS Tricks ได้ที่ https://WordPress.tv ความยาวประมาณ 34 นาที ครับ

ปรับธีมใหม่ให้ Biomed.in.th ดูดีขึ้นนิดหน่อย

ไปงาน WordPress Developer Night มาแล้ว อยากลงมือทำอะไรสักอย่าง ก็เลยปล่อยออกมา โดยเอาธีมของ Biomed.in.th เป็นที่รองรับ ปรับตรงนั้น เล่นตรงนี้หน่อย ทำให้เข้าใจเรื่อง CSS เพิ่มอีกนิด ได้ธีมใหม่ที่พอรับได้

รายการที่ทำมีดังนี้

  • เปลี่ยนโลโก้ใหม่ เปลี่ยนหัวเป็น url ของเว็บ พยายามคิดสโลแกนคิดไม่ออกสักที เอาอันนี้ไปก่อน
  • ใส่ Feature slide เข้ามา ใช้ปลั๊กอิน Featured Content Slider ปรับ css นิดหน่อยให้เข้ากับเว็บ ตอนแรกมีปัญหา “jquery is not defined” เข้าใจว่ามันชนกับอะไรสักอย่างในเว็บ ปวดหัวมาก ไล่ปิดปลั๊กอินแต่ละอันก็ไม่เจอ ลองเปลี่ยนธีมใหม่ลองดู กลับใช้ได้ เลยได้ความว่ามีปัญหากับธีมนี้ สุดท้ายแก้ปัญหาด้วยการโหลด jquery กับโค้ดของ Featured Content Slider ไปไว้โฟว์เดอร์ใหม่ แล้วเพิ่มโค้ดที่ header ให้มันโหลดมาจากที่ใหม่ แล้วมันก็ทำงานได้
  • เปลี่ยน background ใหม่, เปลี่ยน footer ใหม่
  • แยกกลุ่มของ div ใหม่ ใส่พื้นหลังให้ content-wrap
  • ทดสอบพบว่า IE7 มีบางอันที่ไม่รองรับ เช่น text-shadow
  • พบว่าตำแหน่งโฆษณาบน header right ข้างโลโก้มันเป็นตำหน่งที่ทำให้เว็บดูดีขึ้นได้เลย

ก่อน

Before (Biomed.in.th)

หลัง

After (Biomed.in.th)