ผู้เขียน หัวข้อ: มาทำ breadcrumb ในบล๊อก wordpress ใช้กันเองดีกว่า  (อ่าน 780 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ smf

  • [color=green][i]"ถ้าคุณไม่สามารถอธิบายอย่างง่ายๆ ให้คนอื่นเข้าใจได้แล้วล่ะก็ แสดงว่าคุณยังเข้าใจมันไม่ดีพอ"[/i][/color]
  • Administrator
  • Hero Member
  • *****
  • กระทู้: 1,368
  • พอยท์: 5
    • ดูรายละเอียด
    • pordoo.com
    • อีเมล์
ถ้าพูดถึง breadcrumb หลายๆคน  คงยังงงอยู่ว่ามันคืออะไร  แต่สำหรับหลายคนที่ทำ SEO ก็อาจจะรู้จักกันดี แต่ผมว่าก็อาจไม่ทุกคน เดียววันนี้ผมจะมาทำให้มันกระจ่างถ่องแท้ว่ามันคืออะไร เกี่ยวข้องกับ wordpress และ SEO อย่างไร
 breadcrumb คืออะไร และส่งผลดีต่อ SEO อย่างไร ? breadcrumb ถ้าแปลความหมายตรงตัวก็หมายถึง
 bread = ขนมปัง crumb = เศษ  แปลรวมกันแล้วก็หมายถึง  bread + crumb = เศษขนมปัง
 งงกันเลยดิครับ ที่ผมแปลให้ดูเพื่อให้เห็นรากศัพท์ของมัน ซึ่งมันก็ตลกดี เดียวเรามาดูตัวอย่างภาพของจริงกันก่อนเลยดีกว่า
 
มาทำ breadcrumb ในบล๊อก wordpress height=260รูปเว็บตัวอย่างที่มีการใช้ breadcrumb ในเว็บไซต์
 
google-seo-breadcrumbs height=149รูปผลลัพธ์ที่ใช้ breadcrumb แล้ว google เอาไปแสดงในหน้าผลลัพธ์การค้นหา
ถ้าดูจากตัวอย่าง ผมคิดหลายคนคงเข้าใจบ้างแล้วว่ามันคืออะไร และมีประโยชน์ กับ SEO ของเว็บของเราอย่าง แต่ผมจะขอสรุปสั้นๆนะครับ  breadcrumb ก็คือเครื่องมือที่ใช้นำทางในเว็บของเราให้รู้ว่าตอนนี้เราอยู่ส่วนไหนของ เว็บไซต์ อยู่ลึกจากหน้าหลัก หรือ ว่า homepage เข้ามาเท่าไร ซึ่งแต่ละเว็บไซต์ก็จะไม่เหมือนกัน ขึ้นอยู่กับโครงสร้างของเว็บไซต์แต่ละเว็บ ส่วนที่ส่งผลต่อ SEO นั้นก็คงตามภาพที่ 2 ที่ท่านเห็น google จะนำส่วนของ breadcrumb ไปแสดงที่หน้าของผลการค้นหาด้วย
เราจะแสดง breadcrumb ในเว็บ wordpress ของเราอย่างไร ?
 ก่อนอื่นในเว็บ wordpress ของคุณต้องมีไฟล์ function.php ก่อนถ้าไม่มีให้สร้างไว้ใน โฟล์เดอร์ ธีมที่คุณใช้อยู่ก่อน หลังจากนั้นก็ก็อปปี้ โค็ดด้านล่างไปไว้ใน function.php
โค๊ด: [Select]
function the_breadcrumb() {    echo 'You are here: ';    if (!is_front_page()) {        echo '<a href="';        echo get_option('home');        echo '">Home'; echo "</a> » ";        if (is_category() || is_single()) {            the_category(' ');            if (is_single()) {                echo " » ";                the_title();            }        } elseif (is_page()) {            echo the_title();        }    }    else {        echo 'Home';    }}
อธิบายโค้ด


โค๊ด: [Select]
function the_breadcrumb() {บรรดทัดที่ 1 :
 เป็นการสร้างฟังก์ชัน the_breadcrumb() ขึ้นมา

โค๊ด: [Select]
echo 'You are here: ';บรรดทัดที่ 2 :
 ให้แสดงคำว่า You are here: ขึ้นเริ่มต้น แต่ถ้าไม่ชอบคำนี้ก็เปลี่ยนได้ครับ อาจจะเป็นคำว่า "คุณอยู่ที่" เป็นต้น

โค๊ด: [Select]
if (!is_front_page()) {       echo '<a href="';       echo get_option('home');       echo '">Home';echo "</a> » ";บรรทัดที่ 3 – 7:
 ฟังก์ชัน !is_front_page() เป็นการตรวจสอบว่าไม่ใช่หน้าแรกหรือไม่ ถ้าไม่ใช่หน้าแรกให้แสดงค่าในเงื่อนไข โดยในที่นี้ให้แสดง  ลิงค์หน้าแรกหรือ homepage ไปยังคำว่า Home > ในบรรทัดที่ 6 แล้วลิงค์ URL โดยเรียกใช้ฟังก์ของ wordpress get_option(‘home’) ในบรรทัดที่ 5

โค๊ด: [Select]
if (is_category() || is_single()) {            the_category(' ');            if (is_single()) {                echo " » ";                the_title();            }บรรดทัด 8 -13:
 is_category() เป็นการตรวจสอบว่า แสดงหน้า category อยู่หรือไม่ is_single() เป็นการตรวจสอบว่า แสดงหน้าบทความหรือไม่ ถ้าแสดงหน้า category ให้แสดงชื่อ category ถ้าแสดงหน้าบทความให้แสดง ชื่อ category > และชื่อบทความ

โค๊ด: [Select]
} elseif (is_page()) {        echo the_title();    }}บรรดทัด 14 – 17:
 ตรวจสอบว่าแสดงหน้า page หรือไม่ ถ้าแสดงอยู่ให้แสดง title ของ หน้า page
 
โค๊ด: [Select]
else {        echo 'Home';    }} บรรดทัด 18 – 21:
 ถ้าไม่ใช่หน้า category,บทความ หรือหน้า page ให้แสดงข้อความว่า Home

เสร็จแล้วเมื่อเราต้องการจะแสดง breadcrumb ก็แทรกโค้ดด้านล่าง ลงไปในส่วนที่ต้องการในธีม
โค๊ด: [Select]
<?php the_breadcrumb(); ?>
credit: http://abxnet.com/%E0%B8%A1%E0%B8%B2%E0%B8%97%E0%B8%B3-breadcrumb-%E0%B9%83%E0%B8%99%E0%B8%9A%E0%B8%A5%E0%B9%8A%E0%B8%AD%E0%B8%81-wordpress-%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%81%E0%B8%B1%E0%B8%99/
« แก้ไขครั้งสุดท้าย: 23 เมษายน 2016, 19:41:00 โดย smf »