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 มีอะไรบ้าง(ยังเหลืออีกเยอะ) แต่อาจจะเป็นประโยชน์ในครั้งหน้าเมื่อต้องทำอะไรประมาณนี้อีก

ปรับธีมใหม่ให้ 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)

บันทึก WordPress Developer Night

WordPress Developer Night

เมื่อวันเสาร์ ที่ 5 กุมภาพันธ์ ที่ผ่านมา ได้ไปงาน WordPress Developer Night ครั้งที่ 1 (แสดงว่าจะมีครั้งต่อไป) งานออกแนวสบายๆ คุยกัน ถามตอบ แลกเปลี่ยนความคิดเห็น งานออกมาสนุก ได้ความรู้เปิดกว้างมากขึ้นเยอะเลย สำหรับผมคนที่ถือว่าเป็น User ไม่ใช่ Developer นับว่าได้รู้อะไรเพิ่มขึ้นเยอะเลย โดยเฉพาะช่วงของการพัฒนาธีม และปลั๊กอิน ขอบันทึกเป็นข้อๆตามที่จดจำได้

หัวข้อที่ 1. Web Design Business with WordPress โดย @ipattt
ดูบันทึก https://smallpad.org/wpdevnight-1

  • คุณ @ipattt เล่าประสบการณ์การใช้ WordPress ในการทำเว็บให้องค์กร เล่าถึงเว็บแบบไหนที่ใช้ WordPress แล้วงานออกมาดี ข้อดีข้อเสียของ CMS แต่ละตัว การคิดเงิน
  • BuddyPress อีกสายหนึ่งของ WordPress เน้นไปที่ Social Network ที่หลายคนบอกว่ามันไม่เวิร์ค เป็นจุดด้อยอีกอันหนึ่งของ WordPress ที่ไม่เหมาะสำหรับทำเว็บเน้นไปที่ Social Network ผมก็เคยเล่นเหมือนกัน ลักษณะของมันจะคล้ายๆกับเราใช้ WordPress.com มีบาร์ควบคุมการทำงานของสมาชิก ตัวอ้วนและไม่ค่อยมีการอัพเดตเลย
  • ผมถามเรื่องการใช้ WordPress ในองค์กรที่มีอินเตอร์อยู่ในระบบปิดบางส่วนใช้ VPN ในการใช้งาน เป็นปัญหาที่เจอกับตัวคือ ส่วนไหนของ WordPress ที่ต้องเชื่อมกับภายนอกจะทำงานไม่ได้เลย เช่นหน้า Plugin, Themes คำตอบของเรื่องนี้ คือเราต้องคุยกับฝ่ายไอทีขององค์กร ขอให้เปิดให้เว็บเราออกข้างนอกได้ หรือโน้มน้าวให้เขาใช้โฮสของข้างนอก
  • อีกเรื่องหนึ่งที่น่าสนใจ ที่คิดว่าหลายๆคนคงเจอบ้าง คือ ในเมื่อ WordPress เป็น CMS ที่ให้ใช้ฟรี ทำไมองค์กรเขาจะต้องจ่ายเงินแพงๆให้เราผู้ทำเว็บให้ คำตอบจาก @imenn บอกว่า ถ้าตอบแบบดื้อๆหน่อย คือ WordPress ก็เหมือน ปากกา ดินสอ กระดาษ มันเป็นเครื่องมือตัวหนึ่ง คุณจะต้องมีจิตกร(นักพัฒนาเว็บฯ) จึงจะได้รูปภาพที่สวยงามออกมาได้(แบบนี้ตรงใจผมนะ) แต่ถ้าจะตอบแบบดีๆหน่อยหนึ่ง ก็คือ อธิบายว่า WordPress มันฟรีก็จริง แต่จะใช้งานได้จริงๆนั้นจะมีหลายๆส่วนที่ยังต้องการคนพัฒนาให้มันทำงานได้ จะทำให้มันเหมาะสมกับความต้องการขององค์กรนั้นๆต้องมีคนพัฒนา
  • ราคาของการทำเว็บ ที่ทำด้วย WordPress คุณ @ipattt บอกว่า สูงขึ้นตามจำนวนกรรมการตรวจงาน ฮา!
  • Marketing ของการทำเว็บด้วย WordPress กับลูกค้า นำตัวอย่างของเว็บต่างๆให้เขาดูก่อน แล้วเลือกรูปแบบของเว็บที่ชอบ จะช่วยให้เรา ทำงานได้ง่ายขึ้นมาก

หัวข้อที่ 2. WordPress Showcase & Plugin @iannnnn
ดูบันทึก https://smallpad.org/wpdevnight-2

  • คนใช้ WordPress เยอะมาก จึงมีปลั๊กอินต่างๆให้เลือกใช้เยอะมากมาย คุณ @iannnnn เจอแล้วจะเก็บไว้ใน Delicious ที่เป็น bookmark ออนไลน์ ใครสนใจติดตามได้ที่ https://www.delicious.com/iannnnn/WordPress
  • ตัวปลั๊กอินที่ได้รับความนิยม หรือเรียกได้ว่าควรต้องมี คือ WP Super Cache, Akismet, WP-SpamFree, Google XML Sitemaps Generator, All in One SEO Pack, WP-PageNavi
  • ตัวที่ทำ comment ที่ @iannnnn แนะนำคือ DISQUS (ผมก็ใช้) มันเก็บข้อมูลสองที่เลยคือ ในเว็บของเรา และเว็บ DISQUS ด้วย และท่านอื่นๆก็แนะนำตัว Facebook Comment ด้วย ซึ่งเป็นการผลักภาระไปให้ Facebook แต่ก็น่าเสียดายที่มันไม่มีแจ้งเตือนเมื่อมีคนตอบ และไม่มีข้อมูลเก็บไว้ในเว็บเราเอง
  • อีกตัวที่หลายคนเห็นพร้อมต้องกันว่าเยี่ยมจริงคือ Contact Form 7 เป็นระบบติดต่อกับผู้ใช้ที่ประยุกต์ได้หลายแบบ แนบไฟล์ได้ด้วย fail.in.th ก็ใช้ตัวนี้ในการรับภาพจากคนทั่วไป
หัวข้อที่ 3 สัมภาษณ์ คุณ@ipeerapong คนไทยทำธีมขาย
บันทึก https://smallpad.org/wpdevnight-4
  • เป็นหัวข้อที่สร้างแรงบันดาลใจได้เยอะมาก คุณ@ipeerapong ขายธีม WordPress ผ่านทางเว็บต่างประเทศ ดูที่ https://themeforest.net/user/peerapong และที่ mojo ขึ้น feature seller ด้วย https://www.mojo-themes.com/user/peerapong/
  • ออกมาทำงานที่บ้านขายธีมเลี้ยงชีพอย่างเดียวได้ 5 เดือนแล้ว มีธีมอยู่ 23 ธีม
  • ผมลองคำนวณรายได้ของคุณ @ipeerapong จากตัวเลขล่าสุดใน theme forest ที่เดียว ขายไป ณ ตอนนี้ 5,211 ครั้ง ราคาเฉลี่ยประมาณ $30 ได้ส่วนแบ่ง 50-70% งั้นคิดเฉลี่ยประมาณ 60% ดังนั้นคิดเป็นเงิน (5,211 x 30) x 0.60 = $93,7 98 หรือ 2,813,940 บาท เขาทำธีมขายมาแล้ว 7 เดือน สรุปเฉลี่ยเดือนละ 401,991 บาท สุดยอดจริงๆ ทำงานที่บ้าน ได้เดือนละ 4 แสน
  • วันหนึ่ง ช่วงเช้าและช่วงเย็น เขาตอบอีเมลลูกค้าวันละประมาณ 100 ฉบับ ตอนกลางวันทำธีมใหม่ เขาใช้เวลา 1-2 สัปดาห์ในการทำธีม 1 ตัว ส่วนใหญ่อยู่ในกลุ่ม business, portiflio
  • น่าจะจุดประกายให้ใครหลายคนลุกขึ้นมานั่งเขียนธีมขายจริงๆจังๆได้

หัวข้อที่ 4. WordPress Theme Design โดย @imenn
บันทึก
https://smallpad.org/wpdevnight-3 สไลด์ประกอบการอธิบาย https://www.slideshare.net/iMenn

  • คุณ @imenn มาอธิบายส่วนประกอบของธีม WordPress ปกติเราใช้และพอรู้บ้างเล็กน้อยว่ามันมีอะไรบ้าง เคยอ่านวิธีทำมาบ้าง แต่พอได้ฟังการอธิบายของคุณเม่นแล้ว มันกระจ่างขึ้นเยอะเลย
  • ตัวที่เพิ่งรู้คือ template hierarchy ทำให้เข้าใจว่าแต่ละธีมทำไมมันมีไฟล์ที่แตกต่างกันได้ มีลำดับขั้นของการเรียกใช้ไฟล์ในธีมมันมีกฎอยู่นะ
  • ด้วยเวลาที่จำกัด ทำให้มีอีกหลายส่วนที่ยังไม่ได้พูด อยากฟังต่ออีก
  • คุณ @imenn มีโปรเจค ทำธีมกลางตัวหนึ่งขึ้นมาให้คนอื่นสามารถนำไปพัฒนาต่อได้ง่าย รออีกสักพักจะปล่อยออกมาให้โหลดกัน
  • ในงานคุณ @imenn นำเสนอด้วย Slide จะปล่อยออกมาให้โหลดเช่นกัน

หัวข้อที่ 5. WordPress Plugin Development การพัฒนาปลั๊กอินในเวิร์ดเพรส โดย @warong
บันทึก https://smallpad.org/wpdevnight-5

  • เพิ่งจะเข้าใจว่าปลั๊กอินจริงๆแล้ว มันคืออะไรเมื่อได้ฟังหัวข้อนี้
  • อันที่จริงเราใส่ code ลงไปในธีมได้เลยมันทำงานได้เช่นกัน แต่ถ้าจะให้คนอื่นใช้ด้วย เอาไปพัฒนาต่อได้ มันคือ Plugin
  • สามารถเชื่อมกับ WordPress ด้วย Hook (API)แบบ Actions หรือ Filters ต้องศึกษาการเรียกใช้งาน
  • รูปแบบการเก็บข้อมูลในปลั๊กอินมีอยู่ 3 แบบ คือเก็บไว้กับ Post, Option และแยกสร้าง database ต่างหาก เลือกดูว่าปลั๊กอินของเราควรใช้แบบไหน
  • มีคนถามว่าแบบไหนคุ้มกว่าระหว่างทำเป็นปลั๊กอิน กับเขียน functions ขึ้นมาใช้เองในเว็บ คำตอบคือ ถ้าเราเขียนเป็นปลั๊กอินมันจะสามารถเอาไปใช้กับเว็บอื่นๆได้ด้วย ซึ่งโอกาสที่เราจะสร้างเว็บที่มี request ใกล้เคียงกันนั้นมีแน่นอน เสียแรงครั้งเดียวใช้ได้หลายครั้ง ย่อมคุ้มกว่า

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

เรื่องที่ขอแชร์ Theme ที่ทำให้ WordPress สามารถเขียนเนื้อหาได้ตั้งแต่อยู่หน้าบ้าน ชื่อ P2 https://wordpress.org/extend/themes/p2 ลงแล้วหน้าตาประมาณนี้ครับ https://goo.gl/3fHns

เว็บที่ใช้เช็คว่าเว็บไซต์นั้นใช้ CMS อะไร และ Plugin อะไรบ้าง คือ เว็บ https://webmastercoffee.com แต่ลองดูพบว่ามันบอกได้แค่ว่าใช้ Plugin ที่เกี่ยวกับ SEO ตัวไหนบ้าง ตัวอื่นๆมันไม่เช็คให้ครับ มีอีกวิธีหนึ่งที่เขาทำกันตามที่มีการแนะนำในงาน คือ ดูว่าใน /wp-content/plugins/ มีโฟว์เดอร์อะไรอยู่บ้าง

พองานนี้จบลงไฟในใจลุกขึ้นมาอีกครั้ง อยากลองทำธีมเองบ้าง หลังจากคิดจะทำมาตั้งนานแล้วไม่เคยสำเร็จเลย

ขอขอบคุณ ทีมงานผู้จัดงานทุกท่านที่จัดงานดีๆขึ้นมาครับ

WordPress Developer Night

WordPress Developer Night

WordPress Developer Night ผมได้อ่านข่าวจาก https://thumbsup.in.th เมื่อวาน เห็นรูปแบบงานแล้ว น่าสนใจมาก เราก็ใช้ WordPress ทำเว็บเป็นหลัก เลยสนใจอยากเข้าร่วมงานเพื่อแลกเปลี่ยนความคิดในการใช้งานและพัฒนากับท่านอื่นๆด้วย เขาเปิดลงทะเบียนวันนี้ (22 ม.ค.) เวลา 20.11 น. จำกัดคนแค่ 30 คน ส่วนวันงานจัดในวันเสาร์ที่ 5 กุมภาพันธ์ 2011 เวลา 18:00 น. – 23:00 น. วันนั้นผมเลิกงานประมาณ 5 โมงเย็นคิดว่าไปทันแน่นอน เพราะที่ทำงานอยู่ใกล้แถวนั้นด้วย

จึงคิดจะไปร่วมงาน เลยตั้งให้ Google Calendar มันส่ง sms มาเตือนในเวลา 20.05 น. พอถึงเวลาจะได้ไม่ลืม เมื่อทางเว็บไซต์เปิดให้ลงทะเบียนตามเวลา 20.11 น. ตรงเป๊ะ ผมก็ลงทะเบียนไปทันที แต่เวลาผ่านไปก็ไม่มีคอมเม้นท์ของตัวเองขึ้นสักที ในขณะที่ของคนอื่นขึ้นมาเลยๆ จนเต็ม 30 ไปแล้ว ตอนนั้นก็คิดว่า คงไม่ได้ไปแล้ว แอบเสียดายนิดๆ คิดว่าคงเป็นการจัดงานของนักพัฒนาเฉพาะกลุ่มเท่านั้น จากนั้นไม่นานก็ได้รับอีเมลจากคุณ @imenn ว่าลงทะเบียนได้นะ เลยเข้ามาดูในหน้าลงทะเบียน ปรากฏว่าได้อันดับ 0 เพราะมันเต็ม 30 ไปแล้ว เห็นแล้วก็ฮาดี

กลับมาคิดว่าน่าจะเป็นเพราะตอนที่ผมลงทะเบียน เขียนคอมเม้นท์ซ้ำเดิมในเวลาใกล้กัน เพราะไม่เห็นคอมเม้นท์ตัวเองขึ้น pending เลยไม่แน่ใจว่ากด submit ไปหรือปล่าว ร่วมกับเน็ตมันห่วย ช้า ติดๆดับ จึงทำแบบนั้น แล้ว Akismet ตัวกรอง spam ของ WordPress มันก็ตรวจจับคอมเม้นท์จากผมเป็น spam เลยทำให้ ผู้ดูแลไม่เห็นคอมเม้นท์จากผม ในหน้าปกติของการจัดการคอมเม้นท์ทั่วไป อันนี้แสดงให้เห็นว่าระบบกรอง spam ของ WordPress มันสุดยอดมาก!

ต้องขอบคุณ คุณ @imenn ที่ช่วยตรวจสอบ และจัดอันดับการลงทะเบียนลำดับที่ 0 มาให้ คิดว่าน่าจะได้อะไรเยอะในงานนี้ครับ

NetworkedBlogs มีปัญหาไม่อัพเดตในหน้า Facebook Fan Page

NetworkedBlogs Publishing Issue

เมื่อสองวันก่อน Biomed.in.th มีการอัพข้อมูล 3 อัน แต่ในหน้า Biomed.in.th on Facebook ไม่อัพเดตตาม ซึ่งปกติจะใช้บริการของ NetworkedBlogs เป็นตัวช่วยในการเผยแพร่ในหน้า Fan Page มันไม่อัพเดต ตอนแรกคิดว่ามันมี delay หรือปล่าว เพราะก่อนหน้านี้ก็มีบ้าง แต่ที่หน้า Facebook ของผมใช้ app นี้เหมือนกัน มันกลับทำงานตามปกติ สุดท้ายแก้ปัญหาเฉพาะหน้าไปก่อน ด้วยการโพสเองในหน้า Fan Page

วันนี้เลยแวะเข้ามาดูในหน้าจัดการ เห็นแถบแดงบอกชัดเจนไว้ว่า มีปัญหาการดึงข้อมูลในหน้า Fan Page ส่วนหน้าส่วนตัวยังใช้งานได้ ตอนนี้กำลังทำการแก้ไขอยู่ ติดตามความคืบหน้าของการแก้ปัญหา ได้ที่ https://support.networkedblogs.com ตอนนี้ก็ใช้วิธีอัพเดตด้วยตัวเองไปก่อน

หาตัวใหม่ใช้ดีไหมนะ

Barcamp Bangkok 4 – Sripatum University Oct 23rd & 24th

Barcamp Bangkok 4 - Sripatum University Oct 23rd & 24th

I got an email from Barcamp Bangkok 4 Team.

Register Now, its free!

That’s right, 100% free, free food, free drinks, free T-Shirts, amazing speakers great sponsors and an incredible venue.

Places are limited and we are expecting over 1000 people this year, so hurry!

Register Now

Follow Us

  • Website
  • Twitter
  • Facebook
  • แก้ปัญหา WordPress แสดงเนื้อหาได้ไม่เกิน 6,000 ตัวอักษร

    ปัญหา WordPress แสดงเนื้อหาได้ไม่เกิน 6,000 ตัวอักษร เกิดกับบล็อกผมมานานแล้ว แต่พยายามเลี่ยงปัญหามากกว่าแก้ปัญหามานานเช่นกัน เพราะเข้าใจว่ามันเป็นข้อจำกัดของ WordPress เอง

    ปัญหาที่ว่าคือ เมื่อเราเขียนบล็อกที่มีความยาวมากๆ(>6,000 ตัว) เนื้อหาจะไม่โชว์เลย แต่ข้อมูลไม่หายนะ แค่ไม่แสดงเนื้อหาหน้าเว็บ ผมเลี่ยงปัญหาด้วยการ ตัดเนื้อหาออกบ้าง หรือแยกเป็นตอนย่อย วันนี้เลยลองแก้ปัญหาดูว่ามันเกิดจากอะไรกันแน่ มาดู log file ของการแก้ปัญหานี้กัน บันทึกไว้เผื่อมีประโยชน์กับคนอื่น ได้เรียนรู้ระหว่างทางเยอะเหมือนกันนะ

    ใครขี้เกียจอ่าน อยากรู้ว่าต้นเหตุเป็นเพราะอะไร เลือนไปอ่านข้อสุดท้ายได้เลย

    1. อันดับแรกลองตรวจดูว่า โพสที่มันไม่แสดงนั้นมีตัวอักษรอยู่เท่าไหร่ เครื่องมือตรวสอบที่ง่ายมากๆ และใกล้ตัวสุด คือ twitter นี้เอง เข้าไปก็อบปี้ code จาก หน้า html แล้วว่างใน ช่อง tweet แล้ว +140 ก็ได้จำนวนตัวอักษรที่แท้จริงแล้ว
      ใช้ twitter นับตัวอักษร

      ตอนนี้ก็พอรู้จำนวนตัวอักษรคร่าวๆแล้ว ว่าจำนวนเท่าไหร่ที่มันไม่แสดงผลหน้าเว็บ

    2. สันนิษฐานแรก database ไม่รองรับหรือปล่าว จึงเข้าไปดู data type ว่าเลือกใช้แบบไหน เมื่อเข้าไปดูพบว่า เป็นแบบ longtext ซึ่งเก็บข้อมูลได้ 4,294,967,295 ตัว Ref ดังนั้นตัดปัญหา database ไม่รองรับไปได้เลย มันเก็บได้อยู่แล้ว
    3. ข้อต่อมา ลองเอาโพสที่มีปัญหาดังกล่าว(เกิน 6,000 characters) ไปโพสบล็อกอื่นที่ใช้ WordPress เหมือนกัน ข้อนี้จะบอกเราได้ว่า มันเป็นปัญหาเฉพาะบล็อกเรา หรือที่อื่นๆก็เป็น จะบอกได้ว่าเป็นปัญหาที่ WordPress Core หรือ ส่วนเสริมอื่นๆ  ซึ่งได้ผลว่า ที่อื่น ไม่มีปัญหาดังกล่าว แสดงผลได้เป็นปกติ แสดงว่าบล็อกเราเองที่มีปัญหา
    4. ข้อสันนิษฐานต่อมา เป็นปัญหาที่ธีมที่เราเลือกใช้หรือปล่าว ทดลองเอาธีมที่ใช้อยู่ในปัจจุบัน ไปใช้ที่บล็อกอื่นแล้วดูโพสจากข้อ 3 ว่าแสดงผลได้ไหม พบว่าแสดงได้ปกติ แสดงว่าปัญหาไม่ใช่ธีม
    5. ข้อสันนิษฐานต่อมา ปัญหาอยู่ที่ ปลั๊กอินตัวไหนซักตัว เริ่มไล่ปิดดูทีละตัว และแล้วก็เจอมัน ตัวปัญหาคือ TweetMeme ปิดปุ๊บ content โผล่มาปั๊บเลย ส่วนเรื่องของเทคนิค ว่าทำไม? อันนี้ไม่รู้เหมือนกัน แต่ปัญหาได้รับการแก้ไขแล้ว
    6. แก้ปัญหาด้วยการ เลิกใช้ TweetMeme แล้วไปใช้ Tweet button ตัว Official ใช้ง่ายๆ แค่เอา code มาวางใน Single.php ในตำแหน่งที่ต้องการ

    WordPress Cheat Sheet

    WordPress cheat

    เหมาะสำหรับคนที่คิดอยากเขียนธีม และอ่านโค้ดในธีม ของ WordPress สรุปไว้แค่แผ่นเดียว ที่ต้นฉบับของเว็บไซต์ ทำไว้ทั้ง JPG และ PDF แต่แบบ PDF ไฟล์เล็กว่าเลยเอามาให้โหลด อยากได้ท้้งสองเข้าไปเอาที่ลิงค์ที่มา

    ดาวน์โหลด WordPress Cheat Sheet (PDF)

    ที่มา: https://www.onextrapixel.com