그누보드5 테마 - 테마제작 > 자주하시는 질문

자주하시는 질문

그누보드5 테마 - 테마제작 정보

그누보드5 테마 - 테마제작
  • 편리
  • 조회 892,018
  • 댓글 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레벨 이상 댓글을 남길 수 있습니다.

전체 66
자주하시는 질문 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT