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

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

โฮมดีโปหน้าผลิตภัณฑ์พร้อมเกล็ดขนมปัง

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

คุณอาจคิดว่าการเพิ่มระบบนำทางแบบบูรณาการเข้ากับเว็บไซต์ของคุณอาจเป็นเรื่องยาก แต่จริงๆ แล้วการใช้ปลั๊กอินนั้นค่อนข้างง่าย อันที่จริงแล้ว หากคุณใช้ปลั๊กอิน Yoast SEO คุณจะเริ่มต้นได้เนื่องจากฟังก์ชัน breadcrumbs มีอยู่แล้วใน Yoast! และการเพิ่ม breadcrumbs ผ่าน Yoast เป็นหนึ่งในวิธีการที่ต้องการ นอกเหนือจาก Yoast SEO แล้ว ปลั๊กอิน Breadcrumb NavXT เป็นอีกตัวเลือกที่ยอดเยี่ยมที่ปรับแต่งได้สูงและทำงานได้ดีกับธีม Divi ของเราเอง

สมัครสมาชิกช่อง Youtube ของเรา

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

ในการเพิ่มเบรดครัมบ์ลงในเว็บไซต์ WordPress ของคุณโดยใช้ Yoast SEO คุณจะต้องจัดการสามขั้นตอนง่ายๆ:

• ติดตั้งและเปิดใช้งานปลั๊กอิน Yoast SEO
• การเพิ่มข้อมูลโค้ด Breadcrumbs ให้กับ WordPress Theme
• เปิดใช้งาน/กำหนดค่า Breadcrumbs the Yoast Breadcrumbs ในการตั้งค่าปลั๊กอิน

ติดตั้งและเปิดใช้งานปลั๊กอิน Yoast SEO

ในการติดตั้งปลั๊กอิน Yoast SEO ให้ไปที่แดชบอร์ด WordPress ของคุณและไปที่ Plugins > Add New จากนั้นค้นหาที่เก็บ WordPress สำหรับ "yoast" เมื่อคุณเห็นปลั๊กอิน Yoast SEO ให้คลิกเพื่อติดตั้งและเปิดใช้งานปลั๊กอิน

เพิ่มข้อมูลโค้ด Breadcrumbs ให้กับ WordPress Child Theme

ต่อไป เราต้องเพิ่มข้อมูลโค้ดสั้นๆ ลงในไฟล์ธีม WordPress ของคุณ ดังนั้น หากคุณยังไม่ได้สร้างธีมลูก สำหรับตัวอย่างนี้ ฉันจะแสดงวิธีเพิ่มข้อมูลโค้ดเบรดครัมบ์ให้กับธีม WordPress เริ่มต้นของ TwentyNineteen คุณสามารถเพิ่มโค้ดลงในไฟล์ธีม/เทมเพลตใดก็ได้ แต่โดยส่วนใหญ่ คุณจะต้องเพิ่มโค้ดลงในไฟล์ single.php ของคุณ (เพื่อแสดงในทุกโพสต์) ไฟล์ page.php (เพื่อแสดงในทุกหน้า ) หรือไฟล์ header.php ของคุณ (เพื่อแสดงทั่วทั้งไซต์)

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

จากนั้นที่ด้านล่างสุดของไฟล์ header.php ให้เพิ่มข้อมูลโค้ด php ต่อไปนี้ที่ Yoast จัดเตรียมไว้ให้เพื่อเปิดใช้งานฟังก์ชัน Breadcrumbs:

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

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

เปิดใช้งานและกำหนดค่า Yoast Breadcrumbs ในการตั้งค่าปลั๊กอิน

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

ตอนนี้ มาดูกันว่า breadcrumbs มีลักษณะอย่างไรในโพสต์ใดโพสต์หนึ่งที่ฉันสร้างในธีม TwentyNineteen

นี่คือลักษณะของโพสต์ก่อนที่จะเปิดใช้งานเบรดครัมบ์

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

คุณอาจต้องปรับรูปแบบของเบรดครัมบ์โดยใช้ CSS ภายนอก ในการทำเช่นนั้น คุณสามารถใช้ CSS ID “breadcrumbs” ที่รวมอยู่ในโค้ด php เปิดไฟล์ style.css ของธีมลูกของคุณ (หรือคุณสามารถเพิ่มในเครื่องมือปรับแต่งธีมภายใต้ CSS เพิ่มเติม) และเพิ่มสิ่งต่อไปนี้:

#breadcrumbs {

/*Add breadcrumb styling here*/

}

สำหรับธีม TwentyNineteen ฉันอาจต้องการจับคู่ระยะขอบของข้อความส่วนหัวของฉันโดยเพิ่ม CSS ที่กำหนดเองต่อไปนี้:

#breadcrumbs {

margin: 0 calc(10% + 60px);

}

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

[wpseo_breadcrumb]

การเพิ่มเบรดครัมบ์ไปยังเว็บไซต์ WordPress ของคุณโดยใช้เบรดครัมบ์ NavXT

หากคุณไม่ต้องการติดตั้ง Yoast SEO ด้วยเหตุผลบางประการ หรือหากคุณกำลังมองหาตัวเลือกอื่นที่เรียบง่าย ปลั๊กอิน Breadcrumb NavXT เป็นตัวเลือกที่ยอดเยี่ยม

ในการติดตั้งปลั๊กอิน ให้ไปที่แดชบอร์ด WordPress ของคุณและไปที่ Plugins > Add New จากนั้นค้นหาที่เก็บ WordPress สำหรับ "breadcrumb navxt" เมื่อคุณเห็นปลั๊กอินแล้ว ให้คลิกเพื่อติดตั้งและเปิดใช้งาน

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

สำหรับตัวอย่างนี้ ฉันใช้ธีม Divi เพื่อแสดงเบรดครัมบ์ที่ด้านบนสุดของแถบด้านข้าง นี่คือสิ่งที่ดูเหมือนในโพสต์

คล้ายกับตัวอย่าง Yoast Breadcrumb คุณยังสามารถเรียก breadcrumb trail ไปยังไซต์ของคุณได้โดยการเพิ่มโค้ดที่จำเป็นในธีมย่อยของคุณ นี่คือรหัสที่พวกเขาให้ซึ่งเป็นไปตามข้อกำหนด breadcrumblist ของ schema.org:

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php
    if(function_exists('bcn_display'))
    {
            bcn_display();
    }?>
</div>

เนื่องจากฉันใช้ธีม Divi สำหรับตัวอย่างนี้ ฉันจะเพิ่มโค้ดลงในไฟล์ Single.php ของธีม Divi Child ของฉันเหนือแท็กบทความ สิ่งนี้จะแสดง breadcrumbs ที่ด้านบนของโพสต์ทั้งหมดของฉัน

นี่คือลักษณะของโพสต์หลังจากเพิ่มโค้ดแล้ว

การกำหนดค่าเบรดครัมบ์โดยใช้การตั้งค่าปลั๊กอิน

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

จัดแต่งทรงผม Breadcrumbs

หากคุณต้องการจัดรูปแบบเบรดครัมบ์ คุณสามารถกำหนดเป้าหมายคลาสที่เรียกว่า “เบรดครัมบ์” ที่รวมอยู่ในโค้ด

เพียงเพิ่ม CSS ต่อไปนี้ในไฟล์ style.css ของธีมลูกหรือ CSS เพิ่มเติมในเครื่องมือปรับแต่งธีม:

.breadcrumbs {

/*add css to style breadcrumbs here*/

}

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

ความคิดสุดท้าย

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!