이전 글에서 워드프레스를 WAMP서버를 이용하여 내 컴퓨터에 서버환경을 만들어 워드프레스를 설치하는 방법과 미국의 워드프레스 사이트에 한국어버전으로 워드프레스를 설치하는 방법, 국내의 무료웹호스팅 사이트에서 워드프레스를 설치하는 방법을 알아보았습니다. 이제 세가지 종류의 워드프레스를 사용할 수 있게 됩니다. 미국의 워드프레스는 거리가 멀기 때문에 속도가 느려서 사용하기 어렵지만 외국을 대상으로 쇼핑몰을 연다든가 외국인을 대상으로 블로그를 만든다든가 하면 검색엔진 최적화(Search Engine Optimization)나 접근성에 있어서 유리하므로 사용해봄직합니다. 디자인을 마음대로 바꿀 수는 없지만 제한적이나마 스킨을 바꿀 수도 있습니다.
워드프레스의 사용법이나 스킨의 디자인 변경, 플러그인 설치 등은 WAMP 서버를 이용하여 내 컴퓨터에서 직접할 수도 있고 국내의 호스팅에 설치한 워드프레스를 이용하여 할 수도 있습니다. 주로 내컴퓨터의 서버환경에서 작업을 하지만 때에 따라서는 실제 인터넷에서 어떻게 보여지는지 호스팅 서버에 파일을 업데이트하여 직접 확인해 보는 것도 중요합니다. 또한 국내에서 많이 쓰이는 웹브라우저에서도 어떻게 보여지는지도 각각의 웹브라우저를 설치하여 확인해봐야합니다. 주로 인터넷 익스플로러가 문제인데 현재의 워드프레스가 HTML5를 기준으로 만들어졌기 때문에 HTML5나 CSS3를 잘 지원하지 않는 IE는 디자인이 어떻게 나오는지 디자인을 변경하거나 플러그인을 설치한 다음에는 수시로 확인해야합니다.
이것은 현재 HTML5를 사용하지 않는 다른 블로그 프로그램인 티스토리나 텍스트 큐브도 마찬가지입니다. 왜냐하면 각 브라우저의 디스플레이 방식이 다르기 때문에 CSS를 어떻게 표현할지는 각 브라우저에 따라 다르게 나오기 때문입니다. 이번 글에서는 이전 글에 이어서 워드프레스의 테마변경하기와 한글웹폰트를 사용하여 워드프레스의 한글폰트를 바꾸는 방법, 그리고 디자인 수정시 웹브라우저의 요소검사 기능을 이용하는 방법을 알아봅니다.
1. 웹디자인시 사용할 웹브라우저 선택
2. 워드프레스의 테마변경
3. 워드프레스에서 한글 폰트 바꾸기
1. 웹디자인시 사용할 웹브라우저 선택
웹디자인에서 웹브라우저중에 현재 가장 문제가 되는 것은 IE이고 아직도 국내에서는 이 브라우저를 많이 사용하기 때문에 디자인 변경 후에는 이 브라우저만 점검해도 됩니다. 제 기준에서 설명을 드리니 IE를 기본으로 사용하는 분들은 이상하게 들리겠지만 웹디자인이나 웹개발을 하는 사람들은 IE를 잘 사용하지 않습니다. 가장 많이 사용하는 브라우저가 파이어폭스와 구글크롬입니다. 개발자용으로 여러가지 플러그인이 있어서 디자인 수정시 아주 유용하고 신기술인 HTML5와 CSS3가 잘 적용되기 때문입니다. 제 경우는 크롬플러스를 사용합니다. 크롬에 비해 사용이 편리하기 때문입니다.
IE에도 개발자툴이 있지만 파이어폭스나 크롬에 비해 아주 다르기 때문에 사용하려면 어색합니다. 그래서 앞으로의 글에서도 디자인 점검시 크롬플러스를 이용합니다. 크롬의 디자인과 비슷하기 때문에 크롬을 사용해도 됩니다. 하지만 크롬플러스는 우클릭하면 나오는 컨텍스트 메뉴도 변경할 수 있어서 좋습니다. 이 컨텍스트 메뉴는 단어 검색을 어느 검색엔진을 사용할 것인지 설정할 수 있고 크롬은 검색엔진이 하나만 나오지만 크롬 플러스는 설정한 만큼의 검색엔진이 나오기 때문에 내 블로그의 글이 어느 검색엔진에서 검색이 잘되고 있는지 점검할때 유용합니다. 설정은 화면 우측 상단의 스패너 아이콘을 클릭하고 옵션-기본설정-검색-검색엔진관리를 클릭하면 상단에 기본검색옵션이 나오고 하단에는 기타 검색엔진 목록이 나옵니다. 기타검색엔진 목록에 마우스 오버하면 "기본으로 설정" 버튼이 나옵니다. 클릭하면 기본검색옵션에 추가됩니다. 기본검색옵션에 있는 검색엔진은 검색할 단어를 클릭드래그해서 블럭설정하고 우클릭하면 설정한 기본검색엔진이 다 나오게 됩니다. 원하는 검색엔진을 선택하면 새창에서 검색이 됩니다.
웹페이지 디자인 점검시 가장 많이 사용하는 것이 우클릭해서 나오는 요소검사입니다. 이것을 클릭하면 html 코드와 스타일시트 목록이 하단에 나옵니다. 지금 "열기"라는 단어를 블럭설정하고 우클릭해서 요소검사를 클릭했는데 html 페이지에서 회색 수평바가 하이라이트되면서 html 코드상에 어느 부분에 위치하는지 보여줍니다. 우측의 CSS 스타일 창에서는 이 단어에 대해서 어떤 스타일이 적용되는지 목록이 나옵니다. 검정색에 가까운 색상코드(#222)를 하고 있고 스크롤바를 내리면 폰트는 어떤 것을 사용했으며 어떤 사이즈로 했는지 그리고 스타일시트 파일에서 몇번째 줄로 가면 수정할 수 있는지에 대한 정보도 나옵니다.
워드프레스도 마찬가지지만 티스토리나 어떤 설치형 블로그도 디자인 수정을 하려면 이런식으로 요소검사를 해서 스타일 시트의 요소 속성값을 찾아서 변경할 수 있습니다. 인터넷 검색하다가 마음에 드는 디자인이 있으면 검색해서 내용을 들여다 볼 수 있고 제이쿼리 플러그인도 다운을 받거나 우클릭방지된 페이지라도 이미지 다운로드가 가능합니다. 물론 이미지를 사용하면 안되겠지만 어떻게 만들어졌는지 꼭 알아보고 싶을때는 점검해볼 필요가 있습니다.
예를 들어 제가 자주가는 포토샵 튜토리얼 사이트에서 로고 디자인이 마음에 들어 어떻게 만들었는지 궁금해서 요소검사를 했습니다. CSS창에 보면 로고이미지가 sprite,png라는 파일을 사용했습니다. 링크가 되어있어서 클릭하니 다음과 같이 나옵니다.
2. 워드프레스의 테마변경
국내에서는 스킨이라고 하지만 외국에서는 스킨을 씸(Theme)이라고 합니다. Theme은 영어식이고 발음도 어려우니 워드프레스 한글판에서는 많이 쓰이는 같은 의미의 독일어 단어인 테마(Thema)로 번역을 해서 사용하더군요. 그래서 워드프레스와 관련된 글의 스킨은 테마라고 칭하기로 합니다.
이곳 을 클릭해서 워드프레스닷오그(WordPress.org)로 이동합니다. 이전 글에서 언급했듯이 이 사이트는 상업성이 없는 순수한 개발자들을 위한 사이트이므로 무료가 많습니다. 개발자들도 먹고살아야 하므로 좋은 테마는 이곳의 Commercial 란에 업로드하여 판매하기도 합니다. 1,465개의 무료테마가 있고 그동안 42백만의 다운로드가 있었습니다. 우측에 보면 인기있는 테마를 선택할 수 있고 새로운 테마를 선택할 수도 있습니다. 테마이름을 알면 검색창에서 검색해도 되고 필터링하여 원하는 테마를 찾을 수도 있습니다. check out our new filter and tag interface를 클릭하여 필터링할 수 있는 창으로 이동합니다.
컬러에서 black에 체크하고 컬럼에서 three-columns에 체크, fixed-width에 체크, theme-options에 체크한 다음 상단에서 Find Themes 버튼을 클릭하니 아래에 필터링된 테마가 나옵니다. 첫번째 슬라이딩 도어를 클릭해서 들어가면 다운로드 버튼이 있습니다. 클릭하여 찾기 쉬운 폴더에 다운로드합니다. 디자인을 3단(Column)으로 한 이유는 사이드바가 두개면 제 블로그처럼 큰 이미지의 광고를 삽입할 수 있기 때문입니다.
압축해제한 다음, 폴더를 선택해서 Ctrl+C키를 눌러 복사합니다.
C:\wamp\www\wordpress\wp-content\themes
Ctrl+V키를 눌러 붙여넣기합니다.
웹브라우저창에서 localhost/wordpress를 입력하고 엔터치면 블로그 첫화면이 나옵니다. 아직 새로운 테마 적용을 하지 않았으므로 워드프레스 기본 테마로 보이게 됩니다. 상단메뉴에서 테마관리를 클릭하면 관리자화면에서 좌측메뉴의 테마디자인-테마관리탭의 화면으로 바로 오게됩니다. 3에 새로운 테마가 나타나고 4의 활성화링크를 클릭하면 5의 현재테마와 교체됩니다. 6의 내 블로그제목을 우클릭해서 새탭에서 열기를 선택하면 새탭에서 블로그 화면이 나옵니다.
3. 워드프레스에서 한글 폰트 바꾸기
마우스를 이미지 위에 올리면 이미지가 슬라이딩 됩니다. 제이쿼리를 이용한 이미지 슬라이딩 도어 효과의 메뉴입니다. 외국의 테마를 삽입했으므로 한글 폰트가 기본인 굴림체로 나옵니다. 이를 한글 웹폰트인 나눔고딕으로 바꿔봅니다. 이곳 을 클릭하면 모빌리스 웹폰트 사용하는 방법의 글이 있으니 참고하세요. 폰트 링크를 삽입하기 위해서는 헤더부분을 웹페이지에 나오게 하는 파일을 찾아야합니다.
워드프레스가 설치된 WAMP 서버의 슬라이딩 도어 테마 폴더로 들어가면 여러가지 파일이 있습니다. 이중에서 header.php파일을 텍스트 에디터에 엽니다. 사용하는 텍스트 에디터가 없으면 이곳 을 클릭하여 Sublime Text 2를 다운받아 설치할때 컨텍스트 메뉴에 등록하기를 선택하면 파일을 우클릭할때 7처럼 메뉴가 나타나서 파일여는데 편리합니다.
워드프레스의 파일구조는 php프로그램의 기본 방식을 따르고 있습니다. 하나의 파일에서 include 함수를 이용하여 여러개의 파일을 불러들이는 것이죠. 2의 index.php파일을 텍스트 에디터에 열면 아래 사진과 같이 get_header(), get_sidebar(), get_footer() 와 같은 워드프레스에서 새로 만든 함수가 보입니다. 이것은 php 프로그램의 include나 require 함수와 같이 다른 파일을 링크하는 역할을 한다고 보면 됩니다. 하나의 페이지에 복잡한 구조의 헤더부분, 메인부분, 푸터부분을 코딩한다면 관리하기 힘들기 때문에 따로 분리하면 관리하기 쉬워집니다.
워드프레스의 index.php파일은 이처럼 간단합니다.
모빌리스 웹폰트에서 복사해온 링크를 </head>태그 이전에 삽입합니다. 여기서는 나눔고딕, 나눔명조, 나눔붓체 세개를 삽입했습니다(위의 이미지에서는 잠시 적용이 안되도록 폰트이름 다음에 b를 하나 추가했으니 참고하세요.) 그리고 Ctrl+S를 눌러 저장합니다.
링크만 삽입해서는 폰트 적용이 안되고 CSS에서 해당 폰트를 사용하도록 설정을 해줘야합니다. 안녕하세요라는 제목 글자위에서 우클릭하여 요소검사를 선택하면 하단에 창이 나오면서 좌측에 해당부분이 하이라이트 되고 우측에는 CSS 스타일시트가 보입니다. font-family라는 항목을 찾습니다. 위에서부터 내려오다보면 빨간줄이 그어진 것은 적용이 안된다는 의미이니 계속 내려오면 어딘가에 잘 적용이 되는 항목이 있습니다. 그곳의 스타일시트와 줄번호를 확인합니다. 위에서 보면 body, input... 에 적용되는 폰트 패밀리가 나오고 style.css파일의 149번째 줄에 있다고 합니다.
style.css파일을 텍스트 에디터에 열고 Ctrl+G키를 누르면 작은 창이 나옵니다. 숫자 149를 입력하면 그 줄로 이동합니다. 폰트이름들의 제일 앞에 NanumGothicWeb, 을 입력하고 저장합니다.폰트이름 다음에 항상 콤마를 찍어줘야합니다. 폰트이름이 두단어 이상이면 쌍따옴표를 사용합니다.
웹브라우저로 와서 Ctrl+R키를 누르면 페이지가 새로고침되면서 제목에 폰트가 적용됩니다. 다음에는 본문 폰트를 선택해서 요소검사를하고 style.css파일의 줄 번호를 확인하고 텍스트에디터에서 이전처럼 수정해줍니다. 이런식으로 한글 글자가 나오는 부분은 모두 수정해주면 됩니다.
더보기
'워드프레스/테마,테마만들기' 카테고리 관련글
