워드프레스에서 웹폰트를 사용하려면 header.php 파일에 link 태그를 이용해서 아래와 같이 웹폰트 사이트의 링크를 걸어주고 스타일시트에 font-family라는 속성을 사용해주면 됩니다.
<link href='http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb' rel='stylesheet' type='text/css' />
이에 관해서는 이곳( http://martian36.tistory.com/766 )의 글을 참고하면 됩니다. 그런데 워드프레스 관리자 화면의 폰트는 어떻게 바꿀 수 있을까요. 관리자화면은 header.php 라는 파일을 사용하지 않기 때문에 link 태그를 사용할 수도 없습니다.
관리자화면의 글자를 요소검사하면 스타일시트가 나타나지 않고 load-styles.php 파일에서 함수에 의해 정의되고 있습니다. 이 스타일시트(wp-admin/css/wp-admin.css)는 워드프레스 코어파일에 속해있기 때문에 이 스타일시트에서 수정을 하면 워드프레스를 업그레이드할 경우 수정한 것이 제거됩니다. 그래서 현재 사용 중인 테마의 자식테마를 만들고 이 자식테마에 관리자 화면 전용 스타일시트를 만들어 정의를 해주면 됩니다. 그 과정은 좀 복잡하지만 다음과 같습니다.
테마 폴더에서 기본테마를 선택하고 Ctrl+C, Ctrl+V키를 차례로 누르고 폴더이름을 twentytwelve-child로 바꿔줍니다. 며칠 후면 3.5버전으로 업그레이드 되기 때문에 이 버전으로 작업합니다.
자식테마 폴더로 들어가서 위 파일을 제외한 모든 파일을 삭제합니다. 워드프레스 테마는 index.php와 style.css파일만 있으면 테마로 인식합니다. 그외는 필요에 의해서 만들어집니다. 스크린샷 이미지 파일은 관리자 화면의 테마 관리화면에 나타나도록 하기 위해서 그대로 둔 것입니다.functions.php 파일은 함수를 하나 만들기 위해 사용합니다. css 폴더는 관리자 화면을 스타일하기 위한 스타일시트를 보관하기 위해 둔 것입니다.
/* Theme Name: Twenty Twelve child Theme URI: http://wordpress.org/extend/themes/twentytwelve Author: the WordPress team Author URI: http://wordpress.org/
Template: twentytwelve */ @import url(../twentytwelve/style.css);
텍스트 편집기에 functions.php 파일을 열고 전체를 제거한 다음, 위와같이 코드를 입력합니다. 부모 테마에 함수가 있으므로 중복되면 에러가 납니다. 새로운 함수를 만들어주는데 이것은 워드프레스에서 스타일시트를 등록하는 방법입니다. 두가지 워드프레스 고유 함수와 하나의 사용자 정의 함수가 사용됩니다. 주로 header.php파일에 링크 태그를 사용하지만 워드프레스는 이렇게 사용합니다.
구조를 보면 admin_css()라는 사용자 정의 함수를 만들고 이 함수에 스타일시트를 대기(wp_enqueue_style)시킵니다. get_stylesheet_directory_uri()는 자식 테마 디렉토리를 표시하는 워드프레스 템플릿 태그입니다. 점( . )이 나오는 것은 이 디렉토리와 다음의 디렉토리를 연결시켜주는 php 언어의 기능입니다. 그 다음으로 스타일시트 나머지 경로를 입력합니다.
사용자 정의 함수가 끝나고 다시 add_action()이라는 함수를 사용해서 해당 스타일시트를 특정 페이지에 연결시킵니다. 여기서는 관리자 페이지에 연결(admin_print_styles)시킵니다.
테마 관리 화면에서 자식테마를 활성화시킵니다.
여기까지 하면 스타일시트가 관리자 페이지에 대기상태가 됩니다. 아직 스타일시트는 만들어지지 않았으니 이제 만들어 봅니다.
테마 폴더의 css 폴더에 admin.css 파일을 만듭니다. 실제로는 텍스트 편집기에서 파일을 만들고 이곳에 저장하면 됩니다.
@import url("http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb");
*{
font-family: NanumGothicWeb !important;
font-style: normal !important;
}
이제 관리자 화면을 새로고침하면 나눔 고딕 웹폰트로 나오게 됩니다. 이탤릭체로 보이던 글자는 이제 정상 글자로 나타납니다.
바탕체나 굴림체로 나오던 것들이 모두 나눔고딕체입니다. 이제 admin.css 파일에서 변경하면 관리자 화면의 스타일을 바꿀 수 있고 워드프레스 코어파일이나 테마파일이 업그레이드 되더라도 항상 같은 폰트가 유지됩니다.
@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");@import url("http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css");*{font-family: 'Nanum Gothic' !important;font-style: normal !important;}#template textarea { font-family: 'Nanum Gothic Coding', monospace !important; font-size: 15px; }
나눔고딕 코딩 폰트를 링크하고 테마 편집기 영역에 대해 폰트를 선언해 두면 아래처럼 코딩 폰트를 사용할 수 있습니다.
code.txt
