(워드프레스) 케이던스 테마의 관련 글을 그리드 블록으로 변경하기

케이던스 테마의 관련 글을 그리드 블록으로 바꾸기

케이던스(Kadence) 테마의 관련 글은 캐러셀(좌우 이동)이 기본값이며 3개 이상 설정하면 디자인이 뭉개집니다.

아래와 같이 그리드로 표시되게 바꿔봅시다. 카테고리와 태그와 관련된 글을 설정 개수 만큼 랜덤 위치로 보여줍니다.

기본 관련 글 끄기

사용자 정의로 이동 후 Posts/Pages Layout➡️Single Post Layout 설정으로 이동합니다.

Show Related Posts? 항목을 끕니다.

그리드 블록 만들기

관리자 페이지 모양 탭에서 Kadence 메뉴를 선택 후

Hooked Elements 항목을 활성화 합니다. Customize 글자를 누르거나

Kadence➡️Elements 메뉴로 이동합니다.

버튼을 눌러서 새 엘리먼트를 만듭니다.

블록 추가에서 Portfolio Grid/Carousel 블록을 선택합니다.

위와 같이 제목 블록을 추가하고 그리드를 추가하면 됩니다. 여기서는 한 줄에 4개씩 8개를 보여줍니다.

엘리먼트 출력 조건 설정

편집기 위 도구 모음에서 Elements Settings 아이콘을 누릅니다.

Placement는 Before Comment를 선택하는 것이 좋지만, wpDiscuz와 같은 댓글 플러그인을 사용한다면 해당 속성이 사라지므로 인식이 안 됩니다. 그럴 때에는 After Inner Content 항목을 선택합니다.

Display Settings에서 Show On은 Single Post를 선택합니다. 글에서만 보여집니다.

User Settings에서 Visible to는 All Users를 선택합니다. 모든 접속자에게 보여집니다.

조건은 필요에 따라 사용자 정의하면 됩니다.

제목 항상 보이기

프토폴리오 그리드의 기본값은 마우스를 올릴 때에만 제목이 나타나기 때문에 사용자 경험(UX)이 매우 나쁩니다. 그래서 제목은 항상 보여야 합니다.

(차일드)테마의 style.css 파일 또는 사용자 정의 CSS에 다음 코드를 추가합니다.

CSS

/* 제목이 들어있는 박스를 투명화 해제하고 항상 보이게 */
.kb-portfolio-content-item-inner {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 마우스 안 올렸을 때도 위치 고정 (보통 hover 시 올라오는 애니메이션 제거) */
.kb-portfolio-grid-item-inner .kb-portfolio-content-item-inner {
    transform: translateY(0) !important;
    bottom: 0 !important;
}

.kadence-portfolio-image-inner-intrisic img {
    filter: blur(5px) brightness(.6) !important; /* 흐리게 + 어둡게 */
    transition: filter 0.3s ease !important;
    object-fit: cover !important; /* 이미지 꽉 차게 */
}

/* 그리드 제목 크기 강제 고정 */
.custom-grid .kb-portfolio-content-item-inner .kb-portfolio-loop-title {
    font-size: 18px !important; /* 원하는 크기로 조절 */
    line-height: 1.4 !important;
    font-weight: 700 !important;
    margin: 0 !important;
    word-break: keep-all !important; /* 단어 단위로 줄바꿈 */
}

/* 모바일에서는 조금 더 작게 */
@media (max-width: 767px) {
    .custom-grid .kb-portfolio-content-item-inner .kb-portfolio-loop-title {
        font-size: 15px !important;
    }
}

배경색, 배경 그림, 글자색 때문에 임의 스타일로 지정했습니다. 사용자 정의 해보세요~

카테고리 또는 태그와 관련된 글을 무작위로 보이기

그리드에서 보여지는 글의 기본값은 전체 글, 지정한 카테고리, 지정한 태그 조건만 설정이 됩니다. 그래서 글의 카테고리나 태그와 관련이 없는 글까지 모두 보이게 됩니다.

엘리먼트 편집 화면에서 그리드를 선택 후 블록 속성➡️Advanced➡️고급➡️추가 CSS 클래스 항목에 임의의 문자열을 입력합니다. 여기서는 custom-grid로 입력합니다.

엘리먼트 글을 최종 저장합니다.

(차일드)테마의 functions.php 파일 또는 코드 스니펫에 다음 코드를 추가합니다.

PHP

add_filter( 'kadence_blocks_pro_portfolio_grid_query_args', function( $args, $attributes ) {

    // 1. 'custom-grid' 클래스가 있는지 확인
    if ( isset( $attributes['className'] ) && strpos( $attributes['className'], 'custom-grid' ) !== false ) {
        
        $post_id = get_the_ID();
        if ( ! $post_id ) return $args;

        // 2. 현재 글의 카테고리(category)와 태그(post_tag) 가져오기
        $cat_ids = wp_get_post_categories( $post_id );
        $tag_ids = wp_get_post_tags( $post_id, array( 'fields' => 'ids' ) );

        // 3. 쿼리 초기화 및 필터 조건 생성
        $tax_query = array( 'relation' => 'OR' );

        if ( ! empty( $cat_ids ) ) {
            $tax_query[] = array(
                'taxonomy' => 'category',
                'field'    => 'term_id',
                'terms'    => $cat_ids,
            );
        }

        if ( ! empty( $tag_ids ) ) {
            $tax_query[] = array(
                'taxonomy' => 'post_tag',
                'field'    => 'term_id',
                'terms'    => $tag_ids,
            );
        }

        // 4. 세부 쿼리 인자 강제 주입
        if ( count( $tax_query ) > 1 ) {
            $args['tax_query'] = array( $tax_query );
        }

        $args['post__not_in'] = array( $post_id ); // 현재 글 제외
    }

    return $args;
}, 99, 2 );