GeneratePress 테마 후크 사용하기

  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

워드프레스 테마 중 하나인 GeneratePress 테마는 쉽게 커스텀이 가능하도록 자체 후크를 제공합니다. 무료 버전에서는 함수 파일에 GeneratePress 테마 후크를 이용하여 코드를 직접 삽입할 수 있고, GP Premium을 이용하는 경우 Element를 사용하여 보다 수월하게 코드를 넣을 수 있습니다.

GeneratePress 테마에서 제공하는 후크

GP 테마에서는 다양한 후크를 제공하므로 원하는 위치에 HTML 코드, Javascript, PHP 코드, 숏코드 등을 추가할 수 있습니다.

개별 포스트에 사용 가능한 후크는 다음 그림을 참고해보세요. 클릭하면 크게 볼 수 있습니다.

워드프레스 GeneratePress 테마 후크

예를 들어, 글 제목 바로 위에 어떤 요소를 넣으려면 generate_before_entry_title 후크를 사용할 수 있습니다. 글 하단에 관련 글(Related Posts)이나 광고를 배치하려면 generate_after_content 후크를 사용할 수 있습니다.

수동으로 GeneratePress 테마 후크 사용하기 (함수 파일에 추가)

무료 버전을 사용하는 경우 GeneratePress 테마의 함수 파일에 직접 코드를 넣을 수 있습니다. 먼저는 차일드 테마를 만들어서 차일드 테마(하위 테마, 자식 테마) 내의 함수 파일(functions.php)에 코드를 추가하도록 합니다.

예를 들어, 글 제목 위에 브레드크럼(Breadcrumb)을 추가하고 싶은 경우, Yoast SEO 플러그인을 사용한다면 Yoast SEO에서 브레드크럼 기능을 활성화하고 다음과 같은 코드 스니펫을 테마 함수 파일에 추가하면 됩니다.

// Yoast SEO 브레드크럼 추가하기
add_action( 'generate_after_header', function() {
    if ( function_exists('yoast_breadcrumb') ) {
        yoast_breadcrumb( '<div class="grid-container grid-parent"><p id="breadcrumbs">','</p></div>' );
    }
} );

위에서는 generate_after_header 액션을 사용했지만, before_entry_title 훅을 사용해도 됩니다. 포스트 타이틀 바로 아래에 추가하려면 after_entry_entry_title 훅을 사용합니다. 다음은 Breadcrumb Navxt 플러그인을 사용하여 브레드크럼을 글 제목 바로 아래에 추가하는 예시입니다.

add_action( 'generate_after_entry_title', 'tu_breadcrumbs' );
add_action( 'generate_after_page_title', 'tu_breadcrumbs' );
function tu_breadcrumbs() {
    ?>
    <div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
        <?php if(function_exists('bcn_display'))
        {
            bcn_display();
        }?>
    </div>
    <?php
}

후크를 사용하여 원하는 위치에 브레드크럼 (이동 경로)을 추가했다면 CSS를 사용하여 스타일을 변경할 수 있습니다.

테마의 함수 파일에 코드를 추가하기 위해서는 FTP를 사용할 수 있어야 합니다. (블루호스트나 사이트그라운드와 같은 호스팅을 이용하는 경우 File Manager (파일 관리자) 툴을 사용할 수도 있습니다.)

Element를 사용하여 후크 추가하기 (GP Premium 사용 시)

유료 버전 (GP Premium)을 사용하는 경우 Elements 기능을 사용하여 보다 수월하게 원하는 위치에 코드를 추가할 수 있습니다.

예를 들어, 구글 애드센스 배너 광고를 글 하단에 추가하고 싶은 경우 다음과 같은 순서로 진행하면 됩니다.

다른 방법으로 애드센스 플러그인을 사용하면 보다 편리하게 다양한 위치에 애드센스 광고를 달 수 있습니다. 아래의 방법은 플러그인을 사용하지 않고 광고를 추가할 때 이용할 수 있습니다.

엘리먼트 추가하기

1. 테마 디자인 > Elements를 클릭합니다. 상단의 Elements 문구 옆의 새로 추가 (Add New) 버튼을 클릭합니다.

GeneratePress 테마 Elements 사용하기

2. Element Type (엘리먼트 유형)을 선택하는 화면이 표시됩니다. Header (헤더), Hook (후크), Layout (레이아웃) 중에서 선택이 가능합니다. 여기서는 Hook를 선택합니다.

워드프레스 GeneratePress 테마 엘리먼트 타입

3. Add New Element (새 엘리먼트 추가) 화면이 표시됩니다.

GeneratePress 애드센스 광고 추가하기

(1) 제목 필드에 이 요소의 이름을 지정합니다.

(2) 제목 아래의 상자에 애드센스 광고 코드를 입력합니다. 위와 같이 입력해도 되고, CSS로 제어하기 위해 클래스를 추가해도 됩니다. 예시:

<div class="adsense-bottom">
//애드센스 광고 스크립트
</div>

CSS 코드는 테마 디자인 > 사용자 정의하기 > 추가 CSS에 추가하면 됩니다. 예시:

// 하단 애드센스 광고
.adsense-bottom {
text-align: center;
margin: 20px 0;
}

경험상 애드센스 광고를 추가할 때에는 애드센스 광고를 가운데 정렬하는 속성(text-align)과 여백(Margin) 정도를 설정하면 무난한 것 같습니다. 추가로 모바일 기기와 데스크톱에서 광고 크기를 달리 하고 싶다면 CSS 미디어 쿼리를 사용할 수 있습니다. W3Schools 문서를 참고해보세요.

(3) Hook에서 적절한 후크를 지정합니다. 글 하단의 경우 다음 후크를 사용할 수 있습니다.

  • after_content
  • after_entry_content

이 블로그처럼 글 제목 아래에 광고를 배치하려면 after_entry_title을 선택하면 됩니다.

숏코트를 추가하는 경우에는 Execute Shortcodes를 체크하도록 합니다. PHP 코드를 실행하도록 하려면 Execute PHP를 체크합니다.

예를 들어, Rank Math SEO 플러그인을 사용하는 경우, Rank Math의 브레드크럼 기능을 활성화하고 다음과 같은 숏코드를 추가하여 글 제목 위나 아래에 이동 경로를 표시할 수 있습니다. 이 경우 Execute Shortcodes 옵션을 활성화해야 합니다.

[rank_math_breadcrumb]

동일한 위치에 여러 개의 엘리먼트를 추가하는 경우 Priority (우선순위)를 통해 동일한 후크 위치에 추가된 엘리먼트들의 순서를 지정할 수 있습니다.

표시 규칙 지정하기

계속하여 Display Rules 탭을 클릭하여 엘리먼트를 어디에 표시할지 지정합니다.

GeneratePress 워드프레스 테마 후크 사용하기

Location에서 이 요소를 표시할 곳을 선택할 수 있습니다. 예를 들어, 모든 글에 표시하려면 "글"을 선택하고 "All 글"을 선택합니다. 특정 글에만 표시하고 싶다면 "All 글" 드롭다운을 선택하여 특정 글을 지정할 수 있습니다. (영문 버전에서는 Post > All Posts 선택)

  • Add Location Rule (위치 규칙 추가) 버튼을 눌러 위치를 추가할 수 있습니다.
  • Exclude에서 제외할 위치를 선택합니다.
  • Users에서는 이 요소를 볼 수 있는 사용자를 지정할 수 있습니다. 가령, 로그인 사용자(회원)에게만 표시되도록 하거나 비회원(게스트)에게만 표시도도록 설정할 수 있습니다. 특정 회원 역할(User Role)을 선택하는 것도 가능합니다.

모두 설정을 완료했다면 오른쪽 상단의 "공개"를 눌러 이 요소를 발행합니다.

마치며

이상으로 워드프레스 GeneratePress 테마에서 후크를 사용하는 방법에 대해 살펴보았습니다. 이 방법을 사용하여 원하는 위치에 HTML 코드, 애드센스 광고, 자바스크립트 코드, 숏코드, 심지어 PHP 코드를 추가할 수 있습니다.

참고



댓글 남기기