9 กุมภาพันธ์ 2555

มาทำ breadcrumb ในบล๊อก wordpress ใช้กันเองดีกว่า

มาทำ breadcrumb ในบล๊อก wordpress ใช้กันเองดีกว่า

โดย abxnet / โพสต์เมื่อ 16 กรกฎาคม 2011
ถ้าพูดถึง breadcrumb หลายๆคน  คงยังงงอยู่ว่ามันคืออะไร  แต่สำหรับหลายคนที่ทำ SEO ก็อาจจะรู้จักกันดี แต่ผมว่าก็อาจไม่ทุกคน เดียววันนี้ผมจะมาทำให้มันกระจ่างถ่องแท้ว่ามันคืออะไร เกี่ยวข้องกับ wordpress และ SEO อย่างไร

breadcrumb คืออะไร และส่งผลดีต่อ SEO อย่างไร ?

breadcrumb ถ้าแปลความหมายตรงตัวก็หมายถึง
bread = ขนมปัง crumb = เศษ  แปลรวมกันแล้วก็หมายถึง  bread + crumb = เศษขนมปัง
งงกันเลยดิครับ ที่ผมแปลให้ดูเพื่อให้เห็นรากศัพท์ของมัน ซึ่งมันก็ตลกดี เดียวเรามาดูตัวอย่างภาพของจริงกันก่อนเลยดีกว่า

มาทำ breadcrumb ในบล๊อก wordpress
รูปเว็บตัวอย่างที่มีการใช้ breadcrumb ในเว็บไซต์
google-seo-breadcrumbs
รูปผลลัพธ์ที่ใช้ breadcrumb แล้ว google เอาไปแสดงในหน้าผลลัพธ์การค้นหา
ถ้าดูจากตัวอย่าง ผมคิดหลายคนคงเข้าใจบ้างแล้วว่ามันคืออะไร และมีประโยชน์ กับ SEO ของเว็บของเราอย่าง แต่ผมจะขอสรุปสั้นๆนะครับ  breadcrumb ก็คือเครื่องมือที่ใช้นำทางในเว็บของเราให้รู้ว่าตอนนี้เราอยู่ส่วนไหนของ เว็บไซต์ อยู่ลึกจากหน้าหลัก หรือ ว่า homepage เข้ามาเท่าไร ซึ่งแต่ละเว็บไซต์ก็จะไม่เหมือนกัน ขึ้นอยู่กับโครงสร้างของเว็บไซต์แต่ละเว็บ ส่วนที่ส่งผลต่อ SEO นั้นก็คงตามภาพที่ 2 ที่ท่านเห็น google จะนำส่วนของ breadcrumb ไปแสดงที่หน้าของผลการค้นหาด้วย
เราจะแสดง breadcrumb ในเว็บ wordpress ของเราอย่างไร ?
ก่อนอื่นในเว็บ wordpress ของคุณต้องมีไฟล์ function.php ก่อนถ้าไม่มีให้สร้างไว้ใน โฟล์เดอร์ ธีมที่คุณใช้อยู่ก่อน หลังจากนั้นก็ก็อปปี้ โค็ดด้านล่างไปไว้ใน function.php
function the_breadcrumb() {
 echo 'You are here: ';
 if (!is_front_page()) {
  echo 'Home';
 echo " » ";
  if (is_category() || is_single()) {
   the_category(' ');
   if (is_single()) {
    echo " » ";
    the_title();
   }
  } elseif (is_page()) {
   echo the_title();
  }
 }
 else {
  echo 'Home';
 }
}
อธิบายโค้ด
function the_breadcrumb() {
บรรดทัดที่ 1 :
เป็นการสร้างฟังก์ชัน the_breadcrumb() ขึ้นมา
echo 'You are here: ';
บรรดทัดที่ 2 :
ให้แสดงคำว่า You are here: ขึ้นเริ่มต้น แต่ถ้าไม่ชอบคำนี้ก็เปลี่ยนได้ครับ อาจจะเป็นคำว่า "คุณอยู่ที่" เป็นต้น
if (!is_front_page()) {
  echo 'Home';
 echo " » ";
บรรทัดที่ 3 – 7:
ฟังก์ชัน !is_front_page() เป็นการตรวจสอบว่าไม่ใช่หน้าแรกหรือไม่ ถ้าไม่ใช่หน้าแรกให้แสดงค่าในเงื่อนไข โดยในที่นี้ให้แสดง  ลิงค์หน้าแรกหรือ homepage ไปยังคำว่า Home > ในบรรทัดที่ 6 แล้วลิงค์ URL โดยเรียกใช้ฟังก์ของ wordpress get_option(‘home’) ในบรรทัดที่ 5
if (is_category() || is_single()) {
   the_category(' ');
   if (is_single()) {
    echo " » ";
    the_title();
   }
บรรดทัด 8 -13:
is_category() เป็นการตรวจสอบว่า แสดงหน้า category อยู่หรือไม่ is_single() เป็นการตรวจสอบว่า แสดงหน้าบทความหรือไม่ ถ้าแสดงหน้า category ให้แสดงชื่อ category ถ้าแสดงหน้าบทความให้แสดง ชื่อ category > และชื่อบทความ
} elseif (is_page()) {
   echo the_title();
  }
 }
บรรดทัด 14 – 17:
ตรวจสอบว่าแสดงหน้า page หรือไม่ ถ้าแสดงอยู่ให้แสดง title ของ หน้า page
else {
  echo 'Home';
 }
}
บรรดทัด 18 – 21:
ถ้าไม่ใช่หน้า category,บทความ หรือหน้า page ให้แสดงข้อความว่า Home
เสร็จแล้วเมื่อเราต้องการจะแสดง breadcrumb ก็แทรกโค้ดด้านล่าง ลงไปในส่วนที่ต้องการในธีม




ไม่มีความคิดเห็น: