[태그:] 워드프레스 테마 twenty sixteen

워드프레스를 처음 사용하고, 이것저것 설정할 것들이 많다. 그 과정에서 나름 본인에게 맞는 테마들을 찾게 되고, 그 테마 안에서도 한참을 씨름해야 내게 맞는 글 쓰기를 할 수 있다. 오늘은 내가 새로 발견한 테마인 twenty sixteen에서 알게 된 설정법들을 공유하여 본다.

참고로, twenty sixteen은 워드프레스 자체에서 만든 테마로 무료로 사용할 수 있고, 이것저것 자신에게 맞게 변형이 가능하다. 참고로, 워드프레스 포럼에서 여러가지 정보들을 서칭할 수 있다.

참고로, 테마를 변경하게 되면 서치코드를 다시 넣어주는 것이 안전하다. (테마 편집기에서 html안에 head 섹션에 다시 넣어주기)

---

twenty sixteen 추가 css 설정 경로

보통 필요한 옵션들을 구성하기 위해서 무료 혹은 유료의 플러그인들을 다운로드하여 사용을 하는데, 여기서 css로 하게 되면, 별도 플러그인 없이도 간단히 사용할 수 있고, 용량에도 지장을 덜 주게 되는 장점이 있다.

먼저, 홈에서 외모로 들어가서 사용자 정의하기에서 추가 CSS로 들어간다.

그럼 왼쪽에 빈 창이 뜨는데, 여기에 아래와 같이 해당 css 코드들을 넣어주고 발행해주면 변경사항들이 실시간으로 반영되게 되는 것이다. 단, 여기서 css 코드들을 꼭 정확히 입력해 주는 것이 매우 중요하다.

---

폰트 변경하는 법

사실, 처음 twenty sixteen 테마를 설정하고 나서는 매우 깔끔해서 마음에 들었는데, 글자체가 너무 올드해서 한참을 서칭해서 발견한 방법이다. 그나마 너무 궁서체 아닌 요즘 스타일인 것 같아서 선택한 폰트다.

먼저, 아래의 css 코드를 그대로 위에서 설명한 추가 css창에 복사해서 붙여넣기 하고 발행을 해본다. 그럼 아래와 같이 궁서체에서 변경이 된다. 아래에서 /* Use main 폰트 변경 */는 내가 알아볼 수 있게 제목을 붙여준 것이고, 중요한 건 다음의 코드들이다. body부터 ⎬까지 빠짐없이 다 넣어줘야 한다.

/* Use main 폰트 변경 */
body #content *, #site-navigation {
font-family:Montserrat, "Helvetica Neue", sans-serif;
}

아래와 같이 변경 전과 후를 비교해 보시면 되시겠다.

---

테그 내역 없애기(제거)

아래와 같이 카테고리나 홈에서 보면, 글에 해당하는 날짜 등을 포함한 태그 내역들도 같이 뜬다. 개인별로 다르겠지만, 덕지덕지 붙어있는 모양새가 별로라 나는 없애기로 했다.

역시 /메타 내용 없애기/는 내가 붙인 제목이고, @부터 }까지 잘 복사해서 추가 css창에 잘 붙여넣어줘야 한다.

/메타 내용 없애기/
@media screen and (min-width: 61.5625em) {
body:not(.search-results) article:not(.type-page) .entry-footer {
display: none;
}

태그를 제거하기 전에는 제목과 요약글 썸네일 아래로 , 날짜와 카테고리 이름, 테그들이 아래 왼쪽에 빼곡히 적혀있다. 그리고 옆으로 본문이 또 나와서 뭔가 매우 혼잡스러워 보인다.

태그를 제거하고 나면, 아래와 같이 깔끔해진 모습이다. 참고로, 아래는 썸네일도 크기를 잘라서 조절하고, 아카이브도 정리하고 난 뒤로, 본문이 사라져 있다.

---

본문 너비(contents width) 넓히기

twenty sixteen 테마에서 사실 가장 마음에 들지 않은 부분이 바로 본문의 너비였다. 깔끔한 바디감은 좋지만, 실제로는 넓은 창에서 본문의 너비가 너무 좁고 답답해보여서, 이것도 변경을 해보았다.

아래의 /본문 너비 넓히기/는 역시 제목에 불과하다. 중요한 건 body부터 }까지 빠짐없이 코드를 잘 복사해서 추가 css영역에 붙여넣고 발행해주면 된다.

---

/본문 너비 넓히기/
body:not(.search-results) article:not(.type-page) .entry-content {
float: left;
width: 100%;
}
}

아래의 변경 전과 후를 비교해보면 차이가 크다. 변경 전에는 매우 협소 그 자체이다. 만일 여기에 애스센스 광고까지 붙는다면, 광고가 본문보다 훨씬 넓게 붙어서 뭔가 언발란스하다. 하지만 변경하고 나면, 광고 자리와 본문이 정확히 일치해서 훨씬 보기가 좋다.

---

아카이브 변경 및 정리

그리고 카테고리를 들어가보면, 해당하는 글들이 나열되는데, 썸네일과 제목, 그리고 요약글부터 시작해서 본문 전체가 나온다. 그런데 이게 계속 반복된다.

보통 카테고리 글이라고 하면, 제목들이 목록처럼 나와야 보기가 편한데, 그렇게 하는 방법은 아직은 찾지 못했다. 그래서 일단 목록이라도 정리해보자 싶어서, 본문글을 없애고, 제목과 썸네일, 요약글 정도만 목록에 나오게 변경해 보았다.

역시 /*아카이브 정리 본문 내용 없애기*/는 내가 붙인 임의 제목이니, 중요한 건 .부터 시작해서 }로 끝나는 css 코드를 잘 복사해서 붙여넣어 주는 것이다.

/* 아카이브 정리 본문 내용 없애기*/
.archive .post .entry-content {
display: none;
}

설정 후에는 썸네일과 제목 요약만 목록으로 죽 표시된다. 좀더 깔끔하게 정리하는 법을 계속 찾아봐야 겠다. 워드프레스 쉽지가 않다. 모두모두 파이팅이다.

✳️ 워드프레스 소셜 공유버튼 만들기. 카카오톡 포함.플러그인 없음. 무료.

✳️ 워드프레스 네이버 서치어드바이저 소유확인 등록 안될 때 해결하는 법.

✳️ 초간단 워드프레스 하위도메인 사이트에 추가 승인 없이 애드센스 연결하기.

✳️ 워드프레스 홈페이지 제작. 새 워드프레스에 가비아 하위도메인 추가 연결.

---

.