GeneratePress 테마: SEO 플러그인을 사용하지 않고 브레드크럼 추가하기

0

워드프레스에서 브레드크럼을 추가하려는 경우 Yoast SEO나 Rank Math와 같은 SEO 플러그인에서 제공하는 브레드크럼 기능을 사용할 수 있습니다. GeneratePress 테마에서는 자체적으로 제공되는 훅(Hook)을 사용하여 테마 파일을 직접 편집하지 않고 브레드크럼을 추가할 수 있습니다.

SEO 플러그인을 사용하지 않고 GeneratePress 테마에 브레드크럼을 추가하는 방법에 대하여 살펴보겠습니다.

GeneratePress 테마: SEO 플러그인을 사용하지 않고 브레드크럼(이동 경로)을 추가하는 방법

브레드크럼의 역할과 장점

브레드크럼(breadcrumbs, 이동 경로)은 웹사이트 상단에 표시되는 내비게이션 기능으로, 사용자가 현재 페이지가 사이트 내에서 어디에 위치하는지 쉽게 파악할 수 있도록 돕습니다. 이 기능은 '홈 » 카테고리 » 현재 글 제목'과 같이 계층적 경로를 텍스트 링크로 보여줍니다. 브레드크럼은 헨젤과 그레텔이 빵 부스러기를 남기며 길을 찾았던 동화에서 이름을 따온 것입니다.

브레드크럼은 사용자 경험(UX)과 검색엔진 최적화(SEO) 모두에 긍정적인 영향을 줍니다. 사용자는 자신의 위치를 쉽게 파악하고, 원하는 상위 카테고리나 이전 단계로 빠르게 이동할 수 있어 사이트 탐색이 수월해집니다. 또한, 브레드크럼은 검색엔진이 사이트 구조를 이해하는 데 도움을 주어, 검색 결과에서 사이트의 노출과 순위 향상에도 긍정적인 역할을 합니다.

브레드크럼을 추가하면 구글 검색 결과에 이동 경로가 표시되어 SEO에 유리하게 작용합니다.

구글 검색 결과에 브레드크럼 표시

워드프레스에서는 SEO 플러그인을 사용하여 쉽게 브레드크럼을 추가할 수 있습니다. 티스토리의 경우 요즘은 기본 스킨에서 이 기능을 제공하는지는 모르겠지만, 오래 전부터는 저는 워드프레스 브레드크럼을 참조하여 코드를 추가하여 티스토리에서 사용하고 있습니다.😄

SEO 플러그인 없이 브레드크럼 추가하기

SEO 플러그인을 사용하지 않고 GeneratePress 테마에서 브레드크럼을 추가하고 싶은 경우 "Adding breadcrumbs without Yoast(Yoast 없이 브레드크럼 추가하기)" 포럼 글에서 GP 테마 개발자가 제시하는 코드를 활용할 수 있습니다.

<?php
function get_breadcrumb() {
    echo '<a href="'.home_url().'" rel="nofollow">Home</a>';
    if ( is_category() || is_single() ){
        echo "  »  ";
        the_category (' • ');
        if ( is_single() ) {
            echo " » ";
            the_title();
        }
    } elseif ( is_page() ) {
        echo " » ";
        echo the_title();
    }
}
get_breadcrumb();
?>

상기의 코드를 활용하여 별도의 플러그인으로 만들거나 차일드 테마의 함수 파일에 추가할 수 있습니다. 가령 아래와 같이 상기 코드를 이용하여 만든 브레드크럼을 이용할 것인지, 아니면 Yoast SEO나 Rank Math에서 제공하는 브레드크럼을 이용할 것인지를 선택하는 플러그인을 만들 수 있습니다.

커스텀 브레드크럼 플러그인

상기 코드를 활용하여 만들고 싶은 경우 다음과 같은 코드를 GP 테마의 자식 테마 함수 파일에 추가할 수 있습니다.


// 브레드크럼 출력 함수 정의 (보안 강화 포함)
function get_breadcrumb() {
    echo '<div id="breadcrumb">';
    echo '<a href="' . esc_url(home_url()) . '" rel="nofollow">Home</a>';

    if (is_category() || is_single()) {
        $categories = get_the_category();
        if (!empty($categories)) {
            echo ' &raquo; ';
            foreach ($categories as $i => $cat) {
                if ($i > 0) echo ' &bull; ';
                echo '<a href="' . esc_url(get_category_link($cat->term_id)) . '">' . esc_html($cat->name) . '</a>';
            }
        }

        if (is_single()) {
            echo ' &raquo; ' . esc_html(get_the_title());
        }
    } elseif (is_page()) {
        echo ' &raquo; ' . esc_html(get_the_title());
    }

    echo '</div>';
}

// GeneratePress hook에 브레드크럼 삽입
add_action('generate_before_entry_title', 'add_custom_breadcrumb_to_single');
function add_custom_breadcrumb_to_single() {
    if (is_single()) {
        get_breadcrumb();
    }
}

위와 같은 코드를 차일드 테마의 함수 파일에 추가하면 개별 포스트에 이동경로가 글 제목 위에 표시됩니다.

모바일 기기에서는 제목이 길어지면 말줄임표 기호가 표시되도록 CSS로 제어할 수 있습니다.

예를 들어, 다음과 같은 CSS 코드를 모양 » 사용자 정의 » 추가 CSS에 추가하거나 차일드 테마의 스타일시트 파일(style.css)에 추가하면 위의 그림과 같이 브레드크럼이 표시됩니다.

/* 자체 브레드크럼 스타일 */
        #breadcrumb {
            font-size: 12px;
            font-weight: 400;
            height: 34px;
            background-color: #595967;
            color: #aaa;
            line-height: 34px;
            padding: 0 15px;
            margin: 0 0 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #breadcrumb a,
        #breadcrumb em {
            display: inline-block;
        }
        #breadcrumb a {
            color: #aaa;
            transition: color .17s;
        }
        #breadcrumb a:hover {
            color: #fff;
        }

스타일은 자유롭게 변경할 수 있습니다.

표시 위치는 제목 위나 제목 아래 등에 표시되도록 지정할 수 있습니다. 위치를 변경하려는 경우 GeneratePress 테마의 훅(Hook)에 대한 글을 참고하시기 바랍니다.

마치며

이상으로 Yoast SEO와 같은 SEO 플러그인을 사용하지 않고 GeneratePress 테마에서 브레드크럼을 추가하는 방법에 대하여 살펴보았습니다.

엘리멘터 프로를 사용하는 경우 GP 테마 개발자가 제시한 코드를 숏코드로 만들어서 싱글 포스트 템플릿의 적당한 곳에 추가하는 것이 가능합니다.

// 브레드크럼 반환 함수 (숏코드용 보안 강화 포함)
function get_breadcrumb_markup() {
    $output = '<div id="breadcrumb">';
    $output .= '<a href="' . esc_url(home_url()) . '" rel="nofollow">Home</a>';

    if (is_category() || is_single()) {
        $categories = get_the_category();
        if (!empty($categories)) {
            $output .= ' &raquo; ';
            foreach ($categories as $i => $cat) {
                if ($i > 0) $output .= ' &bull; ';
                $output .= '<a href="' . esc_url(get_category_link($cat->term_id)) . '">' . esc_html($cat->name) . '</a>';
            }
        }

        if (is_single()) {
            $output .= ' &raquo; ' . esc_html(get_the_title());
        }
    } elseif (is_page()) {
        $output .= ' &raquo; ' . esc_html(get_the_title());
    }

    $output .= '</div>';
    return $output;
}

// 숏코드 등록: [breadcrumb]
add_shortcode('breadcrumb', 'get_breadcrumb_markup');

아바다 테마나 뉴스페이퍼 테마 등 일부 워드프레스 테마에서는 자체 브레드크럼 기능을 제공하기도 합니다. 그런 경우 테마에서 제공하는 기능을 사용하여 간단히 브레드크럼을 추가할 수 있습니다.

일반적으로는 SEO 플러그인에서 제공하는 기능을 사용하면 편리하게 브레드크럼을 추가할 수 있습니다.

참고

댓글 남기기

댓글 남기기