All in one SEO – Breadcrumbs 을 Hook 이용해 블로그에 나타내기

사이트 이동 경로를 뜻하는 Breadcrumbs(Breadcrumb navigation) 기능은 SEO에 도움이 된다고해서 워드프레스로 블로그를 운영하는 분들에게는 필수 설정 입니다. 그리고 All in one seo 플러그인을 사용하는 분들이라면 간단하게 설정 가능하며 만약 올인원 SEO를 사용하지 않을 경우는 Breadcrumbs 을 위한 전용 플러그인이 있기 때문에 Breadcrumbs 플러그인을 활용하면 됩니다.

Elements 활성화 하기

generatepress 테마를 이용해 훅(hook)으로 등록하기 위해서는 테마의 엘리먼츠(Elements)를 아래와 같이 활성화 해야 합니다.

Hook 생성하기

훅 생성을 위해서는 외모 > elements > Add new Element 한 후 게시판 글 쓰듯이 훅으로 등록 하면 됩니다. 쉽게 생각하면 게시판에 글을 쓸때는 일반 글도 쓰지만 공지사항도 쓰며 공지사항을 쓸땐 공지사항 등록방법으로 글을 씁니다. 훅 등록도 같은 경우로 글 쓰듯이 쓰는데 1) Hook으로 등록하고, 2) 이 등록한 훅을 어디에 적용할 것인가? 만 설정해 주면 됩니다.

Breadcrumbs 소스 추가하기

훅으로 등록할 때 All-in-one SEO 를 사용하면 아래와 같온 shortcode 를 추가해 주면 됩니다.

aioseo_breadcrumbs <= 복사해서 사용하세요. 괄고로 앞뒤를 닫아 줘야 합니다.

Breadcrumbs 옵션 설정하기

Short코드 삽입을 했으면 게시판 옵션 지정해 주듯이 등록한 훅 옵션 설정을 하단에서 아래와 같이 하면 됩니다.

어떻게 보일까?

글 발행을 하면 포스팅 상단에 아래와 같이 노출 되는 것을 확인 할 수 있습니다.

업데이트

브레드크럼 모습이 좀 밋밋한듯해 css 스타일링을 좀 넣어 줬습니다.

(div style=”border-style:solid;font-weight:bold;border-width:0px 0px 1px 15px;border-color:#707070;background-color:#fff;padding:10px;”)(aioseo_breadcrumbs)(/div)(br)
* 코드가 자동으로 변해서 아래와 같이 괄호를 수정 후 적용해 주세요.

[적용 결과]

마무리

이번 포스팅은 All in one SEO – Breadcrumbs Hook 이용해 간단히 나타내는 방법에 대해 알아보았습니다.
워드프레스 설치가 가장 쉬웠다고 했지요? 설치보다 하나하나 내게 맞게 꾸며 나가는게 더 어려운 것 같아요. 그래도 다행인 것은 워드프레스는 전세계 가장 많이 사용되고 있는 플랫폼이다보니 플러그인이 잘 되어 있어 내가 하고 싶은 것을 검색하면 지원되는 경우가 많습니다.

이외 이 블로그에 적용한 기능들을 차근차근 포스팅 할 예정 입니다.