[그누보드5] 반응형 페이지 기본 세팅

1. 테마를 복사 후 다른이름으로 만든다.

/theme/[새로운 테마 이름]

 

2. /theme/[새로운 테마 이름]/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. config.php 수정 138 line

define('G5_USE_MOBILE', false); // 모바일 홈페이지를 사용하지 않을 경우 false 로 설정

 

5. css 수정

/theme/[새로운 테마 이름]/css/default.css

최하단에 아래 내용 붙여넣기

/* media query */
@media (max-width:600px){
.mobile{display:block}
.pc{display:none}

/* 레이아웃 크기 지정 */
#hd, #wrapper, #ft{position:relative; overflow:hidden; min-width:100%;}
#hd_pop,
#hd_wrapper,
#tnb ul,
#gnb .gnb_wrap,
#container_wr,
#main_top_banner,
#logo,
#ft_wr {width:100%}

#gnb .gnb_wrap {overflow-x:auto}
#gnb .gnb_wrap ul{min-width:400px;}
#gnb .gnb_wrap li{display:inline-block;}
#gnb .gnb_menu_btn{display:none}

#aside {display:none}
.lt_wr{width:100%}
.latest-margin-left{margin-left:0}
#container {width:100%}
}

 

6. 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 등에 설정된 값으로 기본  스킨이 변경됩니다. 만약 지원하지 않는 스킨이 있거나 변경하는 걸 원하지 않는 때는 설정값을 빈 값으로 해두시면 됩니다.

 

테마를 사용하고 있으면..

테마 폴더에 있는 theme.config.php 파일에서 mobile로 설정
define('G5_THEME_DEVICE', 'mobile');

 

테마를 사용하지 않으면..

루트 폴더에 있는 config.php 파일에서 mobile로 설정
define('G5_SET_DEVICE', 'mobile');

 

---

출처 :
1) https://mosei.tistory.com/entry/그누보드5-반응형-기본-세팅 [씹어먹는 블로그:티스토리]
2) https://gnustudy.com/bbs/board.php?bo_table=gnu_tip&wr_id=301 [그누스터디]
3) https://sir.kr/faq/59 [그누보드5 테마 - 테마제작]