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

เผยแพร่แล้ว: 2019-11-20

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

ในเทพนิยายเยอรมัน " แฮนเซลกับเกรเทล " น้องชายและน้องสาว - ได้ยินแผนการของแม่เลี้ยงที่ชั่วร้ายของพวกเขาที่จะทิ้งพวกเขาไว้ในป่าเพื่อดูแลตัวเอง - หยิบขนมปังชิ้นหนึ่งแล้วทิ้งเศษขนมปังไว้ ตามกลับบ้านเมื่อพ่อแม่ทิ้งพวกเขา

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

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

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

ผู้ซื้อที่กำลังดูแท่นชาร์จแบบแท่นชาร์จไร้สายแบบเร็ว Qi แบบไร้สายสำหรับ Galaxy S9+ iPhone X XS Max ทราบได้อย่างง่ายดายว่าพวกเขาอยู่ที่ไหนและจะรับหมวดหมู่ต่างๆ ตามรายการผลิตภัณฑ์ของตนได้อย่างไร

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

อีเบย์

ทำไมต้องเพิ่ม Breadcrumbs ในเว็บไซต์ WordPress?

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

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

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

เบรดครัมบ์ไม่เพียงแต่ช่วยให้ผู้ใช้นำทางไปยังเว็บไซต์ แต่ยังช่วยให้เครื่องมือค้นหานำทางไปยังไซต์ได้อีกด้วย

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

ตามที่เป็นอยู่ การเพิ่ม breadcrumbs ช่วยให้เว็บไซต์มีความพยายามในการเพิ่มประสิทธิภาพกลไกค้นหา

จะเพิ่ม Breadcrumbs ในเว็บไซต์ WordPress ได้อย่างไร?

ธีม WordPress ที่ทันสมัยที่สุดและธีมอีคอมเมิร์ซเกือบทั้งหมดมีฟีเจอร์เบรดครัมบ์ตามการออกแบบ

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

เปิดใช้งานเบรดครัมบ์โดยแก้ไขธีม

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

สำหรับบทความนี้ เราจะเพิ่ม breadcrumbs ให้กับ WordPress ด้วยปลั๊กอิน WordPress ฟรี – Breadcrumb NavXT

ขั้นตอนที่ 1: ติดตั้งปลั๊กอิน WordPress Breadcrumb NavXT

Breadcrumb NavXT สร้าง breadcrumb ตามตำแหน่งของผู้ใช้ จากนั้นสามารถปรับแต่งเส้นทางได้ตามใจชอบ

ไปข้างหน้าและติดตั้ง Breadcrumb NavXT

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

ป้อนปลั๊กอินที่คุณต้องการติดตั้ง – Breadcrumb NavXT – ลงในช่องค้นหา

ในหนึ่งหรือสองวินาที ผลลัพธ์จะกลับมา ตอนนี้ คลิก ติดตั้ง ทันที หลังจากนั้น รออีกหนึ่งหรือสองวินาที จากนั้นคลิก เปิดใช้งาน

ติดตั้งเบรดครัมบ์ NavXT

ขั้นตอนที่ 2: การแสดง Breadcrumb NavXT Breadcrumbs บนเว็บไซต์ WordPress

คุณสามารถแสดงเบรดครัมบ์ได้สองวิธี

1. การใช้วิดเจ็ตที่จัดเตรียมโดย Breadcrumb NavXT

ไปที่เมนูหลัก ลักษณะที่ปรากฏ > วิดเจ็ต

ค้นหา Breadcrumb NavXT จากนั้นลากไปที่แถบด้านข้างที่คุณต้องการให้ breadcrumb ของคุณ

แสดงวิดเจ็ต Breadcrumb NavXT

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

ดูเบรดครัมบ์ในวิดเจ็ต

หากคุณต้องการ breadcrumbs ของคุณทุกที่ยกเว้นแถบด้านข้างเช่นตัวอย่าง eBay คุณจะต้องทำให้มือสกปรกและปรับเปลี่ยนธีมของคุณ

2. แก้ไขธีมของคุณ

ไฟล์ที่คุณอาจต้องแก้ไขคือ; home.php, single.php, page.php. คุณยังสามารถแก้ไขการจัดหมวดหมู่และไฟล์อื่นๆ ได้ ตราบใดที่คุณต้องการเบรดครัมบ์

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

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

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

 <div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">

<?php if(function_exists('bcn_display')) { bcn_display(); }?>

</div>

หากคุณต้องการแสดงในบทความ ไฟล์ single.php คือสิ่งที่คุณแก้ไข วางโค้ดในแท็กบทความ

แสดงเบรดครัมบ์โดยแก้ไขไฟล์ธีมเดียว

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

เบรดครัมบ์ของคุณควรอยู่ในพื้นที่ที่คุณวางโค้ด

คุณสามารถเห็นในกรณีของฉัน ฉันมีเบรดครัมบ์ที่ด้านบนของบทความ

ดูเบรดครัมบ์ในบทความ

หากเบรดครัมบ์ของคุณแสดงผลไม่ถูกต้อง คุณจะต้องจัดรูปแบบด้วย CSS

Breadcrumb NavXT ใช้คลาส .breadcrumbs css (ซึ่งอาจขึ้นอยู่กับธีมของคุณด้วย) คุณสามารถแก้ไขโค้ด CSS ของไซต์ของคุณ หรือใช้ตัวปรับแต่ง WordPress เพื่อจัดรูปแบบเบรดครัมบ์ของคุณ

 .เกล็ดขนมปัง {

สี: #000;

ระยะขอบล่าง: 20px;

}

ขั้นตอนที่ 3: ปรับแต่ง breadcrumb ของ Breadcrumb NavXT

หากคุณต้องการแก้ไขเบรดครัมบ์ คุณสามารถทำได้ในแดชบอร์ด WordPress

ไปที่หน้าการตั้งค่า Breadcrumb NavXT คุณสามารถค้นหาได้ภายใต้ WordPress – การตั้งค่า > Breadcrumb NavXT เมนูทั่วไป

ปรับแต่งเบรดครัมบ์ NavXT เบรดครัมบ์

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

อย่าสูญเสียผู้เยี่ยมชมของคุณในป่าของเว็บไซต์ของคุณ เพิ่มเบรดครัมบ์ลงในเว็บไซต์ของคุณ

ต่อไป คุณอาจต้องการเรียนรู้วิธีเพิ่ม Google Custom Search ใน WordPress เพื่อปรับปรุงการนำทางในเว็บไซต์ของคุณ