이번 글에서는 수익형 블로그를 위한 테마로 가볍고 속도가 빨라서 많이 사랑받고 있는 제네레이트프레스(GeneratePress / 줄여서 GP) 무료 테마를 좀 더 보기 깔끔하게 바꾸는 세팅에 대해 알려드리려고 합니다. 아래 경로를 통해 클라우드웨이즈 가입을 하신 분들에게는 본문의 테마 수정 내용 및 설치된 플러그인의 개별 셋팅값들을 모두 반영한 세팅 최적화 파일을 무료로 드리고 있습니다. 바로 글만 쓰세요.(설명서 참조)
제네레이트프레스 디자인 수정
앞으로 보시는 셋팅값들은 현재 보고 계시는 이 페이지와 동일한 기준으로 설명드릴거구요. 여기서 좀 더 세부적으로 바꾸실 분들은 변경을 하셔도 좋습니다. GP유료 테마를 쓰실 분들은 보이는 화면이 당연히 좀 더 많으실 거에요.
자 먼저 테마를 수정하기에 앞서 차일드테마가 깔려있는지 한 번 확인해주세요. 원본 테마를 건드리는 게 아니라 앞으로 모든 수정은 차일드테마에서 해야합니다. 그 이유와 방법은 아랫글을 참조해주세요
사용자 정의하기 화면 수정
그럼 차일드테마 기준으로 관리자 화면에서 좌측 ‘디자인 – 사용자 정의하기’에서 수정해야 할 부분들을 설명드리겠습니다.
사용자 정의하기 화면에서는 사이트 아이덴티티, Layout, Colors, Typography, 추가 CSS 부분에 대해서 수정할 예정이고 아래에서 차례대로 안내드리도록 하겠습니다
사이트 아이덴티티 수정
사이트명을 수정하는 카테고리입니다.
- 사이트 제목 : 이 사이트의 핵심 주제를 담은 키워드가 담기면 좋습니다. 사이트 제목은 기억하기 쉽거나 아니면 검색에 걸릴 만한 키워드를 담고 있으면 좋습니다. 처음 워드프레스를 클라우드웨이즈에서 만드신 분들은 웹사이트 URL이 길게 들어가 있으니 변경해주시면 됩니다.
만약 노출을 원치 않으시면 Hide site title 체크박스에 체크해주시면 됩니다.
- 태그라인 : 현재 이 사이트 상단을 보시면 워드프레스 정보공유 아래 문장이 하나 더 있습니다. 사이트의 부연설명 정도로 생각해주시면 됩니다. 만약 노출을 원치 않으시면 Hide site tagline 체크박스에 체크하시면 됩니다.
- 로고는 선택 안하셔도 되고 사이트 아이콘을 512×512로 올려줍니다. 참고로 티스토리에서 작은 사이즈의 파비콘 ICO 파일을 만들었는데 같은 위치에 이 이미지가 노출됩니다.
워드프레스 이미지 업로드
참고로 워드프레스에서 업로드하는 모든 이미지는 좌측 메뉴의 미디어 라이브러리에서 관리됩니다. 파일을 잘못 업로드하셨을 경우 이곳에서 삭제하시면 되는데, 살짝 수정한 파일을 재업로드하실 경우에는 파일명을 달리해주시면 바로 반영됩니다. 똑같이할 경우 이전 버전의 이미지가 노출되더라구요 (캐시 문제)
Layout
레이아웃은 전체적인 사이트의 사이즈, 각 파트별 폰트 크기, 줄간격 등을 세부적으로 디테일하게 변경할 수 있는 곳입니다. 기본적으로 워드프레스는 줄간격이 좀 짧아서 보기에 답답해보이는 점이 있는데 여기서 아래 셋팅값을 기준으로 본인이 좀 더 바꾸셔도 됩니다.
레이아웃은 위와 같이 구성되어 있습니다. 하나 하나 들어가볼게요.
- 컨테이너 : 컨테이너는 전체적인 사이트의 가로폭을 결정하는 부분입니다. 컨텐트 레이아웃은 각 파트를 박스단위로 나눠서 보이게 할 건지 하나로 전체적으로 통일할건지를 묻는겁니다. 저는 one-Container 에 정렬방식도 text로 했습니다. 변화를 보시려면 바꿔보시면 어떤건지 이해가 가실거에요.
그리고 설정을 바꾼 다음에 반영을 하기위해서는 상단의 공개버튼을 눌러야 합니다. 매번 눌러도 되고 최종적으로 한 번 눌러도 됩니다. 하지만 공개를 누르지 않으면 바꾼 것들이 반영되지 않습니다.
header
사이트 아이덴티티에서 설정한 사이트명의 위치를 바꾸는 설정입니다. Header witdth를 Full 로 설정하면 좌우로 꽉 차게 됩니다. 한번씩 설정을 바꿔보세요.
상단에 메뉴가 나타나는 바를 네비게이션 바라고 합니다. 그 안에 나중에 설정할 메뉴가 등장할 위치를 설정하는 칸입니다.
저는 오른쪽 부터 나타나게 Float Right 로 그냥 뒀습니다. 그리고 가장 하단에 Enable navigation search modal 의 체크박스만 변경했습니다.
그렇게 하면 나중에 메뉴 상단에 검색창이 깔끔하게 생기게 됩니다. 검색창이 우측 위젯에 크게 들어가는 것보다 돋보기 아이콘 하나 있는 게 좋아 보이더라구요. 해당 사이트에서 검색어를 보여주는 결과값입니다.
Sidebars
사이드바를 좌측에 둘건지 오른쪽에 둘건지 아예 안둘건지 결정하는 곳입니다. 저는 우측 사이드바 그대로 두고 썼습니다
Footer witdth를 Full 로 설정하면 좌우로 꽉 차게 됩니다.
Back to Top Button 을 Enable 로 하면 스크롤을 밑으로 내렸을 때 바로 최상단으로 갈 수 있는 버튼이 생깁니다.
color – 색상 추가하기
그 다음 색상 항목입니다. 여기서는 헤더나 네비게이션 글씨 색상 등 요소별로 다 색깔을 커스터마이징 할 수 있습니다. 전 이런 부분들은 사실 건들지 않았고 global color 에서 자주쓰는 색상을 추가했습니다. 워드프레스에서 글을 쓰다보면 글씨 색을 바꿔야 되는데 빨간색이나 노란색이 안보여서 불편했거든요
글로벌 컬러 앞에 보이는 + 버튼을 눌러보면 그물망이 보이는 새로운 색상이 나타납니다.
그 그물망 모양을 클릭하면 색상을 선택할 수 있습니다. 하단에 ff0000을 넣으면 그물망이 빨간색으로 바뀝니다. 상단 화살표를 눌러서 색상 자리배치도 바꿀 수 있습니다. 최종적으로 공개버튼을 눌러 저장합니다.
Typography
자 이 부분이 이제 좀 만질 게 많은 부분입니다. 잘 따라와주세요
개인적으로 폰트는 따로 추가하진 않았고 타이포그래피 매니저를 수정했습니다. 항목을 추가할 때마다 매 번 가장 하단의 Add Typography를 눌러서 추가하신 다음에 설정을 해주면 됩니다.
body 세팅
body를 고르게 되면 기본적으로 본문에 들어가는 폰트와 줄 높이, 자간, 문단 아래와 간격 등을 위와 같이 조절했습니다. 숫자를 바꾸게 되면 실시간으로 우측 본문이 바뀌는 걸 보고 본인이 맞게 수정해주세요
Site Title 세팅
헤더에 들어가는 사이트 명의 글씨크기와 간격에 대한 설정입니다
Primary Menu Items세팅
네비게이션 바에 들어가는 메뉴명에 대한 글자 크기 등을 고치는 곳입니다
Heading 1 (H1) 세팅
개별 글에서 보여지는 제목 사이즈입니다. Bold 처리 및 크기를 조정했습니다
Archive Contents Title (H2) 세팅
Archive Contents Title 은 각 메뉴로 들어갔을 때 글 제목과 본문 몇 줄이 요약으로 보이는 항목에서의 제목을 Bold 처리와 크기를 알맞게 줄인 부분입니다.
가장 하단 푸터의 글씨 크기입니다.
다 설정을 마치셨으면 공개버튼을 눌러 수정 내역을 저장합니다.
General
본문 중 링크가 걸린 글자에 밑줄을 표시하는 게 Always 세팅이고 전 Never로 바꿨습니다. 취향껏 하시면 될듯 합니다.
추가 CSS (커스텀 코드 포함)
메뉴에서 커스텀하는 대부분의 설정은 추가 CSS 에 코드를 추가해서 변형하게 됩니다.
제가 현재 사이트에 추가한 코드들을 한 방에 정리해서 보여드리도록 하겠습니다. 주석을 다 달아놨기 때문에 어떤건지 찬찬히 보시고 원하지 않는 것들은 지워주셔도 됩니다. 온라인을 몇일 뒤지면서 GP테마에 필요한 것만 제가 모아놓은 코드들입니다. 다른 테마와 100%호환되지 않을 수도 있습니다. (작성자 정보, 날짜 숨김 등등)
TIP! 추가적인 세부 수정을 어떻게 해야될지 모르는 분들은 ChatGPT에게 주제단위로 붙여넣고 원하는 대로 바꿔달라고 하시면 원하시는 CSS를 받으실 수 있습니다.(별거 없습니다)
/* h2 요소 스타일 */
.single .entry-content h2 {
font-size: 1.3em;
margin: 1.15em 0 0.6em 0;
font-weight: normal;
position: relative;
text-shadow: 0 -1px rgba(0,0,0,0.6);
line-height: 40px;
background: #355681;
background: rgba(53,86,129, 0.8);
border: 1px solid #fff;
padding: 5px 15px;
color: white;
border-radius: 0 10px 0 10px;
box-shadow: inset 0 0 5px rgba(53,86,129, 0.5);
font-family: 'Muli', sans-serif;
}
/* h3 요소 스타일 */
.single .entry-content h3 {
margin: 1em 0 0.65em 0;
font-weight: 600;
font-family: 'Titillium Web', sans-serif;
position: relative;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
font-size: 22px;
line-height: 40px;
color: #355681;
text-transform: uppercase;
border-bottom: 1px solid rgba(53,86,129, 0.3);
}
/* h4 요소 스타일 */
.single .entry-content h4 {
padding: 3px 9px;
position: relative;
font-size: 20px;
border-left: 5px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
margin-bottom: 15px;
}
/* 이미지 스타일 */
.single .entry-content img {
display: block;
margin: 0 auto;
}
/* 링크 밑줄 제거 */
a {
text-decoration: none!important;
}
/* 마우스 오버 무지개 애니메이션 */
@keyframes rainbow {
0% { color: red; }
14% { color: orange; }
28% { color: yellow; }
42% { color: green; }
57% { color: blue; }
71% { color: indigo; }
85% { color: violet; }
100% { color: red; }
}
a:hover {
animation: rainbow 3s infinite;
}
/* 워드프레스 테마 GeneratePress 이미지 캡션 스타일 변경 */
.wp-block-image figcaption,
.wp-caption .wp-caption-text {
text-align: center;
font-size: 0.8em;
color: #8f919e;
overflow-wrap: break-word;
word-wrap: break-word;
line-height: 1.5em;
}
/* GP 테마의 홈페이지, 카테고리 페이지, 개별 글, 검색 결과 페이지에서 카테고리, 태그, 앞뒤글 메타 숨기기 */
.home .entry-meta,
.archive .entry-meta,
.search .entry-meta,
.single .entry-meta {
display: none;
}
/* 공백 블록 사이즈 변경 */
.wp-block-spacer {
height: max(3vw, 4vh) !important;
}
/* GP 테마 사이드바 고정 */
@media (min-width: 769px) {
.site-content {
display: flex;
justify-content: space-around;
align-items: flex-start;
}
#right-sidebar {
position: -webkit-sticky;
position: sticky;
bottom: 0.1rem;
align-self: flex-end;
}
}
/* GP 테마 홈 페이지, 아카이브 페이지, 검색 결과 페이지에서 썸네일 제거하기 */
.home .post-image,
.archive .post-image,
.search .post-image {
display: none;
}
/* GP 테마 개별 글 및 페이지에서 특성 이미지(썸네일) 제거 */
.single .inside-article > .featured-image,
.page > .featured-image {
display: none;
}
/* 이미지 간 여백 추가하기 */
.wp-block-image + .wp-block-image {
margin-top: 30px;
}
/* 이미지 중앙정렬 */
.wp-block-image {
text-align:center;
}
/* 드래그 선택 텍스트 스타일 */
::selection {
background: #F5501D;
color: #FFFFFF;
}
::-moz-selection {
background: #F5501D;
color: #FFFFFF;
}
/* 형광펜 */
.single .entry-content strong {
background: url('https://s2.svgbox.net/pen-brushes.svg?ic=brush-9&color=yellow') no-repeat;
background-size: 100% 150%;
background-position: left center;
padding: 0 4px;
margin: 0 -4px;
}
.single .entry-content table strong {
background: none;
}
<!-- 형광펜 하얀 텍스트시 삭제_footer에 추가 -->
<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>h2, h3, h4 등의 디자인은 커스텀으로 모두 수정할 수 있습니다. 세부 코드 안내는 아래 글을 참조해주세요
위젯 수정
위젯은 디자인-위젯 에서 수정하는 메뉴나 사용자 정의 내에서 수정하는 거나 내용은 동일합니다. 다만 디자인에서 하는 게 좀 더 코드 입력을 넓게 볼 수 있습니다.
하나 팁을 드리자면 만약 여러 배너를 건다거나 정보를 넣을 대 블록을 여러개 생성해서 넣으면 간격이 너무 벌어지기 때문에 한 블록 안에서 <br> 로 띄어쓰기 해서 생성하시면 보기 깔끔합니다.
메뉴 수정
메뉴는 추후에 원하는 만큼 생성하고 순서 및 카테고리 관리를 할 수 있습니다.
카테고리를 넣을 수도 있고 개별 글, URL, 혹은 별도의 페이지를 선택해서 네비게이션 바에 넣을 수도 있습니다.
테마 파일 편집기
워드프레스의 테마파일 편집기에서도 여러 수정을 할 수 있습니다.
테마파일 편집기 수정 vs 사용자 정의 추가 CSS 차이
둘다 디자인을 바꾸는 방식이지만 테마 파일 편집기를 사용하면 좀 더 직접적으로 디테일한 변경을 할 수 있습니다. 반면 사용자 정의 CSS를 사용하면 기존 테마를 유지한 채로 스타일을 변경하거나 추가할 수 있으며, 테마 업데이트에도 안전하게 유지됩니다. 일반적으로는 사용자 정의 CSS를 활용하여 스타일 바꾸는 방식을 권장합니다.
- 테마 파일 편집기: 테마의 PHP 파일이나 템플릿 파일을 직접 수정함. 좀 더 직접적이고 깊이 있는 수정 가능. 다만 잘못된 수정으로 인한 웹 사이트의 문제가 발생할 수 있으며, 테마 업데이트 시 수정 사항이 덮어쓰일 수도 있습니다. (하지만 이것도 차일드 테마사용으로 해결 가능)
- 사용자 정의(추가) CSS: 워드프레스 대시보드의 “사용자 정의 – 추가 CSS” 경로를 통한 스타일 시트(CSS)를 수정 방법. 이는 웹 사이트의 기존 테마를 유지한 채로 스타일을 변경할 수 있는 방법입니다.
이 사이트의 기초코딩 카테고리에 들어가 보시면 좀 더 디테일한 내용들을 테마파일 편집기에서 수정한 예시 글들이 있습니다. 이 수정 내용은 각 해당 글을 보시고 수정하시면 될 것 같습니다.