워드프레스에서 가장 속도가 빠르다고 최적화 테마라고 알려진 게 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달러를 지불해야하는 부담이 있습니다.
저 처럼 워드프레스를 시작한지 얼마되지 않은 분들에게 유용한 정보가 되었으면 합니다.
워드프레스 관련 포스팅