AMP ช่วยให้ผู้ใช้มาจากมือถือแซงเดสก์ท็อปแล้ว

อะไรคือ AMP? เกี่ยวข้องยังไงกับบล็อกนี้?

เรื่องเล่าวันนี้เป็นเรื่องเกี่ยวกับบล็อกของตัวเองที่เขียนๆ หยุด ๆ มานานพอสมควร ถ้านับเวลาน่าจะเกิน 10 ปีได้แล้ว โพสแรก ตัวบล็อกมันอยู่ได้ด้วยตัวของมันเองโดยมีค่าโฆษณาจาก Google Ads ที่ติดไว้คอยเลี้ยงดู ไม่ได้เยอะ แต่เพียงพอที่จะจ่ายค่าโฮสและค่าโดเมนรายปีได้ ทั้ง ๆ ที่บางปีเขียนเรื่องใหม่ไปแค่ 1-2 เรื่องเท่านั้น ต้องขอบคุณคนคลิกเข้ามาดู ที่สำคัญตลอดเวลาที่ผ่านมารายได้มาจากผู้ใช้งานเดสก์ท็อปเป็นหลัก


ในยุคปัจจุบันที่คนส่วนใหญ่ไปอยู่ในแพลตฟอร์มโซลเชียลกันหมดแล้ว แต่แนวบล็อกหรือเว็บไซต์ก็ยังให้ความรู้สึกว่าชอบมากกว่า นั่งกดอ่าน feed ผ่าน RSS ก็ยังเป็นกิจวัตรประจำวันเหมือนเดิม คิดว่ายังคงต้องทำต่อไปเรื่อย ๆ

เข้าเรื่องหลักเลยแล้วกัน เมื่อราวสองเดือนก่อนตอนที่เข้าไปดูรายงานของ Google Adsense มีข้อความแนะนำจากระบบประมาณว่า
เฮ้ย…ไม่ปรับปรุงเว็บของแกให้แสดงผลให้เป็นมิตรกับคนใช้มือถือหน่อยหรอ คนใช้เยอะนะ
เอารายละเอียดของ AMP (Accelerated Mobile Pages )ไปอ่าน แล้วลองทำดูซ่ะนะ เลยลองทำตามคำแนะนำ

ซึ่งโดยปรกติแล้วอะไรที่เขานิยม ใน WordPress ก็จะมีปลั๊กอินรองรับอยู่แล้ว
จากนั้นแค่เข้าไปโหลด ปลั๊กอิน มาติดตั้ง คลิก 2-3 ที ก็เสร็จ
ง่ายเช่นกันในการเอา Google Ads ฝั่งลงไปในระบบ เข้าไปด้วย

สิ่งที่ได้หลังจากนั้นในช่วงที่ผ่านมา รายได้ใน Google Ads ผ่านมือถือแซงรายได้จากเดสก์ท็อปไปแล้ว ความจริงแล้วพอลองเข้าไปดูใน Google Analytic ดี ๆ จะพบว่าอุปกรณ์ที่เข้ามาในบล็อกนี้ก็เป็นโทรศัพท์มือถือระดับไฮเอนด์อยู่ในระดับใกล้เคียงกับเดสก์ท็อปมาได้สักพักใหญ่ ๆ แล้ว แต่เพิ่งจะมาแซงตอนปรับให้มีเพจสำหรับมือถือ

ดังนั้นในเดือนนี้ต้องขอบันทึกไว้ว่า ตลอดเวลาที่ผ่านมา 10 กว่าปี ตอนนี้รายได้จากคนใช้มือถือได้แซงฝั่งเดสก์ท็อปไปแล้ว คนอื่นอาจปรับตัวไปนานแล้ว แต่พวกไม่สนใจอะไรเพิ่งจะปรับตัวตาม (หมายถึงตัวเอง) เลยเพิ่งจะเห็นผล

แหล่งรายได้ของบล็อกนี้ จากโทรศัพท์มือถือมากกว่าเดสก์ท็อปแล้วในช่วงที่ผ่านมา

แต่ถ้าไปดูรายงานของทั่วโลกมือถือแซงเดสก์ท็อปไปตั้งแต่ปี 2016 แล้ว ลิงค์ข่าว

ปล. ในปีที่ผ่านมาเราได้เห็นแล้วว่าในอุตสาหกรรมเกม มือถือก็กำลังจะแซงเกมบนเดสก์ท็อปแล้วเช่นกัน

“ย้ำอีกที มือถือคืออุปกรณ์หลักของคนใช้อินเทอร์เน็ตนานแล้ว” ปรับตัวซะ

[WORDPRESS PLUGIN] Jetpack รวมปลั๊กอินหลายตัวเป็นหนึ่งเดียว

Jetpack for WordPress

กำลังมองหาปลั๊กอินเกี่ยวกับการทำแชร์ลิงค์ไปที่ social network พวก twitter, facebook, google+ อะไรประมาณนี้อยู่ครับ ซึ่งมันก็มีอยู่เยอะมาก เลือกกันจนตาลายก็ไม่ได้ดังใจสักทีสุดท้ายมาเจอ Sharedaddy ค่อนข้างถูกใจ ง่าย ขนาดเล็ก

แต่พอติดตั้ง Sharedaddy เสร็จมันขึ้นเตือนมาว่า ต้องลงปลั๊กอิน Jetpack เพิ่มถึงจะทำงานได้ ก็เลยติดตั้งลงบล็อกไป เมื่อเปิดดูรายละเอียดของ Jetpack แล้ว ต้องบอกว่ามันสุดยอดมาก เพราะมันเป็น All in one รวมปลั๊กอินหลายตัวมาอยู่ในตัวเดียว เลยสามารถลบปลั๊กอินออกได้หลายตัวแล้วมาใช้ Jetpack แค่ตัวเดียว

Plugin ต่างๆที่อยู่ใน Jetpack

Plugin ที่อยู่ Jetpack

เยอะมาก และยังมีแนวโน้มที่จะเพิ่มขึ้นเรื่อยๆ ในการติดตั้งต้องมี account ของ WordPress.com ด้วยนะครับ เพือเชื่อมระหว่างบล็อกของเรากับ WordPress

มาดูปลั๊กอินตัวเด่นๆที่น่าใช้ครับ

WordPress.com Stats

เก็บสถิติของบล็อก

ตัวเก็บสถิติใช้ตัวเดียวกันกับ WP.com มันเก็บข้อมูลได้ละเอียดกว่าตัว StatPress Reloaded ที่ใช้อยู่ ดังนั้นเลยถอนตัวปลั๊กอินตัวนี้ที่ใช้มานานแล้วทิ้งไปอย่างไม่ลังเล

Sharing Buttons

Sharing

ปุ่มสำหรับกดแชร์บล็อกไปที่ Social network ที่ต้องการ มีตัวหลักๆครบถ้วน หรือจะเพิ่มเองก็ได้ มีรูปแบบให้เลือกหลายอัน เรียบ ง่าย และสวย ควบคุมให้แสดงเฉพาะ Home, Page หรือ Post ได้ ตรงตามความต้องการพอดี จึงลบตัวที่เคยใช้มาก่อนหน้านี้คือ Social Sharing Toolkit ทิ้งไป

Subscriptions widget

Subscriptions widget

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

Gravatar Hovercards

Gravatar Hovercards

ระบบทำรายละเอียดของผู้เขียน โดยดึงของมูลมาจาก Gravatar เหมาะสำหรับบล็อกที่มี Author หลายคน บล็อกนี้มีคนเดียวเลยไม่ได้ใช้งาน

Spelling and Grammar demo

ระบบแนะนำคำถูกต้อง

ปลั๊กอินตัวนี้เหมาะสำหรับคนที่เขียนบล็อกเป็นภาษาอังกฤษ เพราะมันจะช่วยให้ดูคำผิดทั้งการสะกดผิดหรือแกรมมาผิดได้ง่ายขึ้น มันจะแนะนำคำที่ถูกต้องมาให้ เหมือนอยู่ใน MS Office เลย

Contact Form

Contact Form

ใครที่ใช้ Contract Form 7 ตัวนี้ก็ทำงานในแบบเดียวกัน ปรับแต่ง field ได้ และตั้งค่าอีเมลรับข้อความได้

Custom CSS

CSS editor

ตัวแก้ไข ปรับแต่ง CSS เพิ่มเติม แบบแสดงสีสัน ที่ไม่ได้มีแค่โค้ดเหมือน default ของ WordPress

Mobile Theme

Mobile Theme

ปรับแต่งให้บล็อกแสดงผลในอุปกรณ์มือถือ แท็ปเล็ต ได้สวยงามยิ่งขึ้น ดูดีมาก แต่ก่อนใช้ WPtouch เลยเปลี่ยนมาใช้ของ Jetpack แทน และสามารถปรับแต่การแสดงผลได้อีกนิดหน่อย

ส่วนอื่นๆที่ไม่ได้กล่าวถึง

  • Jetpack Comments
  • Carousel Gallery
  • VaultPress
  • WP.me Shortlinks
  • Shortcode Embeds
  • Beautiful Math
  • Extra Sidebar Widgets
  • Enhanced Distribution

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

 ดูรายละเอียด และ ดาวน์โหลด Jetpack for WordPress 

[WordPress Plugin] SimpleReach Slide เพิ่มความสนใจให้คนอยู่ในบล็อกนานขึ้น

ไปเจอ plugin สำหรับ WordPress ตัวหนึ่ง ชื่อ SimpleReach Slide เมื่อติดตั้งมันจะสร้าง Slide แนะนำโพสที่เกี่ยวข้องกับเนื้อหาที่ผู้ใช้กำลังเปิดอยู่ให้ เมื่อเราเลื่อนอ่านเนื้อหาจนสุดด้านล่าง หรือจะ scroll ลงไปเลยก็ได้นะ มันจึงจะโผล่ออกมา

ที่น่าสนใจอีกอย่างคือ มันจะยังไม่โผล่มาจนกว่าคนใช้จะเลื่อนลงไปข้างล่างจนจบเนื้อหาที่เปิดอ่านอยู่ แต่เมื่อมันปรากฏขึ้นมาแล้วเวลาเราเลื่อนหน้าเว็บขึ้นมันก็จะหุบให้เล็กลง(แต่ไม่หายไปนะ) ถ้าใครยังนึกภาพไม่ออกว่ามันแสดงผลยังไงก็ดูตัวอย่างรูปด้านล่าง หรือไม่ก็เลื่อนหน้านี้ลงไปให้สุดด้านล่าง แล้วสังเกตุที่มุมขวาล่าง นั้นแหละความสามารถของมัน

เรียกได้ว่าถูกใจมากเลย จึงเอามาบอกต่อครับ

SimpleReach Slide ปลั๊กอินสำหรับ WordPress

ที่ดาวน์โหลดปลั๊กอิน SimpleReach Slide

Developer เขียนในคำอธิบายว่ามันจะเพิ่มจำนวน pageviews กับ time on site ให้เว็บไซต์ของคุณได้ พอดูแล้วก็อาจช่วยได้ส่วนหนึ่งเพราะตอนที่มันเด้งขึ้นมา ทำได้น่าสนใจทีเดียว เหมือนมีอะไรตอบสนองตอนเราเลือนจอ สรุปว่าชอบก็แล้วกันครับ

การออกแบบ หน้าแรกของ 7 เว็บไซต์ข่าวเทคโนโลยี

ตอนที่จะเปลี่ยนธีมใหม่ให้บล็อก มีอย่างหนึ่งที่อยากรู้คือส่วนใหญ่แล้วเว็บไซต์ดังๆเขาออกแบบหน้าแรกยังไง เว็บไซต์ส่วนใหญ่ที่เข้าไปดูเป็นประจำก็คงหนีไม่พ้น 7 เว็บไซต์นี้ คือ AllThingsD, Engadget, Gizmodo, Mashable, SlashGear, TechCrunch และ The Verge ซึ่งสิ่งที่สนใจคือ หน้าแรกที่เราเปิดเข้ามาเจอเลย โดยที่ยังไม่เลื่อนลงด้านล่าง

ก็ใช้เครื่องตัวเองเป็น reference คือ แสดงผลใน Google Chrome ขนาดจอ 1280 x 800  ดังนั้นเอาทั้ง 7 เว็บไซต์มาดูทีละอัน ซึ่งเว็บไซต์ที่ชอบหน้าแรกมากที่สุด ขอยกให้ AllThingsD ส่วนเว็บไซต์อันอื่นดูดีในแบบของตัวเอง แต่ที่ชอบน้อยที่สุดก็ขอยกให้ SlashGear ที่ไม่ค่อยมีเอกลักษณ์มากนัก

ลองมาดูหน้าแรกของแต่ละเว็บไซต์

AllThingsD

AllThingsD หน้าแรกเป็นแบบเรียบง่าย ไม่มีโฆษณามารบกวนสายตา มีโพสเด่นสุดอยู่อันหนึ่ง กับลิงค์บทความอื่นๆด้านข้างอีก 3 อัน มีลิงค์หมวดต่างๆด้านบน มีช่องค้นหา เป็นหน้าแรกที่มีทุกอย่างที่ควรจะมีโดยที่ไม่ต้องเลื่อนดูด้านล่างก็ได้พอที่จะรู้ว่าเว็บนี้มีอะไรอยู่บ้าง จึงทำให้ชอบมากที่สุดเมื่อเทียบกับเว็บไซต์อื่นๆ

TechCrunch

TechCrunch มีโพสที่เป็นเรื่อง Hot Topic ให้เลือกคลิกอยู่ 4 เรื่อง แล้วก็เหลือบเห็นหัวข้อของโพสด้านล่างโผล่มานิดหน่อย ด้านบนยังมีเมนู และหมวดหมู่ให้คลิกได้ ที่น่าสนใจอีกอย่างคือทำส่วนของโฆษณาได้ลงตัวกลมกลืนไปกับเนื้อหา ดูมีช่องว่าง ไม่แออัดจนเกินไป

The Verge

The Verge  เป็นอีกเว็บหนึ่งที่ชอบ ทำหน้าแรกออกมาได้ค่อนข้างน่าสนใจ มีหัวข้อที่เป็นฟีเจอร์อยู่ด้านหน้ามีภาพประกอบโพสและสีพื้นหลังจางๆ มีหัวข้อให้คลิก มีช่องค้นหา ไม่มีโฆษณาให้เห็น

Gizmodo ดูเรียบๆ มองเห็นโพสอันใหญ่โดดเด่นอันเดียว มีโฆษณาเด่นที่ด้านขวา มองเห็นโพสล่าสุดด้านขวาประมาณ 3 อัน เป็นหน้าแรกที่เรียบและดูดีทีเดียว

Mashable

Mashable เน้นเรื่องการแชร์มาก แทบทุกโพสจะมีลิงค์แชร์ บางครั้งทำให้ดูรกตาไปหน่อย แต่มีโพสจุดเด่นอันใหญ่อันหนึ่ง กับอีกสองอันด้านข้าง มีลิสต์ของ Most shared ให้เห็น มีโฆษณาชัดเจนเป็นแบนเนอร์ด้านบนแต่ค่อนข้างกลมกลืน

Engadget

Engadget มีส่วนของแบนเนอร์โฆษณาที่อยู่ด้านบนเหมือนเป็นส่วนเกินของเว็บไซต์ไปเลย แต่ค่อนข้างดึงดูดให้คนดูเป็นพิเศษ และยังกระตุ้นให้ต้องเลื่อนลงข้างล่างด้วยสิ แต่ส่วนตัวไม่ค่อยชอบเท่าไหร่นัก ความฉลาดในการออกแบบอีกอย่าง นั้นคือการเอาโพสมาเป็นส่วนเฮดเดอร์ที่เปลี่ยนไปเรื่อยๆ มีเมนูหมวดหมู่ให้คลิก มี Top Stories ให้เลือก

SlashGear

SlashGear คล้ายกับ Engadget มีโฆษณาอยู่ด้านบนอย่างชัดเจน แต่ไม่น่าดึงดูดเท่า มีฟีเจอร์โพสเรียงกันให้เลื่อนซ้ายขวาได้ มีเมนูของหมวดหมู่ และมองเห็นหัวข้อใหญ่ของโพสล่าสุดโผล่มานิดหน่อย

สรุป 
แต่ละเว็บมีแนวทางของตัวเองชัดเจน มีสีเฉพาะตัว มีโพสที่น่าสนใจไว้เด่นที่สุด เป็นกรณีศึกษาที่ดีได้ทั้งสิ้น แล้วเอามาปรับใช้กับเว็บของตัวเองต่อไป

ปลั๊กอินควบคุม Widgets ให้แสดงเฉพาะบางหน้า

Display Widgets เป็นปลั๊กอินสำหรับ WordPress ตัวล่าสุดที่ได้ติดตั้งและใช้งานในบล็อกนี้ครับ ซึ่งปลั๊กอินตัวนี้จะทำให้เราสามารถควบคุม Widgets ให้แสดงหรือไม่แสดงในหน้าไหนก็ได้

ทำไมต้องใช้งานมัน ก็เรื่องมันมีอยู่ว่า อยากติด Google Adsense ไว้ที่ Widget ที่อยู่ด้านข้างของบล็อกนี้ด้วยอีกสักสองอัน แต่ว่าในหน้า Post, Page ติดไว้แล้ว 3 อัน ซึ่งเป็นข้อกำหนดของ Google ที่ให้ติดได้แค่หน้าละ 3 ตำแหน่งเท่านั้น แต่เพราะว่า Widget ของเรามันแสดงตลอดทุกหน้า จึงทำให้ถ้าเปิดหน้าแรกมันก็โอเคดี แต่ถ้าเปิดหน้า Post, Page มันจะผิดข้อกำหนด(ไม่แสดงผลบางอัน)

โจทย์เลยต้องการให้ Widget ของโฆษณาตัวนี้มันแสดงเฉพาะหน้าแรกเท่านั้น ก็ค้นไปเจอปลั๊กอินที่ชื่อ Display Widgets ตรงตามความต้องการของเราพอดี ก็เลยติดตั้งและลองใช้งานดู พูดได้เลยว่า ตรงใจเลย!

วิธีใช้งานปลั๊กอิน Display Widgets

เข้าไปดาวน์โหลด Display Widget ไปติดตั้ง หรือจะค้นหาแล้วติดตั้งที่หน้า install plugin ก็ได้

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

ปลั๊กอิน Display Widgets

ผลเป็นยังไงลองดูโฆษณาที่ด้านซ้ายอยู่ด้านบนของหัวข้อ “เรื่องแนะนำ” มันจะแสดงออกมาเฉพาะตอนที่อยู่หน้าแรก เท่านั้นครับ

ลองนำไปประยุกต์ใช้กลับเว็บไซต์ของคุณดูครับ หวังว่าจะเป็นประโยชน์

ดาวน์โหลดปลั๊กอิน Display Widget

WordPress Developer Night ครั้งที่ 2 มาแล้ว

WordPress Developer Night ครั้งที่ 2

WordPress Developer Night ครั้งที่ 2 มาแล้วครับ จะจัดในวันเสาร์ที่ 14 พ.ค. 2554 นี้ เวลา 13:00 น. – 19:00 น. ที่ CS Loxinfo ตึก Cyber World (ตรงข้ามโรบินสันรัชดา) ลงทะเบียน 6 พ.ค. เวลา 12:00 น. จำนวน 50 คน ใครสนใจต้องเตรียมลงทะเบียนไว้ครับ

ถ้าอยากรู้ว่ามันคืองานอะไรลองดู บันทึก WordPress WordPress Developer Night ครั้งที่ 1 จากครั้งแรกที่ได้เข้าร่วมรู้สึกว่าสนุกมาก ครั้งที่สองเลยคิดว่าจะเข้าร่วมงานด้วยครับ (ถ้าไม่มีเหตุสุดวิสัย) ตอนนี้เลย ลงปฎิทินสำหรับวันลงทะเบียน กับวันงานไว้แล้ว

ช่วงนี้ตัวเองก็มีโครงการจะทำธีมของ WordPress ไว้ใช้เอง รวมทั้งเอาไว้แจกด้วย ดูแล้วไม่น่ายากมากแต่ต้องใช้เวลา คิดว่าตอนเริ่มอาจจะต้องใช้เวลาพอควร พอได้อันแรกแล้วอันต่อๆไปคงจะทำได้เร็วขึ้น เผื่อว่าอนาคตอาจสามารถทำขายได้บ้าง

ปลั๊กอิน WordPress ทำ Sitemap แสดงบนหน้าเว็บไซต์

WP Multilingual Sitemap

WP Multilingual Sitemap เป็นปลั๊กอิน ที่เอาไว้สร้าง Sitemap ที่เป็น HTML ไม่ใช่  Sitemap ที่เป็นไฟล์ XML เอาไว้ให้ boot มาดึงไปใช้ หรือเอาไว้ submit พวก search engine ที่แทบจะทุกเว็บต้องลงไว้ แต่ตัวนี้เอาไว้แสดงหน้าเว็บไซต์ให้คนที่เข้ามาที่เว็บไซต์ง่ายต่อการค้นหา ข้อดีของมันคือ เมื่อติดตั้งปลั๊กอินตัวนี้แล้ว เราต้องการให้ Sitemap แสดงที่หน้าไหน ก็ใส่ Short code เข้าไปได้เลย โดยเลือกแสดงลิสต์ที่เป็น Page, เป็น Post, หรือแสดงลิสต์ Post แยกตาม Category ก็ได้

ตัวอย่างการใส่ค่า ในหน้า Page

WP Multilingual Sitemap

ลองใช้มาได้ 2-3 วันแล้ว แต่ยังไม่ได้เขียนถึง มันแสดงผลออกมาได้ดีตามที่อยากให้เป็น ส่วนเว็บใครที่มี sub category เยอะ คิดว่าจะถูกใจเลยทีเดียว สนใจอยากดูตัวอย่างการใช้งานดูที่นี้ได้เลยครับ https://www.amphur.in.th/sitemap/

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 นาที ครับ

WordPress เลือกแสดงแค่บาง Category

Biomed.in.th

ช่วงนี้ในเว็บ Biomed.in.th มีข่าวประชาสัมพันธ์ทั่วไป กับข่าวเปิดรับสมัครทุน และสมัครงานผู้ช่วยวิจัยเยอะหน่อย ซึ่งมันก็ถือว่าดีเลยล่ะถ้ามันจะเป็นแหล่งหางานให้กับคนที่จบด้านนี้ แต่แค่รู้สึกว่าการแสดงข่าวประชาสัมพันธ์รับสมัครงานปนกับบทความวิชาการอื่นๆ ในหน้าหลักเรียงกันหลายๆอันมันรู้สึกว่าดูไม่ค่อยดีเท่าไหร่ มันให้ความรู้สึกว่าจะกลายเป็นเว็บสมัครงานแทนซะงั้น เลยลองเปิดดูใน codex.WordPress ดูว่ามีส่วนของการจัดการโพสอย่างไรบ้าง ก่อนหน้านี้ก็เคยเขียนเกี่ยวกับ Sticky ของ WordPress ไว้เหมือนกัน ซึ่งลักษณะการเขียนก็คล้ายๆกัน ผมเอามาบันทึกเก็บไว้เผื่อได้เรียกใช้งานในครั้งหน้า ส่วนใครที่รู้อยู่แล้วก็ผ่านไป

ปกติแล้วการเรียกวนลูปให้แสดงโพสใน WordPress มี โค้ดสั้นๆดังนี้

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
.....
<?php endwhile; ?>

แต่ในกรณีของเว็บ Biomed.in.th เราไม่ต้องการให้โพสที่อยู่ใน Category ของกลุ่มโพสสมัครงาน(ต้องสร้างไว้ก่อนแล้ว) แสดงในหน้าแรก ให้เปลี่ยนโค้ดด้านบนเป็น แบบนี้ครับ

<?php query_posts($query_string . '&cat=-3,-8'); ?>
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
.....
<?php endwhile; ?>

ตรงเลข -3,-8 คือ ID ของ Category ที่เราไม่ต้องการให้มันแสดง ใส่ได้ตามต้องการ
นอกจากนี้ยังมีวิธีการใส่ Style แยกตาม Category การวนหลายลูป ลองเข้าไปอ่านเพิ่มเติมได้ที่ ที่นี้ https://codex.WordPress.org/The_Loop

แล้วถ้าเอาออกจากหน้าแรกแล้ว จะเข้าไปดูยังไง ผมก็เลยสร้างลิงค์ของ Category ข่าวกับงาน ขึ้นมาโดยเฉพาะ ใครสนใจจะได้คลิกเข้าไปดูได้เลย

เพิ่มเมนู News & Jobs ให้ Biomed.in.th

แล้วนอกจากนั้นยังเพิ่ม Widget ที่เลือกแสดงแค่บาง Category ได้ มันคือปลั๊กอินที่ชื่อ List Category ก็ติดตั้งแล้วดึงมาโชว์ไว้ Sidebar ด้วยอีกอัน

Calendar Plugin for WordPress ใช้ตัวไหนดี?

เมื่อวานลองหาตัวปลั๊กอินที่จะทำปฎิทินดีๆสักอันให้ WordPress ความต้องการคือ ต้องการให้มันแสดงในหน้า Post แบบเต็มๆ ไม่ใช่ widget ที่ใน WordPress มีให้อยู่แล้ว นอกจากนั้นคือเมื่อคลิกไปที่ปฏิทินในวันที่มี event อะไรสักอย่าง ก็ให้แสดงข้อมูลออกมาเลย เลื่อนเดือนเดินหน้าย้อนหลังได้ มีแสดงแบบเรียงกันเป็นแผนงานได้ด้วย ก็ลองค้นดู ได้ลองหลายๆตัวดังนี้ครับ

  • Calendar ตัวนี้ดีเลย แยกสีของกลุ่มปฎิทินได้ ปรับ css ได้เอง มี Widgets มาให้พร้อมเอาไว้แสดง Upcoming แต่เสียดายมันไม่รองรับภาษาไทย พิมพ์เข้าไปแล้วกลายเป็น ??????? ใครที่มีความรู้เรื่องโค้ดหน่อยน่าจะแก้ได้ไม่ยาก แต่ชั่วโมงนี้ขอลองหาตัวอื่นดูก่อน
  • Editorial Calendar ตัวนี้มีหน้าเพิ่มเข้ามาใน admin เป็นตารางปฎิทิน คลิกวันที่จะใส่ event จะมี popup ขี้นมา แล้วโพสเนื้อหาลงไป พอกด public มันจะสร้าง post หน้านั้นพร้อมรายเอียดให้เลย ดีแต่รายละเอียดของ event ทำมาให้ใส่ได้น้อยไปนิด ปรับแต่งได้น้อย
  • Stout Google Calendar ตัวนี้ไม่มีอะไรมาก เป็นตัวให้นำโค้ดจาก Google calendar มาแปะ แล้วจัดการรูปร่างหน้าตาได้นิดหน่อย
  • Events Calendar ตัวนี้ถือว่าเจ๋งมาก หน้าเพิ่ม event ทำออกมาให้เรียบง่าย ไม่ยุ่งยาก event ที่ใส่ลงไปถ้ามีงานต่อเนื่องยาวหลายวัน สามารถเลือกได้ว่าจะให้แสดง event ตลอดช่วง หรือให้ใส่แค่วันแรกเท่านั้นได้ ข้อเสียคือหน้าไม่ค่อยสวย อาจจะต้องแก้ไขหน้าตาพอควรเพื่อให้เหมาะกับเว็บไซต์
  • My Calendar ตัวนี้น่าจะเรียกได้ว่าสมบูรณ์ที่สุดเมื่อเทียบกับตัวข้างบน จัดการได้ทุกอย่าง แบ่งกลุ่ม ใส่สี แสดงปฏิทินแบบรายเดือน หรือเป็นแบบแผนงานได้ แก้ไข css ได้ มี shortcode เรียกใช้ปฎิทินแบบต่างๆแบบใส่ parameter เข้าไปได้ เยี่ยม เสียที่เป็นเหมือนตัวแรกที่ไม่รองรับภาษาไทย
  • Event Calendar / Scheduler ตัวนี้มีแปลกกว่าตัวอื่นคือ เป็น ajax ติดตั้งแล้วจะสร้างหน้าเพิ่มมาให้อัตโนมัติหนึ่งหน้าไว้แสดงปฏิทิน หน้า default ของปฏิทินสวย แต่ปรับอะไรมากไม่ค่อยได้ ย่อขยายตัวปฏิทินแล้วมันขาดไม่พอดี ตัวเพิ่ม event ก็ไม่ดี
  • Event Calendar 3 for PHP 5.3 ตัวนี้เหมือนจะมีมาให้ แค่ตัวที่แสดงแบบ widget เลยไม่ตรงตามที่ต้องการ

อันที่จริงยังมีอีกหลายตัวที่ยังไม่ได้ลองเล่นดู โดยสรุปจากตรงนี้ถ้าจะให้เลือกในลิตท์ด้านบน ผมเลือกตัว My Calendar เพราะปรับแต่งได้เยอะ แต่อาจจะต้องมาดูว่าทำไมมันไม่รองรับภาษาไทย ถ้าแก้ตรงนั้นได้แล้ว มันก็เป็นปฎิทินที่น่าใช้ที่สุด

แต่ว่าสุดท้ายของการนำไปใช้งานจริง(กับงานนี้) จากโจทย์ด้านบนผมกลับไม่ได้เลือกใช้ปลั๊กอินของ WordPress ที่ลองมา 6-7 ตัวเลย แต่ผมเลือกใช้การใส่ Google calendar  เข้าไปว่างแบบง่ายๆ แล้วเลือกไปใส่ข้อมูลที่ Google แทน เหตุเพราะมันตอบโจทย์ที่เราตั้งไว้หมด แสดงเป็นปฏิทินรายเดือนแบบใหญ่ๆได้ ใส่รายละเอียดของข้อมูลลงไปได้ พบว่าตรงช่องรายละเอียดของการเพิ่ม event ของ Google calendar ใส่โค้ด html ได้ จึงง่ายที่จะใส่ลิงค์เข้าไปในรายละเอียดของ event ได้ ใส่ลิงค์ไปที่สถานที่ปฎิบัติงานได้อีกด้วย แสดงเป็นแบบแผนงานได้ ต้องตั้งให้ปฎิทินเป็นแบบสาธารณะ คนอื่นจึงจะดูข้อมูลได้

Google Carlendar

แสดงแบบเป็นแผนงาน

สรุปคือตอนแรกหาปลั๊กอินสำหรับ WordPress แต่มันไม่ตรงกับสิ่งที่เราต้องการ ก็เลยต้องหาตัวอื่นมาเสริม แต่ก็ถือว่าได้รู้ว่า Calendar Plugin ของ WordPress มีอะไรบ้าง(ยังเหลืออีกเยอะ) แต่อาจจะเป็นประโยชน์ในครั้งหน้าเมื่อต้องทำอะไรประมาณนี้อีก