วิธีสร้างแถบด้านข้าง WordPress แบบกำหนดเองโดยไม่ต้องใช้โค้ด

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

คุณต้องการเรียนรู้วิธีสร้างแถบด้านข้าง WordPress แบบกำหนดเองโดยไม่ต้องใช้โค้ดหรือไม่?

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

ในบทความนี้ เราจะแสดงวิธีเพิ่มแถบด้านข้างใน WordPress ด้วยวิธีง่ายๆ ไม่กี่ขั้นตอน

ทำไมคุณควรเพิ่มแถบด้านข้าง WordPress แบบกำหนดเอง

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

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

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

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

วิธีสร้างแถบด้านข้าง WordPress แบบกำหนดเองโดยไม่ต้องใช้โค้ด

หากต้องการเรียนรู้วิธีเพิ่มแถบด้านข้างใน WordPress เพียงทำตามขั้นตอนด้านล่าง:

  1. การติดตั้ง SeedProd
  2. การเลือกเทมเพลตธีม
  3. การปรับแต่งแถบด้านข้าง WordPress ของคุณ
    • การเพิ่มแบบฟอร์มการติดต่อภายในแถบด้านข้าง
    • การเพิ่มโพสต์ล่าสุดภายในแถบด้านข้างของ WordPress
    • การลบรายการออกจากแถบด้านข้าง
  4. การบันทึกการเปลี่ยนแปลงและการเผยแพร่แถบด้านข้าง

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

1. การติดตั้ง SeedProd

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

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

SeedProd License key

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

enter SeedProd license key

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

2. การเลือกเทมเพลตธีม

จากส่วนผู้ดูแลระบบ WordPress ของคุณ ให้คลิกที่ SeedProd » Theme Builder

Theme builder menu

นี่คือแดชบอร์ดหลักที่คุณสามารถควบคุมการตั้งค่าสำหรับองค์ประกอบธีมที่แตกต่างกันทั้งหมดของคุณ รวมถึงแถบด้านข้าง

ตอนนี้ให้คลิกที่ปุ่ม ธีม สีส้ม

SeedProd theme builder template

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

SeedProd themes

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

Theme parts

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

การใช้ปุ่มสลับภายใต้หัวข้อ เผยแพร่ แล้ว เราปิดการใช้งานส่วนอื่นๆ ของธีมและปล่อยให้แถบด้านข้างเป็นสถานะ ใช่

Sidebar toggle button

ตอนนี้ เราพร้อมที่จะเริ่มปรับแต่งแถบด้านข้างแล้ว

3. การปรับแต่งแถบด้านข้าง WordPress ของคุณ

ในการเริ่มต้นปรับแต่งแถบด้านข้างของ WordPress ให้วางเคอร์เซอร์ไว้เหนือตัวเลือก แถบด้านข้าง ในแดชบอร์ดตัวสร้างธีมของ SeedProd แล้วคลิก แก้ไขการออกแบบ

Sidebar Edit design

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

Sidebar Builder

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

ด้านล่างนี้ เราจะแสดงวิธีการปรับแต่งแถบด้านข้างทั่วไปบางส่วน แต่เป็นขั้นตอนที่ไม่บังคับทั้งหมด

การเพิ่มแบบฟอร์มการติดต่อภายในแถบด้านข้าง

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

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

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

SeedProd contact form block

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

เราจะใช้แบบฟอร์มที่เราสร้างไว้แล้วด้วย WPForms โดยคลิกที่เมนูดรอปดาวน์ Select a Form แล้วเลือกจากรายการ

Simple contact form

หน้าตาก็จะประมาณนี้

Sidebar form

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

Edit selected form

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

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

Advanced settings

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

การเพิ่มโพสต์ล่าสุดภายในแถบด้านข้างของ WordPress

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

SeedProd recent posts block

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

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

SeedProd recent posts block settings

มีเพียง 3 โพสต์ในไซต์ทดสอบตัวอย่างของเรา แต่โดยทั่วไปควรรวม 5 โพสต์ล่าสุดเพื่อแสดงบนแถบด้านข้างของคุณ

การลบรายการออกจากแถบด้านข้าง

ด้วยตัวสร้างธีม SeedProd การลบองค์ประกอบออกจากแถบด้านข้างนั้นง่ายพอๆ กับการเพิ่มรายการใหม่

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

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

หากต้องการลบบล็อก ให้วางเมาส์ไว้จนกระทั่งโครงร่างสีส้มปรากฏขึ้นรอบๆ บล็อกที่คุณต้องการลบ แล้วกดไอคอนถังขยะ

Delete block

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

Delete confirmation

นั่นคือทั้งหมดที่ใช้ในการลบบล็อกหรือองค์ประกอบออกจากแถบด้านข้างของคุณ

4. การบันทึกการเปลี่ยนแปลงและการเผยแพร่แถบด้านข้าง

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

Save chanes

ตอนนี้ ให้คลิกปุ่มกากบาทเพื่อออกจากตัวสร้างธีม

Enable seedprod theme

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

Sidebar added

และนั่นแหล่ะ! ตอนนี้คุณรู้วิธีเพิ่มแถบด้านข้างใน WordPress และปรับแต่งให้มีลักษณะตามที่คุณต้องการ

ถัดไป ตั้งค่าโดเมนย่อยของอีเมล

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

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

พร้อมที่จะแก้ไขอีเมลของคุณแล้วหรือยัง? เริ่มต้นวันนี้ด้วยปลั๊กอิน WordPress SMTP ที่ดีที่สุด WP Mail SMTP Elite มีการตั้งค่า White Glove เต็มรูปแบบและรับประกันคืนเงิน 14 วัน

หากบทความนี้ช่วยคุณได้ โปรดติดตามเราบน Facebook และ Twitter สำหรับคำแนะนำและคำแนะนำเกี่ยวกับ WordPress เพิ่มเติม