메뉴얼 안내

설치 안내

관리자에서 메뉴 생성

THEME-L 테마는 관리자페이지 > 환경설정 > 메뉴설정에서 일반페이지 또는 게시판을 생성하면 자동으로 셋팅됩니다.

주요 CSS 파일

/_lib/css/font_defualt.css 기본 폰트 셋팅
/_lib/css/common.css 기본 팝업 리소스 css
/_lib/css/layout.css 메인 및 전체 레이아웃
/_lib/css/sub.css 서브 컨텐츠
/_lib/css/responsive.css 메인 및 전체 레이아웃 반응형
/_lib/css/sub_responsive.css 서브 컨텐츠 레이아웃 반응형
/_lib/nav.css pc네비 및 모바일 네비게이션

로고 이미지 위치

head.php의 로고 경로는 /img/main/logo.png입니다. logo.png 는 기본 로고, logo_white.png 는 흰색 배경일떄 나오는 로고 입니다. 로고 파일은 총 2개 입니다.

파일 위치: /head.php /_lib/css/nav.css

2Depth에 메뉴가 많을경우 절대경로 위치를 조절할수 있습니다. 단위는 px입니다.
관리자 메뉴설정의 메뉴의 제목을 넣으시면 됩니다.

$desktop_submenu_offsets = array(
    '회사소개' => 5, // 기본 5px
    '제품소개' => -170, // 왼쪽 -170px로 이동
    '홍보센터' => 5,
    '고객센터' => 5,
    '문의하기' => 5,
);

1Depth 폰트 조절

.header .nav ul li a {
    position: relative;
    display: inline-block;
    color: #fff;
    font: 500 20px / 1.4 'Poppins', 'Noto Sans KR', sans-serif; //500굵기, 20px크기
    text-decoration: none;
    outline: none;
    transition: color .3s ease;
}

2Depth 폰트 조절

header .nav .nav_submenu li a {
    color: #797979;
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
}

이미지 변경

파일 위치: head.php
/img/main/main_visual01.jpg를 원하는 이미지로 변경합니다. AI로 생성한 이미지지만 되도록 이미지를 변경하여 사용하시기 바랍니다.

<div class="bg" data-image="<?php echo G5_THEME_URL?>/img/main/main_visual01.jpg">

슬라이드 추가

아래 블록을 복사해서 슬라이드를 하나 더 추가합니다.

<div class="item">
  <div class="bg" data-image="<?php echo G5_THEME_URL?>/img/main/main_visual01.jpg"></div>
  <div class="txt">
    <h2>
      <span class="visual-reveal-line"><span class="visual-reveal-text">Better Ideas</span></span>
      <span class="visual-reveal-line"><span class="visual-reveal-text">Better Tomorrow</span></span>
    </h2>
    <p>
      새로운 아이디어와 탄탄한 실행력으로
      더 나은 내일을 만들어갑니다
    </p>
  </div>
</div>

슬라이드

파일 위치: head.php

코드 복사, 붙혀넣기
 <div class="swiper-slide item03 data-image" data-background="<?php echo G5_THEME_URL?>/img/main/visual01.jpg">
    <div class="text-wrap">
        <h3 class="wiz_swiper">탄소중립을 위한 실천 <br>위자드솔루션</h3>
        <p class="wiz_swiper">위즈테마가 언제나 함께 해드리겠습니다.</p>
    </div>
</div>

<!-- 아래 추가 -->
<span class="n4">04<i id="var4"></i></span>

슬라이드 속도 조절 및 관련 script

파일 위치: _lib/js/slider.js

 $visual.slick({
    arrows: false,
    dots: false,
    fade: true,
    autoplay: true, // 자동 슬라이드
    autoplaySpeed: 6000, // 자동 슬라이드 속도
    speed: 1200, // 기본 슬라이드 속도
    pauseOnHover: false,
    pauseOnFocus: false
 });

서브 비주얼 이미지 변경

파일 위치: /_lib/inc/svisual_code.php

$sub_visual_src = G5_THEME_URL.'/img/sub/s_visual_'.$img_no.'.jpg';

서브 비주얼 이미지는 관리자 페이지의 환경설정 > 메뉴 설정에 등록된 대메뉴 코드를 기준으로 자동 연결됩니다. 대메뉴 코드가 10이면 첫 번째 서브 비주얼인 s_visual_01.jpg가 적용되며, 코드 20은 s_visual_02.jpg, 코드 30은 s_visual_03.jpg와 연결됩니다.

현재 페이지에 적용된 이미지 번호를 확인하기 어려운 경우 해당 서브 페이지에서 브라우저의 페이지 소스 보기 기능을 실행한 다음 s_visual_을 검색하세요. 실제로 출력된 이미지 파일명을 확인한 뒤 /img/sub/ 경로의 동일한 파일을 교체하면 됩니다.

서브 비주얼 문구 수정

파일 위치: /_lib/inc/svisual_code.php
대메뉴별 문구는 $sub_visual_texts 배열에서 수정할 수 있습니다. 배열의 키 10, 20, 30은 관리자 페이지에 등록된 대메뉴 코드와 대응하며, 각 항목의 title 값을 변경하면 해당 대메뉴의 모든 서브 페이지에 동일한 문구가 적용됩니다.

// 서브페이지 상단 slogan 수정
$sub_visual_texts = array(
    '10' => array( //그누보드의 자동메뉴 번호
        'title' => '타이틀1',
    ),
    '20' => array(
        'title' => '타이틀2',
    ),
    '30' => array(
        'title' => '타이틀3',
    ),
);

서브 비주얼 감추기

파일 위치: /_lib/inc/svisual_code.php
특정 페이지에서 상단의 서브 비주얼을 사용하지 않을 경우 아래 방법 중 페이지 종류에 맞는 방법을 선택하면 됩니다.

일반 PHP 페이지에서는 해당 파일 상단에 아래 코드를 추가하세요. /company/파일들의 상단 코드를 참고하세요

$s_visual = "false";

게시판 페이지의 서브 비주얼을 감추려면 게시판 ID인 bo_table 값을 입력하세요. 여러 게시판을 감출 때는 쉼표로 구분하여 추가합니다.

$board_no_visual_tables = array('notice', 'gallery');

내용 관리 페이지의 서브 비주얼을 감추려면 해당 페이지의 co_id 값을 입력하세요.

$content_no_visual_ids = array('company', 'privacy');

게시판 ID와 co_id는 해당 페이지 주소에서 확인할 수 있습니다. 주소에 bo_table=notice가 있다면 게시판 ID는 notice이며, co_id=company가 있다면 내용 관리 페이지 ID는 company입니다.

일반 PHP 페이지에 개별 서브 비주얼 추가

파일 위치: 예) /company/company_01.php
위 예제에서는 기본 서브 비주얼 대신 /img/company/company01_bg.jpg 이미지를 회사소개 페이지에만 표시합니다.

$s_visual = "false";
...
<section class="c-visual company background" data-background="<?php echo G5_THEME_URL?>/img/company/company01_bg.jpg"></section>