GP 테마 제너레이트프레스 메뉴 노출 CSS 용어 정리

  • 핀터레스트  공유하기
  • 카카오톡 공유하기
  • 네이버블로그 공유하기
  • 네이버밴드 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • URL 복사하기

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: 개별 글 페이지에서 사용되는 클래스입니다.
  • .page: 모든 정적 페이지에서 사용되는 클래스입니다.
  • .post: 모든 게시물에서 사용되는 클래스입니다.
  • .page-header: 페이지 헤더 부분을 선택하는 클래스입니다.
  • .post-image: 게시물의 이미지를 나타내는 요소.
  • .featured-image : 게시물이나 페이지에 특성 이미지(featured image / 썸네일)를 지정하는 데 사용됩니다.
  • .entry-meta : 작성 날짜(data), 작성자(Author), 카테고리(Categories), 태그(Tags), 앞뒤글 등등의 부가정보 전체를 말합니다.
  • .byline : 작성자 표기

게시날짜 관련

  • .published: 게시물의 최초 게시 날짜를 나타내는 요소를 선택할 때 사용합니다.
  • .updated: 게시물이 업데이트된 날짜를 나타내는 요소를 선택할 때 사용합니다.
  • .entry-date: 게시물의 날짜 정보를 나타내는 요소를 선택할 때 사용합니다. 이는 .published.updated와 같은 보다 구체적인 클래스명보다 일반적인 용도로 사용됩니다.
  • .date-published: 게시물의 게시 날짜를 나타내는 요소를 선택할 때 사용합니다.
  • .date-updated: 게시물이 업데이트된 날짜를 나타내는 요소를 선택할 때 사용합니다.
  • .posted-on: 게시물의 게시 날짜를 나타내는 요소를 선택할 때 사용합니다.

적용된 동작 설명 예시

  • display: none;: 선택한 요소를 화면에서 숨깁니다.
  • .home .posted-on { display:none; } – 홈에서 작성일자만 삭제하고 싶은 경우
  • .entry-date.published { display:none; }
  • .single .cat-links {display: none; } – single 에서 카테고리만 삭제하고 싶은 경우
  • .single .tags-links {display: none; } – single 에서 태그만 삭제하고 싶은 경우
  • .single footer.entry-meta { display: none; } – single 에서 카테고리, 태그, 앞뒤글까지 푸터 메타 정보 다 삭제하고 싶은 경우
  • .home .byline { display:none; } – home 에서 작성자만 삭제하고 싶은 경우

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

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

개별 게시글에서 작성자를 제외하고 나머지(홈, 카테고리,검색결과)에서는 안나오게 하는 설정입니다. by 누구 형태로 작성자가 나옵니다.

display: none;로 숨기더라도 크롤러가 크롤링은 해가기 때문에, 이 설정으로 한 번 적용했다가 다시 상단의 설정으로 원복했습니다.

.footer 와 footer의 차이

CSS 선택자에서 .footer.entry-meta와 footer.entry-meta는 서로 다른 의미를 가집니다.

.footer.entry-meta

: .footer 클래스와 .entry-meta 클래스가 모두 적용된 요소를 선택합니다.
즉, <div class="footer entry-meta">...</div> 와 같은 요소를 선택합니다.

footer.entry-meta

: footer 요소 중에서 .entry-meta 클래스가 적용된 요소를 선택합니다.
즉, <footer class="entry-meta">...</footer> 와 같은 요소를 선택합니다.

선택자 앞에 .을 붙이면 해당 클래스가 적용된 요소를 선택하지만, 클래스 없이 태그명만 사용하면 해당 태그 자체를 선택하게 됩니다. 따라서 footer.entry-meta는 footer 태그 중에서 .entry-meta 클래스가 적용된 요소를 선택하는 것이 맞습니다. 클래스 선택자 .footer와는 구분됩니다.

주의사항

css 샘플
css 샘플

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

Monosnap 글 편집 제네레이트프레스GP 무료 테마 외모디자인 커스텀 세팅 ‹ 워드프레스 정보공유 — 워드프레스 2024 08 23 16 05 03
css

글에 마우스를 드래그했을 때 배경과 텍스트 색상을 바꾸는 설정입니다. 원하는색상으로 하시면 됩니다. 형광펜은 <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>

관련글

‘워드프레스 정보공유’ 사이트 본문 중 제휴링크를 통해 수수료를 제공받을 수 있습니다