สร้างเนื้อหาให้มีหลาย Tabs ด้วย Responsive Tab Plugin

ใส่ Tabs ใน Wordpress ที่บทความ หรือ หน้าก็ได้
https://www.youtube.com/embed/ViRycg95Qoc?feature=oembed&autoplay=1
ช่วยแชร์ให้เพื่อน... สนับสนุนผู้เขียนครับ :)

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

Responsive Tabs Plugin สำหรับ WordPress

ก่อนอื่นเลยครับ เรามาติดตั้ง Plugin กันก่อนครับ ซึ่ง WordPress Plugin ที่ผมเลือกใช้ชื่อ Responsive Tabs ครับ โดย WP Darko นะครับ ลองค้นหาดูกันได้เลย ซึ่ง ปลั๊กอินตัวนี้มี feedback ค่อนข้างดีครับ หาเจอแล้วก็ติดตั้ง แล้วก็เปิดใช้งานได้เลยครับ

เริ่มใช้งาน Responsive Tabs Plugin

วิธีการใช้งาน เมื่อเข้ามาแล้วเราก็จะเห็นหน้าครับว่า มีเมนูใหม่ ชื่อ Tab Sets โผล่ขึ้นมาเราก็เข้าไปที่เมนูนี้ได้เลยครับ

เข้ามาแล้วให้เราเริ่มจากการตั้งชื่อ Tab Set หรือว่า ชุดของ Tab นี้ก่อนครับ ต้องเป็นภาษาอังกฤษเท่านั้นนะครับ

พอเสร็จแล้วเราก็ Save หรือ Publish ข้อมูลก่อนครับ แล้วให้เราไปที่หน้า All Tab Sets ครับ จะเห็น Column ที่เรียกว่า Shortcode ครับ ให้เรา Copy Shortcodes ของ Tab Set ของเราเอาไว้ครับ

วาง Tabs ที่หน้าของเรา

ผมจะวาง Tabs ไว้ที่หน้า Home ของผมครับวิธีการคือ ให้เราไปที่หน้าครับ แล้วเอา Short Codes ที่เรา Copy มาไปวางไว้ที่หน้าครับ โดยต้องวางเป็นโหมดตัวหนังสือเท่านั้นนะครับ แล้วเดี๋ยวเราไปดูที่หน้าเว็บไซต์กันครับ

พอมาดูแล้วก็รู้สึกแปลกครับ เพราะว่า Tabs มันเหมือนจะแหว่งๆ แต่ที่จริงไม่แหว่งครับ แต่เป็นเพราะสีของตัวอักษรกลืนกับ Background ครับ ตรงนี้เราสามารถ ปรับแต่งได้ครับ

ปรับแต่ง Responsive Tabs ให้ดูสวย

ให้เรากลับไปที่ระบบหลังบ้านครับ แล้วไปที่ Tab Sets จากนั้นไปเลือก Tab Set ที่เราจะทำการแก้ไขครับ เมื่อเข้ามาแล้วให้ไปเลือกหลักครับ พอเลือกแล้วก็อย่าลืม Save แล้วกลับมาดูที่หน้าเว็บไซต์ของเราอีกทีครับ

ก็จะเห็นว่า หน้าเว็บไซต์ของเรา แสดง Tabs ที่สวยงามแล้วครับ

เรียงลำดับ Tabs ได้อย่างไร

ให้เข้าไปแก้ไขที่หลังบ้านครับ เลือก Tab Set ที่ต้องการจะแก้ไข แล้วทำการแก้ไขครับ โดยที่ด้านล่างของข้อมูล Tab แต่ละอัน จะมีลูกศร ขึ้นลงครับ เราสามารถใช้ลูกศรตรงนี้เลื่อนได้ครับ

พอเลื่อนเสร็จแล้วก็อย่าลืม Save ด้วยนะครับ จากนั้นเราก็ไปดูที่หน้าเว็บไซต์ของเรากันได้เลยครับ

Responsive Breakpoints

นอกจากนั้น ยังมีสิ่งที่เรียกว่า Responsive Breakpoints ที่น่าสนใจด้วยครับ

ค่านี้หมายความว่า จอเล็กขนาดไหน Tab ถึงจะกลายเป็น Accordion Menu ครับ

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

แบบนี้เราเรียกว่า Responsive นั่นเองครับ

สร้าง Tab Set มากกว่า 1 ชุดในหน้าเว็บไซต์ของเราได้ไหม

คำตอบคือได้ครับ เราก็ไปสร้าง Tab Set อีกชุดหนึ่งได้เลย สร้างเสร็จแล้วเราก็ทำเหมือนเดิมครับ เราเอา Short Code ไปวางที่หน้าของเรา แล้วจากนั้น ก็ไปดูที่หน้าเว็บไซต์ได้เลยครับ

สรุป

เราสามารถสร้างเนื้อหาในเว็บไซต์ ในลักษณะที่เป็น Tabs ได้ครับ โดยใช้ Plugin ที่ชื่อว่า Responsive Tabs แต่จริงๆแล้วมันมีหลาย Plugin ให้เราเลือกใช้ครับ

ซึ่งเราสามารถที่จะสร้าง Tab ย่อย ตกแต่ง Tab ในเบื้องต้น และ จัดลำดับของ Tab ได้อย่างง่ายๆอีกด้วยครับ

นอกจากนั้นเราสามารถที่จะ สร้าง Tab Set หรือ ชุดของ Tab หลายชุด แล้วไปวางไว้ที่หน้าได้อีกด้วยครับ


ช่วยแชร์ให้เพื่อน... สนับสนุนผู้เขียนครับ :)
ประชาสัมพันธ์
คอร์สเรียนออนไลน์
ทำ Blog ง่ายๆ ใครก็ทำได้

Blog คือ เครื่องมือที่ใช้สร้างโอกาส 

และ สร้างตัวตนได้ ทุกยุคทุกสมัย 

ราคาปกติ 3,990 บาท
Early Bird 1,990 บาท
(สำหรับ 50 ท่านแรก)

พลากร สอนสร้างเว็บ

รับเทคนิค ความรู้ ข่าวสาร การทำเว็บไซต์

จาก พลากร สอนสร้างเว็บ

เฉพาะ สมาชิกเท่านั้น

9 thoughts on “สร้างเนื้อหาให้มีหลาย Tabs ด้วย Responsive Tab Plugin

  1. ืืnno says:

    สอบถามหน่อยครับ คือตรงช่วง Footer มันเด้งขึ้นมาครับ มันไม่อยู่ตรงขอบข้างล่างครับ มีวิธีตั้งค่ายังไงหรือแก้ไขยังไงบ้างครับ

  2. แววปะสิด says:

    ขอสอบถามแน่ครับ ผมลง plugin ก่อ ok แต่พอเข้าไปส้าง Add new มัน error ขื้นข้อความว่า cmb2 line 13 error แก้ยังไงครับ…

    • พลากร สอนสร้างเว็บ says:

      กรณีนี้ต้องเช็คดูว่า มี Error จาก Script อื่นๆ หรือเปล่าครับ ลองคลิกขวา แล้วกด ตรวจสอบ จากนั้น กดที่ Console ดูครับ

ส่งความเห็นที่ พลากร สอนสร้างเว็บ ยกเลิกการตอบ

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