케이던스 테마 브레드크럼 설정 및 구분 문자 변경 방법

Last Updated: 2024년 05월 13일 | , | 2개 댓글

워드프레스 케이던스 테마에서는 사용자 정의하기 설정에서 포스트에 브레드크럼(이동 경로)를 표시할지 여부를 지정할 수 있습니다. 브레드크럼에서 항목들을 구분하는 구분 문자는 기본적으로 슬래시(/)로 되어 있어 보기가 좋지 않을 수 있습니다. Kadence 테마 브레드크럼의 구분 기호를 변경하는 방법에 대하여 살펴보겠습니다.

케이던스 테마 브레드크럼 설정 및 구분 문자 변경 방법

브레드크럼을 표시하면 SEO(검색엔진 최적화)에 도움이 될 수 있습니다. Yoast SEO, Rank Math SEO 등 SEO 플러그인에서 브레드크럼 기능을 제공합니다.

브레드크럼 전용 플러그인이나 SEO 플러그인의 브레드크럼 기능을 사용하는 경우 대부분의 테마에서 브레드크럼을 표시하려면 숏코드로 추가해야 합니다. 이 작업은 테마에 따라 쉬울 수도 있고, 어려울 수도 있습니다.

그러나 케이던스 테마에서는 Yoast SEO, Rank Math의 브레드크럼을 지정할 수 있는 옵션이 제공됩니다.

Kadende 테마는 브레드크럼 기능을 제공하므로 SEO 플러그인의 브레드크럼 기능을 비활성화하고 케이던드 테마에 탑재된 브레드크럼 기능을 사용할 수 있습니다. SEO 플러그인의 이동 경로 기능을 원하는 경우에는 아래의 "Yoast SEO 또는 Rank Math의 브레드크럼 기능 사용하기" 부분을 참고해보세요. 또는 케이던스에서 제공하는 훅(Hook)을 사용하여 원하는 위치에 브레드크럼을 추가하는 것도 가능합니다.

케이던스 테마에서 제공하는 이동 경로 기능을 사용하려는 경우 디자인 » 사용자 정의하기 » Posts/Pages Layout » Single Post Layout으로 이동합니다.

Title Elements 섹션에서 Breadcrumb 항목을 활성화합니다. 기본적으로 이 기능은 활성화되어 있습니다. 브레드크럼에 글 제목을 표시하려는 경우 Show Post Title in Breadcrumb? 옵션을 활성화합니다.

케이던스 테마 브레드크럼

그러면 다음과 같이 <Home / 카테고리 / 글 제목> 형식으로 이동 경로가 표시됩니다.

케이던스 테마 브레드크럼 설정 및 구분 문자 변경 방법 2

구분 문자를 변경하고 싶은 경우 다음과 같은 CSS 코드를 디자인 » 사용자 정의하기 » 추가 CSS에 추가할 수 있습니다. (SEO 플러그인의 이동 경로 기능을 사용하는 경우에는 SEO 플러그인에서 구분 문자를 선택할 수 있는 옵션이 제공됩니다. 아래의 코드는 Kadence 테마에서 제공하는 자체 이동 경로 기능을 사용하는 경우에 사용할 수 있습니다.)

/* This sets the breadcrumb delimiter in the Kadence Theme. */

.kadence-breadcrumbs .bc-delimiter {
    display: none;
}
.kadence-breadcrumbs span:not(:first-child)::before {
    content: " » ";
    display: inline;
}

커스텀 CSS 코드를 차일드 테마 내의 스타일시트 파일(style.css)에 추가하는 것도 가능합니다.

구분 기호(위에서는 "»")는 적절히 변경하세요.

상기 코드를 적용하면 브레드크럼의 구분 문자가 지정한 문자로 변경됩니다.

케이던스 테마 브레드크럼 설정 및 구분 문자 변경 방법

케이던스 테마에서 제공하는 브레드크럼을 사용할 경우 구글 서치 콘솔에서 탐색경로 문제가 발생할 수 있습니다. 그런 경우 Yoast SEO나 Rank Math 플러그인의 이동 경로 기능을 사용하시기 바랍니다. "Kadence 테마 변경 후 구글 서치 콘솔에서 탐색경로 문제가 발생하는 경우"를 참고해보세요.

Yoast SEO 또는 Rank Math 브레드크럼 기능 사용하기

Kadence 테마에서는 자체 브레드크럼뿐만 아니라 Yoast SEO나 Rank Math에서 제공하는 브레드크럼을 사용하는 것도 가능합니다.

예를 들어, Rank Math를 사용하는 경우 Rank Math 검색엔진 최적화 » 일반 설정 » Breadcrumbs에서 Breadcrumbs 기능 활성화를 On으로 설정하여 이동 경로 기능을 활성화할 수 있습니다.

워드프레스 Rank Math 브레드크럼

구분 문자를 지정하고 몇 가지 설정을 할 수 있습니다.

이제 디자인 » 사용자 정의하기 » General » Breadcrumbs에서 RankMath를 선택할 수 있습니다.

Kadence 테마 브레드크럼 선택하기

Default, RankMath, Yoast, SEOPress 중에서 선택할 수 있습니다. Default가 기본 옵션이며 케이던스 테마의 브레드크럼이 사용됩니다.

참고


2 개 댓글

Leave a Comment

    • 저는 케이던스 테마의 자체 기능을 사용하다, Rank math의 브레드크럼으로 바꾸었습니다. SEO 플러그인을 사용한다면 SEO 플러그인에서 제공하는 breadcrumb을 사용하는 것도 괜찮을 것 같습니다.

      응답