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

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

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

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

Breadcrumbs ใน WordPress คืออะไร?

Breadcrumbs เป็นคำที่ใช้อธิบายเมนูการนำทางแบบลำดับชั้น เมนูประเภทนี้เกี่ยวข้องกับเส้นทางของลิงก์ ซึ่งไม่เหมือนกับเส้นทางเบรดครัมบ์ที่ฮันเซลกับเกรเทลทิ้งไว้:

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

ประโยชน์ของการเพิ่มเกล็ดขนมปัง

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

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

วิธีเพิ่ม Breadcrumbs ใน WordPress

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

วิธีที่ 1: การใช้ปลั๊กอิน

วิธีที่ง่ายที่สุดในการเพิ่มเบรดครัมบ์ใน WordPress คือการใช้ปลั๊กอินเบรดครัมบ์ มีปลั๊กอินมากมายที่คุณสามารถใช้ได้ รวมถึง Breadcrumb NavXT และ Yoast SEO:

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

ขั้นตอนที่ 1: ดาวน์โหลดปลั๊กอิน Yoast SEO

เนื่องจาก Yoast เป็นปลั๊กอิน SEO จึงมีฟังก์ชันการทำงานที่หลากหลาย ซึ่งรวมถึงการสร้างและจัดรูปแบบการนำทางเบรดครัมบ์

หากต้องการใช้ปลั๊กอินนี้ คุณจะต้องดาวน์โหลดจากไดเรกทอรีปลั๊กอิน WordPress คุณสามารถไปที่หน้า ปลั๊กอิน ของไซต์ของคุณ ค้นหา “Yoast SEO” และติดตั้งและเปิดใช้งานปลั๊กอินได้เหมือนที่อื่นๆ

ขั้นตอนที่ 2: เพิ่มฟังก์ชันให้กับไฟล์ header.php ของคุณ

หลังจากเปิดใช้งานปลั๊กอิน คุณต้องเพิ่มฟังก์ชันลงในไฟล์ header.php ของไซต์ของคุณ หากต้องการเข้าถึงไฟล์นี้ ให้ไปที่ ลักษณะที่ปรากฏ > ตัวแก้ไขธีม แล้วเลือกไฟล์เพื่อเปิด

จากนั้น เพิ่มโค้ดต่อไปนี้ทุกที่ที่คุณต้องการให้เมนูการตั้งค่าเบรดครัมบ์ของคุณปรากฏ:

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

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

คุณยังสามารถเพิ่มฟังก์ชันด้านบนลงในไฟล์ single.php หรือ page.php ของธีมของคุณแทน หากคุณต้องการเปิดใช้งานฟังก์ชัน breadcrumb เพื่อให้ปรากฏที่อื่นในหน้า เพียงตรวจสอบให้แน่ใจว่าคุณเพิ่มไว้ในที่เดียวเท่านั้น

ขั้นตอนที่ 3: เปิดใช้งานการสนับสนุน Breadcrumb

สุดท้าย คุณจะต้องเปิดใช้งานการรองรับเบรดครัมบ์ ใน Yoast SEO หมายถึงการนำทางไปยัง SEO > ลักษณะที่ปรากฏของการค้นหา > Breadcrumbs :

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

วิธีที่ 2: เข้ารหัส Breadcrumbs ของคุณเอง

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

ขั้นตอนที่ 1: สร้างฟังก์ชันโครงกระดูก

หากต้องการเพิ่ม breadcrumbs ลงใน WordPress ด้วยตนเอง คุณจะต้องสร้างฟังก์ชัน PHP ขั้นตอนแรกในการสร้างฟังก์ชันนี้คือการสร้างโครงกระดูก ฟังก์ชันโครงกระดูกของคุณจะต้องมีชื่อเฉพาะ เพื่อหลีกเลี่ยงความขัดแย้งกับฟังก์ชันอื่นๆ

function my_breadcrumbs() {
/* Breadcrumbs code will go here */
}

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

ขั้นตอนที่ 2: เพิ่มกฎพื้นฐาน

หลังจากสร้างโครงกระดูกแล้ว คุณจะต้องเพิ่มกฎให้กับฟังก์ชัน ควรวางกฎไว้ในส่วนเบรดครัมบ์:

/* Change according to your needs */
$show_on_homepage = 0;
$show_current = 1;
$delimiter = '»';
$home_url = 'Home';
$before_wrap = '<span clas="current">';
$after_wrap = '</span>';

/* Don't change values below */
global $post;
$home_url = get_bloginfo( 'url' );

โดยทั่วไป กฎข้างต้นจะใช้ตัวแปร ดังนั้นจึงสามารถเปลี่ยนแปลงได้ในภายหลัง ตัวแปรสองตัวแรกใช้บูลีน โดยที่ "0" เป็นเท็จ และ "1" เป็นจริง

ขั้นตอนที่ 3: เพิ่มคำสั่ง ' if else '

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

/* Check for homepage first! */
if ( is_home() || is_front_page() ) {
$on_homepage = 1;
}
if ( 0 === $show_on_homepage && 1 === $on_homepage ) return;

/* Proceed with showing the breadcrumbs */
$breadcrumbs = '<ol itemscope itemtype="http://schema.org/BreadcrumbList">';

$breadcrumbs .= '<li itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a target="_blank" href="' . $home_url . '">' . $home_url . '</a></li>';

/* Build breadcrumbs here */

$breadcrumbs .= '</ol>';
echo $breadcrumbs;

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

ขั้นตอนที่ 4: เพิ่มฟังก์ชันในส่วนหัวของธีม

เมื่อฟังก์ชั่น breadcrumbs ของคุณเสร็จสมบูรณ์ คุณสามารถเพิ่มไปยังไฟล์ header.php ของเว็บไซต์ของคุณ ไปที่ ลักษณะที่ปรากฏ > ตัวแก้ไขธีม เพื่อเปิดไฟล์ และเพิ่มฟังก์ชันไปที่ส่วนท้ายสุด

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

ปรับแต่งเว็บไซต์ของคุณด้วย WP Engine

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

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