GeneratePress 테마: Rank Math SEO 브레드크럼 추가하기

워드프레스 GeneratePress 테마는 자체 훅(Hook)을 제공하므로 훅을 사용하여 쉽게 원하는 곳에 콘텐츠를 표시할 수 있습니다. 네이버 카페에서 GeneratePress 테마 무료 버전에서 Rank Math SEO 플러그인의 브레드크럼을 추가하는 방법에 대한 질문이 올라와서 기존에 다루었던 내용이지만 별도로 정리해 보았습니다.

브레드크럼을 표시하면 구글 등 검색엔진에 글이 노출될 때 이동 경로(브레드크럼)이 함께 표시되어 SEO에 도움이 될 수 있습니다.

GeneratePress 테마: Rank Math SEO 브레드크럼 추가하기

GP 테마는 자체 후크를 제공하므로 잘 활용하면 스크립트나 HTML 코드, PHP 코드, 숏코드, 텍스트 등의 콘텐츠를 쉽게 원하는 곳에 추가할 수 있습니다.

제너레이트프레스 테마의 훅에 대한 자세한 정보는 다음 글을 참고해 보세요.

• GeneratePress 테마 후크 사용하기

GeneratePress 유료 버전을 사용하는 경우에는 외모 » Elements에서 새로운 후크(Hook)를 생성한 다음, 콘텐츠 섹션에는 [[rank_math_breadcrumb]]을 입력하고 Hook에는 generate_before_entry_title(또는 다른 훅)을 선택하면 됩니다.

또한, Execute Shortcodes를 체크해야 숏코드가 실행됩니다.

Display Rules에서 브레드크럼을 표시할 부분을 위치(페이지, 싱글 포스트, 카테고리 페이지 등)를 지정할 수 있습니다.

GeneratePress 테마 무료 버전에서 Rank Math 브레드크럼 추가하기

아래에서는 Rank Math 플러그인의 브레드크럼(탐색 경로, 이동 경로)을 GeneratePress 테마의 무료 버전에 추가하는 방법에 대하여 설명합니다. Yoast SEO 브레드크럼도 동일한 방법으로 추가할 수 있습니다. Yoast SEO 브레드크럼의 경우 여기를 참고하세요.

테마 함수 파일에 추가하는 코드

차일드 테마의 함수 파일(functions.php)에 다음과 같은 코드를 추가할 수 있습니다.

add_action( 'generate_after_header', function() {
    if ( function_exists('rank_math_the_breadcrumbs') ) {
        echo '<div class="grid-container grid-parent"><p id="breadcrumbs">';
        rank_math_the_breadcrumbs();
        echo '</p></div>';
    }
} );

그러면 generate_after_header 훅을 사용하여 헤더 아래, 포스트/페이지 타이틀 위에 브레드크럼이 표시됩니다. generate_after_header 훅 대신 generate_before_entry_title 훅을 사용할 수도 있습니다. 훅의 정확한 위치는 다음 그림을 참고하시기 바랍니다(아래 이미지를 클릭하면 확대하여 볼 수 있습니다).

변경 사항을 저장하고 업로드하면 다음과 같이 브레드크럼(이동 경로)이 표시됩니다. 브레드크럼이 표시되지 않으면 캐시를 삭제하시기 바랍니다. 클라우드웨이즈의 경우 서버 캐시도 삭제해야 변경 사항이 곧바로 표시될 것입니다.

브레드크럼 스타일은 CSS를 사용하여 조정할 수 있습니다.

참고

• GeneratePress 테마 사이드바 고정하기
• 워드프레스 Divi 테마, AI로 이미지와 텍스트를 무제한 생성 가능한 Divi AI 출시(+ Divi Code AI 추가)
• 티스토리 백업 파일을 이용하여 워드프레스로 이전하기 (업데이트)