คู่มือพื้นฐานในการเพิ่ม WordPress Breadcrumbs
เผยแพร่แล้ว: 2021-11-26
ต้องการลดอัตราตีกลับ ปรับปรุงการนำทางเว็บไซต์ เพิ่ม SEO และนำเสนอประสบการณ์ผู้ใช้ที่น่าทึ่งใช่หรือไม่ แน่นอนคุณทำ!
แต่ถ้าคุณไม่ได้ใช้เบรดครัมบ์เป็นส่วนหนึ่งของเว็บไซต์ของคุณ แสดงว่าคุณกำลังพลาดโอกาสดีๆ เบรดครัมบ์ช่วยปรับปรุงการนำทางของไซต์ด้วยการช่วยให้ผู้ใช้เดินทางผ่านหน้าเว็บของคุณได้ง่ายขึ้น (ผ่านร่องรอยของ 'เบรดครัมบ์')
มีโอกาสที่คุณจะได้พบกับ breadcrumbs หลายครั้ง มักจะปรากฏอยู่ใต้เมนูการนำทางของไซต์ 
ที่มา: dedoles.se
วันนี้เราจะมาแบ่งปันเคล็ดลับและกลเม็ดเด็ด ๆ ของเราที่จะช่วยให้คุณเพิ่มเบรดครัมบ์ของ WordPress ลงในไซต์ของคุณ และเริ่มปรับปรุงประสบการณ์ของผู้ใช้เหล่านั้น
เกล็ดขนมปังคืออะไร?
ลืมทองและกรอบขนมปังปิ้งใหม่หรือ panko เกล็ดขนมปังเหล่านั้นอาจอร่อยมาก แต่นั่นไม่ใช่สิ่งที่เราจะมาพูดถึงในวันนี้ ไม่ เรามาที่นี่เพื่อหารือเกี่ยวกับ breadcrumbs ออนไลน์ ซึ่งเป็นอาหารชิ้นเล็กๆ ที่มีประโยชน์ใช้สอยมากกว่า (และกินได้น้อยกว่า) โดยสิ้นเชิง
เบรดครัมบ์เป็นลิงก์การนำทางโดยพื้นฐาน เบรดครัมบ์เชื่อมต่อเพื่อสร้างเส้นทางข้อความผ่านหน้าของเว็บไซต์ พวกเขาติดตามตำแหน่งที่ผู้ใช้อยู่บนเว็บไซต์ที่สัมพันธ์กับหน้าแรก และมักจะอยู่ที่ด้านบนสุด ใต้แถบนำทาง
เบรดค รัมบ์ ช่วยปรับปรุงประสบการณ์ผู้ใช้ (UX) ของไซต์ของคุณโดยทำให้ผู้ใช้สามารถย้อนกลับในการนำทางได้ง่ายขึ้น พวกเขายังสนับสนุนการจัดอันดับ SEO โดยการช่วยให้เครื่องมือค้นหานำทางผ่านหน้าเว็บและโครงสร้างลิงก์ของคุณ (เพิ่มเติมเกี่ยวกับเรื่องนี้ในภายหลัง)
ทำความเข้าใจว่า Breadcrumbs ต่างๆ ทำงานอย่างไร
สามารถใช้เบรดครัมบ์กับเว็บไซต์ได้หลายสาเหตุ ตัวอย่างเช่น สำหรับเว็บไซต์ที่สร้างใน WordPress มีเบรดครัมบ์สามประเภทที่สามารถรวมเข้ากับการนำทางของไซต์ได้ โดยอิงตามลำดับชั้น อิงตามแอตทริบิวต์ และอิงตามประวัติ
เบรดครัมบ์ตามลำดับชั้น
นี่คือเบรดครัมบ์แบบคลาสสิกของคุณ เบรดครัมบ์แบบลำดับชั้นจะแสดงให้ผู้ใช้เว็บไซต์ทราบถึงตำแหน่งที่พวกเขาอยู่ในโครงสร้างโดยรวมของไซต์ของคุณที่สัมพันธ์กับโฮมเพจ ซึ่งช่วยให้ผู้เยี่ยมชมสามารถนำทางไปยังหมวดหมู่ต่างๆ และค้นหาผลิตภัณฑ์ที่เกี่ยวข้องได้อย่างง่ายดาย
เกล็ดขนมปังตามแอตทริบิวต์
เบรดครัมบ์เหล่านี้มักพบเป็นส่วนหนึ่งของไซต์อีคอมเมิร์ซ เบรดครัมบ์ตามแอตทริบิวต์แสดงรายการแอตทริบิวต์ที่ผู้ใช้ค้นหาเพื่อเข้าถึงผลิตภัณฑ์หรือหน้าที่พวกเขากำลังดูอยู่
ตัวอย่างเช่น ลองจินตนาการว่าคุณกำลังนำทางผ่านร้านค้าแฟชั่นออนไลน์ บางครั้ง คุณอาจถูกขอให้ปรับแต่งการค้นหาในแง่ของคุณลักษณะของผลิตภัณฑ์ (เช่น ความพอดี สไตล์ สี ขนาด) คุณลักษณะที่คุณเลือกจะประกอบขึ้นเป็นเส้นทางแสดงเส้นทางของคุณ
ที่มาของภาพ
เกล็ดขนมปังตามประวัติศาสตร์
เบรดครัมบ์เหล่านี้เรียงตามลำดับเวลา พวกเขาได้รับคำสั่งตามสิ่งที่คุณทำบนเว็บไซต์ เบรดครัมบ์ตามประวัตินำผู้ใช้กลับมาผ่านหน้าที่พวกเขาได้สำรวจไปแล้ว เบรดครัมบ์เหล่านี้ทำหน้าที่คล้ายกับปุ่ม 'ย้อนกลับ' บนเบราว์เซอร์ของคุณเพื่อช่วยให้ผู้ใช้กลับไปยังหน้าที่เข้าชมแล้ว
ประโยชน์ของเบรดครัมบ์
เกล็ดขนมปังมีประโยชน์อย่างเหลือเชื่อสำหรับ UX และ SEO ของเว็บไซต์ ด้วยเหตุ นี้ บริการการตลาดเนื้อหา จำนวนมาก จึงส่งเสริมประโยชน์ของเบรดครัมบ์ซึ่งเป็นส่วนหนึ่งของกลยุทธ์การตลาดดิจิทัลที่มีประสิทธิภาพ
เบรดครัมบ์ให้ผู้ใช้นำทางผ่านเว็บไซต์ได้ง่ายขึ้นและช่วยให้โปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหาเข้าใจเนื้อหาของเว็บไซต์ นั่นหมายถึงการปรับปรุงอันดับของเสิร์ชเอ็นจิ้น อัตราตีกลับที่ต่ำลง และประสบการณ์ของผู้ใช้ที่ดีขึ้นในทุกด้าน
การนำทางไซต์ที่ง่ายขึ้นสำหรับผู้เยี่ยมชม ซึ่งหมายถึงอัตราการตีกลับที่ต่ำลง
ในฐานะผู้เยี่ยมชมเว็บไซต์ ไม่มีอะไรน่ารำคาญไปกว่าการพบว่าคุณได้นำทางไปยังหน้าผลิตภัณฑ์ที่คุณไม่ได้สนใจแม้แต่น้อย ณ จุดนี้ คุณอาจต้องการทำสิ่งใดสิ่งหนึ่งจากสองสิ่งนี้
- กลับไปที่เครื่องมือค้นหาและเริ่มต้นใหม่
- กลับไปที่หน้าแรกและลองค้นหาหน้าที่คุณกำลังค้นหา
การเพิ่มเบรดครัมบ์ลงในไซต์ของคุณ ผู้ใช้จะไม่ค่อยมีแนวโน้มที่จะตีกลับ และจะพบว่าค้นหาสิ่งที่ต้องการได้ง่ายขึ้นมาก เบรดครัมบ์ช่วยให้ผู้เยี่ยมชมไซต์สามารถติดตามการเดินทางของผู้ใช้และค้นหาหน้าที่พวกเขาต้องการได้อย่างรวดเร็ว
โปรแกรมรวบรวมข้อมูลเว็บไซต์มีเวลาในการจัดอันดับหน้าที่ถูกต้องได้ง่ายขึ้น
เบรดครัมบ์ช่วยส่งเสริม SEO ของไซต์โดยสื่อสารกับเครื่องมือค้นหาว่าหน้าของไซต์เกี่ยวกับอะไร Google ใช้ชื่อไซต์และเส้นทางในตัวอย่างข้อมูลการค้นหา ซึ่งหมายความว่าเป็นหนึ่งในสิ่งแรกที่คุณจะเห็นเมื่อ Google แสดงรายการผลลัพธ์ ในทางกลับกัน ช่วยให้ผู้ค้นหาเห็นว่าพวกเขาจะไปที่ใดเมื่อคลิก
ตัวอย่างเช่น หากคุณค้นหา 'เบรดครัมบ์คืออะไร' ใน Google ผลการค้นหาของคุณจะแสดง URL, breadcrumbs และชื่อของแต่ละเว็บไซต์
สามวิธีในการเพิ่มเบรดครัมบ์ไปยังไซต์ WordPress ของคุณ
ดังนั้นคุณจะเพิ่ม breadcrumbs ให้กับไซต์ WordPress ของคุณได้อย่างไร? มีเส้นทางที่แตกต่างกันสองสามเส้นทางที่คุณสามารถใช้ เราจะแนะนำวิธีการต่างๆ ทีละขั้นตอนให้คุณทราบ
เลือกธีม WordPress ที่มีเบรดครัมบ์
วิธีที่ง่ายที่สุดในการเพิ่มเบรดครัมบ์ลงในไซต์ WordPress ของคุณคือการติดตั้งธีมที่มีธีมอยู่แล้ว หากคุณพบสิ่งที่เข้ากันได้ดีกับการสร้างแบรนด์ของคุณและมี breadcrumbs ที่มีประโยชน์ด้วย ถ้าอย่างนั้นคุณก็พร้อมแล้ว
ใช้เบรดครัมบ์ผ่านโค้ดที่กำหนดเอง
อีกวิธีในการเพิ่มเบรดครัมบ์ลงในไซต์ WordPress ของคุณคือการติดตั้งผ่านโค้ดที่กำหนดเอง สมมติว่าคุณ พบธีมบน WordPress แต่ไม่มีเบรดครัมบ์รวมอยู่ด้วย ด้วยประสบการณ์การเขียนโค้ดพื้นฐานเพียงเล็กน้อย คุณสามารถเพิ่มได้ด้วยตนเองโดยแก้ไขไฟล์ function.php ในธีมที่คุณเลือก
นี่คือสิ่งที่คุณต้องทำ:
- เชื่อมต่อ WordPress กับเซิร์ฟเวอร์ของคุณโดยใช้ไซต์ FTP เช่น FileZilla FTP
- คลิกโฟลเดอร์ public_html ในไคลเอนต์ FileZilla (ซึ่งรวมถึงไฟล์ในเว็บไซต์ของคุณด้วย)
- คลิกโฟลเดอร์ wp-content
- คลิกไดเร็กทอรีธีมและเลือกโฟลเดอร์ธีมปัจจุบันของคุณ
- คลิกที่โฟลเดอร์ functions.php จากนั้นเลือก ดู/แก้ไข
- ใส่รหัสด้านล่างเพื่อลงทะเบียนฟังก์ชันการแสดงเส้นทางบนไซต์ของคุณ
- บันทึกการเปลี่ยนแปลงและอัปโหลดไฟล์ที่อัปเดตเมื่อได้รับแจ้ง
ใช้ปลั๊กอินเพื่อเพิ่มเบรดครัมบ์
วิธีที่สามและเป็นขั้นตอนสุดท้ายในการเพิ่มเบรดครัมบ์ไปยังไซต์ WordPress ของคุณคือการใช้ปลั๊กอิน คุณจะต้องใช้เครื่องมือผู้เชี่ยวชาญเพื่อทำสิ่งนี้ เช่น Yoast SEO, Breadcrumb NavXT หรือปลั๊กอิน WooCommerce Breadcrumbs
การใช้ปลั๊กอิน Yoast SEO
Yoast เป็นหนึ่งใน ปลั๊กอิน SEO ที่รู้จักกันดีที่สุดสำหรับ WordPress และสามารถใช้เพื่อเปิดใช้งานเบรดครัมบ์บนเว็บไซต์ของคุณได้ หากคุณใช้ Yoast สำหรับ SEO อยู่แล้ว นี่คือทางออกที่ดีที่สุดของคุณ แม้ว่าจะมีตัวเลือกอื่นๆ ให้เลือก (ซึ่งเราจะพูดถึงในอีกสักครู่)
หากต้องการเพิ่ม breadcrumbs โดยใช้ Yoast ให้ทำตามขั้นตอนเหล่านี้:
- ติดตั้งปลั๊กอิน Yoast SEO จากแดชบอร์ด WordPress ของคุณ เช่น ปลั๊กอิน > เพิ่มใหม่ > พิมพ์ 'Yoast' ลงในแถบค้นหา > ติดตั้ง
- ในปลั๊กอิน Yoast ให้ไปที่ลักษณะที่ปรากฏ
- คลิกที่ตัวแก้ไขธีม
- เลือกเทมเพลตชื่อ header.php
- ใส่ข้อมูลโค้ดด้านล่าง
- บันทึกการเปลี่ยนแปลงของคุณโดยคลิกที่ "อัปเดตไฟล์"
การใช้ปลั๊กอิน Breadcrumb NavXT
อีกทางเลือกหนึ่งในการใช้ Yoast คือ Breadcrumb NavXT ปลั๊กอินนี้สามารถติดตั้งบนไซต์ของคุณได้เช่นเดียวกับ Yoast เมื่อติดตั้งแล้ว เพียงทำตามขั้นตอนด้านล่างเพื่อใช้เบรดครัมบ์
- ในปลั๊กอิน NavXT ให้ไปที่การตั้งค่า
- คลิกที่เบรดครัมบ์ NavXT
- เลือกจากตัวเลือกการนำทางเบรดครัมบ์สี่ตัวเลือก
- กำหนดค่าปลั๊กอินและบันทึกการเปลี่ยนแปลง
- นำทางไปยังลักษณะที่ปรากฏ
- คลิกที่ตัวแก้ไขธีม
- เลือกไฟล์ header.php
- ใส่รหัสด้านล่าง
- คลิกอัปเดตไฟล์
การใช้ปลั๊กอิน Woocommerce Breadcrumbs
สุดท้าย หากคุณเป็นผู้ใช้ Woocommerce คุณสามารถใช้ปลั๊กอิน Woocommerce Breadcrumbs เพื่อเพิ่มฟังก์ชัน breadcrumb ให้กับเว็บไซต์ของคุณได้
นี่คือสิ่งที่คุณต้องทำ:
- ติดตั้งปลั๊กอิน Woocommerce Breadcrumbs บนเว็บไซต์ WordPress ของคุณ
- ไปที่การตั้งค่า
- คลิกเกล็ดขนมปัง WC
- ทำเครื่องหมายที่ช่องถัดจากเปิดใช้งานเบรดครัมบ์
- คลิกบันทึกการ เปลี่ยนแปลง
ที่มา: fixrunner.com
ปรับแต่ง WordPress Breadcrumbs ด้วย CSS
คุณสามารถจัดรูปแบบเบรดครัมบ์ได้โดยใช้ CSS ที่กำหนดเองเพื่อให้เข้ากับสไตล์ที่เป็นเอกลักษณ์ของเว็บไซต์ของคุณ หากคุณกำลังเข้ารหัสเบรดครัมบ์ด้วยตัวเอง คุณจะต้องคิดเกี่ยวกับสุนทรียศาสตร์ที่คุณต้องการ
ในการทำเช่นนี้ คุณจะต้องเพิ่ม CSS ที่กำหนดเองเพื่อจัดรูปแบบเบรดครัมบ์ของคุณภายในสไตล์ชีตของธีมที่มีอยู่หรือจากภายใน WordPress Customizer ที่นี่ คุณจะสามารถปรับแต่งการออกแบบให้กับเบรดครัมบ์ของคุณได้ รวมถึงการปรับแบบอักษร สี ระยะขอบ ไอคอน และเส้นขอบ
สองวิธีในการลบเบรดครัมบ์ออกจากเว็บไซต์ของคุณ
เกล็ดขนมปังมีข้อดีที่ชัดเจนในการช่วยนำทางเว็บไซต์และ SEO เพื่อการเติบโต แต่ไม่ใช่ทุกคนที่ต้องการรวมไว้ หากคุณตัดสินใจว่าต้องการลบเบรดครัมบ์ของเว็บไซต์ คุณสามารถทำได้ 2 วิธี
สลับสวิตช์ปิดการใช้งาน
วิธีแรกในการลบเบรดครัมบ์คือเพียงสลับสวิตช์ในปลั๊กอินของคุณเพื่อปิดใช้งานเบรดครัมบ์หรือปิดใช้งานปลั๊กอินทั้งหมด
ลบรหัสที่ป้อนด้วยตนเอง
อีกทางเลือกหนึ่งคือการลบรหัสที่ป้อนด้วยตนเอง เพียงกลับไปที่โฟลเดอร์ header.php ของเว็บไซต์และลบบรรทัดของโค้ดที่เพิ่ม breadcrumbs ให้กับเว็บไซต์ของคุณ
ทิ้งรอยเกล็ดขนมปังไว้
เกล็ดขนมปังเป็นส่วนเสริมที่ยอดเยี่ยมสำหรับเว็บไซต์ใดๆ สิ่งเหล่านี้ช่วยให้ผู้ใช้นำทางผ่านหน้าเว็บและโปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหาเพื่อให้เข้าใจเนื้อหาของคุณดีขึ้นเล็กน้อย
ยิ่งไปกว่านั้น การรวมเบรดครัมบ์ลงในไซต์ของคุณค่อนข้างตรงไปตรงมา เทมเพลต WordPress บางตัวมีเบรดครัมบ์รวมอยู่ด้วย
หากคุณไม่ได้เบรดครัมบ์แล้ว คุณจะรออะไรอีก?