Blog

[CSS] วิธีเช็คหน้าเว็บของเราตอน Print

บางครั้งในการทำเว็บไซต์ เราต้องเขียน CSS เพื่อใช้สำหรับในการ Print ซึ่งเราสามารถสั่งให้ Browser ใช้งาน CSS สำหรับการ Print โดยเฉพาะได้ตามด้านล่าง

หรือใช้ media ใน File CSS ของเรา

ทีนี้เราจะสามารถเช็คหน้าเว็บของเราเวลา Print ได้จาก Browser ที่เราใช้งาน

Chrome

เปิด DevTools หรือ Inspect (ใน Mac ให้กด Command + Option + i)

เลือกตามลำดับ หัวข้อ More tools => Rendering แล้วด้านล่างจะปรากฎกล่องดังรูป

ในส่วนของ Emulate CSS media ให้เปลี่ยนเป็น print ก็เสร็จแล้วครับ

Safari

เปิด DevTools หรือ Inspect (ใน Mac ให้กด Command + Option + i)

เลือกที่หัวข้อ Elements แล้วเลือกที่ Icon เหมือนรูป Printer เป็นอันเสร็จสิ้น

Firefox

เปิด DevTools หรือ Inspect (ใน Mac ให้กด Command + Option + i)

เลือกที่หัวข้อ Inspector และหา Icon ที่เหมือนเป็นรูป Icon เอกสารแล้วคลิก

August 27, 2019
WordPress เพิ่ม singular.php เป็น theme template ตัวใหม่

สำหรับ WordPress เวอร์ชั่น 4.3 ที่กำลังจะมา ทางทีมพัฒนาได้เพิ่ม singular.php เข้ามาเป็น theme template ตัวใหม่ โดยหลายคนรู้จัก singular อยู่แล้วจาก is_singular() ซึ่งถ้าหน้าที่แสดงอยู่เป็นหน้าเดี่ยวของ post type ใดๆ จะส่งค่า true กลับมาให้

ใน wp-includes/template-loader.php เพิ่ม code ดังนี้

และใน เพิ่ม code ดังนี้

โดยใช้สำหรับหน้าเดี่ยวโดยไม่สนใจว่าเป็น post type แบบไหน ลำดับจะอยู่หลังจาก single.php หรือ page.php หรือ หน้าเดี่ยวของ post type อื่นๆ

singular.php ช่วยให้เราไม่ต้องคิดมากเวลาจะหาว่า หน้าเดี่ยวนี้เรียกจาก file ไหน single.php หรือเปล่า หรือจะเป็น page.php ใช้แค่ singular.php ตัวเดียวก็แทนที่ได้หมดแล้ว

July 7, 2015
ความรู้สึกหลังใช้งานเว็บ KBank อันใหม่
หลังจากวันนี้เห็นหลายคนบ่นถึงดีไซน์ใหม่ของเว็บ KBank ไอ้เราก็อดไม่ได้ที่จะลองเข้าไปดู ว่ามันแย่ขนาดที่เค้าบ่นๆกันหรือเปล่า หลังจากนี้เป็นความรู้สึกในการใช้งานของผมเป็นการส่วนตัวอย่างเดียว เท่าที่มีเวลานั่งลองเล่นนะครับ (สำหรับคนทำงานที่ทำเว็บนี้ออกมา ผมเข้าใจความรู้สึกนะครับ ว่าทำไมถึงออกมาเป็นแบบนี้ได้)

เข้ามาปุ๊บ แจ้ง error ใส่เลยครับ ลองอ่านดูว่าผมทำอะไรผิด ปรากฎมันบอกว่า

ให้ผม update browser ให้เป็นเวอร์ชั่นล่าสุด T-T แต่ chrome ที่ผมใช้อยู่ก็ update ตลอด นี่ก็เวอร์ชั่นล่าสุดจนไม่รู้จะสุดยังไงแล้วนะ แต่ช่างมันกด ok ไปก่อนละกัน เว็บโหลดมาเสร็จเป็นแบบนี้

ดูรวมๆ แล้วให้คาดเดาคือ อยากจะให้ทุกอย่างสามารถแสดงได้หมดในหน้าจอเดียว เลยต้องทำให้เมนูด้านซ้ายล่างมี scrollbar และเมนูด้านล่างต้องคลิกที่ Hamburger icon ถึงจะเด้งขึ้นมา

งั้นเริ่มที่เลือกบริการออนไลน์ก่อนละกัน

หลังจากเลือกหัวข้อในตัวเลือกแล้ว ไม่มีอะไรเปลี่ยนแปลง ไม่ได้เด้งไปหน้าไหนเลย อ้าว ทำไมละ หลังจากเลือกไปหลายตัว ก็ไม่มีอะไรเปลี่ยนแปลง จนได้สังเกตุว่า มันโดน pop-up blocked ของ chrome จัดการไป

อันนี้ผมไม่รู้ว่าเพราะสาเหตุอะไร เว็บ KBank ถึงต้องให้มันเป็น pop-up ในแง่สำหรับคนใช้งานอย่างผม มันแลดูลำบากในการใช้งาน

ทีนี้เราย้อนกลับมาดูที่ตรงส่วนของ สมัครใช้บริการออนไลน์

ถ้าคลิกแล้วจะไปหน้าอื่นที่ได้ลิงก์ไว้ แต่จะมีปุ่ม Go ไว้ทำไมวะเนี่ย ???

ในส่วนเมนูด้านล่าง การมี scrollbar ทำให้คนใช้งานยุ่งยากขึ้นเยอะเลย

กับการที่ต้องมา scroll ดูว่ามีเมนูอะไรอยู่บ้าง รวมถึงเมนูที่มีในส่วนนี้ ก็มีที่ซ้ำกับเมนูด้านล่างที่ต้องคลิกที่ hamburger icon เพื่อดู

เท่าที่ผมดู จะมีหัวข้อ
- ลูกค้าบุคคล ซ้ำกับเมนูด้านซ้ายที่อยู่ด้านบน
- เอสเอ็มอี ก็เช่นเดียวกัน
- ธุรกิจขนาดใหญ่ ก็ด้วย
แต่เรามีโฟกัสที่ตัวเมนูด้านซ้ายล่างก่อนละกันครับ
- นักลงทุนสัมพันธ์ ซ้ำกับเมนูด้านซ้ายที่มี scrollbar
- การพัฒนาอย่างยั่งยืน ก็ซ้ำด้วย
- อัตราค่าธรรมเนียม ซ้ำอีก
- ช่องทางการให้บริการ ก็ซ้ำร่วมด้วย
- ภาพยนตร์โฆษณา ก็ซ้ำ
- เกี่ยวกับเรา T-T นี่มันจะซ้ำเยอะไปไหน
- สมัครงานและทุน ซ้ำเข้าไป
เอาว่า หลังจากที่ผมเช็คดูแล้ว ลองแอบไปปรับแต่ง css นิดหน่อยก็พบว่า

ถ้าตัดเมนูที่ซ้ำๆกันออกไป มันก็ยัดใส่พอดีได้นะ ที่มันต้องมี scrollbar ก็เพราะยัดๆเมนูที่ซ้ำกันเข้าไป

ขยับมาดูทางด้านขวาบนบ้าง

อย่างแรกที่ผมงงคือ มี dropdown ไทย แล้วด้านล่างมีให้เลือก ไทย | ญี่ปุ่น | อังกฤษ พอได้ลองใช้งานถึงจะเข้าใจ โง่ไปเองนี่หว่า อันแรกเป็นให้เลือกเว็บในแต่ละประเทศ ซึ่งตอนนี้มี ไทย จีน และลาว

ส่วนด้านล่างก็เป็นเปลี่ยนภาษาเหมือนเว็บทั่วๆไป

ต่อมาผมสนใจที่ Text Size อยากรู้ว่ากดแล้ว มันจะเปลี่ยนแปลงไปยังไง เริ่มจากตัวเล็กสุดเลยละกัน

ขนาดกลางที่เป็นตัวมาตรฐานของเว็บ

และขนาดใหญ่

!!! มันต่างกันมากกกกกกกกกก T-T

ขยับลงมาที่ search ละกัน ลองค้นหาคำว่า เงินฝาก ดูละกัน

ผลปรากฎว่า ไม่เจอ ลองเปลี่ยนเป็นคำว่า กสิกร ละกัน

ไม่เจออีกเหมือนกัน ถ้ามันยังใช้งานไม่ได้ ก็ไม่ต้องโชว์ก็ได้นะครับ เก็บไว้ใช้งานได้แล้ว ค่อยโชว์ให้ใช้งานก็ได้นะ

พอละครับ แค่นี้ก็เยอะไปแล้ว ผมว่าบางทีเว็บไซต์มันก็สะท้อนความใส่ใจต่อลูกค้าของธนาคารเหมือนกันนะครับ แต่ผมคิดว่า KBank คงไม่อยู่เฉยให้ลูกค้าได้ใช้เว็บไซต์แบบนี้ต่อไปอีกนานเท่าไหร่ไม่รู้หรอกครับ ^^
February 19, 2015
เพิ่มสินค้าอัตโนมัติ กรณีสินค้านั้นมีหลายตัวเลือก : WooCommerce

ตามปรกติปุ่ม Add to cart ของ WooCommerce เองก็เพิ่มสินค้าให้อัตโนมัติอยู่แล้ว เพียงแต่ถ้าเมื่อไหร่สินค้านั้น มีหลายตัวเลือก หรือถ้าดูในหลังบ้านของ WooCommerce ก็คือ มีการตั้งค่า Variation ให้กับสินค้า ตัวอย่างเช่น สินค้า A มี 2 สี 2 ขนาด คือ สีแดง ขนาด 5ml, สีแดง ขนาด 30ml, สีเขียว ขนาด 5ml และสีเขียว ขนาด 30ml แบบนี้จะทำให้เมื่อเรากดปุ่ม Add to cart แล้ว ตัว WooCommerce จะพาเราไปยังหน้าของสินค้านั้น เพื่อให้เราเลือกก่อนว่า จะเอาสีไหน ขนาดไหน

คราวนี้ได้โจทย์มาจากลูกค้าว่า อยากจะให้เมื่อคนซื้อมากดปุ่ม Add to cart แล้ว ระบบจะเพิ่มสินค้าเข้าตะกร้าสินค้าให้เองอัตโนมัติจำนวน 1 ชิ้น

ซึ่งในหลังบ้านของ WooCommerce ในส่วนของ Product แต่ละชิ้นนั้น จะมีส่วนให้ตั้งค่า Default Variation ของสินค้าชิ้นนั้นๆ อยู่แล้ว เลยใช้ส่วนนี้มาต่อยอดปรับแต่งปุ่ม Add to cart ให้ทำงานแบบที่ลูกค้าต้องการได้

ก่อนอื่นต้องทำความเข้าใจเรื่อง Template ของ WooCommerce ก่อน https://docs.woothemes.com/document/template-structure/ ไม่ขออธิบายนะครับ ไปอ่านดู

โดยปุ่ม Add to cart จะมีอยู่ 2 ส่วนคือ ส่วนของหน้ารวมสินค้า กับส่วนของหน้ารายละเอียดสินค้า ซึ่งปุ่ม Add to cart ที่เราต้องการจะปรับคือ หน้ารวมของสินค้า โดย File ที่เราต้องทำการแก้ไข จะอยู่ใน path yourtheme/woocommerce/loop/add-to-cart.php (อันนี้ยึดหลักตาม WooCommerce 2.2.2) ซึ่งใน File จะเขียนไว้ดังนี้

ผมเลยเพิ่มโค้ดเข้าไปเป็นแบบนี้

โดยเช็คว่าสินค้านั้น มีตัวเลือกหรือเปล่า หลังจากนั้นมาเช็คว่ามีค่า Default ตั้งไว้มั้ย ส่วน form ที่ใช้ในการส่งค่าสำหรับเพิ่มสินค้าเข้าตะกร้านั้น นำมาจากปุ่ม Add to cart ของหน้ารายละเอียดสินค้า เพียงแต่เรากำหนดค่าของตัวเลือกลงไปเลย รวมถึงจำนวน 1 ชิ้นด้วย

ถ้าเห็นว่าโค้ดส่วนไหนควรปรับเปลี่ยน คอมเม้นต์บอกกันได้เลยนะครับ

September 15, 2014
Query ในหน้านั้น เราจะเพิ่ม Parameter เข้าไปยังไง : WordPress

อันนี้ยกตัวอย่างจากที่เจอมาเลย คือในหน้า Archive อยากให้มันเรียงตามชื่อหัวข้อ ไม่ได้อยากให้มันเรียงตามวันที่ แค่เพิ่ม parameter orderby=title เข้าไปทำยังไง

อย่างแรกก็ประกาศ global $query_string; เพื่อที่เราจะได้นำ $query_string มาใช้งาน โดยมันคือ ค่า parameter ที่ใช้ในการ query_posts() ของแต่ละหน้านั่นละ แต่เราเรียกมาเพื่อที่จะเพิ่มค่า parameter ที่เราต้องการเข้าไป ส่วนเราสามารถปรับแต่งการเรียกต่างๆ ได้จากหัวข้อนี้ query_posts

July 25, 2014
Widget Logic Plugin สำหรับกำหนดเงื่อนไขการแสดงผลของ Widget : WordPress

วันก่อนมีน้องมาถามว่า มี Plugin จะทำยังไงให้ Widget แสดงผลเฉพาะหน้าที่เราต้องการได้มั้ย ยังไม่ทันได้ตอบ มันก็หาเจอไปแล้ว 555

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

Widget Logic

หลังจากติดตั้ง Plugin ตัวนี้แล้ว ไม่ต้องไปมองหาว่ามันจะไปอยู่ที่เมนูไหน เพราะมันจะไปอยู่ที่หน้าจัดการ Widget ที่เมนู Appearance => Widgets ลองดูตัวอย่างตามรูปละกัน

ส่วนของ Widget Logic ที่เพิ่มขึ้นมา

หลายคนอาจจะงงว่า แล้วเราจะใส่อะไรลงไปช่อง Widget Logic ที่เพิ่มขึ้นมา ให้ไปดูที่ Conditional Tags ของ WordPress ได้เลยครับ

คราวนี้มาลองใส่ไปว่า is_home() ซึ่งถ้าใน Reading Settings ของเราไม่ได้ตั้งค่าอะไร มันก็คือหน้าแรกนั่นละ แต่ถ้าเราไปเลือกหน้าไหนในส่วนของ Front Page หน้าแรกของเราต้องใช้เป็น is_front_page() แทนนะครับ

อันนี้ตั้งชื่อ Title ให้เวลาสังเกตผล จะได้ดูง่ายๆ

ซึ่งในกรณีนี้ ถ้าเราไปที่หน้าแรก จะต้องมี Widget ที่มีหัวข้อ Widget Logic ปรากฎอยู่

หน้าแรกของเรามี Widget หัวข้อ Widget Logic อยู่ด้านขวา

คราวนี้ลองเข้าไปที่หน้า Archive ของเว็บบ้าง จะเห็นว่า Widget ที่มีหัวข้อ Widget Logic หายไป

ในหน้า Archive จะเห็นว่า Widget หัวข้อ Widget Logic หายไป

ซึ่งเราก็สามารถปรับเงื่อนไขต่างๆ ได้แล้วแต่เราต้องการ จะใช้ && หรือ || หรือ ! ก็แล้วแต่เงื่อนไขที่จะให้แสดงผลของแต่ละคนเลย

July 13, 2014