ปรับแต่ง Sidebar ลอย ให้ดูดี ในโทรศัพท์มือถือ ทำอย่างไร ?

ปรับแต่ง Sidebar ลอย ให้ดูดี ในโทรศัพท์มือถือ
https://www.youtube.com/embed/5U6RyzN6vyo?feature=oembed&autoplay=1

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

ทำ Sidebar ลอยค้างให้ได้ก่อนครับ

สำหรับ ใครที่ยังทำ Sidebar ให้ลอยค้างไม่ได้นะครับ ลองดูที่นี่เพื่อเริ่มทำดูก่อนครับ

https://palamike.com/wp-fixed-sidebar/

ส่วน Link ของ Plugin อยู่ที่นี่ครับ

https://wordpress.org/plugins/q2w3-fixed-widget/

ถ้าทำได้แล้ว รู้จัก Fixed Sidebar แล้ว เราก็มาเริ่ม ปรับแต่งกันได้เลยครับ

รู้จักกับ Chrome Developer Tools

วิธีการเปิดใช้งาน Chrome Developer Tools ให้เราหาพื้นที่ว่างๆ แล้วคลิกขวา 1 ครั้งครับ จะเจอเมนูว่า Inspect หรือ ภาษาไทยใช้คำว่า ตรวจสอบครับ คลิกขึ้นมาบางคน อาจจะเจอ Developer Tools อยู่ทางขวาของจอ หรือ อยู่ที่ด้านล่างของจอครับ ให้เราคลิกไปที่ จุด 3 จุด หรือ ลูกชิ้นใน Developers Tools ครับ แล้วเลือก Dock to Bottom เป็นการเสร็จสิ้นการเตรียมการครับ

ต่อมาเราจะเห็น ICON มือถือ ที่ Developer Tools ครับ ให้เราคลิกที่ ICON 1 ครั้ง ก็จะเข้าสู่ โหมด ทดสอบมือถือครับ จากนั้น เราก็เลือกได้เลยครับว่า เราจะทดสอบกับรุ่นไหนดีครับ เมื่อเลือกแล้ว ให้ refresh หน้าจอ 1 ครั้งเพื่อให้มันโหลดหน้าเว็บใหม่สำหรับ อุปกรณ์นั้นครับ

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

เมื่อใช้ Chrome Developer Tools เสร็จ ก็กด กากบาท ปิดไปได้เลยครับ ตอนนี้เราก็พอใช้เจ้า Chrome Developer Tools กันเป็นแล้วนะครับ ต่อมาเราจะเริ่มทำการ แก้ไขการตั้งค่า ของ Fixed Widget แล้วครับ

แก้ไขการตั้งค่าของ Fixed Widget

ให้เราเข้าไปที่ เมนู Fixed Widget ใน Appearance ครับ จากนั้นเราจะเห็นการตั้งค่าง่ายๆครับเช่น

Margin Top และ Margin Bottom

คือระยะห่างระหว่าง Fixed Widget กับ ขอบของจอครับ เราสามารถลอง Set ดูได้ครับ แต่แนะนำให้ Set ทีละค่าครับ เช่น Margin Top ลอง Set ดูสัก 150 ครับ

Stop ID

เป็น ID ของ HTML ในหน้าจอ ที่ไม่ต้องการให้ Widget มัน ค้างอีกต่อไปครับ วิธีการหา Stop ID เดี๋ยวค่อยว่ากันครับ

Width และ Height

ค่าตรงนี้จะเป็นตัวที่เราใช้แก้ไขปัญหาครับว่า เวลาในมือถือ จะไม่ให้มัน Fix ครับ วิธีการคือทำงานของมันก็คือ ถ้าเราใส่ค่าที่ Width เท่าไร หน้าจอ ที่ต่ำกว่าค่านี้ จะไม่มีการทำ Fixed Widget ครับ

ซึ่งขนาดหน้าจอของ IPAD คือ 768px ครับ ถ้าต่ำกว่านี้ ผมจะให้เป็นมือถือ คือไม่ให้มัน Fixed Widget ครับ เราจึงใส่ค่านี้ลงไปที่ Width ครับ

ทดสอบ หลังปรับแต่ง

ปรับแต่งเสร็จแล้ว ก็ทดสอบได้เลยครับ เราไปที่ Chrome ใน Developer Mode แล้วดูว่าในมือถือ แสดงอย่างไร แล้วก็ทดสอบที่ Desktop ด้วยนะครับว่า ใน Desktop แสดงอย่างไร เห็น Margin Top ที่เราตั้งไว้หรือไม่ครับ

การหา Stop ID

วิธีการคือ ให้เราไปคลิกขวาบริเวณที่เราจะให้ Fixed Widget หยุดครับ แล้วคลิกที่ Inspect ครับ จากนั้นให้เราดูตรง Element ที่จะขึ้น Code ประหลาดครับ พยายามหาว่า ID อยู่ที่ไหนครับ ปกติจะอยู่ที่ Footer Element ครับ หาได้แล้ว ก็เอา ค่าที่อยู่ใน ID ไปใส่ที่ Stop ID ที่การตั้งค่า Fixed Widget ได้เลยครับ

สรุป

เราก็ได้เรียนรู้วิธีการใช้ Chrome Developer Tools กับวิธีการตั้งค่า Fixed Widget กันแล้วครับ ลองไปทำดูนะครับ เว็บไซต์เราจะได้ดูน่าสนใจมากยิ่งขึ้นครับ

รับความรู้ก่อนใคร

รับความรู้ก่อนใครได้เลย เพียงแค่กรอกแบบฟอร์มสมัครสมาชิกรับข่าว ก็สามารถรับความรู้ดีๆ แบบฟรีๆ ได้ก่อนใครเลยครับ




ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *