브레드크럼 만들어 적용하기 – 워드프레스 강좌

이번에는 워드프레스에서 만들어놓은 브레드 크럼 함수를 활용해서 웹사이트에 적용해볼게요.

정확히 말하면, 코드를 처음부터 다 짜는게 아니라, 있는 코드에 대해 짧게 설명드리고, 일부 수정할 수 있게 주석을 달아놨습니다. 원하는 위치에 어떻게 넣고 스타일링을 하는지를 배워볼거예요.

(처음부터 다 짜면 너무 오래걸리고 어렵습니다.)

1. 브레드크럼 함수 소개

브레드크럼(Breadcrumb)은 사용자가 현재 웹사이트 내에서 위치한 페이지의 경로를 보여주는 내비게이션 요소입니다. 이를 통해 사용자는 웹사이트의 계층 구조를 쉽게 이해하고, 이전 페이지로 돌아갈 수 있습니다.

2. 브레드크럼 함수 코드

다음은 브레드크럼을 생성하는 함수입니다. 이 코드를 functions.php 파일에 추가합니다.

// 브레드 크럼스
function supernormal_breadcrumbs()
{
    $text['home'] = _x('홈', '홈', 'supernormal'); // 'Home' 링크의 텍스트
    $text['category'] = __('%s', 'supernormal'); // 카테고리 페이지의 텍스트
    $text['search'] = __('검색 "%s" 쿼리', 'supernormal'); // 검색 결과 페이지의 텍스트
    $text['tag'] = __('태그 "%s"', 'supernormal'); // 태그 페이지의 텍스트
    $text['tax'] = '%s'; // 태그 페이지의 텍스트
    $text['author'] = __('작성자 %s', 'supernormal'); // 작성자 페이지의 텍스트
    $text['404'] = __('에러 404', 'supernormal'); // 404 페이지의 텍스트

    $show_current = 1; // 1 - 브레드크럼에 현재 포스트/페이지/카테고리 제목을 표시, 0 - 표시 안 함
    $show_on_home = 0; // 1 - 홈페이지에 브레드크럼 표시, 0 - 표시 안 함
    $show_home_link = 1; // 1 - '홈' 링크 표시, 0 - 표시 안 함
    $show_title = 1; // 1 - 링크의 제목을 표시, 0 - 표시 안 함
    $delimiter = '<span class="arrow"></span> '; // 브레드크럼 간 구분자
    $before = '<span class="current">'; // 현재 브레드크럼 앞의 태그
    $after = '</span>'; // 현재 브레드크럼 뒤의 태그

    // 전역 변수와 홈페이지 링크, 각 링크의 속성을 설정합니다.
    global $post;
    $home_link = home_url('/');
    $link_before = '<span>';
    $link_after = '</span>';
    $link_attr = ' rel="v:url" property="v:title"';
    $link = $link_before . '<a' . $link_attr . ' href="%1$s">%2$s</a>' . $link_after;
    if (isset($post)) {
        $parent_id = $parent_id_2 = $post->post_parent;
    }
    $frontpage_id = get_option('page_on_front');

    // 홈페이지 또는 메인 페이지인 경우
    if (is_home() || is_front_page()) {
        if ($show_on_home == 1)
            echo '<div class="breadcrumb"><div class="flex-wrap"></div><span><a href="' . $home_link . '">' . $text['home'] . '</a></span></div></div>';
    } else {

        echo '<div class="breadcrumb"><div class="flex-wrap">';
        // $show_on_home이 1인 경우 실행인데 현재는 0이라서 실행 안함
        if ($show_home_link == 1) {
            echo '<span><a href="' . $home_link . '" rel="v:url" property="v:title">' . $text['home'] . '</a></span>';
            if ($frontpage_id == 0 || $parent_id != $frontpage_id)
                echo $delimiter;
        }
        // 카테고리 페이지인 경우
        if (is_category()) {
            $this_cat = get_category(get_query_var('cat'), false);
            if ($this_cat->parent != 0) {
                $cats = get_category_parents($this_cat->parent, TRUE, $delimiter);
                if ($show_current == 0)
                    $cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats);
                $cats = str_replace('<a', $link_before . '<a' . $link_attr, $cats);
                $cats = str_replace('</a>', '</a>' . $link_after, $cats);
                if ($show_title == 0)
                    $cats = preg_replace('/ title="(.*?)"/', '', $cats);
                echo $cats;
            }
            if ($show_current == 1)
                echo $before . sprintf($text['category'], single_cat_title('', false)) . $after;
            // 태그 페이지인 경우
        } elseif (is_tax()) {
            $this_cat = get_category(get_query_var('cat'), false);
            if ($this_cat->parent != 0) {
                $cats = get_category_parents($this_cat->parent, TRUE, $delimiter);
                $cats = str_replace('<a', $linkBefore . '<a' . $linkAttr, $cats);
                $cats = str_replace('</a>', '</a>' . $linkAfter, $cats);
                echo $cats;
            }
            echo $before . sprintf($text['tax'], single_cat_title('', false)) . $after;
            // 검색 결과 페이지인 경우
        } elseif (is_search()) {
            echo $before . sprintf($text['search'], get_search_query()) . $after;
            // 날짜별 아카이브 페이지인 경우 (예: 특정 년/월/일의 글 목록)
        } elseif (is_day()) {
            echo sprintf($link, get_year_link(get_the_time('Y')), get_the_time('Y')) . $delimiter;
            echo sprintf($link, get_month_link(get_the_time('Y'), get_the_time('m')), get_the_time('F')) . $delimiter;
            echo $before . get_the_time('d') . $after;
        } elseif (is_month()) {
            echo sprintf($link, get_year_link(get_the_time('Y')), get_the_time('Y')) . $delimiter;
            echo $before . get_the_time('F') . $after;
        } elseif (is_year()) {
            echo $before . get_the_time('Y') . $after;
            // 특정 포스트 타입의 글 목록 페이지인 경우
        } elseif (is_single() && !is_attachment()) {
            if (get_post_type() != 'post') {
                $post_type = get_post_type_object(get_post_type());
                $slug = $post_type->rewrite;
                printf($link, $home_link . '/' . $slug['slug'] . '/', $post_type->labels->singular_name);
                if ($show_current == 1)
                    echo $delimiter . $before . get_the_title() . $after;
            } else {
                $cat = get_the_category();
                $cat = $cat[0];
                $cats = get_category_parents($cat, TRUE, $delimiter);
                if ($show_current == 0)
                    $cats = preg_replace("#^(.+)$delimiter$#", "$1", $cats);
                $cats = str_replace('<a', $link_before . '<a' . $link_attr, $cats);
                $cats = str_replace('</a>', '</a>' . $link_after, $cats);
                if ($show_title == 0)
                    $cats = preg_replace('/ title="(.*?)"/', '', $cats);
                echo $cats;
                if ($show_current == 1)
                    echo $before . get_the_title() . $after;
            }
        } elseif (!is_single() && !is_page() && get_post_type() != 'post' && !is_404()) {
            $post_type = get_post_type_object(get_post_type());
            echo $before . $post_type->labels->singular_name . $after;
            // 첨부 파일 페이지인 경우
        } elseif (is_attachment()) {
            $parent = get_post($parent_id);
            $cat = get_the_category($parent->ID);
            $cat = $cat[0];
            $cats = get_category_parents($cat, TRUE, $delimiter);
            $cats = str_replace('<a', $link_before . '<a' . $link_attr, $cats);
            $cats = str_replace('</a>', '</a>' . $link_after, $cats);
            if ($show_title == 0)
                $cats = preg_replace('/ title="(.*?)"/', '', $cats);
            echo $cats;
            printf($link, get_permalink($parent), $parent->post_title);
            if ($show_current == 1)
                echo $delimiter . $before . get_the_title() . $after;
            // 단독 페이지인 경우 (예: '소개' 페이지)
        } elseif (is_page() && !$parent_id) {
            if ($show_current == 1)
                echo $before . get_the_title() . $after;

        } elseif (is_page() && $parent_id) {
            if ($parent_id != $frontpage_id) {
                $breadcrumbs = array();
                while ($parent_id) {
                    $page = get_page($parent_id);
                    if ($parent_id != $frontpage_id) {
                        $breadcrumbs[] = sprintf($link, get_permalink($page->ID), get_the_title($page->ID));
                    }
                    $parent_id = $page->post_parent;
                }
                $breadcrumbs = array_reverse($breadcrumbs);
                for ($i = 0; $i < count($breadcrumbs); $i++) {
                    echo $breadcrumbs[$i];
                    if ($i != count($breadcrumbs) - 1)
                        echo $delimiter;
                }
            }
            // 브레드크럼에 현재 포스트/페이지/카테고리 제목을 표시, 0 - 표시 안 함
            if ($show_current == 1) {
                if ($show_home_link == 1 || ($parent_id_2 != 0 && $parent_id_2 != $frontpage_id))
                    echo $delimiter;
                echo $before . get_the_title() . $after;
            }
        } elseif (is_tag()) {
            echo $before . sprintf($text['tag'], single_tag_title('', false)) . $after;
            // 작성자 아카이브 페이지인 경우
        } elseif (is_author()) {
            global $author;
            $userdata = get_userdata($author);
            echo $before . sprintf($text['author'], $userdata->display_name) . $after;
            // 404 에러 페이지인 경우
        } elseif (is_404()) {
            echo $before . $text['404'] . $after;
        }

        if (get_query_var('paged')) {
            if (is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author())
                echo ' (';
            echo __('페이지', 'supernormal') . ' ' . get_query_var('paged');
            if (is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author())
                echo ')';
        }
        echo '</div></div><!-- .breadcrumbs -->';
    }
}