작성일자
카테고리 워드프레스/워드프레스 완벽입문 워밍업

이전 글까지는 무료 테마를 이용한 테마 설정 방법을 알아보았습니다. 이번 글부터는 테마를 수정하는 방법을 알아봅니다. 무료테마든 유료테마든 테마를 설치하고 옵션을 설정하고나면 수정하는 절차는 꼭 필요합니다. 그대로 사용하기에는 테마가 영문 기준으로 만들어졌기 때문이기도 하고 내가 원하는 디자인이나 색상으로 만들어진 것이 아니기 때문이기도 해서 꼭 필요한 절차입니다. 


테마의 수정은 현재 설치된 테마를 직접 수정할 수도 있지만 테마란 언제든 업데이트될 수도 있어서 만일 수정한 상태로 사용하다가 업데이트를 하면 수정한 것이 날아가 버립니다. 그래서 이클립스 테마는 기본 스타일시트를 수정해도 적용이 안되게 해놓았습니다. 항상 자식테마를 만들고 이 자식테마를 대상으로 수정해야 합니다.


1. 자식 테마 만들기



내 컴퓨터의 테마 폴더로 들어가서 이클립스 테마를 대상으로 Ctrl+C, Ctrl+V키를 눌러 테마를 복사하고 폴더 이름을 변경해줍니다. 이대로 두면 워드프레스 관리자 화면의 테마 관리에서 별개의 테마로 인식하게 됩니다. 그래서 두 개의 테마가 부모 자식관계라는 것을 만들어주려면 자식테마의 스타일시트를 수정해주면 됩니다. 또한 함수파일의 내용이 같으면 충돌이 일어나므로 자식테마의 함수를 모두 제거해야합니다.



 자식테마 폴더로 들어가서 우선 style.css파일을 텍스트 편집기에 엽니다. 간단하게 편집할 것이므로 윈도우 OS에 기본으로 설치돼있는 메모장을 사용해도 되지만 자주 사용할 경우는 노트패트++서브라임 텍스르 2를 권합니다. 



스타일시트를 열면 위처럼 주석문만 나옵니다. 테마를 디자인하고 있는 실제 스타일시트는 다른 곳에 있고 이 스타일시트는 단지 테마를 인식시키기 위한 역할을 하고 있을 뿐입니다. 테마 이름에 child라고 추가하고 주석문 끝나기 전에 위처럼 Template: eclipse라고 입력합니다. eclipse라는 이름은 반드시 부모 테마의 폴더 이름을 입력해야합니다. Ctrl+S키를 눌러 저장합니다. 이제 이 테마의 수정은 14번째 줄부터 스타일시트를 입력하면 수정이 됩니다.



다음으로 functios.php 파일을 열고 Ctrl+A, Delete 키를 순서대로 눌러 파일 내용을 제거한 다음 저장합니다.



테마관리 화면으로 오면 존재하는 테마들에 자식테마가 있습니다. 활성화 링크를 클릭해서 활성화합니다. 블로그 화면에서 새로고침하면 이전의 테마와 같은 모양으로 나와야 정상입니다.


2. 한글 웹폰트 사용하기


웹디자인에서 폰트의 선택은 아주 중요합니다. 가독성이 좋아야하고 내 블로그 글의 성격에 맞는 폰트를 선택하는 것이 방문자를 배려하는 것이 되며 나아가 방문자를 늘리는 길이 됩니다. 영문의 경우 글자 수가 적기 때문에 폰트를 만들기가 쉬워서 아주 다양한 폰트가 많습니다. 구글의 웹폰트를 이용하면 다양한 폰트를 무료로 사용할 수 있지만 한글의 경우는 웹폰트라는게 거의 없다고 해도 과언이 아닙니다. 폰트를 구매해도 웹폰트 사용권은 포함되지 않기 때문이고 웹폰트가 있어도 모든 웹브라우저에 적용되지 않습니다. 


그래서 모든 웹브라우저에 적용할 수 있는 한글 무료 웹폰트 서비스를 이용하면 이러한 단점을 해결할 수 있습니다. 모빌리스 웹폰트 서비스는 개인용 블로그를 운영하는 경우는 무료입니다. 새로운 웹폰트 서비스가 있는데 이 사이트는 제한 사항이 없는 것을 보니 상업용도 가능하리라 생각됩니다. 다만 나눔 폰트만 지원하고 있다는게 단점이죠.


http://fontface.kr/


위 링크를 클릭하면 아래와 같은 화면이 나타납니다.



우측 열의 선택 박스에서 폰트를 선택하고 적용하기 1번 박스에서 코드를 블럭설정해서 복사합니다. 실제 적용하는 방법은 2번 박스에 보입니다.



외모-->편집기를 선택하고 우측 상단의 편집할 테마 선택에서 자식 테마를 선택하고 선택 버튼을 클릭합니다. header.php 파일을 선택하면 편집창에 열립니다. 편집창의 우측 하단을 클릭드래그해서 아래로 내립니다. <?php response_head_tag(); ?>에 클릭하고 엔터키를 누르면 한 줄이 만들어집니다. Ctrl+V키를 눌러 붙여넣습니다. 편집기 하단에서 파일 저장버튼을 클릭합니다.



이번에는 우측열 하단에서 style.css파일을 선택하고 편집창에서 아래의 스타일시트를 입력합니다. 사용되는 코드는 이 글의 하단에 텍스트파일을 내려받아서 사용하면 됩니다.


body { font-family:NanumGothic, 나눔고딕, 맑은고딕, san-serif  !important; color:#ddd; }


웹폰트 서비스 사이트에서 알려준 대로 영문 나눔고딕체 이름이 들어가고 만일 이 사이트가 정지된다면 컴퓨터의 나눔고딕체를 사용하며 이것도 없다면 윈도우 기본 폰트인 맑은고딕을 사용합니다. 이것도 없으면 일반 고딕체인 굴림체를 사용합니다. !important는 이미 다른 스타일시트에서 폰트 선언을 한 곳이 있으므로 이 스타일시트의 폰트 선언을 먼저 적용하라는 의미입니다. 그다음으로 폰트 색상을 지정합니다. 파일저장 버튼을 클릭한 다음 블로그 화면에서 새로고침하면 아래처럼 나옵니다.



그동안 글자가 굴림체, 바탕체 등으로 나왔는데 이제는 바탕체 부분이 나눔고딕으로 바뀌었습니다. 웹디자인을 하다보면 웹페이지의 요소에 대해서 요소검사를 많이 하게 됩니다. 어떤 속성이 설정돼 있는지 확인하고 수정하는데 필요해서 필수적인 툴입니다. 이런 것을 개발자툴이라고 합니다. 인터넷 익스플로러에도 있지만 크롬의 개발자툴이 사용하기 편리합니다. 

본문 글자 부분을 우클릭하고 요소검사를 선택하면 하단에 개발자툴이 나타납니다. 좌측은 HTML, 우측은 스타일시트 창입니다. 스타일시트 창을 내리다보면 body 태그에 이전에 설정한 폰트 내용이 나옵니다.



글 제목을 대상으로 요소검사를 하면 다른 폰트로 설정돼 있어서 굴림체로 나옵니다. 영문 폰트로 설정된 글자는 모두 기본 폰트인 굴림체로 나타납니다. 스타일시트 창에서 영문 폰트로 설정된 선택자를 클릭드래그해서 블럭설정하고 Ctrl+C 키를 눌러 복사합니다. 선택자는 CSS에서 HTML로 명령을 전달하기 위한 매개체 역할을 합니다. 좌측과 우측의 글자도 굴림체로 나오고 있으니 나중에 같은 방법으로 선택자를 복사해서 스타일시트에 붙여넣어야 합니다.



스타일시트 화면에서 body다음에 콤마를 입력하고 한칸 띈 다음, 붙여넣습니다. 저장하고 보면 제목과 우측 사이드바의 위젯의 제목이 바뀝니다. 



좌측의 폰트는 요소검사를 해서 스타일시트 창의 스크롤바를 내리면 폰트가 선언된 곳이 있습니다. .meta를 복사해서 스타일시트 창에 이전처럼 붙여넣으면 됩니다. 그외에 상단의 메뉴 부분의 글자도 그렇고 여러곳에 굴림체로 나오는 부분을 같은 방법으로 수정하면 됩니다. 다음은 본격적으로 테마를 수정하는 단계로 들어갑니다.



테마수정코드.txt

저작자 표시 비영리 변경 금지
신고

비밀댓글입니다

BlogIcon 베누시안

안녕하세요. 독자분이시군요. 반갑습니다. 새로운걸로 해야 재미도 있을거 같아서 다른 테마로 했습니다. 여러가지를 해봐야 익숙해지죠. 이 과정은 말 그대로 워밍업이라서 깊은 단계는 안들어갑니다. 테마를 선택해서 여러가지 과정을 거쳐서 완성이 되면 흐름을 알게 돼서 테마 제작이나 수정에 도움이 될 것 같습니다.

BlogIcon Cruela

요새 비지니스 블로그로 워드프레스 입문하시려는 언니 두분께 베누시안님 홈페이지를 추천해드렸는데,
(저도 6개월정도 워드프레스를 해봤지만) 벌써 언니들이 저보다 아는게 많으시네요 ㅠ.ㅠ
저는 짬이 날때마다 들러서 html / css 부분 공부하고 가려구요.
좋은 한 주 보내시길 바랍니다~

BlogIcon 베누시안

여자분이신가 보군요. 닉네임을 보고 남자인줄 알았습니다. 언니 분들도 소개하시고 정말 감사합니다. 그리고 CSS기초부분을 잘 파악하시면 티스토리 스킨이나 워드프레스 테마 만드는데 많은 도움이 될겁니다.
님도 좋은 한주 되세요.

비밀댓글입니다

BlogIcon 베누시안

테마편집기가 안보이는 경우는 다중사이트 기능을 사용하면 그렇습니다. 다중사이트 관리자로 들어가면 외모에 테마 편집기가 있습니다.

KJS

워드프레스 한글폰트 적용 때문에 고생고생하다가 운영자님께 방법을 문의드렸는데,
너무 친절하게 조치를 해주셔서 진심 감사합니다.
테마들마다 그 적용방법이 약간씩 다른것 같은데, 저 같은 초보에겐 산넘어 산이네요~^^
그래도 이곳에서 제공해주시는 귀한 정보들 늘 잘 배우고 있습니다.
하나하나 더 정독을 해야겠어요~^^
정말 감사합니다.

BlogIcon 베누시안

블로그 글에 그것에 대한 내용은 나오지 않습니다. 테마 파일을 보내주시면 예제로 사용해서 포스팅하겠습니다.

비밀댓글입니다

BlogIcon 베누시안

위에 보면 상단에 설명이 나와있으니 차근차근 읽어보세요.

손영주

많이 배우고 갑니다. 감사합니다

simon_b

자식테마 만들기 연습중인데요. 제가 지금 사용하고 있는 테마가 Twenty Fourteen 테마라 이걸로 똑같이 해보려 하는데요.
파일질라에 복사하는게 없어서 다운로드 받은 후, 그 폴더를 복사하여 child폴더를 만들었습니다. 그다음에 알려주신 순서대로 하던 중에 이해가 안 되는 부분이 있어 질문드립니다.

[이제 이 테마의 수정은 14번째 줄부터 스타일시트를 입력하면 수정이 됩니다.]라고 하셨는데 그 전까지 완료했는데 []안의 말이 무슨 내용인지 이해가 안 됩니다.

BlogIcon 베누시안

테마의 스타일시트를 수정할 경우 자식테마의 스타일시트에 입력해야 수정이 된다는 의미입니다.

비밀댓글입니다

BlogIcon 베누시안

일반적인 방법으로 메뉴가 만들어지지 않는다면 테마의 문서를 참고해야 합니다. 유료테마는 테마마다 달라서 방법이 일정하지 않습니다. 테마의 압축파일에 포함된 Documents를 열어보면 나와있을겁니다. 어떤 테마는 테마 옵션에서 만들어야 하는 경우도 있습니다.

최용석

처음부터 자식테마를 생성하지 않고 사용중인 테마를 수정하고 있는 중에 최근 업데이트 내용을 반영해야 하는 상황이 생겼습니다. 수정한 테마를 부모테마로 놓고 이를 통해 자식테마를 만들고 부모테마를 업데이트하여 사용하는 방법도 가능할까요? 아니면 업데이트를 한 후 모두 재수정하는 방법밖에는 없는걸까요?

BlogIcon 베누시안

네 첫 번째 방법으로 하면 됩니다. 바뀌는 내용만 자식 테마에 추가하세요.

비밀댓글입니다

KHY

위의 내용대로 해보고있는데 css파일만 수정시엔 페이지가 제대로 뜨는데 functions.php를 지우면 페이지가 안보입니다.
어찌해야할까요?

티스토리 툴바