그누보드5 테마를 제작하는 방법을 정리해 보겠습니다.
테마 제작은 head.php, index.php, tail.php 파일의 역할과 디자인 시안을 어떻게 각 파일에 대응시키는지에 대한 기본적인 개념이 있어야 작업을 할 수가 있습니다.
1. 준비
그누보드5에 포함된 베이직 테마를 기본으로 테마를 제작합니다. theme 폴더의 basic 폴더를 복사해 theme 폴더에 제작할 테마 폴더를 만듭니다. 복사 후 테마의 기본정보를 수정합니다.
2. readme.txt 파일 수정
readme.txt 파일에는 테마 이름 등의 정보가 포함되어 있습니다. 관리자 테마설정 페이지에서 상세보기 때 이 정보가 표시됩니다. 아래는 베이직 테마의 정보입니다.
Theme Name: 베이직
Theme URI: http://demo.sir.co.kr/gnuboard5
Maker: SIR
Maker URI: http://sir.co.kr
Version: 1.0.0
Detail: 베이직 테마는 SIR에서 제공하는 그누보드5 테마입니다. 베이직 테마는 웹표준 및 접근성을 준수합니다.
License: GNU LESSER GENERAL PUBLIC LICENSE Version 2.1
License URI: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html
정보 작성 때 한가지 주의해야할 점은 정보는 한 줄에 표시가 되어야 한다는 것입니다. Detail: 부분은 상세설명 부분으로 내용이 길어도 키보드 Enter를 사용해 줄바꿈을 하시면 안됩니다.
3. screenshot.png 파일 준비
스크린샷 파일은 관리자 테마설정 페이지의 리스트와 상세보기 때 사용 됩니다. 보여지는 최대 사이즈는 600 x 450 픽셀이며 PNG 파일만 사용할 수 있습니다.
4. theme.config.php 설정
테마의 기본 설정을 담고 있는 파일입니다. 이 설정을 기준으로 테마 미리보기 기능 등이 실행됩니다. 이 파일은 테마 사용 때 common.php 에서 자동 로드되므로 별도의 로드 작업이 필요없습니다. 아래는 베이직 테마의 theme.config.php 내용입니다.
02 | if (!defined('_GNUBOARD_')) exit; |
07 | define('G5_THEME_DEVICE', ''); |
09 | $theme_config = array(); |
16 | 'set_default_skin' => false, |
17 | 'preview_board_skin' => 'basic', |
18 | 'preview_mobile_board_skin' => 'basic', |
19 | 'cf_member_skin' => 'basic', |
20 | 'cf_mobile_member_skin' => 'basic', |
21 | 'cf_new_skin' => 'basic', |
22 | 'cf_mobile_new_skin' => 'basic', |
23 | 'cf_search_skin' => 'basic', |
24 | 'cf_mobile_search_skin' => 'basic', |
25 | 'cf_connect_skin' => 'basic', |
26 | 'cf_mobile_connect_skin' => 'basic', |
27 | 'cf_faq_skin' => 'basic', |
28 | 'cf_mobile_faq_skin' => 'basic', |
29 | 'bo_gallery_cols' => 4, |
30 | 'bo_gallery_width' => 174, |
31 | 'bo_gallery_height' => 124, |
32 | 'bo_mobile_gallery_width' => 125, |
33 | 'bo_mobile_gallery_height' => 100, |
34 | 'bo_image_width' => 600, |
36 | 'qa_mobile_skin' => 'basic' |
G5_THEME_DEVICE 설정은 테마가 지원하는 기기에 대한 것입니다. config.php 파일의 접속기기 관련 설정보다 우선순위를 가집니다. G5_THEME_DEVICE 설정을 pc 로 하시면 모바일로 접속 때도 PC 화면만 표시됩니다. 모바일 스킨 등을 지원하지 않는 경우 pc 로 설정하시면 좋습니다.
$theme_config 배열의 각 항목은 주석부분을 참고하시면 됩니다. 이 설정에 대해 간단히 설명하면 set_default_skin 값을 기준으로 true 일 경우 관리자에서 테마 적용 때 cf_member_skin 등에 설정된 값으로 기본 스킨이 변경됩니다. 만약 지원하지 않는 스킨이 있거나 변경하는 걸 원하지 않는 때는 설정값을 빈 값으로 해두시면 됩니다.
5. 테마 퍼블리싱
퍼블리싱은 내용이 워낙 방대하기 때문에 따로 설명을 드리지 않겠습니다. 다만 퍼블리싱 때 주의해야할 점이 하나 있는데 바로 경로입니다. 테마 기능은 이 경로를 상황에 맞게 수정을 해서 테마에 따라 사이트의 디자인이 변경됩니다. 그래서 기본적인 경로 상수( http://sir.co.kr/faq/58 ) 를 제공하고 있고 퍼블리싱 작업 때 사용해 주셔야 합니다. 예를 들어 head.sub.php 파일에서 테마의 css 파일 로드를 위해
1 | <link rel="stylesheet" href="<?php echo G5_THEME_CSS_URL; ?>/<?php echo G5_IS_MOBILE ? 'mobile' : 'default'; ?>.css"> |
코드를 사용하고 있습니다.
그외에 각 스킨의 경우 $board_skin_path, $board_skin_url 등의 경로 변수를 제공하고 있습니다. 이 변수는 common.php 파일에서 테마 사용여부 및 스킨에 따라 설정이 됩니다. 게시판 스킨의 경우 스킨의 css 파일 로드를 위해
1 | add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0); |
코드를 사용하고 있습니다. 스킨의 경로를 설정하는 부분은 아래와 같습니다.
05 | $board_skin_path = get_skin_path('board', $board['bo_mobile_skin']); |
06 | $board_skin_url = get_skin_url('board', $board['bo_mobile_skin']); |
07 | $member_skin_path = get_skin_path('member', $config['cf_mobile_member_skin']); |
08 | $member_skin_url = get_skin_url('member', $config['cf_mobile_member_skin']); |
09 | $new_skin_path = get_skin_path('new', $config['cf_mobile_new_skin']); |
10 | $new_skin_url = get_skin_url('new', $config['cf_mobile_new_skin']); |
11 | $search_skin_path = get_skin_path('search', $config['cf_mobile_search_skin']); |
12 | $search_skin_url = get_skin_url('search', $config['cf_mobile_search_skin']); |
13 | $connect_skin_path = get_skin_path('connect', $config['cf_mobile_connect_skin']); |
14 | $connect_skin_url = get_skin_url('connect', $config['cf_mobile_connect_skin']); |
15 | $faq_skin_path = get_skin_path('faq', $config['cf_mobile_faq_skin']); |
16 | $faq_skin_url = get_skin_url('faq', $config['cf_mobile_faq_skin']); |
18 | $board_skin_path = get_skin_path('board', $board['bo_skin']); |
19 | $board_skin_url = get_skin_url('board', $board['bo_skin']); |
20 | $member_skin_path = get_skin_path('member', $config['cf_member_skin']); |
21 | $member_skin_url = get_skin_url('member', $config['cf_member_skin']); |
22 | $new_skin_path = get_skin_path('new', $config['cf_new_skin']); |
23 | $new_skin_url = get_skin_url('new', $config['cf_new_skin']); |
24 | $search_skin_path = get_skin_path('search', $config['cf_search_skin']); |
25 | $search_skin_url = get_skin_url('search', $config['cf_search_skin']); |
26 | $connect_skin_path = get_skin_path('connect', $config['cf_connect_skin']); |
27 | $connect_skin_url = get_skin_url('connect', $config['cf_connect_skin']); |
28 | $faq_skin_path = get_skin_path('faq', $config['cf_faq_skin']); |
29 | $faq_skin_url = get_skin_url('faq', $config['cf_faq_skin']); |
테마에 추가적인 라이브러리가 있는 경우 G5_THEME_LIB_PATH 경로 상수를 사용하시면 됩니다.
1 | include_once(G5_THEME_LIB_PATH.'/theme.lib.php'); |
와 같이 사용할 수 있습니다.
6. outlogin 등에서의 테마 스킨 사용
이 부분은 5의 퍼블리싱 작업과 연관돼있습니다. 기존 그누보드5의 코드 수정을 최소화하기 위해 아래와 같은 스킨 지정법을 사용했습니다. 베이직 테마의 외부 로그인 출력 부분 코드를 아래와 같습니다.
1 | <?php echo outlogin('theme/basic'); ?> |
기존 외부로그인 출력 때 스킨 지정 부분이 변경될 것을 확인할 수 있습니다. 테마에 포함된 스킨은 'theme/basic' 과 같이 지정해서 현재 사용 중인 테마의 outlogin 스킨 중 basic 스킨을 사용한다는 의미입니다. 'theme/basic' 대신 'basic' 만 사용하면 테마기능 이전의 그누보드5에서와 같이 skin 폴더에 있는 스킨을 사용하게 됩니다. 스킨 지정 때 theme/ 로 시작하면 테마의 스킨을 사용한다고 프로그램에서 판단하고 그에 맞게 경로를 설정하도록 되어 있습니다. 최신 글(latest) 등의 다른 기능에서의 스킨 지정 역시 이와 동일합니다.
테마 제작 때 게시판 스킨 등을 반드시 포함시켜야 하는 것은 아닙니다. 포함된 스킨이 없는 경우 skin 폴더 등을 삭제하셔도 됩니다. 모바일 테마가 포함되지 않은 경우 mobile 폴더를 삭제하셔도 사용에는 지장이 없습니다. 다만 이 경우 G5_THEME_DEVICE 설정을 pc 로 해주셔야 모바일 접속 때 오류가 발생하지 않게 됩니다.
테마 제작은 스킨 제작 경험과 퍼블리싱 경험이 있다면 어렵지 않은 작업입니다. 테마 제작 때 경로 부분만 주의를 해주시고 제공되는 경로 상수 및 변수를 사용하시면 경로로 인한 문제는 최소화할 수 있습니다.