วิธีเพิ่มปุ่มในส่วนหัว WordPress ของคุณอย่างง่ายดาย

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

คุณต้องการเรียนรู้วิธีเพิ่มปุ่มในเมนูส่วนหัวของ WordPress หรือไม่?

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

ในบทความนี้ เราจะอธิบายวิธีเพิ่มปุ่มในเมนูส่วนหัวของ WordPress ทีละขั้นตอน

ทำไมต้องเพิ่มปุ่มในเมนูส่วนหัวของ WordPress?

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

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

WordPress header without button

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

WordPress header with menu button

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

ด้วยเหตุนี้ เรามาดู 2 วิธีในการเพิ่มปุ่มในเมนูส่วนหัวของ WordPress โดยไม่ต้องเขียนโค้ด HTML หรือ CSS

  • วิธีเพิ่มปุ่มในเมนูส่วนหัวของ WordPress ด้วย SeedProd
    • ขั้นตอนที่ 1 ติดตั้งและเปิดใช้งาน SeedProd
    • ขั้นตอนที่ 2 เลือกเทมเพลตที่สร้างไว้ล่วงหน้า
    • ขั้นตอนที่ 3 ปรับแต่งส่วนหัวของคุณ
    • ขั้นตอนที่ 4 เพิ่มปุ่มในส่วนหัวของคุณ
    • ขั้นตอนที่ 5 เผยแพร่การเปลี่ยนแปลงของคุณ
  • การเพิ่มปุ่มในเมนูส่วนหัวของ WordPress โดยไม่ต้องใช้ปลั๊กอิน

วิธีเพิ่มปุ่มในเมนูส่วนหัวของ WordPress ด้วย SeedProd

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

SeedProd WordPress website builder

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

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

ดังนั้นทำตามขั้นตอนด้านล่างเพื่อเพิ่มปุ่มในส่วนหัว WordPress ของคุณด้วย SeedProd

ขั้นตอนที่ 1 ติดตั้งและเปิดใช้งาน SeedProd

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

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

Find your SeedProd license key

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

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

enter your license key

จากนั้นคลิกปุ่ม ยืนยันรหัส เพื่อปลดล็อกคุณสมบัติ Pro ของคุณ

ขั้นตอนที่ 2 เลือกเทมเพลตที่สร้างไว้ล่วงหน้า

เมื่อเปิดใช้งานรหัสใบอนุญาต ตอนนี้คุณสามารถเลือกเค้าโครงที่คุณต้องการสร้างด้วย SeedProd มี 2 ​​วิธีที่แตกต่างกันที่คุณสามารถทำได้ ซึ่งมีดังนี้:

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

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

เนื่องจากเราเลือกตัวเลือกธีม WordPress คุณจะต้องไปที่ SeedProd » Theme Builder แล้วคลิกปุ่ม ธีม

choose a website kit seedprod

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

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

Choose a theme template kit

เมื่อนำเข้าธีมของคุณเสร็จแล้ว คุณจะเห็นหน้าแบบนี้โดยอัตโนมัติ:

Theme builder template parts

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

ขั้นตอนที่ 3 ปรับแต่งส่วนหัวของคุณ

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

Edit WordPress header

เมื่อคุณเปิดเทมเพลตส่วนหัว คุณจะเห็นเค้าโครง 2 คอลัมน์ดังนี้:

SeedProd header builder

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

เมื่อคุณดูเค้าโครงส่วนหัวปัจจุบัน คุณจะเห็นคอลัมน์ที่มีบล็อกรูปภาพและคอลัมน์ที่มีบล็อกเมนูนำทาง

header columns

หากต้องการเพิ่มปุ่มในส่วนหัว คุณจะต้องเพิ่มคอลัมน์ที่ 3 ซึ่งเราจะแสดงวิธีดำเนินการให้คุณในตอนนี้

ขั้นแรก วางเมาส์เหนือส่วนหัวของคุณจนกว่าจะมีโครงร่างสีม่วง จากนั้นคลิกไอคอน ทำซ้ำส่วน

Duplicate header section

การทำเช่นนั้นจะเพิ่มสำเนาของส่วนหัวของคุณด้านล่างอันแรก

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

Delete original row

ตอนนี้คุณจะมีส่วนว่างพร้อมตัวเลือกให้เลือกเค้าโครงคอลัมน์ใหม่ ไปข้างหน้าและคลิกเค้าโครง 3 คอลัมน์

Choose a 3 column row layout

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

Move blocks into your new columns

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

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

Delete the duplicated row

ตอนนี้คุณพร้อมที่จะสร้างปุ่มสำหรับเมนูส่วนหัวของ WordPress แล้ว

ขั้นตอนที่ 4 เพิ่มปุ่มในส่วนหัวของคุณ

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

Add SeedProd button block to your header

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

Customize button block

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

Add custom icons to button block

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

Advanced button customization options

นอกจากนี้ ตัวเลือก แอนิเมชัน ยังเป็นวิธีที่ยอดเยี่ยมในการทำให้ปุ่มของคุณโดดเด่นยิ่งขึ้น

Button animation settings

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

Save your WordPress header

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

ขั้นตอนที่ 5 เผยแพร่การเปลี่ยนแปลงของคุณ

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

ถัดไป ค้นหาการสลับ เปิดใช้ธีม SeedProd ที่มุมบนขวา แล้วหมุนไปที่ตำแหน่ง ใช่

enable seedprod theme

ของเยี่ยม! ตอนนี้คุณสามารถดูตัวอย่างธีม WordPress ของคุณและดูการทำงานของปุ่มส่วนหัวได้

Example of how to add button in WordPress header with SeedProd

การเพิ่มปุ่มในเมนูส่วนหัวของ WordPress โดยไม่ต้องใช้ปลั๊กอิน

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

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

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

ถัดไป เปิดแถบด้านข้าง คลิก ส่วนหัวของเทมเพลต แล้วเลือกตัวเลือก ส่วนหัว ทางด้านขวามือ

WordPress theme editor header template part

เมื่อคุณทำเสร็จแล้ว คุณจะเห็นเลย์เอาต์ภาพของส่วนหัว WordPress ของคุณ ภายในตัวแก้ไข ให้คลิกหัวข้อ การนำทาง

Click the navigation options

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

Add new menu links

คุณสามารถคลิกและค้นหาหน้าใดก็ได้เพื่อเพิ่มลงในเมนูของคุณ

เมื่อลิงก์เมนูของคุณเข้าที่แล้ว ให้คลิกไอคอน (+) บวกอีกครั้งเพื่อเพิ่มบล็อก WordPress ใหม่ คราวนี้ ค้นหาบล็อก ปุ่ม และเพิ่มลงในส่วนหัวของคุณ

Add WordPress button block

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

Add button text and link

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

  • ลักษณะปุ่มเติมหรือเค้าร่าง
  • เปอร์เซ็นต์ความกว้าง
  • สีข้อความและพื้นหลัง
  • ขนาดตัวอักษร
  • การขยายความ
  • รัศมีเส้นขอบ
  • CSS เพิ่มเติมและชื่อคลาส
  • และอื่น ๆ.
Customize menu button

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

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

WordPress header with menu button

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

อย่างไรก็ตาม วิธีแก้ไขที่ดีที่สุดและง่ายที่สุดคือใช้เครื่องมือสร้างเพจแบบลากและวางของ SeedProd

เริ่มต้นใช้งาน SeedProd วันนี้

แค่นั้นแหละ!

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

  • วิธีเพิ่มเวลาทำการใน WordPress
  • วิธีสร้าง Image Lightbox ใน WordPress อย่างง่าย
  • วิธีหรี่ภาพพื้นหลังใน WordPress โดยไม่ใช้ CSS

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