วิธีสร้างแท็บใน WordPress สำหรับเนื้อหาแท็บที่น่าทึ่ง

เผยแพร่แล้ว: 2022-09-01

ต้องการเรียนรู้วิธีสร้างแท็บใน WordPress หรือไม่?

การเพิ่มแท็บลงในเว็บไซต์ WordPress ของคุณเป็นวิธีที่ยอดเยี่ยมในการจัดระเบียบเนื้อหาประเภทต่างๆ และประหยัดพื้นที่ในโพสต์และเพจ

ในบทความนี้ เราจะแสดงวิธีเพิ่มแท็บใน WordPress ทีละขั้นตอน

แท็บใน WordPress คืออะไร?

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

ทำไมคุณถึงต้องการเนื้อหา WordPress แบบแท็บ?

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

ตัวอย่างเช่น WordPress.org ใช้แท็บในหน้าปลั๊กอินเพื่อแสดงข้อมูล เช่น รายละเอียด บทวิจารณ์ การสนับสนุน และการพัฒนา

ตัวอย่างเนื้อหาแบบแท็บบน WordPress.org

วิธีอื่นๆ ในการใช้แท็บ ได้แก่

  • ในรายละเอียดสินค้าเพื่อแสดงข้อมูลจำเพาะของผลิตภัณฑ์ต่างๆ
  • ในแถบด้านข้างบล็อกของคุณเพื่อกรองหมวดหมู่
  • ในหน้าการติดต่อเพื่อจัดเรียงข้อมูลการติดต่อ

เคล็ดลับแบบมือโปร: แท็บไม่ควรสับสนกับหีบเพลง ผู้ใช้คลิกแท็บเพื่อสลับข้อมูล ในขณะที่หีบเพลงขยายเพื่อแสดงข้อมูล

ตอนนี้คุณรู้เพิ่มเติมเกี่ยวกับวิธีการทำงานของแท็บและเหตุผลที่คุณต้องการแล้ว มาดูวิธีเพิ่มแท็บในไซต์ WordPress ของคุณกัน

ด้านล่างนี้ เราจะแบ่งปัน 2 วิธีในการเพิ่มแท็บใน WordPress ขั้นแรก เราจะใช้ตัวสร้างเพจ จากนั้นแสดงวิธีสร้างแท็บด้วยปลั๊กอิน WordPress

มาเริ่มกันเลย.

  • วิธีที่ 1: วิธีสร้างแท็บใน WordPress ด้วย Page Builder
    • วิธีที่ 2: วิธีเพิ่มแท็บด้วยปลั๊กอิน WordPress

    วิธีที่ 1: วิธีสร้างแท็บใน WordPress ด้วย Page Builder

    สำหรับวิธีแรก เราจะใช้ SeedProd ซึ่งเป็นเครื่องมือสร้างเว็บไซต์ WordPress ที่ดีที่สุด เพื่อเพิ่มเนื้อหาแบบแท็บลงในเว็บไซต์ของคุณ

    เครื่องมือสร้างเว็บไซต์ SeedProd WordPress

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

    คุณยังสามารถใช้ SeedProd เพื่อ:

    • สร้างธีม WordPress ที่กำหนดเอง
    • สร้างเว็บไซต์ WooCommerce
    • สร้างหน้า Landing Page ที่มีการแปลงสูง
    • ทำให้ไซต์ของคุณอยู่ในโหมดบำรุงรักษา
    • และอื่นๆ อีกมากมาย

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

    ทำตามขั้นตอนด้านล่างเพื่อสร้างแท็บใน WordPress ด้วย SeedProd

    ขั้นตอนที่ 1. ติดตั้งตัวสร้างเว็บไซต์ SeedProd

    ขั้นแรก คุณจะต้องไปที่เว็บไซต์ SeedProd และดาวน์โหลดปลั๊กอิน SeedProd มีเวอร์ชันฟรี อย่างไรก็ตาม คุณจะต้องใช้แผนพรีเมียมเพื่อปลดล็อกแท็บและบล็อกอื่นๆ

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

    หลังจากเปิดใช้งานปลั๊กอินแล้ว ให้ไปที่ SeedProd » การตั้งค่า และป้อนคีย์ใบอนุญาตของปลั๊กอิน

    ใส่รหัสใบอนุญาตของคุณ

    คุณสามารถค้นหาคีย์ใบอนุญาต SeedProd ของคุณได้ในแดชบอร์ดบัญชีของคุณในส่วน ดาวน์โหลด

    ค้นหารหัสใบอนุญาต SeedProd ของคุณ

    อย่าลืมคลิกปุ่ม ยืนยันคีย์ ก่อนไปยังขั้นตอนถัดไป

    ขั้นตอนที่ 2 สร้างธีม WordPress หรือหน้า Landing Page

    มี 2 ​​วิธีในการใช้ SeedProd เพื่อเพิ่มแท็บในเว็บไซต์ของคุณ:

    1. ใช้ Theme Builder เพื่อสร้างธีม WordPress ที่กำหนดเอง และเพิ่มแท็บในหน้า WordPress
    2. สร้างหน้า Landing Page แบบสแตนด์อโลนพร้อมเนื้อหาแบบแท็บโดยใช้ตัวสร้างหน้าแบบลากและวาง

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

    คุณสามารถทำตามคำแนะนำทีละขั้นตอนเพื่อสร้างธีม WordPress ด้วย SeedProd จากนั้นกลับมาที่นี่เพื่อดูคำแนะนำในการเพิ่มแท็บในไซต์ของคุณ

    ขั้นตอนที่ 3 เพิ่มแท็บในหน้า WordPress ของคุณ

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

    ในตัวอย่างนี้ เราจะเพิ่มแท็บในหน้าเกี่ยวกับเพื่อแสดงรายละเอียดเพิ่มเติม เช่น ตำแหน่งงานว่าง คำแนะนำด้านบรรณาธิการ และอื่นๆ

    โดยไปที่ หน้า » ทุกหน้า จากผู้ดูแลระบบ WordPress ของคุณและค้นหาหน้าที่คุณต้องการแก้ไข

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

    แก้ไขด้วย SeedProd

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

    ตัวสร้างการลากแล้ววางของ SeedProd

    นอกจากนี้ยังง่ายต่อการเพิ่มองค์ประกอบอื่นๆ ในหน้าของคุณโดยการลากจากแผงบล็อกแล้ววางให้เข้าที่ ลองทำด้วยแท็บบล็อกของ SeedProd

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

    ทำซ้ำส่วนในตัวสร้างเพจของ SeedProd

    หลังจากนั้น เปลี่ยนรูปภาพด้วยสิ่งที่เกี่ยวข้องมากขึ้นและลบเนื้อหาที่คุณไม่ต้องการอีกต่อไปโดยคลิกที่ไอคอนถังขยะ

    ลบบล็อกใน SeedProd

    ตอนนี้คุณสามารถมองหาบล็อก แท็บ ในแผงด้านซ้ายมือแล้วลากไปยังส่วนใหม่บนหน้าเว็บของคุณ

    ลากและวางบล็อก SeedProd Tabs

    การคลิกที่บล็อกจะแสดงการตั้งค่าเนื้อหาซึ่งคุณสามารถ:

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

    การขยายแต่ละแท็บทำให้คุณสามารถเพิ่มชื่อแท็บและเขียนเนื้อหาของคุณโดยใช้ตัวแก้ไขแบบคลาสสิกด้วยการตั้งค่า 'สิ่งที่คุณเห็นคือสิ่งที่คุณได้รับ' (WYSIWYG)

    คุณยังสามารถเปิดใช้งานไอคอนที่กำหนดเองเพื่อเพิ่มความสนใจให้กับแท็บของคุณและทำให้โดดเด่น เพียงหมุนสลับ 'ไอคอนแท็บซ่อน' ไปที่ตำแหน่ง 'ปิด' และเลือกไอคอนที่กำหนดเองจากไลบรารี Font Awesome

    ไอคอนแท็บ SeedProd

    การคลิกแท็บ ขั้นสูง ช่วยให้คุณเลือกตัวเลือกการปรับแต่งเพิ่มเติม รวมทั้งสีพื้นหลังแบบกำหนดเอง แบบอักษร เส้นขอบ ระยะห่าง และอื่นๆ

    การตั้งค่าแท็บขั้นสูง

    คุณยังสามารถแสดงแท็บแนวตั้งหรือชุดแท็บแนวนอนได้ด้วยการคลิกตัวเลือกเค้าโครงใดก็ได้

    แท็บแนวตั้งและแนวนอนใน SeedProd

    อย่าลืมคลิกปุ่ม บันทึก ที่มุมบนขวาของหน้าจอเพื่อบันทึกการเปลี่ยนแปลงของคุณ

    ทำตามขั้นตอนเดียวกันเพื่อเพิ่มแท็บในหน้าอื่น ๆ บนเว็บไซต์ WordPress จากนั้นไปยังขั้นตอนถัดไปเพื่อทำการเปลี่ยนแปลงของคุณ

    ขั้นตอนที่ 4 เผยแพร่เนื้อหาแท็บของคุณ

    หลังจากเพิ่มแท็บลงในหน้า WordPress ต่างๆ ของคุณแล้ว คุณก็พร้อมที่จะเผยแพร่แท็บเหล่านั้นเพื่อให้ผู้เยี่ยมชมเว็บไซต์ของคุณได้ดู

    ในการดำเนินการนี้ ไปที่หน้า SeedProd » Theme Builder และสลับการสลับ 'เปิดใช้งานธีม SeedProd' เป็นตำแหน่ง 'เปิด'

    เปิดใช้งานธีม seedprod

    ตอนนี้คุณสามารถดูตัวอย่างหน้าของคุณและดูเนื้อหาที่แท็บของคุณใช้งานได้จริง

    วิธีสร้างแท็บใน WordPress ด้วยตัวอย่าง SeedProd

    วิธีที่ 2: วิธีเพิ่มแท็บด้วยปลั๊กอิน WordPress

    วิธีการต่อไปนี้เป็นทางเลือกที่ดี หากคุณไม่ต้องการเปลี่ยนธีม WordPress หรือสร้างหน้า Landing Page เราจะใช้ปลั๊กอิน WordPress Tabs Responsive ฟรีเพื่อเพิ่มแท็บที่ตอบสนองไปยังไซต์ WordPress ของคุณ

    ขั้นแรก คุณจะต้องติดตั้งปลั๊กอิน Tabs Responsive และเปิดใช้งานจากผู้ดูแลระบบ WordPress ของคุณ

    ติดตั้งและเปิดใช้งานปลั๊กอิน WordPress Tabs Responsive

    จากนั้นไปที่ แท็บที่ตอบสนอง »เพิ่มแท็บใหม่ และตั้งชื่อแท็บของคุณ

    เพิ่มชุดแท็บใหม่

    จากที่นั่น คุณสามารถเลือกเทมเพลตเริ่มต้น หรือหากคุณใช้เวอร์ชัน Pro คุณสามารถเลือกรูปแบบเทมเพลต 18+ แบบ

    ขั้นตอนต่อไปคือการเพิ่มแท็บของคุณ คุณสามารถสร้างแท็บได้มากเท่าที่คุณต้องการและรวมถึง:

    • ชื่อแท็บ
    • คำอธิบายแท็บ
    • ไอคอนแท็บ
    แก้ไขเนื้อหาแท็บของคุณ

    คุณยังสามารถแก้ไขสไตล์ของแต่ละแท็บในแถบด้านข้างทางขวาได้ด้วยการเลือกสไตล์แท็บแบบกำหนดเอง สีพื้นหลัง สีฟอนต์ และอื่นๆ

    ตัวเลือกการปรับแต่งแท็บ

    เมื่อคุณพอใจกับแท็บของคุณแล้ว ให้คัดลอกรหัสย่อของแท็บแล้ววางที่ใดก็ได้ในธีม WordPress ของคุณ

    คัดลอกรหัสย่อของแท็บ

    ตัวอย่างเช่น คุณสามารถวางรหัสย่อลงในบทความหรือหน้าของ WordPress ได้ดังนี้:

    เพิ่มรหัสย่อของแท็บในบทความหรือหน้า WordPress

    นี่คือลักษณะที่ปรากฏที่ส่วนหน้าของไซต์ของคุณ:

    ตัวอย่างแท็บหน้า WordPress

    คุณยังสามารถเพิ่มรหัสย่อของแท็บลงในพื้นที่พร้อมวิดเจ็ต เช่น วิดเจ็ตแถบด้านข้างหรือวิดเจ็ตส่วนท้ายของ WordPress โดยวางรหัสย่อลงในบล็อกย่อหน้า

    วางรหัสย่อของแท็บในแถบด้านข้างของ WordPress

    หลังจากนั้น คุณจะเห็นเนื้อหาแบบแท็บแสดงอยู่ในพื้นที่แถบด้านข้างของคุณ:

    ตัวอย่างแท็บในแถบด้านข้างของ WordPress

    ที่นั่นคุณมีมัน!

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

    เริ่มต้นกับ SeedProd วันนี้

    คุณอาจชอบคำแนะนำที่เป็นประโยชน์อื่นๆ เกี่ยวกับ WordPress ขณะที่คุณอยู่ที่นี่:

    • วิธีสร้างแอนิเมชั่นข้อความใน WordPress (ขั้นตอนง่าย ๆ )
    • วิธีสร้างตัวแบ่งส่วนแฟนซีสำหรับเว็บไซต์ WordPress
    • วิธีเพิ่มกล่องผู้แต่งใน WordPress (ไม่มีปลั๊กอิน)

    ขอบคุณที่อ่าน. โปรดติดตามเราบน YouTube, Twitter และ Facebook สำหรับเนื้อหาที่เป็นประโยชน์เพิ่มเติมเพื่อทำให้ธุรกิจของคุณเติบโต