워드프레스에 Breadcrumbs 추가하기 (feat. GeneratePress, Rank Math)

포스트에 구조화된 탐색경로를 표시하기 위해 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에서 확인할 수 있다.

브레드 크럼 코드 입력
functions.php에 입력한 부분


breadcrumbs의 기본적인 설정은 Rank Math > 일반 설정 > Breadcrumbs에서 확인하고, 커스터마이징은 How to Customize Breadcrumbs in Rank Math를 참고하자. 만약 breadcrumbs의 글자 크기를 조절하는 등 스타일을 변경하고 싶다면 다음을 참고해 취향에 맞게 수정한 후 적용해 보자.

add_theme_support( 'rank-math-breadcrumbs' );
function my_breadcrumbs() {
if ( is_single() ) {
echo '<div style="font-size: 14px;">';
if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs();
echo '</div>';
}
}
add_action( 'generate_before_content', 'my_breadcrumbs' );

개인적으로는 글자 크기는 작게, 구분 문자는 '»', 게시 제목 숨기기 활성화(포스트 제목 숨기기), 카테고리 표시 활성화(상위 카테고리 모두 표시) 정도를 설정해 두었다.


3. Breadcrumbs가 추가된 모습

브레드 크럼 예시


4. 구글 서치 콘솔의 반응

유효한 탐색경로가 발견되어 통계에 잡히기 시작했다.

breadcrumbs search console trend

breadcrumbs search console trend detail

카테고리의 다른 글

  1. apple-touch-icon.png 404 에러 탈출기 (feat. precomposed, 120x120, favicon)
  2. HTML 앵커 <a> 태그 속성으로 alt는 없었구나
  3. 구글 애널리틱스 내부 트래픽 설정하기 (분석 제외 IP 설정)
  4. 구글 애널리틱스와 태그 매니저 페이지뷰 중복측정 방지하기
  5. 구글 애드센스 클릭은 있지만 수익은 없는($0.00) 원인

댓글 남기기