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

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

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

ในโพสต์ของวันนี้ เราจะพูดถึงรายละเอียดเกี่ยวกับเบรดครัมบ์ของ WordPress และวิธีการทำงาน

WordPress Breadcrumbs คืออะไร?

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

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

เกล็ดขนมปังทำงานอย่างไร

เบรดครัมบ์ของ WordPress มีสามประเภทหลัก:

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

เบรดครัมบ์แต่ละประเภทมีประโยชน์สำหรับวัตถุประสงค์ที่แตกต่างกัน อย่างไรก็ตาม พวกเขาทั้งหมดสามารถปรับปรุงการนำทางและโดยส่วนขยาย UX

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

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


วิธีเพิ่ม WordPress Breadcrumbs ในเว็บไซต์ของคุณ

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

Yoast SEO

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

การติดตั้งสามารถทำได้ผ่านแดชบอร์ดของคุณ:

ในขั้นตอนต่อไป คุณต้องเพิ่มรหัสนี้:

 <?phpif ( function_exists('yoast_breadcrumb') ) {yoast_breadcrumb( '<p>','</p>' );}?>

หากคุณต้องการเพิ่มเบรดครัมบ์ลงในโพสต์บล็อก สามารถทำได้ในไฟล์เทมเพลต single.php

คุณยังสามารถวางที่ส่วนท้ายของไฟล์ header.php ซึ่งจะเพิ่ม breadcrumbs ให้กับทั้งเว็บไซต์ของคุณ

โปรดทราบว่าการอัปเดตธีมในอนาคตอาจแทนที่โค้ด ในกรณีนี้ เป็นการดีที่สุดที่จะติดต่อผู้พัฒนาธีมของคุณเพื่อขอข้อมูลเพิ่มเติมเกี่ยวกับวิธีการหลีกเลี่ยงปัญหานี้ เมื่อคุณวางโค้ดแล้ว ให้ไปที่ SEO – ลักษณะที่ปรากฏของการค้นหา – เกล็ดขนมปัง:

ตั้งค่าเป็น Enabled, Save and Post

ปลั๊กอิน WordPress Breadcrumbs

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

เกล็ดขนมปัง NavXT

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

เกล็ดขนมปังแบบยืดหยุ่น

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

เกล็ดขนมปัง WooCommerce

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

เกล็ดขนมปัง

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

ใช้ธีมที่มีเกล็ดขนมปัง

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

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

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

มหาสมุทร WP

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

Astra

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


การเพิ่มเบรดครัมบ์ด้วยตนเอง

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

หากต้องการเพิ่มด้วยตนเองในไซต์ของคุณ คุณต้องทำตามสองขั้นตอน

  • เพิ่มฟังก์ชันลงในไฟล์ functions.php ของคุณเพื่อเปิดใช้งาน
  • โทรในไฟล์เทมเพลตที่คุณต้องการให้แสดงเบรดครัมบ์

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

จัดแต่งทรงผม WordPress Breadcrumbs ของคุณ

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

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

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

ตัวอย่างของ CSS ที่ใช้ในการจัดรูปแบบเบรดครัมบ์สามารถดูได้ที่นี่:

 .breadcrumb { ช่องว่างภายใน: 8px 15px; margin-bottom: 20px รายการสไตล์: none; สีพื้นหลัง: #f5f5f5; border-radius: 4px;} .breadcrumb a { สี: #428bca; การตกแต่งข้อความ: ไม่มี;​​}

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


บทสรุป

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

แบ่งปันประสบการณ์ของคุณเกี่ยวกับ breadcrumbs และวิธีที่พวกเขาปรับปรุงสถานะออนไลน์ของคุณ