GeneratePress 테마: 카테고리 페이지에 고정 글 상단에 고정하는 방법

워드프레스에서 특정 글을 블로그 페이지 상단에 고정하고 싶은 경우 붙박이 글(고정 글)로 지정할 수 있습니다. 그러면 최신 글 페이지 상단에 고정 글이 고정되어 표시됩니다. 하지만 고정 글로 설정해도 카테고리 페이지에서는 고정이 되지 않습니다. 이 글에서는 GeneratePress 테마에서 고정 글을 카테고리 페이지 상단에 고정하는 방법에 대하여 살펴보겠습니다.

참고로 GeneratePress는 현존하는 테마 중에서 가장 빠른 테마 중 하나로 평가 받고 있습니다. 우리나라에서 대부분의 수익형 블로그에는 이 테마가 사용되고 있습니다. 이 블로그도 현재 제너레이트프레스 테마가 사용되고 있습니다.

블로그 리뉴얼: GeneratePress 테마로 변경

GeneratePress 테마: 카테고리 페이지에 붙박이 글(고정 글)을 상단에 고정하는 방법

고정 글 설정하기

워드프레스에서 특정 게시글을 붙박이 글로 설정하고 싶은 경우 글 » 모든 글에서 해당 글 위에 마우스를 올린 다음, 빠른 편집을 클릭합니다.

"이 글을 고정으로 만들기"를 체크하고 업데이트 버튼을 누르면 붙박이 글로 설정됩니다.

그러면 붙박이 글이 최신 글 페이지(블로그 페이지) 상단에 고정됩니다.

여러 개의 글을 붙박이 글로 설정하는 것이 가능합니다. 붙박이 글 항목이 다른 글과 다르게 표시되도록 하고 싶은 경우 CSS를 사용할 수 있습니다. 제 블로그의 경우 다음과 같은 CSS 코드가 사용되었습니다.

/* GeneratePress 테마: 붙박이 글 스타일 */

.sticky .inside-article {
    padding: 30px !important; 
    background-color: #ffffff; 
    border: 1px solid #e0e0e0; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
    margin-bottom: 50px; 
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; 
    border-radius: 8px; 
}


.sticky .inside-article:hover {
    transform: translateY(-5px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.15); 
}

.sticky p.read-more-container {
    display: none;
}

.sticky .entry-meta {
    display: none;
}


.sticky .inside-article {
    font-family: 'Arial', sans-serif; 
    font-size: 16px; 
    line-height: 1.6; 
    color: #333; 
}

상기 코드를 모양 » 사용자 정의 » 추가 CSS에 추가하시기 바랍니다.

카테고리 페이지에 붙박이 글을 상단에 표시하기

블로그 글을 고정 글로 지정해도 카테고리 페이지에는 상단에 고정되지 않고 최신 글 페이지(블로그 페이지)에만 표시됩니다. 카테고리 페이지에 붙박이 글을 상단에 고정하고 싶은 경우 "워드프레스 GeneratePress 테마: 붙박이 글을 카테고리 페이지에 상단에 고정하기" 글을 참고해 보시기 바랍니다.

참조된 글에서는 PHP 코드로 추가하는 방법에 대하여 설명하고 있습니다. PHP 코드 대신 HTML 코드로 추가하는 것도 가능합니다. 최신 글 페이지의 HTML 소스를 확인하여 붙박이 글 부분의 HTML 코드를 GeneratePress 테마의 훅을 사용하여 카테고리 페이지의 상단에 고정할 수 있습니다.

크롬 브라우저에서 HTML 소스 코드를 확인하고 싶은 경우 Ctrl+U를 누르면 됩니다.

모양 » Elements에서 새 엘리먼트를 생성하여 HTML 코드를 추가하고 generate_before_main_content 훅을 지정하고, 표시할 위치에 해당 카테고리 페이지를 선택할 수 있습니다.

GeneratePress 테마 후크 사용하기

이 방법을 이용하면 해당 카테고리 페이지(하위 페이지 포함) 상단에 고정됩니다. 다른 방법으로 해당 카테고리의 첫 페이지에만 표시하고 싶은 경우 다음과 같은 코드를 차일드 테마의 함수 파일에 추가할 수 있습니다.

add_action( 'generate_before_main_content', function() {
    // 현재 페이지가 카테고리 페이지인지 확인
    if ( is_category( 9529 ) ) { // 카테고리 ID 9529 확인
        // 현재 페이지가 첫 번째 페이지인지 확인
        if ( ! is_paged() ) {
            ?>
            <!-- HTML로 된 콘텐츠 -->
            <?php
        }
    }
}, 10 );

카테고리 ID를 확인하여 해당 카테고리 ID로 대체하고  부분에 붙박이 글 항목의 HTML 코드를 입력하도록 합니다.

사이트 속도에 미치는 영향은 PHP 코드보다는 HTML 코드가 더 적습니다. PHP 코드로 추가할 경우 서버에서 추가적인 작업이 요구되기 때문에 HTML 코드로 추가하면 (미미하지만) 약간의 속도 개선 효과가 있을 것입니다.