목차
1. 추가해야 하는 코드
2. 추가 방법
3. Breadcrumbs가 추가된 모습
4. 구글 서치 콘솔의 반응
포스트에 구조화된 탐색경로를 표시하기 위해 Breadcrumbs(브레드 크럼)을 추가해 보았다.
- 사용 테마: GeneratePress (무료 버전)
- 사용 플러그인: RankMath (무료 버전)
1. 추가해야 하는 코드
Rank Math의 breadcrumbs를 이용하기 위해 functions.php에 추가해야 하는 코드는 다음과 같고,
add_theme_support( 'rank-math-breadcrumbs' );
Breadcrumbs를 표시하고 싶은 위치에 다음을 추가하면 된다.
<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>또는 숏코드
[rank_math_breadcrumb]*참고: https://rankmath.com/kb/breadcrumbs/
2. 추가 방법
여러 가지 방법이 있겠지만, 개인적으로는 앞선 코드 스니펫 모두를 functions.php에 넣었다.
모양 > 테마 파일 편집기 > 테마 파일 - Theme Functions (functions.php)
add_theme_support( 'rank-math-breadcrumbs' );
function my_breadcrumbs() {
if ( is_single() ) {
if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs();
}
}
add_action( 'generate_before_content', 'my_breadcrumbs' );*위에서 generate_before_content 부분은, breadcrumb이 표시되길 원하는 위치를 확인한 후 취향에 맞게 변경하도록 한다. GeneratePress 테마에서 위치별 후크는 Hooks Visual Guide에서 확인할 수 있다.
breadcrumbs의 기본적인 설정은 Rank Math > 일반 설정 > Breadcrumbs에서 확인하고, 커스터마이징은 How to Customize Breadcrumbs in Rank Math를 참고하자.
만약 breadcrumbs의 글자 크기를 조절하는 등 스타일을 변경하고 싶다면 CSS를 추가해 주면 된다. Class 이름은 rank-math-breadcrumb. (사실 처음에는 위의 php 코드에 직접 스타일을 적용했었었는데, 생각해 보니 스타일은 CSS에 적용하는 것이 맞다는 생각에 수정했다)
모양 > 사용자 정의 > 추가 CSS
/* breadcrumbs */
.rank-math-breadcrumb { font-size: 14px; }개인적으로는 글자 크기는 작게, 구분 문자는 '»', 게시 제목 숨기기 활성화(포스트 제목 숨기기), 카테고리 표시 활성화(상위 카테고리 모두 표시) 정도를 설정해 두었다.
3. Breadcrumbs가 추가된 모습
4. 구글 서치 콘솔의 반응
유효한 탐색경로가 발견되어 통계에 잡히기 시작했다.
