Cara Membuat Breadcrumbs di WordPress tanpa Plugin

Cara Membuat Breadcrumbs Di WordPress Tanpa Bantuan Plugin

Sudah tahu apa itu breadcrumbs? Jika diartikan ke dalam bahasa Indonesia breadcrumbs memiliki arti “remah roti”. Dalam film animasi klasik terutama ketika adegan si tokoh sedang melakukan pencarian, ceceran remah roti sering digambarkan sebagai sebuah petunjuk.

Seperti itu juga lah peran breadcrumbs di dalam sebuah website/blog dan karena itu pula kenapa fungsi ini disebut sebagai breadcrumbs.

Pengertian Breadcrumbs dalam Sebuah Website/Blog

Breadcrumbs adalah fungsi untuk menampilkan hierarki dari halaman yang sedang Anda buka. Contoh, dalam situs pugam.com ini Anda bisa melihat breadcrumbs di atas judul artikel, jika diurut kebelakang maka Anda akan diarahkan ke halaman depan atau home situs ini.

Contoh Breadcrumbs

Cara Menambakan Breadcrumbs di WordPress tanpa Bantuan Plugin

Tidak semua tema di WordPress menyertakan fungsi ini, atau WordPress pun secara default tidak akan menambahkan fungsi ini ke dalam situs Anda. Metode paling umum ketika Anda ingin menambahkan breadcrumbs adalah dengan menggunakan plugin.

Tapi di sini saya akan menunjukkan cara bagaimana menambahkan breadcrumbs di WordPress tanpa bantuan plugin. Mungkin Anda bertanya, kenapa sih repot-repot padahal kan tinggal pakai plugin, beres!?

Kalau saya, ketika saya menggunakan WordPress maka penggunaan plugin itu sebisa mungkin diminimalisir. Banyak plugin yang menyertakan fungsi atau opsi yang sebetulnya tidak benar-benar Anda butuhkan disamping fungsi utamanya.

Sedangkan jika Anda melakukannya secara manual, yaitu dengan membuat script sendiri maka tentu Anda tidak akan menambahkan fungsi/script yang tidak Anda butuhkan bukan?

Untuk script yang akan saya bagikan kali ini sudah mendukung:

  • Parent dan Child Pages
  • Halaman Arsip
  • Custom Post Types
  • Custom Taxonomies

Silakan tambahkan script di bawah ini ke dalam file functions.php dan style.css.

//Breadcrumbs
function custom_breadcrumbs() {

    // Settings
    $separator = '>';
    $breadcrums_id = 'breadcrumbs';
    $breadcrums_class = 'breadcrumbs';
    $home_title = 'Homepage';

    // If you have any custom post types with custom taxonomies, put the taxonomy name below (e.g. product_cat)
    $custom_taxonomy = 'product_cat';

    // Get the query & post information
    global $post, $wp_query;

    // Do not display on the homepage
    if (!is_front_page()) {

        // Build the breadcrums
        echo '<ul id="'.$breadcrums_id.
        '" class="'.$breadcrums_class.
        '">';

        // Home page
        echo '<li class="item-home"><a class="bread-link bread-home" href="'.get_home_url().
        '" title="'.$home_title.
        '">'.$home_title.
        '</a></li>';
        echo '<li class="separator separator-home"> '.$separator.
        ' </li>';

        if (is_archive() && !is_tax() && !is_category() && !is_tag()) {

            echo '<li class="item-current item-archive"><strong class="bread-current bread-archive">'.post_type_archive_title($prefix, false).
            '</strong></li>';

        } else if (is_archive() && is_tax() && !is_category() && !is_tag()) {

            // If post is a custom post type
            $post_type = get_post_type();

            // If it is a custom post type display name and link
            if ($post_type != 'post') {

                $post_type_object = get_post_type_object($post_type);
                $post_type_archive = get_post_type_archive_link($post_type);

                echo '<li class="item-cat item-custom-post-type-'.$post_type.
                '"><a class="bread-cat bread-custom-post-type-'.$post_type.
                '" href="'.$post_type_archive.
                '" title="'.$post_type_object - > labels - > name.
                '">'.$post_type_object - > labels - > name.
                '</a></li>';
                echo '<li class="separator"> '.$separator.
                ' </li>';

            }

            $custom_tax_name = get_queried_object() - > name;
            echo '<li class="item-current item-archive"><strong class="bread-current bread-archive">'.$custom_tax_name.
            '</strong></li>';

        } else if (is_single()) {

            // If post is a custom post type
            $post_type = get_post_type();

            // If it is a custom post type display name and link
            if ($post_type != 'post') {

                $post_type_object = get_post_type_object($post_type);
                $post_type_archive = get_post_type_archive_link($post_type);

                echo '<li class="item-cat item-custom-post-type-'.$post_type.
                '"><a class="bread-cat bread-custom-post-type-'.$post_type.
                '" href="'.$post_type_archive.
                '" title="'.$post_type_object - > labels - > name.
                '">'.$post_type_object - > labels - > name.
                '</a></li>';
                echo '<li class="separator"> '.$separator.
                ' </li>';

            }

            // Get post category info
            $category = get_the_category();

            if (!empty($category)) {

                // Get last category post is in
                $last_category = end(array_values($category));

                // Get parent any categories and create array
                $get_cat_parents = rtrim(get_category_parents($last_category - > term_id, true, ','), ',');
                $cat_parents = explode(',', $get_cat_parents);

                // Loop through parent categories and store in variable $cat_display
                $cat_display = '';
                foreach($cat_parents as $parents) {
                    $cat_display. = '<li class="item-cat">'.$parents.
                    '</li>';
                    $cat_display. = '<li class="separator"> '.$separator.
                    ' </li>';
                }

            }

            // If it's a custom post type within a custom taxonomy
            $taxonomy_exists = taxonomy_exists($custom_taxonomy);
            if (empty($last_category) && !empty($custom_taxonomy) && $taxonomy_exists) {

                $taxonomy_terms = get_the_terms($post - > ID, $custom_taxonomy);
                $cat_id = $taxonomy_terms[0] - > term_id;
                $cat_nicename = $taxonomy_terms[0] - > slug;
                $cat_link = get_term_link($taxonomy_terms[0] - > term_id, $custom_taxonomy);
                $cat_name = $taxonomy_terms[0] - > name;

            }

            // Check if the post is in a category
            if (!empty($last_category)) {
                echo $cat_display;
                echo '<li class="item-current item-'.$post - > ID.
                '"><strong class="bread-current bread-'.$post - > ID.
                '" title="'.get_the_title().
                '">'.get_the_title().
                '</strong></li>';

                // Else if post is in a custom taxonomy
            } else if (!empty($cat_id)) {

                echo '<li class="item-cat item-cat-'.$cat_id.
                ' item-cat-'.$cat_nicename.
                '"><a class="bread-cat bread-cat-'.$cat_id.
                ' bread-cat-'.$cat_nicename.
                '" href="'.$cat_link.
                '" title="'.$cat_name.
                '">'.$cat_name.
                '</a></li>';
                echo '<li class="separator"> '.$separator.
                ' </li>';
                echo '<li class="item-current item-'.$post - > ID.
                '"><strong class="bread-current bread-'.$post - > ID.
                '" title="'.get_the_title().
                '">'.get_the_title().
                '</strong></li>';

            } else {

                echo '<li class="item-current item-'.$post - > ID.
                '"><strong class="bread-current bread-'.$post - > ID.
                '" title="'.get_the_title().
                '">'.get_the_title().
                '</strong></li>';

            }

        } else if (is_category()) {

            // Category page
            echo '<li class="item-current item-cat"><strong class="bread-current bread-cat">'.single_cat_title('', false).
            '</strong></li>';

        } else if (is_page()) {

            // Standard page
            if ($post - > post_parent) {

                // If child page, get parents 
                $anc = get_post_ancestors($post - > ID);

                // Get parents in the right order
                $anc = array_reverse($anc);

                // Parent page loop
                if (!isset($parents)) $parents = null;
                foreach($anc as $ancestor) {
                    $parents. = '<li class="item-parent item-parent-'.$ancestor.
                    '"><a class="bread-parent bread-parent-'.$ancestor.
                    '" href="'.get_permalink($ancestor).
                    '" title="'.get_the_title($ancestor).
                    '">'.get_the_title($ancestor).
                    '</a></li>';
                    $parents. = '<li class="separator separator-'.$ancestor.
                    '"> '.$separator.
                    ' </li>';
                }

                // Display parent pages
                echo $parents;

                // Current page
                echo '<li class="item-current item-'.$post - > ID.
                '"><strong title="'.get_the_title().
                '"> '.get_the_title().
                '</strong></li>';

            } else {

                // Just display current page if not parents
                echo '<li class="item-current item-'.$post - > ID.
                '"><strong class="bread-current bread-'.$post - > ID.
                '"> '.get_the_title().
                '</strong></li>';

            }

        } else if (is_tag()) {

            // Tag page

            // Get tag information
            $term_id = get_query_var('tag_id');
            $taxonomy = 'post_tag';
            $args = 'include='.$term_id;
            $terms = get_terms($taxonomy, $args);
            $get_term_id = $terms[0] - > term_id;
            $get_term_slug = $terms[0] - > slug;
            $get_term_name = $terms[0] - > name;

            // Display the tag name
            echo '<li class="item-current item-tag-'.$get_term_id.
            ' item-tag-'.$get_term_slug.
            '"><strong class="bread-current bread-tag-'.$get_term_id.
            ' bread-tag-'.$get_term_slug.
            '">'.$get_term_name.
            '</strong></li>';

        }
        elseif(is_day()) {

            // Day archive

            // Year link
            echo '<li class="item-year item-year-'.get_the_time('Y').
            '"><a class="bread-year bread-year-'.get_the_time('Y').
            '" href="'.get_year_link(get_the_time('Y')).
            '" title="'.get_the_time('Y').
            '">'.get_the_time('Y').
            ' Archives</a></li>';
            echo '<li class="separator separator-'.get_the_time('Y').
            '"> '.$separator.
            ' </li>';

            // Month link
            echo '<li class="item-month item-month-'.get_the_time('m').
            '"><a class="bread-month bread-month-'.get_the_time('m').
            '" href="'.get_month_link(get_the_time('Y'), get_the_time('m')).
            '" title="'.get_the_time('M').
            '">'.get_the_time('M').
            ' Archives</a></li>';
            echo '<li class="separator separator-'.get_the_time('m').
            '"> '.$separator.
            ' </li>';

            // Day display
            echo '<li class="item-current item-'.get_the_time('j').
            '"><strong class="bread-current bread-'.get_the_time('j').
            '"> '.get_the_time('jS').
            ' '.get_the_time('M').
            ' Archives</strong></li>';

        } else if (is_month()) {

            // Month Archive

            // Year link
            echo '<li class="item-year item-year-'.get_the_time('Y').
            '"><a class="bread-year bread-year-'.get_the_time('Y').
            '" href="'.get_year_link(get_the_time('Y')).
            '" title="'.get_the_time('Y').
            '">'.get_the_time('Y').
            ' Archives</a></li>';
            echo '<li class="separator separator-'.get_the_time('Y').
            '"> '.$separator.
            ' </li>';

            // Month display
            echo '<li class="item-month item-month-'.get_the_time('m').
            '"><strong class="bread-month bread-month-'.get_the_time('m').
            '" title="'.get_the_time('M').
            '">'.get_the_time('M').
            ' Archives</strong></li>';

        } else
        if (is_year()) {

            // Display year archive
            echo '<li class="item-current item-current-'.get_the_time('Y').
            '"><strong class="bread-current bread-current-'.get_the_time('Y').
            '" title="'.get_the_time('Y').
            '">'.get_the_time('Y').
            ' Archives</strong></li>';

        } else if (is_author()) {

            // Auhor archive

            // Get the author information
            global $author;
            $userdata = get_userdata($author);

            // Display author name
            echo '<li class="item-current item-current-'.$userdata - > user_nicename.
            '"><strong class="bread-current bread-current-'.$userdata - > user_nicename.
            '" title="'.$userdata - > display_name.
            '">'.
            'Author: '.$userdata - > display_name.
            '</strong></li>';

        } else if (get_query_var('paged')) {

            // Paginated archives
            echo '<li class="item-current item-current-'.get_query_var('paged').
            '"><strong class="bread-current bread-current-'.get_query_var('paged').
            '" title="Page '.get_query_var('paged').
            '">'.__('Page').
            ' '.get_query_var('paged').
            '</strong></li>';

        } else if (is_search()) {

            // Search results page
            echo '<li class="item-current item-current-'.get_search_query().
            '"><strong class="bread-current bread-current-'.get_search_query().
            '" title="Search results for: '.get_search_query().
            '">Search results for: '.get_search_query().
            '</strong></li>';

        }
        elseif(is_404()) {

            // 404 page
            echo '<li>'.
            'Error 404'.
            '</li>';
        }

        echo '</ul>';

    }

}
#breadcrumbs{
    list-style:none;
    margin:10px 0;
    overflow:hidden;
}
 
#breadcrumbs li{
    display:inline-block;
    vertical-align:middle;
    margin-right:15px;
}
 
#breadcrumbs .separator{
    font-size:18px;
    font-weight:100;
    color:#ccc;
}

Kemudian panggil fungsi di atas dengan menambahkan kode di bawah ini ke dalam file template halaman, tergantung di mana Anda ingin menampilkannya, apakah di single post atau page, setiap tema biasanya memisahkan file template antara single post dan page.

<?php custom_breadcrumbs(); ?>

Berikut adalah contoh ketika saya menerapkannya di situs pugam.com ini, di mana breadcrumbs paling atas dihasilkan dari plugin SEO by Yoast dan breadcrumbs di bawahnya dihasilkan dengan menggunakan script di atas.

Cara Membuat Breadcrumbs Di WordPress Tanpa Bantuan Plugin 1

Bonus

Bagi Anda yang menggunakan plugin SEO by Yoast, Anda dapat mengaktifkan fungsi breadcrumbs ini dengan mudah. Caranya, di menu pengaturan plugin SEO by Yoast, masuk ke bagian Advanced, nanti Anda akan menemukan bagian breadcrumbs.

Cara Membuat Breadcrumbs Di WordPress Tanpa Bantuan Plugin 2

Pada bagian Enable Breadcrumbs, geser toggle menjadi Enabled lalu atur dan sesuaikan opsi-opsi di bawahnya. Terakhir, untuk menampilkannya tambahkan kode berikut di halaman yang Anda inginkan:

<?php if ( function_exists('yoast_breadcrumb') ) {yoast_breadcrumb('<p id="breadcrumbs">','</p>');} ?>
Shares

Komentar

Please Login, Register or comment as Guest.
avatar
1500
  Subscribe  
Pilihan: