안녕하세요. 린치핀소프트 한광희입니다.

혹시, Breadcrumb 에 대해서 들어보셨나요? BreadCrumb이 무엇인지에 설명해드리면 금새 “아~ 그것!” 이라고 금방 생각하시겠지만 용어 자체만으로 breadcrumb은 친숙한 용어가 아닙니다.
screenshot-www.linchpinsoft.com 2016-03-05 00-08-23

breadcrumb은 위의 스크린샷처럼 보통 페이지의 상단에 위치하여 현재 이용자가 방문하고 있는 페이지의 위치를 안내해주는 일종의 “네비게이션 UI”라고 보시면 됩니다. 블로그들을 많이 해보신분이라면 이런 형태의 네비게이션을 많이들 보셨을 겁니다. 이것을 Breadcrumb 이라고 하는데 “빵 부스러기”로 번역될 수 있습니다. 이는 동화 “헨젤과 그래텔”에서 기인한 명칭으로 핸젤과 그래텔이 길을 잃지 않기 위에 길바닥에 뿌린 “빵 부스러기”에서 이 용어가 기인했다고 합니다.

재미있는 명칭처럼 이 breadcrumb 은 블로그나 기사,쇼핑몰 같은 다양한 콘텐츠(또는 상품)과 카테고리,태그로 구성되어 있을때 이용자에게 현재 보고 있는 콘텐츠의 위치 또는 계층을 알려주는 역할을 합니다. 각, 계층은 하이퍼 링크 주소를 가지고 있어 클릭하면 해당 페이지로 이동할 수 있는 등 구독자에게 콘텐츠 탐색에 있어 편의를 제공하는 요소로도 활용됩니다.

 

이렇듯 쓸모 있는 기능임에도 몇몇 테마들에서는 breadcrumb을 지원하지 않는 테마가 생각보다 많이 있습니다. 이런 경우를 대비해 오늘 소개하는 Yoast SEO 플러그인에서는 BreadCrumb을 생성할 수 있는 함수와 해당 기능을 조정하는 옵션화면을 가지고 있습니다. 오늘은 Yoast SEO 플러그인에서 제공하는 breadcrumb 함수로 템플릿 소스코드에 직접 함수를 추가해보고 옵션화면에서 조정하는 방법을 소개합니다.

 

자신의 워드프레스 테마에 직접 Breadcrumb을 추가하는 방법

1.Yoast SEO에서 제공하는 Breadcrumb 함수를 복사한다.

2.자신의 워드프레스 테마의 소스코드파일에 접근한다(FTP, 또는 SSH 이용, 워드프레스 테마 편집기로도 가능합니다)

3.테마의 특정 위치에 Breadcrumb 함수를 추가한다.

4.Breadcrumb이 적용되는지 확인하고 몇가지 설정사항을 수정한다.

 

위와 같은 방법으로 Breadcrumb을 추가할 수 있습니다.

 

 

1.Yoast SEO 에서 제공하는 Breadcrumb함수 복사하기

screenshot-kb.yoast.com 2016-03-05 00-26-51

 

http://kb.yoast.com/article/245-implement-wordpress-seo-breadcrumbs 에 이동하면 위의 스크린샷처럼 breadcrumb을 생성하는 함수의 소스코드 예시를 참조할수 있습니다. 위의 스크린샷의 빨간색 박스 내의 소스코드를 복사하여 텍스트나 워드파일등에 저장해 둡니다.

if ( function_exists('yoast_breadcrumb') )
{
      yoast_breadcrumb('<p id="breadcrumbs">','</p>');
}

 

 

 

2.자신의 워드프레스 테마에 접근하여 특정 위치에 위의 함수 소스코드 추가하기

screenshot-newtab 2016-03-05 00-14-49

이 예시에서는 제가 사용하는 워드프레스 테마에서 블로그를 보여주는 템플릿인 single.php 템플릿 파일에 breadcrumb을 추가하는 모습입니다. 이 함수가 추가되는 위치에 breadcrumb이 생성되므로 테마의 템플릿 레이아웃과 특성을 고려하여 적절한 위치에 복사한 소스코드를 추가하세요.

 

3.적용되었는지 확인합니다.

screenshot-www.linchpinsoft.com 2016-03-05 00-08-23

적용 후에 위처럼 자신이 예상한 위치에 breadcrumb이 생성되었는지 확인합니다.

 

 

 

4. Yoast SEO 플러그인에서 BreadCrumb 설정하기

추가한 breadcrumb의 적용과 설정은 Yoast SEO 플러그인 > Advanced > Breadcrumb 탭에서 조정 할 수 있습니다.

Enable Breadcurmbs : Breadcrumbs 의 활성화 여부로 Disabled 하면 함수를 추가하더라도 Breadcrumb은 보여지지 않습니다.

Show Blog Page : 블로그 포스트를 보여줄 경우 “블로그 아카이브” 페이지를 Breadcrumb에 추가합니다.

Bold the Last Page : 마지막 페이지의 텍스트를 Bold(굵게) 체로 표시합니다.

screenshot-www.linchpinsoft.com 2016-03-05 00-11-05