Review: เว็บไซต์พุทธวจนสมาคม drupal 7 + responsive design

ผมได้มีโอกาสเข้าไปช่วยเหลืองานของพุทธวจนสมาคม โดยวัตถุประสงค์หลักของพุทธวจนสมาคมก็คือ "ประกาศ เผยแพร่ และให้ความเข้าใจอย่างถูกต้องในคำพุทธวจน" แก่สถานะชนทั่วไปและผู้ต้องการเป็นชาวพุทธอย่างถูกต้องวิธีตามหลักของพระพุทธเจ้า ซึ่งสิ่งหนึ่งที่ผมพอจะช่วยเหลือได้ก็คือการทำเว็บไซต์ประกาศข่าวสารต่างๆให้กับทางพุทธวจนสมาคม ผมได้เลือกใช้ drupal 7 ซึ่งเป็นสิ่งที่ผมถนัดอยู่แล้ว บวกกับช่วงนี้เป็นกระแสของการทำเว็บไซต์ให้แสดงผลได้ทุกๆหน้าจอ เช่น คอมพิวเตอร์ตั้งโต๊ะ, แท็บเล็ต และสมาร์ทโฟนต่างๆ โดยการแสดงผลแบบนี้เราจะเรียกว่า web responsive 

www.ratana5.com (พุทธวจนสมาคม) เป็นเว็บไซต์แรกที่ผมได้เริ่มทำและศึกษาเกี่ยวกับการ responsive design โดยตัวเว็บของพุทธวจนสมาคมนั้นผมได้ใช้ drupal 7 และใช้ theme bootstrap ในการเขียนขึ้นมา เพราะเนื่องด้วยเจ้าตัว bootstrap เป็น framework สำหรับช่วยในการทำ responsive design ให้ง่ายขึ้น ขอบอกว่าง่ายจริงๆไม่ต้องมานั่งเขียน css สำหรับหน้าจอต่างๆตั้งแต่เริ่มต้น ตัว bootstrap มีมาให้หมดครับ 

ratana5.com responsive design

ในที่นี้ผมจะมาอธิบายคราวๆในการทำเว็บพุทธวจนสมาคม (www.ratana5.com) นะครับว่าใช้โมดูลตัวไหนใน drupal 7 จัดทำขึ้นมา

Theme 

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

การสร้าง subtheme ของ bootstrap 

  1. ให้เราก็อปปี้โฟล์เดอร์ bootstrap_subtheme ใน theme bootstrap ที่โหลดมา นำออกมาวางใน sites/all/themes/ และเปลี่ยนชื่อเป็น theme ที่เราจะสร้างเช่น sites/all/themes/ratana5
  2. จากนั้นเข้าไปยังโฟล์เดอร์ ratana5 แก้ไขไฟล์ bootstrap_subtheme.info.starterkit เป็น ratana5.info
  3. เปิดไฟล์ ratana5.info เข้าไปแก้ไข name และ description ตามสะดวก สังเกตุ base theme = bootstrap ส่วนนี้จะเป็นตัวบอกว่า theme ของเรานี้ใช้ theme bootstrap เป็นพื้นฐานนะจ๊ะ
  4. ไปยังเว็บของเราเปิดไปยังหน้าจัดการ theme (admin/appearance) เพื่อทำการเปิดใช้งาน theme ratana5 ที่ผมสร้างขึ้นมา จากนั้นไปยังส่วนตั้งค่าของ theme (admin/appearance/settings/ratana5) เลื่อนมาล่างสุดเปิดการใช้งาน bootstrap cdn ให้ติ้กถูกที่ช่อง Use CDN to load in the bootstrap files และเลือก version bootstrap ล่าสุด
    bootstrap cdn drupal theme setting

เพียงเท่านี้เราก็จะได้ theme ratana5 ซึ่งเป็น subtheme ของ theme bootstrap เรียบร้อยแล้ว หุหุ

Module

  1. fast Permissions Administration : จัดการหน้า permissions (admin/people/permissions) ได้ไวขึ้น 
  2. module filter : จัดการหน้าโมดูล (admin/modules) ได้ไวขึ้น
  3. advanced help : ไว้ดูไฟล์ README.txt ของโมดูลต่างๆ จริงๆไม่ต้องลงก็ได้แต่มันฟ้องให้ลง ก็เลยลงไปงั้นๆ :P
  4. ctools : ไว้ใช้ร่วมกับโมดูลตัวอื่นๆ เช่น breakpoints, display suite, meta tag เป็นต้น
  5. display suite : ไว้สร้างรูปแบบการแสดงผล (layout) ต่างๆทั้งในหน้า node หรือ views ก็ตาม รายละเอียดลองศึกษาจาก display suite for drupal 7
  6. display suite bootstrap layouts * : ให้สร้างรูปแบบการแสดงผลเป็นแบบ bootstrap
  7. fieldgroup : จับฟิลมามัดรวมกันแบ่งเป็นกลุ่มๆ
  8. field formatter settings : ใช้ร่วมกับโมดูล field ต่างๆ
  9. multiupload Filefield Widget : สามารถอัพโหลดไฟล์ได้หลายๆไฟล์พร้อมกัน
  10. multiupload Imagefield Widget : สามารถอัพโหลดรูปได้หลายๆรูปพร้อมกัน
  11. webform : สร้างหน้าฟอร์มตอบรับข้อมูลต่างๆ
  12. flexslider * : responsive jquery slider toolkit
  13. masonry API * : จัดรูปแบบการแสดงผลในรูปแบบ grid layout ตัวอย่างการแสดงผลของ masonny
  14. masonry Views * : นำ masonny มาใช้ใน views
  15. picture * : อธิบายยังไงดี ประมาณว่ามันจะทำให้รูปภาพของเราเปลี่ยนขนาดตามแต่ละหน้าจอการแสดงผล สมมติหน้าจอเรา 1000px ก็โหลดขนาดรูป 1000px มาใช้ แต่ถ้าหน้าจอเรา 480px ก็จะนำรูปขนาด 400px มาใช้งานแทน ประโยนช์ก็คือช่วยในเรื่อง traffic ให้ใช้น้อยลง รายละเอียดเพิ่มเติม
  16. breakpoints * : เป็นการแบ่งขนาดความกว้างแต่ละหน้าจอการแสดงผล ซึ่งจะใช้ร่วมกับโมดูล views และ picture (รู้จักกับ Breakpoints ใน Responsive Web Design)
  17. wysiwyg : เครื่องมือเขียนเนื้อหาได้ง่ายขึ้นคล้ายๆ word 
  18. imce : ทำให้สามารถอัพโหลดรูปได้ ใช้ร่วมกับ CKeditor
  19. imce wysiwyg : นำ imce ไปใช้ใน wysiwyg
  20. token : ไว้ใช้ร่วมกับโมดูลตัวอื่นๆ เช่น meta tag
  21. views : สร้างรูปแบบการแสดงผลใน drupal ได้มากมายมหาศาล 
  22. views responsive grid * : ทำให้ views สามารถแสดงผลในรูปแบบ responsive grid ได้
  23. jquery update * : อัพเดท jquery
  24. libraries : ไว้ใช้งานร่วมกับพวก jqeury ต่างๆ
  25. backup migrate : สำรองฐานข้อมูลเว็บไซต์
  26. captcha : ระบบกันสแปม (spam) ให้กับฟอร์มต่างๆ 
  27. colorbox : jquery ที่ไว้ทำ lightbox 
  28. globalredirect * : ป้องกัน duplicate url
  29. google analytics * : เช็ดและตรวจสอบจำนวนคนเข้าเว็บไซต์ ของ google ทำเอง
  30. metatag * : กำหนดรูปแบบ meta tag ให้กับ node ต่างๆ มี open grap ของ facebook ด้วย
  31. page title * : กำหนด title ของหน้าต่างๆ
  32. pathauto * : กำหนดรูปแบบ url และสร้างให้อัตโนมัติ
  33. service links * : สร้างปุ่มแชร์เนื้อหาเราไปยัง social media ต่างๆ เช่น twitter, facebook
  34. site verify * : ยืนยันการเป็นเจ้าของเว็บไซต์การทาง google, bing เป็นต้น ผมใช้เพราะต้องใช้ google webmaster
  35. xmlsitemap * : สร้าง sitemap ในรูปแบบ .xml 

* สีแดง = โมดูลสำหรับทำ SEO
* น้ำเงิน = โมดูลสำหรับทำ Responsive web

ตัวอย่างการแสดงผลในเว็บพุทธวจนสมาคม

slide ratana 5

ในส่วนของรูปสไลด์หน้าแรกของเว็บพุทธวจนสมาคม ผมใช้โมดูล flexslider ในการจัดการให้เป็นในรูปแบบ responsive design และใช้โมดูล picture บวกกับ breakpoint ในการให้มันเลือกรูปที่จะแสดงออกมาตามขนาดหน้าจอที่ผมกำหนดไว้ เพื่อถ้าเราเปิดเว็บพุทธวจนสมาคมบนมือถือจะได้โหลดไฟล์รูปมาในขนาดเล็กลงทำให้ตัวเว็บโหลดไวขึ้น

ข่าวสารหน้าแรกของพุทธวจนสมาคม

ข่าวสารหน้าแรกผมเลือกใช้โมดูล views ในการดึงข้อมูลออกมาแสดง และใช้ views responsive grid ในการจัดรูปแบบการแสดงผลออกมา

หน้าข่าวสารและกิจกรรมของพุทธวจนสมาคม

หน้ารวมข่าวสารและกิจกรรม และหน้ารวมหนังสือและสื่อธรรม แน่นอนว่าผมต้องใช้ views ในการดึงข้อมูลออกมาแสดง และร่วมกับโมดูล masonny api และ masonny views ในการแสดงผลออกมา เพื่อให้มันแสดงผลได้อย่างสวยงามแม้ว่าเนื้อข่าวที่แสดงออกมาสั้นยาวต่างกันก็ตาม 

หน้าติดต่อเราพุทธวจนสมาคม

หน้าติดต่อเรา ผมใช้ webform ในการทำฟอร์มรับข้อมูลของผู้ที่ต้องการติดต่อสอบถามข้อมูลเพิ่มเติมมายังพุทธวจนสมาคม

เมนูหลักในหน้าจอขนาดเล็ก

ส่วนของเมนูเมื่อหน้าจอการแสดงผลเล็กลง เมนูจะทำการซ่อนไว้และมีปุ่มให้กดเพื่อแสดงออกมา ผมได้มาจาก theme bootstrap ของมันอยู่แล้ว ตอนแรกนึกว่าจะต้องใช้โมดูล responsive menu มาช่วยทำ

คราวๆก็ประมาณนี้สำหรับตัวเว็บพุทธวจนสมาคม ซึ่งต้องถือว่าเป็นเว็บแรกที่ผมได้ทำเป็น reponsive design และทำบน drupal 7 ก็ทำให้ผมเข้าใจในหลักการทำเว็บไซต์ให้เป็น responsive มากขึ้น และถ้ามีเวลาก็คงจะ rebulid เว็บบล็อกตัวเองให้เป็นในรูปแบบ responsive กับเขาบ้าง ฮาๆ 

ลองเข้าไปติชมเว็บ responsive ตัวแรกของผมได้ หรือมีข้อสงสัยในการทำก็ปรึกษาได้นะครับ :P 

ขอบคุณ พุทธวจนสมาคม

Add new comment