Categories: 블로그

워드프레스 GeneratePress 무료 테마 CSS 레이아웃 꾸미기

워드프레스에서 가장 속도가 빠르다고 최적화 테마라고 알려진 게 GeneratePress 테마죠. GeneratePress 무료 테마에서 보기 좋게 꾸미는 방법에대해 알아보겠습니다.

처음 워드프레스를 접하게 되면 가장 많이 사용하는 테마가 GeneratePress 테마인데요. 하지만 무료로 사용하게 되면 내 블로그 페이지가 정말 맘에 들지 않아 유료로 전환해 레이아웃 기능을 사용하는 분들도 있을 거라 예상됩니다.

GeneratePress 테마 무료 꾸미기

GeneratePress 테마 무료로 사용해도 간단한 CSS 추가를 해주면 보기좋게 레이아웃을 변경할 수 있습니다.

많은 검색 끝에 어떤 블로그에서 챗GPT를 활용해 GeneratePress 테마에서 CSS추가해 유료테마에서 적용할 수 있는 CSS를 공유해 주셨는데요.

https://avada.tistory.com/2299

이 CSS를 가지고 그대로 적용하니 만족한 결과를 가지고 올 수 있었습니다.

위의 이미지를 보면 차이가 보이시나요?

왼쪽에는 제목과 큰 특성이미지 아래로 내용이 보이고 카테고리와 태그 등의 불필요한 내용이 보이게 되지만, CSS 적용하게되면 제목, 특성 이미지, 내용만 보이게 정리된 레이아웃으로 수정할 수 있습니다.

다른 분이 공유해주신 CSS에서 제가 조금 변경한 부분은 특성 이미지 사이즈와 카테고리, 태그 불필요한 부분을 숨김처리해 CSS 추가해봤습니다.

GeneratePress CSS 적용하는 법

우선 내 워드프레스에서 사용자 정의 – 추가 CSS에서 CSS를 추가할 수 있습니다.

아래 코드는 제가 위 블로그에서 공유한 CSS 코드에서 특성 이미지 사이즈만 변경 후 사용하고있는 CSS 코드입니다.

/* 글 제목 수정 */.entry-title {
 font-weight:bold;
 font-size:30px;
 font-family: 'NanumGothic', sans-serif;  
}

/*이미지 위치와 크기 제한*/.post-image img {
  float: left;
  margin-right: 30px;
 width: 250px;
  height: 150px;
 
}

/*이미지 위치와 크기 제한*/.post-image:first-child img {
  float: none;
  margin-right: 0;
}
/*이미지 위치와 크기 제한*/.post-image:not(:first-child){margin-top:2em}

/*내용summary 글자크기와 길이제한*/.entry-summary p{
 font-size:20px;
 font-family: 'NanumGothic', sans-serif;
 overflow: hidden;  
  text-overflow: ellipsis; /* 말줄임표 (...)로 글자 제한 */ height: 150px; /* 높이 지정 */  
  
}

/*메인타이틀 제목 수정*/.main-title {
  font-weight:bold;
 font-size:18px; 
}
.attachment-full{
 width: 300px;
  height: 300px; 
 border: 2px solid black;
} 

.comment-reply-title{
 font-weight:bold;
 font-size:23px
}

/*이미지에 그림자 넣기, 이미지 하단에 여백 주기*/img {
 /*border: 2px solid black;*/  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
 margin-bottom: 20px;  Adjust the value as needed 
}

.wp-post-image{
 width: 300px;
  height: 300px;
}
.logo {
  max-width: 100px; /* 원하는 로고 이미지의 최대 너비 지정 */ width:auto;
  height: auto; /* 너비 변경에 따라 높이 자동 조정 */}

/*figure 때문에동작하지 않음*/table {
  width: 100%;
  border: 1px solid gray;
  border-radius: 5px;
}
/*표의 헤드만 수정*/thead {
  background-color: #f0f0f0;  
 border: 1px solid black;
 font-size:14px
}
tbody {  
 border: 1px solid black;
 font-size:13px;
}
.tablepress-id-1 .column-1 {
 width: 25%;
}
.tablepress-id-1 .column-2 {
 width: 25%;
}

/*code pro 하단 여백*/.wp-block-kevinbatdorf-code-block-pro{
 margin-bottom: 20px;
}

.site-logo {
    margin-top:20px;
}

.single .inside-article>.featured-image {
 display: none;
}

위 코딩을 복사해 추가 CSS에 붙여 넣기하면 바로 적용됩니다.

그리고 자신의 특성 이미지(썸네일) 이미지와 비율이 안맞아 흐트러져 있다면, 이미지 사이즈 수정하는 CSS에서 변경할 수 있습니다.

위 CSS 코드에서 이미지 위치와 크기 제한 부분에 width, height 가로, 세로를 수정해 적용해 보세요.

그 외에도 CSS 코드 상단에 주석 처리되어 있는 부분을 보고 위치와 폰트 사이즈 등을 커스터마이징할 수 있죠.

GeneratePress 테마 카테고리, 태그 숨기기 CSS

그리고 저 같이 태그와 카테고리를 노출하지 않을 경우 사용할 수 있는 CSS 코드입니다.

/* GP 테마 블로그 페이지에서 메타 정보 숨기기 *//* Hide the meta entries in WordPress GeneratePress theme */
.home .entry-meta, .archive .entry-meta { display: none; }

.home .cat-links, .archive .entry-meta .cat-links { display: none; }

오늘은 이렇게 워드프레스 GeneratePress 무료 테마에서 CSS를 추가해 간단하게 레이 아웃을 변경하는 방법을 알아봤는데요.

GeneratePress 유료 테마에서는 간단한 방법으로 레이아웃을 변경하고 여러가지 기능이 있어 꾸미기를 할 수 있지만 1년에 59달러를 지불해야하는 부담이 있습니다.

저 처럼 워드프레스를 시작한지 얼마되지 않은 분들에게 유용한 정보가 되었으면 합니다.

워드프레스 관련 포스팅