오늘은 글의 카테고리를 헤더에 표시할 수 있는 브레드크럼에 대해 알아보고, GeneratePress 유료 버전을 이용한 브레드크럼 설정 방법에 대해 알아보도록 하겠습니다.
브레드크럼이란?
브레드크럼(BreadCrumbs)은 사용자로 하여금 웹사이트 탐색을 용이하게 만드는 페이지 위치 표시 기능입니다. 일반적으로 홈 > 특정 카테고리 > 특정 서브카테고리 와 같은 형태로 헤더의 제목 위나 본문 위에 표시를 합니다.
사용자 경험을 향상시키는 것뿐 아니라, SEO 최적화에 도움이 되는 역할을 합니다. 구글과 같은 검색 엔진에서는 브레드크럼이 있으면 해당 사이트의 구조를 더 잘 인식하고 파악할 수 있습니다. 사이트 노출에 유리한 점이 많아 설정을 하는 것이 좋습니다.
GeneratePress 유료 버전에서 브레드크럼 설정
오늘은 GeneratePress 테마에서 브레드크럼을 설정해보도록 하겠습니다. 참고로 브레드크럼을 설정하기 위해서는 GeneratePress 테마의 유료 버전이 필요합니다. Hook 요소 추가를 위한 Elements 기능을 통하여 브레드크럼 설정을 할 것이기에 때문입니다.
Yoast SEO 또는 Rank Math SEO 플러그인을 이용하여 브레드크럼을 생성하여 Elements의 Hook에 활성화해줄 것입니다. GeneratePress Premium에 대한 자세한 정보는 아래 링크를 참고하시면 되겠습니다.
GeneratePress Premium 사용했을 때 장점 알아보기브레드크럼 설정을 위한 플러그인 설치 및 활성화
브레드크럼 생성을 위해서는 우선 플러그인 설치가 필요합니다. Yoast SEO 또는 Rank Math SEO 플러그인 모두 가능하지만, 저는 개인적으로 Rank Math SEO를 사용하기 때문에 이를 기준으로 설명드리겠습니다.
- Rank Math SEO 플러그인 설치
워프 관리자 페이지에서 플러그인 > 새로 추가 로 이동합니다. Rank Math SEO를 검색한 후, 플러그인 설치 및 활성화를 진행합니다.
- Breadcrumbs 기능 활성화
Rank Math SEO가 활성화되면, 일반 설정 > Breadcrumbs 로 이동합니다. 여기서 Breadcrumbs 기능 활성화를 체크하여 해당 메뉴 항목들이 나오도록 합니다.
여러 항목 중에서 카테고리 표시를 활성화한 후, 변경사항 저항 버튼을 눌러줍니다.
GeneratePress 유료 버전 Elements 기능으로 브레드크럼 추가
브레드크럼을 활성화하였다면, 이제 GeneratePress에서 Elements 기능을 이용하여 브레드크럼이 표시될 요소를 생성해야 합니다. 그리고 GeneratePress의 Elements 기능을 이용하려면 GeneratePress Premium 버전이 필요하기에 아직 결제 및 설치를 먼저 한 후, 진행을 따라와 주시기 바랍니다.
GeneratPress Premium 버전 결제 및 설치하러 가기1.Elements 기능 활성화
워프 대시보드에서 모양(외모) > GeneratePress 로 이동합니다. 여기서 Modules의 Elements를 활성화해줍니다. Deactivate라고 써져있으면 활성화되어 있는 상태입니다.
2.타입 설정 후 Element 생성
모양(외모) > Elements로 이동하여 Add New Element 버튼을 클릭하여 새 Element를 생성해야 합니다.
Element Type을 골라야 하는데 Hook을 선택하고 Create 버튼을 누릅니다. Hook은 GeneratePress 테마의 특정 위치에 코드를 삽입하는 데 사용되는 요소입니다.
그럼 위와 같은 화면을 볼 수 있습니다. 여기서 하얀색 박스 안에 브레드크럼 코드를 붙여넣으면 됩니다. 이제 브레드크럼 코드를 복사하러 다시 아까 Rank Math의 브레드크럼에 들어갑니다.
3.브레드크럼 코드 복사
노란색 박스 안의 코드가 브레드크럼 관련 코드인데, php 코드 또는 숏코트 형식으로 넣을 수 있습니다. 둘 중 하나를 복사해줍니다.
<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>
[rank_math_breadcrumb]참고로 Rank Math에서 제공하는 브레드크럼 코드입니다.
4.Settings 설정
위와 같은 Php 코드를 붙여넣었으며, Hook의 위치는 generate_before_entry_title을 선택하였습니다. 해당 옵션은 글 제목 바로 위에 노출되게끔 합니다. 그리고 php 코드를 넣었기에 Execute PHP를 선택해줍니다.
5.Display Rules 설정
마지막으로 Display Rules에서는 Location을 글 – All 글로 설정해주면 완료입니다. 공개 버튼을 누른 뒤, 글 페이지에 가서 확인을 해봅니다.
글 제목 위에 Home > 카테고리 이름 의 브레드크럼이 표시되는 것을 확인할 수 있습니다.
브레드크럼 CSS 스타일 설정
만약 브레드크럼의 텍스트 글꼴과 색상, 사이즈를 수정하고 싶다면, 외모 > 사용자 정의 > 추가 CSS에 브레드크럼 class에 해당하는 css 코드를 입력하면 됩니다.
.rank-math-breadcrumb p {
font-size: 16px;
color: #6b6b6b;
margin-bottom: 10px;
}font-size는 글자 크기, color는 색상, margin은 여백 크기 등으로 코드를 이용하여 원하는 디자인을 만들어보시기 바랍니다.
<추가로 볼만한 글>
GeneratePress로 네비게이션 메뉴 바 설정법 보러가기GeneratePress로 연관 글 설정 방법 보러가기
