워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

블로그 인기글

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

워드프레스에서 웹폰트를 사용하려면 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);

style.css 파일을 열고 나머지는 다 지우고 상단의 주석처리된 부분을 남깁니다. 테마 이름에 child를 입력해서 부모테마와 구별합니다. 다른 부분은 원하는대로 수정하고 주석이 끝나기 전에 "Template: 부모테마이름"을 입력합니다. 폴더 이름이어야 합니다. 주석이 끝나고 부모 테마의 스타일시트를 불러오는 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;
}
텍스트 편집기에 위처럼 입력합니다. 모빌리스 웹폰트 링크를 url에 입력하고 이 url을 가져오는 @import 규칙을 사용합니다. link 태그의 역할을 하는 것입니다. 그 아래에 스타일시트를 입력합니다. 별 표시를 사용하면 모든 요소를 지정하는 것입니다. 모든 요소에 대해서 폰트를 사용하는 경우 이 폰트는 나눔고딕 웹폰트를 사용한다는 것이고 폰트 스타일에 이탤릭이 있는 경우 이를 제거합니다. 사실 이탤릭체는 눈에 띄게 강조하기 위해 사용하지만 외국어에 적합하고 한글에는 가독성이 떨어져서 읽기 어렵죠.  !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