Pages

5/17/2012

Code PHP สำหรับสร้าง breadcrumbs บนเวปไซต์


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

ประโยชน์ของ Breadcrumbs
 •ช่วยให้ผู้ใช้สามารถทราบตำแหน่งของเนื้อหาในปัจจุบัน
 •ผู้ใช้สามารถออกไปยังเนื้อหาตำแหน่งอื่นๆ ที่ต้องการได้ง่าย
 •ช่วยให้ Bot เข้าถึงตำแหน่งเนื้อหาได้ง่ายขึ้น

วิธีทำให้ Google แสดงผลแบบ Breadcrumbs

วิธีการทำ Breadcrumbs นั้นควรจะออกแบบ โครงสร้างเว็บไซต์ (Site Structure) ที่ดีก่อน หากเว็บไซต์ไม่ใหญ่มาก โครงสร้างก็จะมีเพียงหมวดหมู่และเนื้อหา ซึ่งเนื้อหาแต่ละอันก็ต้องมีหมวดหมู่สังกัดอยู่

ตัวอย่าง Site Structure



หลังจากที่วาง Site Structure แล้ว ก็นำโครงสร้างดังกล่าว มาออกแบบ Breadcrumbs จากตัวอย่าง Site Structure เมื่อนำมาวาง Path จะได้ดังนี้คือ
 •หน้าแรก > เพลงสตริง > อยู่คนเดียว เบิร์ด ธงไชย
 •หน้าแรก > เพลงลูกทุ่ง > เป็นเพื่อนไม่ได้ หัวใจอยากเป็นแฟน ไผ่ พงศธร
 •หน้าแรก > เพลงสากล > Just The Way You Are Bruno Mars



function breadcrumbs($separator ' » '$home 'Home') {
 
    $path array_filter(explode('/'parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH)));
    $base_url = ($_SERVER['HTTPS'] ? 'https' 'http') . '://' .$_SERVER['HTTP_HOST'] . '/';
    $breadcrumbs array("$home");
 
    $last end(array_keys($path));
 
    foreach ($path AS $x => $crumb) {
        $title = ucwords(str_replace(array('.php''_'), Array(''' '), $crumb));
        if ($x != $last){
            $breadcrumbs[] = '$title';
        }else{
            $breadcrumbs[] = $title;
        }
    }
 
    return implode($separator$breadcrumbs);
}  


ตัว Code ก็แค่นี้ส่วนถ้าจะใช้งานก็เรียก Function จบข่าว


Notices สำหรับใครที่ใช้ Wordpress ก็มี Plug-in ให้ใช้เหมือนกัน
Breadcrumb NavXT กดดาน์โหลดตรงนี้ http://wordpress.org/extend/plugins/breadcrumb-navxt/


No comments:

Post a Comment