GeneratePress 테마 본문에 브레드크럼 추가하기 – GP Premium

GeneratePress 테마 (GP Premium)의 본문에 SEO에 연관된 브레드크럼을 추가하는 방법을 알아보겠습니다.

GeneratePress 테마의 유료 버전인 GP Premium에서 지원하는 Hook 기능과 SEO 플러그인에서 제공하는 브레드크럼을 활용하는 방법으로 GeneratePress 테마의 무료 버전에는 활용이 불가능합니다.

• 브레드크럼 (Breadcrumbs) 설정으로 SEO 향상하기

워드프레스 대시보드의 외모 > Elements 로 들어가면 위와 같은 화면을 만나게 됩니다.
이 곳에서 Add New Element 버튼을 클릭해서 Element를 추가합니다.

만약 GeneratePress 테마와 GP Premium 플러그인을 설치했음에도 Element 메뉴가 보이지 않는다면 외모 > GeneratePress 메뉴에서 위와 같이 Elements를 활성화 시켜야 합니다.

Element 추가하기를 실행하면 위와 같이 창이 뜹니다.
Hook 를 선택하고 오른쪽의 Create 버튼을 클릭합니다.

그럼 위와 같이 화면을 볼 수 있습니다.
이 곳에 SEO 플러그인에서 제공하는 브레드크럼 관련 숏코드 또는 PHP 문을 넣어줘야 합니다.

Yoast SEO 플러그인의 설정에 들어가면 위와 같이 브레드크럼 관련 설정을 할 수 있으며 제공되는 PHP 명령문과 숏코드는 아래와 같습니다.

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

[wpseo_breadcrumb]

All in One SEO 플러그인은 가장 친절하게 브레드크럼을 제공합니다.
블록, 숏코드, 위젯 그리고 PHP 코드까지 제공을 하며 선택을 하면 바로 얻을 수 있습니다.

Rank Math SEO 플러그인도 위와 같은 브레드크럼 설정을 할 수 있으면 제공되는 PHP 명령문과 숏코드는 아래와 같습니다.

<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>[rank_math_breadcrumb]

Rank Math SEO 플러그인의 코드를 활용해서 추가해 보았습니다.
개인적으로 PHP 명령문을 숏코드보다 선호하기에 PHP 명령문을 넣어주었으며 아래 옵션의 Execute PHP를 선택하였습니다.
그리고 Hook의 위치는 위와 같이 generate_before_entry_title를 선택하였습니다.
generate_before_entry_title을 선택하면 글의 제목 바로 위에 노출되게 됩니다.

위의 경우는 호스팅 서버에서 워드프레스에서 PHP 명령문을 이용할 수 없게 기본 설정되는 경우입니다.
Execute PHP에 “Unable to execute PHP as DISALLOW_FILE_EDIT is defined” 라고 표기가 되어 있습니다.
이렇게 PHP 명령문을 활용하지 못하게 하는 이유는 보안적인 부분입니다만 호스팅 업체마다 상이할 수 있습니다.

이런 경우 숏코드를 넣어주면 되며, 위와 같이 Execute Shortcodes 에 체크를 해주면 됩니다.

이제는 설정하는 Element가 노출되는 조건을 설정해야 합니다.
Dispaly Rules 항목을 선택한 이후 Location에 글을 선택해 줍니다.
즉 설정하는 브레드크럼을 글 본문에 노출하기 위한 설정입니다.

설정을 마무리하면 위와 같이 글 제목 위에 브레드크럼이 노출되는 것을 확인할 수 있습니다.

만약 설정한 브레드크럼의 글꼴의 사이즈를 수정하고 싶다면 외모 > 사용자 정의하기 > 추가 CSS에 아래 코드를 추가해 주면 됩니다.

.rank-math-breadcrumb p {
    font-size: 16px;
    color: #6b6b6b;
    margin-bottom: 10px;
}

위 코드를 활용하면 브레드크럼의 글꼴 크기와 색상 그리고 여백을 설정할 수 있으니 값을 변경하면서 원하는 설정을 하면 되겠습니다.

이렇게 GeneraPress 테마를 이용하는 블로그에 브레드크럼을 설정하는 방법을 알아보았습니다.
가능하면 꼭 설정해 놓으시기 바랍니다.

• GeneratePress 테마 헤더에 애드센스 광고 삽입하기
• GeneratePress 테마에 연관 글 설정하는 방법 – GP Premium
• GeneratePress 테마 상단 메뉴 고정 하기