GeneratePress 테마를 사용하는 분들 중에서 별도의 유료 플러그인이나 추가적인 플러그인 설치 없이, 기본 테마를 활용해 Breadcrumbs(탐색경로)를 표시하는 방법을 알아보려고 합니다. 이를 위해서는 테마의 일부 코드를 수정해야 하므로, 변경 사항이 테마 업데이트 시에도 안전하게 유지될 수 있도록 반드시 Child Theme(자식 테마)를 설치한 후 파일을 수정하는 것이 권장됩니다. Child Theme를 설정하면 기본 테마의 코드를 변경하지 않고도 커스터마이징이 가능하며, 나중에 원활한 유지보수에도 큰 도움이 됩니다.
Function.php 수정
아래는 제가 실제 사용한 코드 입니다.
//저작권 설정:
테마 하단의 footer 부분을 수정 할 수 있습니다.
// Breadcrumbs 함수:
이 부분이 탐색경로를 나타내는 브레드크럼스 부분입니다.
==== function.php ====
<?php
// 부모 테마 스타일 로드
function my_theme_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
// 저작권 설정
add_filter('generate_copyright', 'tu_custom_copyright');
function tu_custom_copyright() {
echo '©' . date("Y") . ' 전국 꽃배달 서비스 플라워아이. Developed by <a href="https://url.kr/generatepress" target="_blank" rel="noopener noreferrer">GeneratePress</a>';
}
// Breadcrumbs 함수
function custom_breadcrumbs() {
global $post;
if (is_front_page()) {
return;
}
$output = '<a href="' . esc_url(home_url()) . '">홈</a>';
if (is_single()) {
$categories = get_the_category();
if ($categories) {
$output .= ' > ';
$output .= '<a href="' . esc_url(get_category_link($categories[0]->term_id)) . '">'
. esc_html($categories[0]->name) . '</a>';
}
$output .= ' > ' . get_the_title();
}
elseif (is_page()) {
$output .= ' > ' . get_the_title();
}
elseif (is_category()) {
$output .= ' > 카테고리: ' . single_cat_title('', false);
}
elseif (is_tag()) {
$output .= ' > 태그: ' . single_tag_title('', false);
}
elseif (is_search()) {
$output .= ' > 검색결과: ' . get_search_query();
}
elseif (is_404()) {
$output .= ' > 페이지를 찾을 수 없습니다';
}
return $output;
}
// Breadcrumbs 출력
add_action('generate_after_header', function() {
if (!is_front_page()) {
echo '<div class="grid-container grid-parent"><p id="breadcrumbs">';
echo custom_breadcrumbs();
echo '</p></div>';
}
}, 5);
========
style.css 수정
아래 스타일은 선택 사항으로 없어도 되고 필요 시 수정해서 사용하면 됩니다.
/* 탐색경로 스타일 */
#breadcrumbs {
margin: 10px 0;
padding: 5px 0;
font-size: 14px;
color: #666;
}
#breadcrumbs a {
color: #1e73be;
text-decoration: none;
}
#breadcrumbs a:hover {
text-decoration: underline;
}
탐색경로 미리보기
위와 같이 제목 바로 위에 탐색 경로가 보입니다.
마무리
Breadcrumbs(탐색경로)를 활용하면 웹사이트 방문자에게 현재 위치를 명확히 알려주어, 탐색의 편의성을 크게 향상시킬 수 있습니다. 특히, 페이지 깊이가 깊거나 콘텐츠가 많은 웹사이트에서는 사용자가 쉽게 이전 페이지로 돌아가거나 상위 카테고리를 찾을 수 있도록 도와줍니다. 이는 단순히 사용자 경험(UX)을 개선하는 데 그치지 않고, 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칠 수 있습니다. 검색 엔진은 Breadcrumbs를 통해 페이지의 구조를 이해하고, 이를 검색 결과에 반영하여 더 나은 노출 효과를 가져올 수 있습니다.
따라서 GeneratePress 테마에서 Breadcrumbs를 표시하는 방법을 활용하면, 사용자 편의와 SEO 측면에서 모두 이점을 얻을 수 있으므로 적극적으로 구현해 볼 만한 가치가 있습니다.