그누보드5 테마 - 테마제작 정보
그누보드5 테마 - 테마제작- 편리
- 조회 893,978
- 댓글 0
본문
그누보드5 테마를 제작하는 방법을 정리해 보겠습니다.
테마 제작은 head.php, index.php, tail.php 파일의 역할과 디자인 시안을 어떻게 각 파일에 대응시키는지에 대한 기본적인 개념이 있어야 작업을 할 수가 있습니다.
1. 준비
그누보드5에 포함된 베이직 테마를 기본으로 테마를 제작합니다. theme 폴더의 basic 폴더를 복사해 theme 폴더에 제작할 테마 폴더를 만듭니다. 복사 후 테마의 기본정보를 수정합니다.
2. readme.txt 파일 수정
readme.txt 파일에는 테마 이름 등의 정보가 포함되어 있습니다. 관리자 테마설정 페이지에서 상세보기 때 이 정보가 표시됩니다. 아래는 베이직 테마의 정보입니다.
Theme Name: 베이직
Theme URI: http://demo.sir.kr/gnuboard5
Maker: SIR
Maker URI: http://sir.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 내용입니다.
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
// 테마가 지원하는 장치 설정 pc, mobile
// 선언하지 않거나 값을 지정하지 않으면 그누보드5의 설정을 따른다.
// G5_SET_DEVICE 상수 설정 보다 우선 적용됨
define('G5_THEME_DEVICE', '');
$theme_config = array();
// 갤러리 이미지 수 등의 설정을 지정하시면 게시판관리에서 해당 값을
// 가져오기 기능을 통해 게시판 설정의 해당 필드에 바로 적용할 수 있습니다.
// 사용하지 않는 스킨 설정은 값을 비워두시면 됩니다.
$theme_config = array(
'set_default_skin' => false, // 기본환경설정의 최근게시물 등의 기본스킨 변경여부 true, false
'preview_board_skin' => 'basic', // 테마 미리보기 때 적용될 기본 게시판 스킨
'preview_mobile_board_skin' => 'basic', // 테마 미리보기 때 적용될 기본 모바일 게시판 스킨
'cf_member_skin' => 'basic', // 회원 스킨
'cf_mobile_member_skin' => 'basic', // 모바일 회원 스킨
'cf_new_skin' => 'basic', // 최근게시물 스킨
'cf_mobile_new_skin' => 'basic', // 모바일 최근게시물 스킨
'cf_search_skin' => 'basic', // 검색 스킨
'cf_mobile_search_skin' => 'basic', // 모바일 검색 스킨
'cf_connect_skin' => 'basic', // 접속자 스킨
'cf_mobile_connect_skin' => 'basic', // 모바일 접속자 스킨
'cf_faq_skin' => 'basic', // FAQ 스킨
'cf_mobile_faq_skin' => 'basic', // 모바일 FAQ 스킨
'bo_gallery_cols' => 4, // 갤러리 이미지 수
'bo_gallery_width' => 174, // 갤러리 이미지 폭
'bo_gallery_height' => 124, // 갤러리 이미지 높이
'bo_mobile_gallery_width' => 125, // 모바일 갤러리 이미지 폭
'bo_mobile_gallery_height' => 100, // 모바일 갤러리 이미지 높이
'bo_image_width' => 600, // 게시판 뷰 이미지 폭
'qa_skin' => 'basic', // 1:1문의 스킨
'qa_mobile_skin' => 'basic' // 1:1문의 모바일 스킨
);
?>
G5_THEME_DEVICE 설정은 테마가 지원하는 기기에 대한 것입니다. config.php 파일의 접속기기 관련 설정보다 우선순위를 가집니다. G5_THEME_DEVICE 설정을 pc 로 하시면 모바일로 접속 때도 PC 화면만 표시됩니다. 모바일 스킨 등을 지원하지 않는 경우 pc 로 설정하시면 좋습니다.
$theme_config 배열의 각 항목은 주석부분을 참고하시면 됩니다. 이 설정에 대해 간단히 설명하면 set_default_skin 값을 기준으로 true 일 경우 관리자에서 테마 적용 때 cf_member_skin 등에 설정된 값으로 기본 스킨이 변경됩니다. 만약 지원하지 않는 스킨이 있거나 변경하는 걸 원하지 않는 때는 설정값을 빈 값으로 해두시면 됩니다.
5. 테마 퍼블리싱
퍼블리싱은 내용이 워낙 방대하기 때문에 따로 설명을 드리지 않겠습니다. 다만 퍼블리싱 때 주의해야할 점이 하나 있는데 바로 경로입니다. 테마 기능은 이 경로를 상황에 맞게 수정을 해서 테마에 따라 사이트의 디자인이 변경됩니다. 그래서 기본적인 경로 상수( http://sir.kr/faq/58 ) 를 제공하고 있고 퍼블리싱 작업 때 사용해 주셔야 합니다. 예를 들어 head.sub.php 파일에서 테마의 css 파일 로드를 위해
<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 파일 로드를 위해
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
코드를 사용하고 있습니다. 스킨의 경로를 설정하는 부분은 아래와 같습니다.
//==============================================================================
// 스킨경로
//------------------------------------------------------------------------------
if (G5_IS_MOBILE) {
$board_skin_path = get_skin_path('board', $board['bo_mobile_skin']);
$board_skin_url = get_skin_url('board', $board['bo_mobile_skin']);
$member_skin_path = get_skin_path('member', $config['cf_mobile_member_skin']);
$member_skin_url = get_skin_url('member', $config['cf_mobile_member_skin']);
$new_skin_path = get_skin_path('new', $config['cf_mobile_new_skin']);
$new_skin_url = get_skin_url('new', $config['cf_mobile_new_skin']);
$search_skin_path = get_skin_path('search', $config['cf_mobile_search_skin']);
$search_skin_url = get_skin_url('search', $config['cf_mobile_search_skin']);
$connect_skin_path = get_skin_path('connect', $config['cf_mobile_connect_skin']);
$connect_skin_url = get_skin_url('connect', $config['cf_mobile_connect_skin']);
$faq_skin_path = get_skin_path('faq', $config['cf_mobile_faq_skin']);
$faq_skin_url = get_skin_url('faq', $config['cf_mobile_faq_skin']);
} else {
$board_skin_path = get_skin_path('board', $board['bo_skin']);
$board_skin_url = get_skin_url('board', $board['bo_skin']);
$member_skin_path = get_skin_path('member', $config['cf_member_skin']);
$member_skin_url = get_skin_url('member', $config['cf_member_skin']);
$new_skin_path = get_skin_path('new', $config['cf_new_skin']);
$new_skin_url = get_skin_url('new', $config['cf_new_skin']);
$search_skin_path = get_skin_path('search', $config['cf_search_skin']);
$search_skin_url = get_skin_url('search', $config['cf_search_skin']);
$connect_skin_path = get_skin_path('connect', $config['cf_connect_skin']);
$connect_skin_url = get_skin_url('connect', $config['cf_connect_skin']);
$faq_skin_path = get_skin_path('faq', $config['cf_faq_skin']);
$faq_skin_url = get_skin_url('faq', $config['cf_faq_skin']);
}
//==============================================================================
테마에 추가적인 라이브러리가 있는 경우 G5_THEME_LIB_PATH 경로 상수를 사용하시면 됩니다.
include_once(G5_THEME_LIB_PATH.'/theme.lib.php');
와 같이 사용할 수 있습니다.
6. outlogin 등에서의 테마 스킨 사용
이 부분은 5의 퍼블리싱 작업과 연관돼있습니다. 기존 그누보드5의 코드 수정을 최소화하기 위해 아래와 같은 스킨 지정법을 사용했습니다. 베이직 테마의 외부 로그인 출력 부분 코드를 아래와 같습니다.
<?php echo outlogin('theme/basic'); ?>
기존 외부로그인 출력 때 스킨 지정 부분이 변경될 것을 확인할 수 있습니다. 테마에 포함된 스킨은 'theme/basic' 과 같이 지정해서 현재 사용 중인 테마의 outlogin 스킨 중 basic 스킨을 사용한다는 의미입니다. 'theme/basic' 대신 'basic' 만 사용하면 테마기능 이전의 그누보드5에서와 같이 skin 폴더에 있는 스킨을 사용하게 됩니다. 스킨 지정 때 theme/ 로 시작하면 테마의 스킨을 사용한다고 프로그램에서 판단하고 그에 맞게 경로를 설정하도록 되어 있습니다. 최신 글(latest) 등의 다른 기능에서의 스킨 지정 역시 이와 동일합니다.
테마 제작 때 게시판 스킨 등을 반드시 포함시켜야 하는 것은 아닙니다. 포함된 스킨이 없는 경우 skin 폴더 등을 삭제하셔도 됩니다. 모바일 테마가 포함되지 않은 경우 mobile 폴더를 삭제하셔도 사용에는 지장이 없습니다. 다만 이 경우 G5_THEME_DEVICE 설정을 pc 로 해주셔야 모바일 접속 때 오류가 발생하지 않게 됩니다.
테마 제작은 스킨 제작 경험과 퍼블리싱 경험이 있다면 어렵지 않은 작업입니다. 테마 제작 때 경로 부분만 주의를 해주시고 제공되는 경로 상수 및 변수를 사용하시면 경로로 인한 문제는 최소화할 수 있습니다.
100레벨 이상 댓글을 남길 수 있습니다.
