GP 테마 제너레이트프레스 태그 노출하는 CSS 용어 정리

GP 테마를 커스텀 셋팅하는 과정에서 챗gpt와 씨름하며 꽤 효율적으로 지저분한 코드들을 정리했습니다. 관련 내용들은 이전 포스팅에 이미 반영이 되었습니다. 특히 메뉴를 숨기고 노출하는 부분관련해서, 이후 제 세팅이 아닌 다르게 수정하실 일이 있을 때 참고하시라고 관련 용어들을 한 번 정리해보았습니다. 먼저 아래 포스팅을 확인해주세요

용어 설명

먼저 제가 넣어 놓은 코드들의 의미와 해석을 먼저 드리겠습니다. 다른 부분들은 제외하고 아래 네 부분들을 위주로 설명드리도록 하겠습니다.

/* GP 테마 카테고리 페이지에서 카테고리명 숨기기 */
.archive .page-header {
display: none;
}

/* GP 테마의 홈페이지, 카테고리 페이지, 검색 결과, 개별 글 페이지에서 카테고리, 태그, 앞뒤글, 메타 숨기기 */
.home .entry-meta,
.archive .entry-meta,
.search .entry-meta,
.single .entry-meta {
  display: none;
}

/* GP 테마 홈 페이지, 카테고리 페이지, 검색 결과 페이지에서 썸네일 제거하기 */
.home .post-image,
.archive .post-image,
.search .post-image {
  display: none;
}

/* GP 테마 개별 글 , 페이지 내에서 썸네일 제거하기 */
.single .inside-article > .featured-image,
.page > .featured-image {
    display: none;
}

위에서 몇 가지 동일하게 감추는 부분은 코드들을 한번에 몇 줄 씩 써서 display: none; 을 넣었는데요. 그중에 노출하고 싶은 요소들은 그 줄을 지워주시면 됩니다.

썸네일 같은 경우는 굳이 메인이나 검색화면, 글 내부 상단에 나와서 검색 속도를 느리게 하지 않기 위해 사이트 내부에선 다 뺐습니다. 포털 검색에만 잡히면 되니까요. 물론 썸네일이 중요해서 노출이 필요하신 분들은 노출시키시면 됩니다.

GP 테마 CSS 요소 설명

아래 요소들을 보시면 어떤 의도로 저런 선택을 제가 했는지 확인하실 수 있습니다. 기본적으로 GP테마의 디폴트 상태는 좀 지저분하고 봐줄수가 없어서 위와 같은 수정을 거쳤다고 보시면 됩니다.

페이지 종류 관련 클래스
.home → 블로그 메인(홈)화면이에요.
예: 글 목록이 쭉 보이는 첫 화면.

.archive → 아카이브 페이지, 즉 카테고리별 목록 페이지예요.
예: “여행 카테고리” 클릭 시 나오는 글 모음 페이지.

.search → 검색 결과 페이지예요.
예: “카메라”로 검색했을 때 결과들이 나오는 화면.

.single → 개별 글 페이지, 즉 하나의 포스트를 열었을 때 화면이에요.
예: “후지필름 X100VI 리뷰” 글을 클릭했을 때 보이는 페이지.

.page → 정적 페이지, 예를 들어 “About”, “Contact” 같은 페이지.
보통 블로그 글이 아니라 고정된 내용이에요.

.post → 모든 블로그 게시물을 뜻해요.
즉, 개별 글 하나하나를 말함.


요소(부분) 관련 클래스
.page-header → 페이지의 상단 제목 부분(헤더)이에요.
예: 글 제목이나 페이지 타이틀이 있는 영역.

.post-image → 글 속에 들어간 이미지 영역이에요.
특히 본문이나 미리보기 이미지에 자주 붙음.

.featured-image → 글이나 페이지의 대표 이미지(썸네일) 이에요.
예: 블로그 목록에서 각 글 옆에 표시되는 대표 사진.


메타 정보 관련 클래스
.entry-meta → 글의 부가정보 전체를 묶은 부분이에요.
예: 작성일, 작성자, 카테고리, 태그, 이전글·다음글 링크 모두 포함.

.byline → 작성자 이름(author) 부분만 가리켜요.
예: “작성자: 워정공” 이런 표시.

즉, 정리하자면
👉 .home, .archive, .single 등은 “어떤 페이지 종류인지”를 구분하고,
👉 .entry-meta, .byline, .featured-image 등은 “그 페이지 안의 어느 부분인지”를 구분하는 클래스예요.

게시날짜 관련

날짜 관련 클래스 쉽게 설명
.published → 글이 처음 게시된 날짜를 뜻해요.
예: “2026년 3월 9일에 처음 올림” 이런 정보를 보여줄 때.

.updated → 글이 마지막으로 수정된 날짜예요.
예: 글 내용을 바꾼 후 “2026년 3월 10일에 수정됨” 표시할 때 사용.

.entry-date → 글의 날짜 정보 전반을 나타내는 가장 넓은 개념이에요.
게시 날짜든 수정 날짜든 둘 다 포함하는 “날짜” 정보용 클래스예요.

.date-published → .published와 거의 같지만, 이름이 조금 다를 뿐 같은 기능이에요.
즉, 처음 게시된 날짜를 표시하는 역할.

.date-updated → .updated와 거의 같아요.
마지막으로 수정된 날짜를 보여줄 때 쓰입니다.

.posted-on → 게시된 날짜 영역을 묶어주는 말이에요.
예: “게시일: 2026년 3월 9일” 전체 구문을 감싸고 있는 상위 영역이에요.

정리하자면,

• 게시 날짜: .published, .date-published, .posted-on
• 수정 날짜: .updated, .date-updated
• 날짜 전반: .entry-date

적용된 동작 설명 예시

.home .posted-on { display:none; }
→ 홈 화면에서 작성일(게시 날짜) 만 숨깁니다.
예: 블로그 메인 목록에서 “2026년 3월 9일” 이런 날짜 표시 안 보이게 함.

.entry-date.published { display:none; }
→ 전체 페이지에서(홈, 글 단독 페이지 포함) 날짜 부분을 모두 숨깁니다.

.single .cat-links { display:none; }
→ 단일 글 페이지(single post) 에서 카테고리 이름만 숨깁니다.
예: “카테고리: 여행” 이런 부분이 사라짐.

.single .tags-links { display:none; }
→ 단일 글 페이지에서 태그 정보를 숨깁니다.
예: “태그: 일본, 카메라” 이런 항목이 안 나옴.

.single footer.entry-meta { display:none; }
→ 단일 글 페이지의 푸터(하단 정보) 전체를 숨깁니다.
즉, 카테고리, 태그, 이전글/다음글 링크 등이 모두 안 보입니다.

.home .byline { display:none; }
→ 홈 화면에서 작성자 이름만 숨깁니다.
예: “by 워정공” 같은 표시가 사라짐.

즉, 한마디로 정리하면
👉 display: none; 은 “보이지 않게 하기”,
👉 .home, .single 같은 클래스는 “어느 페이지에서 숨길지”를 정하는 거예요.

작성자만 노출하고 싶은 경우

/* GP 테마 글 발행일, 하단 메타정보(카테고리,태그,앞뒤글) 전체 숨기기, 개별글에서만 작성자 노출*/
.entry-date.published, footer.entry-meta {
display: none; 
}
.home .entry-meta .byline,
.archive .entry-meta .byline,
.search .entry-meta .byline {
    display: none;
}

이 CSS 코드는 “블로그에서 모든 게시일과, 푸터에서의 카테고리·태그·이전/다음글 태그는 숨겨라

그럼 작성자는 일단 다 나오겠죠?

그 다음으로 홈(home), 카테고리(archive),검색결과(search)에서는 작성자(by line) 를 별개로 감추면서,

결국 개별 글에서만 작성자만 보이게 (‘by 워정공’)하는 코드예요.

여기서 footer 를 썼던 이유는 굳이 상단과 하단의 정보를 나누면서 안보이게 처리해야 제가 원하는 대로 가능하더라구요.

여기서 참조할 점은 display: none;로 숨기더라도 크롤러가 크롤링은 해갑니다. 보이지만 않게 감추는거지 다 있는 정보들이니까요.

주의사항

이 글은 GeneratePress 테마의 클래스 구조에 다른 용어 설명입니다. 워드프레스의 다른 테마에서는 작동하지 않을 수 있습니다. 다른 테마나 버전에서 정확한 클래스나 특정 ID를 찾기 위해서는 웹 브라우저의 개발자 도구를 사용하여 실시간으로 확인하는 것이 가장 정확한 방법입니다. 그리고 테마별 웹 언어 관련해서는 chatGPT한테 물어보시면 왠만하면 해결할 수 있습니다.

글에 마우스를 드래그했을 때 배경과 텍스트 색상을 바꾸는 설정입니다. 원하는색상으로 하시면 됩니다. 형광펜은 <strong> 태그가 된 부분에는 형광펜 효과를 넣는 설정입니다. 색상은 변경 가능합니다. 그리고 하얀 글씨에 형광펜 효과를 넣으면 텍스트가 잘 안보이기 때문에 하단의 코드를 헤드앤 푸터 플러그인으로 푸터로 넣으시면 됩니다.

<!-- 형광펜 하얀 텍스트시 삭제 -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.single .entry-content strong').forEach(function(element) {
            if (getComputedStyle(element).color === 'rgb(255, 255, 255)') { 
                element.style.background = 'none'; 
            }
        });
    });
    </script>

관련글