Blog

[CSS] Equal Width Menu (ทำเมนูให้กว้างเท่ากัน)

Equal Width Menu หรือการทำให้เมนูกว้างเท่ากันนั้น แต่ละคนคงมีวิธีทำที่แตกต่างกันไป ผมก็ไปเจอมาวิธีนึงซึ่งง่ายๆ เลย ใช้แค่ CSS ก็เรียบร้อยแล้ว

ใช้ display: table

วิธีนี้ก็เป็น 1 ในผลพลอยได้ที่เราไม่ต้องไปห่วงอีเจ้า IE6 ดูได้จาก Can I use : CSS Table display เจ้าตัว display: table เนี่ย มันสนับสนุนแบบเต็มรูปแบบใน IE8 ขึ้นไป โดยเราจะนำมาประยุกต์ใช้งานกับการทำเมนู

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”AJDfh” default_tab=”result”]See the Pen Equal Width Menu by Sittipong Wiboonsirichai (@rabbitinblack) on CodePen.[/codepen_embed]

การทำเมนูด้วยวิธีนี้ เป็นการประยุกต์คุณสมบัติการแสดงผลของตารางมาใช้งาน เพียงแค่เราไม่ได้ใช้ tag <table> เท่านั้นเอง

โดย display: table เปรียบเสมือน <table>
และ display: table-cell เปรียบเสมือน <td>

อีกตัวที่สำคัญคือ table-layout: fixed โดยปรกติแล้ว tag <table> จะมีค่าพื้นฐานเป็น table-layout: auto โดยทั้งสองอย่างแตกต่างกันที่

table-layout: auto จะปรับความกว้างของแต่ละช่องตามเนื้อหาในช่องนั้นๆ
table-layout: fixed ความกว้างแต่ละช่องจะถูกแบ่งให้อย่างเท่าๆ กัน ถ้าเนื้อหาในช่องนั้นมีความยาวมากกว่าความกว้างของช่อง ช่องนั้นจะถูกเพิ่มความสูงแทน

แต่วิธีนี้เองก็มีข้อเสียตรงที่ ถ้าเมนูของเรามีช่องไหนที่สูงมากกว่าช่องอื่น ตอน hover จะเจอช่องว่างในช่องที่สูงน้อยกว่า

July 7, 2014
[WordPress] Advanced Access Manager

Advanced Access Manager นั้นเป็น Plugin สำหรับจัดการ User Roles ใน WordPress ซึ่งมันสามารถปรับเปลี่ยนสิทธิของ User Roles เดิมที่มีอยู่ของ WordPress จากที่ได้พูดถึงใน [WordPress] User Roles การกำหนดสิทธิใน WordPress และยังสามารถสร้าง User Roles ขึ้นมาใหม่ เพื่อให้ไม่ทับซ้อนกับของเดิม และง่ายกับการจัดการ User ของเว็บเรา

วิธีการใช้งาน Advanced Access Manager

เมื่อเราติดตั้ง Plugin แล้วจะมีเมนูใหม่คือ AAM ซึ่งใช้สำหรับปรับค่าต่างๆ การ Plugin ตัวนี้

โดยส่วนการควบคุมของ Plugin ตัวนี้จะมีแบ่งออกมาเป็น 3 ส่วนหลักๆ ดังรูป

เลือกเมนูที่จะแสดงผล

เราปรับแต่งเมนูที่จะแสดงผลในแต่ละ User Roles ได้ ตัวอย่างเช่น ใน User Roles : Editor นั้น เราอยากจะซ่อนเมนู Comments และซ่อนเมนูย่อย Categories, Tags ในเมนู Posts สามารถคลิกที่หัวข้อที่จะจัดการเมนู และติ๊กเลือกได้เลย

หลังจากนั้นก็เลือก Save ในส่วนที่ 3 หรือถ้าหลังจาก Save ไปแล้ว เราสามารถเปลี่ยนให้ค่ากลับไปยังค่าพื้นฐานเดิมของ WordPress ก็แค่เลือกที่ Roleback

ปรับแต่งความสามารถของแต่ละ User Roles

โดยการปรับแต่งความสามารถ หรือสิทธิของแต่ละ User Roles นั้น ให้ดูในส่วนที่ 1 ในหัวข้อ Capability โดยแต่ละตัวใช้กำหนดสิทธิในการทำอะไรได้บ้างนั้น ดูได้จาก Roles and Capabilities

เพิ่ม User Roles

ถ้ามองไปที่ส่วนที่ 2 จะเห็นว่าเราสามารถปรับแต่งความสามารถของแต่ละ User Roles ได้จากการเลือกที่ไอคอนที่เหมือนเฟือง และเรายังสามารถเพิ่ม User Roles ขึ้นมาเป็นของตัวเองได้ที่ไอคอนเครื่องหมายบวก

ซึ่งเราสามารถตั้งชื่อ และเลือกได้ว่าจะให้มีสิทธิเหมือนกับของเก่าตัวไหน

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

July 6, 2014
[WordPress] remove_image_size ฟังก์ชั่นใหม่ของ WordPress 3.9

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

วิธีการใช้งาน remove_image_size

มาดูวิธีการใช้งานของ remove_image_size() กัน ว่ามีวิธีการใช้งานยังไง

โดย $name ก็คือ ชื่อของรูปที่เราต้องการลบออกไป // แต่ชื่อรูปที่เราไม่สามารถลบขนาดออกไปได้คือ thumb, thumbnail, medium, large, post-thumbnail หรือชื่อรูปที่เป็นมาตรฐานของ WordPress เอง

แต่จากที่เคยใช้งานจะเป็นในกรณีที่จะปรับแต่ง Plugin ของคนอื่นมากกว่า อย่างเช่น เค้าทำ widget ที่จะดึง post ที่เราต้องการมาโชว์พร้อมรูป featured image แล้ว plugin ตัวนั้นดันใช้ขนาดที่ไม่ตรงกับที่เราต้องการใช้งาน เราก็มา remove_image_size() ขนาดรูปใน plugin ตัวนี้ แล้วก็ add_image_size() เข้าไปใหม่ในชื่อเดิม โดยเราเปิดไปที่ functions.php และใส่ code ในลักษณะนี้ลงไป

เพื่อที่เวลา Plugin มีการอัพเดตอะไรก็ตาม ขนาดรูปก็ยังเป็นขนาดที่เราตั้งค่าไว้อยู่ดี

July 5, 2014
[WordPress] User Roles การกำหนดสิทธิใน WordPress
User Roles ใน WordPress นั้น คือการกำหนดลักษณะการใช้งานของ User นั้นๆ หรือกำหนดสิทธิในการจัดการข้อมูลต่างๆ ของเว็บที่เราทำด้วย WordPress โดยตัว WordPress เองจะมี User Roles ที่เป็นมาตรฐานมาให้แล้ว 5 ตัว โดยเรียงตามสิทธิมากที่สุด ไปหาสิทธิน้อยที่สุด คือ
- Administrator
- Editor
- Author
- Contributor
- Subscriber
ซึ่งโดยปรกติจากที่ได้ทำเว็บให้กับลูกค้าหลายๆเจ้า พบว่าเราจะใช้งานอยู่ 2 ตัวหลักๆ คือ Administrator และ Editor ส่วน Author, Contributor และ Subscriber ไม่ค่อยได้ใช้งานมันเท่าไหร่ โดยเราสามารถเข้าไปหาอ่านได้ว่า แต่ละตัวใช้กำหนดสิทธิการใช้งานของ User ไว้ยังไงได้ที่ https://codex.wordpress.org/Roles_and_Capabilities

User Roles : Administrator

สำหรับ Administrator แล้วถ้าเราเข้าไปดูตามเว็บด้านบนที่แปะไว้ จะพบว่ามี Super-Admin อีกอย่าง โดย Super-Admin มีขึ้นก็ต่อเมื่อเราใช้งานเป็น WordPress Multisite แต่ตอนนี้เราสนใจแค่ Administrator อย่างเดียวก็พอ ซึ่ง Administrator นั้นทำอะไรได้บ้าง อธิบายง่ายๆ ก็คือ ทำได้หมดทุกอย่าง ไม่ว่าจะเป็นเพิ่ม ลบ หรือแก้ไข Posts Pages, เปลี่ยน Theme, แก้ไขเมนู, จัดการ Plugins ฯลฯ ก็นั่นละ มันทำได้หมดทุกอย่างในเว็บเลย อ๋อ แล้วก็สามารถเพิ่ม ลบ แก้ไข User คนอื่นๆ ก็ได้เช่นกัน ดูจากเมนูหลังบ้านของ User ที่เป็น Administrator

สรุปง่ายๆ คือ สิทธิทุกอย่างในเว็บเป็นของ Administrator

User Roles : Editor

สำหรับ Editor ที่มีสิทธิรองลงมาจาก Administrator นั้น ขอพูดถึงสิทธิที่หายไป จะง่ายกว่ามาอธิบายสิทธิที่มันสามารถทำได้ โดยสิทธิที่มันหายไปก็ได้แก่
- จัดการ Theme (เมนู Appearance จะหายไป)
- จัดการ Plugins (เมนู Plugins จะหายไป)
- จัดการ Users คนอื่น (เมนู Users จะถูกเปลี่ยนเป็น Profile เพื่อให้จัดการข้อมูลของตัวเองได้)
- จัดการ Settings หลักๆ ของเว็บ (เมนู Settings จะหายไป)
- Import, Export ข้อมูล (เมนูย่อยในเมนู Tools จะหายไป)
แต่หน้าที่ในการจัดการข้อมูลในเว็บยังอยู่ครบ เช่น การเพิ่ม ลบ แก้ไข Posts Pages, จัดการ Media, จัดการ Comments หรือเพิ่ม ลบ แก้ไข Category

สรุปง่ายๆ คือ เป็น User Roles สำหรับจัดการข้อมูลต่างๆ ในเว็บ แต่ไม่ให้ยุ่งเกี่ยวกับการ Settings เว็บ

User Roles : Author

มาถึงตัวที่ 3 กับ Author โดย Author นั้นจะสิทธิที่หายไปจาก Editor คือ
- จัดการ Pages (เมนู Pages จะหายไป)
- จัดการ Posts ของ User อื่น (เข้าเมนู Posts ไปจะสามารถเห็น Posts ของ User อื่น แต่ไม่สามารถแก้ไขได้ แต่สามารถเพิ่ม ลบ Posts ของตัวเองได้)
- จัดการ Category, Tags (เมนูย่อย Categories และ Tags ในเมนู Posts จะหายไป)
สรุปคือ Author จัดการได้แต่เรื่องของตัวเอง ไปยุ่งเรื่องของคนอื่นไม่ได้

User Roles : Contributor

สำหรับ Contributor ก็โดนตัดสิทธิให้น้อยไปกว่า Author อีก ซึ่งเจ้า Contributor เนี่ยมันเขียน Posts ใหม่ได้ แต่ไม่สามารถ Publish เองได้ ต้องรอให้ Editor เป็นคนมา Publish ให้ ดูง่ายๆ จากปุ่ม

ปุ่ม Publish สำหรับ User ที่เป็น Administrator, Editor หรือ Author

ปุ่ม Submit for Review สำหรับ Contributor

และถ้า Posts ที่ Contributor ถูก Editor กด Publish ไปแล้ว Contributor ก็ไม่สามารถมาจัดการอะไรได้อีก

สรุปง่ายๆ คือ Contributor สร้างได้ ถ้ายังไม่มีใครมายุ่งก็ยังจัดการได้อยู่ แต่ถ้า Editor มาแกก็ดูได้อย่างเดียวแล้ว

User Roles : Subscriber

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

สรุปง่ายๆ คือ ยังต้องให้สรุปอีกเหรอ ก็บอกไปข้างบนแล้ว
June 29, 2014
โครงการสอนทำเว็บของ Mozilla : Webmaker

เดี๋ยวนี้ใครอยากจะทำเว็บเป็น มันไม่ยากเกินที่จะหาข้อมูล หรือเว็บที่สอนทำแล้วละ ซึ่งวันนี้ทาง Mozilla เองก็ทำโครงการออกมาอีกตัวหนึ่ง เป็นโครงการที่จะสร้างชุมชนของคนทำเว็บ ไม่ว่าจะเป็นคนที่หัดทำ หรือคนที่อยากสอนคนอื่นทำเว็บ

ในตัวเว็บจะมีเครื่องมือให้เราใช้งานตอนนี้อยู่ 3 อย่าง X-Ray Goggles, Thimble และ Popcorn Maker

โดยเจ้า X-Ray Goggles มันก็คล้ายๆ กับพวก Firebug อะไรแนวๆ นั้นละ แต่เป็นแบบให้เราสามารถดูโครงสร้างของส่วนนั้นๆ แบบเบื้องต้นได้

สำหรับ Thimble ก็คือตัว Editor บนเว็บ สำหรับให้เราเขียนโค้ดสำหรับเรียนทำเว็บกันได้

และเครื่องมือสุดท้ายในตอนนี้ของเว็บก็คือ Popcorn Maker ซึ่งทำหน้าที่เป็นโปรแกรมสำหรับทำพวก Video หรือพวกภาพเคลื่อนไหวต่างๆ

สำหรับใครที่สนใจอยากหัดทำเว็บ ก็ลองไปที่เว็บ Webmaker กันได้

March 29, 2014
[WordPress] WordPress 3.8 Parker มาแล้ว

เป็นธรรมเนียมของ WordPress อยู่แล้ว ที่จะตั้งชื่อในแต่ละรุ่นด้วยชื่อของนักดนตรี ซึ่งในเวอร์ชั่นนี้ ก็ใช้ชื่อของ Charlie Parker โดยการอัพเดตรอบนี้ เป็นการปรับให้หน้าตาของ Dashboard เหมือนกันกับที่ใช้ใน WordPress.com อยู่

ดีไซน์ใหม่ในหน้า Dashboard

หน้า Dashboard ถูกปรับเปลี่ยนใหม่ ให้มีรูปแบบเหมือนกับที่ใช้ใน WordPress.com

รวมถึงส่วนอื่น ๆ ในหลังบ้านของเรา ก็ถูกปรับเปลี่ยนให้ดูสะอาด และสบายตามากขึ้น

ทำให้ใช้งานได้ดีในทุกอุปกรณ์

ในเวอร์ชั่นก่อน ๆ นั้น การใช้งานบนหน้าจอที่มีขนาดเล็กนั้นใช้งานได้ลำบากพอสมควร แต่ในเวอร์ชั่นนี้ได้ปรับให้ดีไซน์ให้เป็น Responsive แบบเต็มที่ รวมถึงปรับไอคอนต่าง ๆ ให้ใช้ฟอนต์แทนรูป

เลือกสีที่ใช้ในหน้า Dashboard

เราสามารถเลือกใช้สีที่จะใช้ในหน้า Dashboard ได้ โดยตัวระบบได้เตรียมชุดสีไว้ให้เราแล้ว 8 แบบ

โดยเราสามารถเปลี่ยนสีได้ที่ส่วนของ Users >> Your Profile

ปรับปรุงส่วนจัดการธีม

โดยทาง WordPress เปลี่ยนรูปแบบการแสดงผลให้เหลือแค่รูปของธีม กับชื่อของธีม และคลิ๊กที่ Theme Details เพื่อเข้าไปดูรายละเอียด

ปรับปรุงวิธีการใช้งาน Widgets

จากแต่ก่อนที่เราใช้วิธีลากวาง ก็เปลี่ยนมาใช้วิธีคลิ๊ก เลือกส่วนที่จะให้แสดง แล้วกด Add Widget

Twenty Fourteen

และ WordPress เวอร์ชั่นใหม่ ก็มาพร้อมกับธีมมาตรฐานใหม่ คือ Twenty Fourteen ซึ่งรูปแบบการใช้งานจะออกแนวคล้าย ๆ กับการอ่าน magazine ซักเล่มนึง

สำหรับใครที่ใช้งาน WordPress อยู่ก็อย่าลืมอัพเดตเวอร์ชั่นใหม่กันด้วยนะครับ

December 13, 2013