สอนทำ Sidebar ให้ลอยค้างได้ ในเว็บไซต์ WordPress ทำอย่างไร

สอนทำ Sidebar ให้ลอยค้างใน Wordpress
https://www.youtube.com/embed/dXcuKOpdAqo?feature=oembed&autoplay=1

ในบทเรียนนี้ ผมก็มีความรู้เกี่ยวกับการสร้างเว็บไซต์ดีๆมาแบ่งปัน อีกเช่นเคยครับ จะเป็นการสอน ทำ Sidebar ให้ลอยค้างได้ใน เว็บไซต์ WordPress ครับ

การทำแบบนี้ มีประโยชน์ตรงที่ว่า ถ้าเราต้องการเน้นให้เขาเห็นอะไร มันก็จะค้างเอาไว้ให้เขาเห็นอย่างนั้นครับ อย่างเช่น ปุ่ม Social Share ต่างๆ หรือ ป้ายโฆษณาต่างๆของเรา ก็สามารถที่จะค้างเอาไว้ได้เลย โดยไม่ไหลไปตามหน้าที่ Scroll นั่นเองเดี๋ยวเรามาลองดูวิธีการทำกันเลยดีกว่านะครับ

สำรวจ Theme ของเราก่อน

ลองไปดูที่ Theme WordPress ที่เราใช้งานอยู่ก่อนนะครับ ถ้าเราใช้ Theme มาตรฐานของ WordPress 5.1 เจ้า Sidebar มันจะอยู่ที่ด้านล่างครับ ถ้า Sidebar อยู่ด้านล่าง ก็จะไม่สามารถ ทำให้มันลอยค้างไว้ได้ครับ วิธีการแก้ไขคือ เราต้องทำให้ Sidebar อยู่ด้านข้าง หรือ ใช้ Theme ที่ Support Sidebar ด้านข้างของเว็บไซต์ นั้นเองครับ ดังนั้น ผมจะทำการเปลี่ยน Theme ก่อนครับ แล้วก็ค่อยมาจัดการในเรื่องของ Sidebar ทำให้มันค้างครับ

ธีมที่ผมใช้งานคือ  Theme Twenty Sixteen ครับ เป็นธีมมาตรฐานของ WordPress อีกธีมหนึ่งครับ เมื่อเปลี่ยนมาแล้ว เราก็พร้อมที่จะไปต่อแล้วครับ

แต่ถ้า ธีมของใคร Support Sidebar ด้านข้างอยู่แล้ว ก็ไม่ต้องเปลี่ยนตามผมนะครับ 🙂

ปรับแต่ง Sidebar ให้เรียบร้อย

ผมจะขอปรับแต่งเจ้า  Sidebar ตัวนี้นิดนึงนะครับ เอาเฉพาะ Widget ที่เราต้องการเท่านั้นครับ

ให้เราไปที่ Appearance แล้วไปที่ Widgets ครับ จากนั้นก็ไปที่ Sidebar หลักของเราครับ ก่อนอื่น ถ้า Widget ไหนไม่ใช้ ก็ลบทิ้งไปได้เลยครับ โดยการเปิดกล่อง แล้วกด Delete ครับ

ผมใช้ Widget Search, Recent Posts และ Image เป็นตัวอย่างครับ ตอนใส่ Image อย่าลืม เลือกรูปภาพที่เราต้องการ แล้วกด Save  ด้วยนะครับ ไม่งั้นรูปภาพมันจะไม่โผล่ครับ

ติดตั้ง Plugin Fixed Widget

ปกติ  WordPress จะไม่สามารถทำให้ Sidebar มันค้างได้ครับ เราจำเป็นที่จะต้องมีตัวช่วยครับนั่น ก็คือ Plugin นั้นเอง

ให้เราเข้าไปที่ Plugin แล้วไปที่ Add New ครับ จากนั้นค้นหาคำว่า Fixed Widgets ครับ จะเจอของ Q2W3 ครับ หรือ ถ้าหาไม่เจอ Link ก็อยู่ตรงนี้ครับ

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

จะเห็นได้ว่ามีคนใช้เป็นแสนคนครับ แสดงว่า Plugin ตัวนี้ ก็ดีพอสมควรครับ แล้วก็ Last update 2 weeks ago แปลว่าอัพเดทบ่อยครับ ติดตั้งเสร็จแล้วก็อย่าลืม Activate นะครับ

ก่อนทำ Fixed Widget

เดี๋ยวผมพาไปดูหน้าเว็บไซต์ กันนิดนึงนะครับ เราอยู่ที่หน้าเว็บไซต์แล้ว เรากด Refresh หนึ่งครั้งครับ เราก็จะเห็นว่ามี Widget ที่เราติดตั้งไว้ 3 อันครับ พอเรา Scroll หน้าเว็บก็จะเห็นว่า มันไหลตามหน้าเว็บของเราครับ ผม Scroll มันก็ไหล เรา  Scroll มันก็ไหลอย่างนี้ไปเรื่อยๆครับ

ทำ Fixed Widget

เดี๋ยวเราจะทำให้ Widget 3 ตัวนี้ให้ลอยอยู่กับที่ ให้มันไม่ไหลไปตามหน้านะครับ เราจะเริ่มทดสอบตัว Search Widget ก่อนครับ เราไปที่หลังบ้านในหน้า Appearance Widget เราคลิกไปที่ Search Widget  1 ทีเพื่อเปิดกล่องของมันออกมาครับ เมื่อเรา Install เจ้า Plugin Fixed Widget ลงไปแล้ว มันก็จะมีให้เราเลือกว่า Fixed หรือไม่ครับ ให้เราเลือก Fixed Widget ได้เลยครับ เสร็จแล้วลองไปทดสอบดูครับ

ทีนี้เราลอง Refresh หน้าเว็บไซต์ แล้วลอง Scroll ดูครับ เราจะเห็นแล้วครับว่า Search Box ลอยค้างอยู่ครับ ส่วน Widget ที่เหลือไม่ลอยค้างครับ

Fixed Widget ทั้ง Sidebar ทำอย่างไร

หลายคนอาจจะมีคำถามว่า ถ้าเราต้องการค้างไว้ ทั้ง 3 อันเลย ทำได้ไหม หรือก็คือ ค้างไว้ทั้ง Sidebar เลยนั่นเองครับ เราสามารถทำครับ วิธีการก็ไม่ยากครับ เราก็เปิดกล่อง Widgets แต่ละตัวที่เหลือออกมา แล้วก็ติ๊ก Fixed ทุกกล่องครับ แล้วก็กด Save ให้เรียบร้อยครับ เสร็จแล้วก็ลองไปทดสอบเลยครับ เรากด Refresh หนึ่งครั้ง เหมือนเดิมครับ แล้วลอง  Scroll ลงมา ผลปรากฎว่า มันค้างไว้หมดเลยครับ

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

สรุป

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

ข่าวประชาสัมพันธ์

ถ้ากำลังมองหาคอร์สเรียน แบบสอนกันสดๆ ไม่ต้องเสียเวลาเรียนรู้ และ ทดลองเอง พิจารณาคอร์สเรียนสด ตรงนี้ได้เลยครับ

One thought on “สอนทำ Sidebar ให้ลอยค้างได้ ในเว็บไซต์ WordPress ทำอย่างไร

  1. Pingback: ปรับแต่ง Sidebar ลอย ให้ดูดี ในโทรศัพท์มือถือ ทำอย่างไร ? | พลากร สอนสร้างเว็บ

ใส่ความเห็น

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