이번에는 우리가 직접 테마를 만들어 볼거야.
여러분도 언젠가 직접 만든 멋진 테마를 여기서 판매하게 될 수도 있으니까..
공부도 하고, 돈도 벌고..
우리는 그누보드를 설치했을 때 기본으로 제공된 [베이직] 테마를 약간 변경해서 나 만의 테마로 바꾸어 볼거야.
깊이 들어 가면 끝도 없으니 이번 학습에서 변경할 부분은 다음과 같아.
상단의 그누보드 로고교체 및 검색칸 제거
메인화면 중앙의 여러 최신글들 제거
메인화면 우측의 로그인 화면 제거
■ 상단 헤더 수정
화면의 상단 로고와 메뉴를 담당하는 파일은 head.php 파일이야.
내 테마를 변경해야 하니 서버에 올린 /myTheme 폴더에 있는 head.php 를 수정해야 겠지?
내 컴에도 원본이 있을테니 이것을 에디터로 수정해서 서버에 올리면 될거야.
head.php 의 큰 구조를 살펴 보면 아래와 같아.
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
// 핸폰화면이면 핸폰테마 폴더의 head.php를 부르고 나간다.
if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/head.php');
return;
}
// 쇼핑몰만 사용하면 쇼핑몰테마 폴더의 head.php를 부르고 나간다
if(G5_COMMUNITY_USE === false) {
define('G5_IS_COMMUNITY_PAGE', true);
include_once(G5_THEME_SHOP_PATH.'/shop.head.php');
return;
}
include_once(G5_THEME_PATH.'/head.sub.php');
include_once(G5_LIB_PATH.'/latest.lib.php');
include_once(G5_LIB_PATH.'/outlogin.lib.php');
include_once(G5_LIB_PATH.'/poll.lib.php');
include_once(G5_LIB_PATH.'/visit.lib.php');
include_once(G5_LIB_PATH.'/connect.lib.php');
include_once(G5_LIB_PATH.'/popular.lib.php');
?>
<!-- 상단 시작 { -->
<div id="hd">
<div id="tnb">
... 최상단 메뉴바 (커뮤니티|쇼핑몰|FAQ:Q&A 있는줄))...
</div>
<div id="hd_wrapper">
<div id="logo">
... 로고 그림...
</div>
<div class="hd_sch_wr">
... 검색어 자리...
</div>
<ul class="hd_login">
... 회권가입, 로그인...
</ul>
</div>
<nav id="gnb">
... 메뉴 출력 ...
</nav>
</div>
<!-- } 상단 끝 -->
<!-- 콘텐츠 시작 { -->
<div id="wrapper">
<div id="container_wr">
<div id="container">
<?php if (!defined("_INDEX_")) { ?><h2 id="container_title"><span title="<?php echo get_text($g5['title']); ?>"><?php echo get_head_title($g5['title']); ?></span></h2><?php }
위쪽에 있는 두개의 if 조건문은 스마트폰에서 볼 때는 별도의 폴더에 있는 head.php 를 사용하고 여기서는 그냥 나가라는 뜻이야.
두번째 조건문은 쇼핑몰만 사용하고 그누보드게시판은 사용 안하면 그냥 역시 그냥 나가라는 뜻이고. .
우선 컴퓨터의 브라우저에서 사용하는 연습을 하는 만큼 일단 무시하고 다음 줄로 내려가 보자구.
그누보드에서 사용할 수 있는 여러가지 기능들을 담은 함수들을 불러오는 코드가 먼저 나왔어.
맨 위의 head.sub.php 는 반드시 필요한 것이고 나머지는 여러분이 필요치 않으면 주석처리해 버려도 돼.
예를들어 여러분의 홈페이지에서 투표기능이 전혀 필요없다면 poll.lib.php 를 주석처리하면 되겠지?
나중에 쓸지도 모르니 그냥 두어도 상관없어.
▶ <!-- 상단 시작 { --> 부터 <!-- } 상단 끝 -->
이 부분이 메인화면 상단에 보이는 부분들이야.
여기서 필요없는 부분은 삭제하고, 또 화면 상단에 추가할 기능이 있다면 이 부분의 적당한 자리에 넣으면 되겠지?
우리는 로고그림을 교체하고, 검색어를 없애 버리려고 해.
1. [..로고그림..] 자리를 보면 현재 <a>태크로 /g5/img/logo.png 를 보여주고 있는 것을 알 수 있어.
여러분의 로고파일을 logo.png 이름으로 만들어서 /g5/img 폴더에 업로드해서 이 파일을 교체하면 되겠지?
2. 검색어를 없애려면 [..검색어자리..] 부분의 코드들을 모두 삭제해 버리면 되겠지?
3. head.php 파일을 저장하고 파일질라도 서버에 올려서 서버의 g5/myTheme 폴더에 있는 head.php 를 교체해.
4. 브라우저에서 확인해 봐.
로고그림이 변경되고 검색어 자리가 없어진 것을 확인할 수 있지?
이런식으로 하나씩 나의 디자인으로 변경해 가는게 바로 그누보드야.
다음에는 본문 자리에 있는 지저분한 최신글들을 없애 보자구.