이전 글까지는 무료 테마를 이용한 테마 설정 방법을 알아보았습니다. 이번 글부터는 테마를 수정하는 방법을 알아봅니다. 무료테마든 유료테마든 테마를 설치하고 옵션을 설정하고나면 수정하는 절차는 꼭 필요합니다. 그대로 사용하기에는 테마가 영문 기준으로 만들어졌기 때문이기도 하고 내가 원하는 디자인이나 색상으로 만들어진 것이 아니기 때문이기도 해서 꼭 필요한 절차입니다.
테마의 수정은 현재 설치된 테마를 직접 수정할 수도 있지만 테마란 언제든 업데이트될 수도 있어서 만일 수정한 상태로 사용하다가 업데이트를 하면 수정한 것이 날아가 버립니다. 그래서 이클립스 테마는 기본 스타일시트를 수정해도 적용이 안되게 해놓았습니다. 항상 자식테마를 만들고 이 자식테마를 대상으로 수정해야 합니다.
1. 자식 테마 만들기
내 컴퓨터의 테마 폴더로 들어가서 이클립스 테마를 대상으로 Ctrl+C, Ctrl+V키를 눌러 테마를 복사하고 폴더 이름을 변경해줍니다. 이대로 두면 워드프레스 관리자 화면의 테마 관리에서 별개의 테마로 인식하게 됩니다. 그래서 두 개의 테마가 부모 자식관계라는 것을 만들어주려면 자식테마의 스타일시트를 수정해주면 됩니다. 또한 함수파일의 내용이 같으면 충돌이 일어나므로 자식테마의 함수를 모두 제거해야합니다.
자식테마 폴더로 들어가서 우선 style.css파일을 텍스트 편집기에 엽니다. 간단하게 편집할 것이므로 윈도우 OS에 기본으로 설치돼있는 메모장을 사용해도 되지만 자주 사용할 경우는 노트패트++나 서브라임 텍스르 2를 권합니다.
스타일시트를 열면 위처럼 주석문만 나옵니다. 테마를 디자인하고 있는 실제 스타일시트는 다른 곳에 있고 이 스타일시트는 단지 테마를 인식시키기 위한 역할을 하고 있을 뿐입니다. 테마 이름에 child라고 추가하고 주석문 끝나기 전에 위처럼 Template: eclipse라고 입력합니다. eclipse라는 이름은 반드시 부모 테마의 폴더 이름을 입력해야합니다. Ctrl+S키를 눌러 저장합니다. 이제 이 테마의 수정은 14번째 줄부터 스타일시트를 입력하면 수정이 됩니다.
다음으로 functios.php 파일을 열고 Ctrl+A, Delete 키를 순서대로 눌러 파일 내용을 제거한 다음 저장합니다.
테마관리 화면으로 오면 존재하는 테마들에 자식테마가 있습니다. 활성화 링크를 클릭해서 활성화합니다. 블로그 화면에서 새로고침하면 이전의 테마와 같은 모양으로 나와야 정상입니다.
2. 한글 웹폰트 사용하기
웹디자인에서 폰트의 선택은 아주 중요합니다. 가독성이 좋아야하고 내 블로그 글의 성격에 맞는 폰트를 선택하는 것이 방문자를 배려하는 것이 되며 나아가 방문자를 늘리는 길이 됩니다. 영문의 경우 글자 수가 적기 때문에 폰트를 만들기가 쉬워서 아주 다양한 폰트가 많습니다. 구글의 웹폰트를 이용하면 다양한 폰트를 무료로 사용할 수 있지만 한글의 경우는 웹폰트라는게 거의 없다고 해도 과언이 아닙니다. 폰트를 구매해도 웹폰트 사용권은 포함되지 않기 때문이고 웹폰트가 있어도 모든 웹브라우저에 적용되지 않습니다.
그래서 모든 웹브라우저에 적용할 수 있는 한글 무료 웹폰트 서비스를 이용하면 이러한 단점을 해결할 수 있습니다. 모빌리스 웹폰트 서비스는 개인용 블로그를 운영하는 경우는 무료입니다. 새로운 웹폰트 서비스가 있는데 이 사이트는 제한 사항이 없는 것을 보니 상업용도 가능하리라 생각됩니다. 다만 나눔 폰트만 지원하고 있다는게 단점이죠.
위 링크를 클릭하면 아래와 같은 화면이 나타납니다.
우측 열의 선택 박스에서 폰트를 선택하고 적용하기 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
