Generatepress 테마는 워드프레스의 인기 테마 중 하나로서 심플함과 빠른 속도가 매력적입니다. 하지만, Pro 업그레이드를 하지 않으면, 테마파일을 직접 수정해서 써야 합니다. 저는 html이나 css 파일을 공부해본적이 없어서 난감한데요.
그래서 ChatGPT의 도움을 받아 조금씩 꾸며보았습니다.
목차
1. 테마 파일 살펴보기
우선 어떤 파일들이 있나 살펴봅니다. php 파일들이 있고, css 파일이 있습니다.
뭔가.. php 파일을 건드리고 싶은 맘이 생기지만, 웹페이지를 꾸미는 대부분은 CSS파일을 수정하면 됩니다.
CSS(Cascading Style Sheets) 파일은 웹 개발에서 HTML 문서의 시각적 스타일과 레이아웃을 정의하는 데 사용되는 텍스트 문서입니다. CSS 파일에는 색상, 글꼴, 간격, 위치 지정을 위한 HTML 요소를 표시하는 방법이 포함됩니다.
CSS파일에는 아래와 같은 것들이 포함됩니다.
- Selectors: Selectors는 스타일을 지정하려는 HTML 요소를 대상으로 지정하는 데 사용됩니다. HTML 요소 이름(예: p), 클래스 이름(예:
.my-class), ID(예:#my-id) 또는 더 복잡한 선택기가 될 수 있습니다 . - Properties : CSS 속성은 선택한 요소의 스타일 측면을 정의하는 데 사용됩니다. CSS 속성의 예로는
color,font-size,margin,padding,background-color,border등이 있습니다. - Values : 각 속성에 지정하는 값ㅇㄹ 의미합니다. 예를 들어
color: blue;텍스트 색상을 파란색으로 설정합니다. - Comments : CSS 파일에는 코드 문서화를 위한 주석이 포함될 수 있습니다.
주석은 '/*'와 ‘*/' 사이에 표시되고, 웹페이지에는 표시되지 않습니다.
테마 편집에 있는 css파일은 띄어쓰기가 없고, 검색이 안되어서 수정이 어려운데요. 여기서 수정할 필요가 없습니다. 화면 상단에 “내장 CSS편집기”에서 편집하고 실시간 미리보기를 할 수 있다고 나옵니다. 미리보기가 된다는 것이 아주 강력한 장점이죠.
2. 수정해야 하는 위치 확인하기
그런데, 어디를 어떻게 수정해야 하는 지 막막한데요. 여기서 개발자 도구 사용이 필요합니다. 저도 원래 알았던 것은 아니고, 오늘 낮에 이것저것 살펴보고 눌러보다가 알게 되었습니다.
다시 설정창을 나가고 가장 기본이 되는 폰트를 수정해 보겠습니다. 저는 아래와 같은 부분을 수정해 보려고 합니다.
설정 창에서 나가 F12를 눌러줍니다. 그럼 아래와 같이 어려워 보이는 화면이 나오는데요. 하나하나 따라가보면 어렵지 않습니다.
오른쪽 개발자 도구 화면에 커서를 두고 이리저리 움직여보면, 본래 화면에서 파랗게 표시되는 것을 볼 수 있는데요. 이것을 따라가 보겠습니다.
확대해서 보면 아래와 같이 site grid-container container hfeed 부분에 커서를 두니 파란 불이 들어왔습니다.
제가 수정하려는 부분은 글 제목 부분이니까 너무 넓은 범위에 표시가 되었습니다. 이때는 선택한 요소의 제일 왼쪽에 있는 검은 삼각형을 눌러주면 하위 구조가 펼쳐집니다
원하는 위치에 표시 될때까지 삼각형을 눌러서 하위 구조로 내려가다보면, 아래와 같이 원하는 위치를 찾을 수 있습니다. 그리고 h2.entry-title이라는 부분이 보입니다. h2는 이 부분이 h2 제목 태그라는 뜻이고, 뒤에 있는 entry-title이 수정 대상 클래스입니다.
3. ChatGPT에서 css 파일 작성 방법 물어보기
css 파일을 어떻게 수정하는 지 모르니까. ChatGPT에 물어보겠습니다. css 파일을 수정한다는 것을 명시하는 것이 좋습니다. css파일을 수정한다고 말하지 않으니까 html파일을 직접 수정하는 방법을 알려주는 경우도 있었습니다.
아래와 같이 설정하라고 나오네요. 코드 오른쪽 상단에 Copy code를 클릭하면 코드가 복사 됩니다. 이 코드를 내장 CSS 편집기에 입력해야 합니다.
4. 내장 CSS 편집기에 입력하기
홈화면으로 가봅니다. 아래 그림처럼 상단에 “사용자 정의하기”를 클릭해 봅니다.(개발자도구는 닫아도 됩니다)
추가 CSS에서 CSS 수정이 가능합니다.
추가 CSS에서 복사한 코드를 붙여 넣으면, 아래 보시는 것처럼 폰트가 변경된 것을 확인할 수 있습니다.
이런 식으로 하나씩 찾아서 수정을 한 최종 현재의 css 파일은 다음과 같습니다.
/* 글 제목 수정 */
.entry-title {
font-weight:bold;
font-size:32px;
font-family: 'NanumGothic', sans-serif;
}
/*이미지 위치와 크기 제한*/
.post-image img {
float: left;
margin-right: 30px;
width: 200px;
height: 200px;
}
/*이미지 위치와 크기 제한*/
.post-image:first-child img {
float: none;
margin-right: 0;
}
/*이미지 위치와 크기 제한*/
.post-image:not(:first-child){margin-top:2em}
/*내용summary 글자크기와 길이제한*/
.entry-summary p{
font-size:13px;
font-family: 'NanumGothic', sans-serif;
overflow: hidden;
text-overflow: ellipsis; /* 말줄임표 (...)로 글자 제한 */
height: 100px; /* 높이 지정 */
}
/*메인타이틀 제목 수정*/
.main-title {
font-weight:bold;
font-size:25px;
}
.attachment-full{
width: 300px;
height: 300px;
border: 2px solid black;
}
h1{
font-size:34px;
font-weight:bold;
font-family: 'NanumGothic', sans-serif;
}
h2{
font-size:28px;
font-weight:bold;
font-family: 'NanumGothic', sans-serif;
}
h3{
font-size:24px;
font-family: 'NanumGothic', sans-serif;
}
p {
font-size:16px;
font-family: 'NanumGothic', sans-serif;
}
.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;
}
아래는 현재 버전의 레이아웃입니다. 처음보다 많이 깔끔해졌죠?^^
고맙습니다 도움 많이 되었습니다!