AK 테마
01
테마 설치
그누보드 설치 후 위즈테마 파일을 업로드하면 설치 안내 팝업이 자동으로 표시됩니다.
설치 안내
그누보드 설치가 완료된 후 제공받은 위즈테마 파일을 업로드하면 설치 안내 팝업이 자동으로 표시됩니다.
신규로 그누보드를 설치한 경우에는 [자동설치] 버튼을 클릭하면 샘플 테마와 동일한 구성으로 메뉴, 게시판, 기본 설정이 자동 적용됩니다.
기존에 운영 중인 홈페이지에 테마를 적용하는 경우에는 사이트의 기존 설정과 데이터 구조를 고려해야 하므로 [닫기] 버튼을 눌러 자동설치를 종료한 뒤 수동 설치로 진행해 주세요.
수동 설치에 대한 자세한 내용은 [설명서 보기] 버튼을 통해 확인하실 수 있습니다.
위즈테마 AK설치
위즈테마 AK를 설치하시겠습니까?
기존 홈페이지를 운영 중이라면 자동설치 대신 닫기를 누른 후
수동으로 설정하시기 바랍니다.
수동으로 설정하시기 바랍니다.
수동설치로 진행하실 경우 wiz.init.php의 #wizthemeInstallLayer 팝업 코드를 제거하세요.
02
페이지 추가
관리자 메뉴 설정을 이용하면 AK 테마의 구조에 맞춰 자동으로 메뉴가 구성됩니다.
관리자에서 메뉴 생성
AK 테마는 관리자페이지 > 환경설정 > 메뉴설정에서 일반페이지 또는 게시판을 생성하면 자동으로 셋팅됩니다.
03
CSS 경로
테마 수정 시 자주 사용하는 CSS 파일 위치입니다.
css경로
/wzd_lib/font_defualt.css 기본 폰트 셋팅
/wzd_lib/common.css 기본 팝업등
/wzd_lib/css/layout.css 메인 및 전체 레이아웃
/wzd_lib/css/sub.css 서브 컨텐츠
/wzd_lib/css/responsive.css 메인 및 전체 레이아웃 반응형
/wzd_lib/css/sub_responsive.css 서브 컨텐츠 레이아웃 반응형
/wzd_lib//css/swiper_layout.css"> 메인 비주얼 슬라이드
04
로고 수정
테마 로고 이미지와 관련 CSS 수정 방법입니다.
로고수정
/wzd_lib/css/layout.css
head.php 로고 경로 : /img/common/logo.png
logo.png 는 로고 2개를 이어 붙힌 이미지입니다.
height: 19px; 는 두개의 로고중 상단 첫번째 사이즈를 입력하시면 됩니다.
.header h1 a {
overflow: hidden;
display: block;
height: 19px; // 로고 1/2 세로 사이즈
background: url('../../img/common/logo.png') 0 0 no-repeat;
text-indent: -9999px;
}
05
상단 네비게이션
상단 메뉴의 폰트, 간격, hover 영역을 조절하는 방법입니다.
상단 네비게이션
head.php
대메뉴 폰트 조절
.header .gnb li {
float: left;
width: 170px; // 네비게이션 가로 간격
text-align: left;
}
.header .gnb .depth1>a {
display: block;
height: 57px;
padding: 40px 0 0;
font-size: 20px; //메인 네비 폰트 사이즈
}
#header.all {
height: 350px; // 마우스 올리면 떨어지는 전체배경 세로 높이
background: #fff;
z-index: 1100;
}
#header.all:before {
position: absolute;
left: 0;
top: 95px; //메인메뉴와 서브메뉴의 상단 간격
width: 100%;
height: 260px; // 마우스 올리면 떨어지는 배경 세로 높이
background: #f1f1f3; // 떨어지는 메뉴 배경 색상
content: "";
}소메뉴 폰트 조절
header .nav .depth02>li a {
color: #000;
display: block;
padding: 10px 0; // 10px 상하 높이
transition: .4s;
font-size: 16px;
font-family: 'Poppins', 'NotoSans', sans-serif;
}메뉴 hover시 백그라운드 높이 조절
.header.down .gnb-bg {
height: 220px;
}
06
메인 비주얼
메인 슬라이드 이미지, 영상, 문구를 수정하는 방법입니다.
메인비주얼
head.php
이미지 변경
https://placehold.co/1920x1024 를 이미지 경로에 맞게 변경하세요
<div class="slide-image slide-media" style="background-image:url('https://placehold.co/1920x1024.jpg');">
예)
<div class="slide-image slide-media" style="background-image:url('<?php echo G5_THEME_URL?>/img/main/visual01.jpg');">유튜브 주소변경
https://www.youtube.com/watch?v=QV5EXOFcdrQ 주소형식이 같게 변경
----------------------------------------------------------------
<!-- 슬라이드03 유튜브-->
<div class="swiper-slide slide02" id='bgPlayer1' data-swiper-autoplay="120000"> <!-- 120000 : 동영상 연장시간 설정 -->
<div id="bgPlayer" class="player" data-property="{useOnMobile:true,mobileFallbackImage:'http://theme03.wiztheme.net/slider2.jpg',videoURL:'https://www.youtube.com/watch?v=QV5EXOFcdrQ',vol:'90',stopMovieOnBlur:true,containment:'#bgPlayer1',showControls:false,startAt:0,mute:true,autoPlay:true,loop:true,opacity:1,quality:'highres',optimizeDisplay:true}"></div>
<div class="swiper-content">
<div class="content text-left">
<h1 class="animated" data-swiper-animation="fadeInUp" data-duration=".8s" data-delay="1s" data-swiper-out-animation="fadeIn" data-out-duration="2s">YOUTUBE <br>PLAYERS CODE</h1>
<div class="line animated" data-swiper-animation="fadeInUp" data-duration="1.2s" data-delay="1.8s" data-swiper-out-animation="fadeIn" data-out-duration="2s"></div>
<p class="animated" data-swiper-animation="fadeInUp" data-duration="1.2s" data-delay="1.3s" data-swiper-out-animation="fadeIn" data-out-duration="2s">위즈테마템플릿06버전이 출시 했습니다. <br>쉽고 퀄리티가 다른 위즈테마 템플릿. 불법사용을 금지합니다</p>
<div class="btn_wrap" hidden><a href="http://ak.wiztheme.co.kr/theme/ak/company/company_02.php" class="btn btn-default animated" data-swiper-animation="fadeInUp" data-duration="1.2s" data-delay="1.5s" data-swiper-out-animation="fadeIn" data-out-duration="2s">more</a></div>
</div>
</div>
<div class="overlay data-overlay" data-overlay="0,0,0,0.4"></div>
</div>
<!-- 슬라이드03 유튜브 마감 -->
슬라이드 폰트 크기 등 css변경
/wzd_lib/css/swiper_layout.css
#index_swiper.swiper-container .swiper-content h1 { //큰 글씨
color: #fff;
font-size: 92px;
line-height: 96px;
font-weight: 600;
font-family: 'Poppins', 'NotoSans', sans-serif;
}
#index_swiper.swiper-container .swiper-content p { // 작은 글씨
color: #fff;
font-size: 22px;
line-height: 36px;
font-weight: 400;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 20px;
font-family: 'Poppins', 'NotoSans', sans-serif;
}
슬라이드 추가 및 삭제
기존소스에서 하나 더 추가
<div class="swiper-slide slide04">
<div class="swiper-content">
<div class="content text-left">
<h1 class="animated" data-swiper-animation="fadeInUp" data-duration=".8s" data-delay="1s" data-swiper-out-animation="fadeIn" data-out-duration="2s"><span>탄소중립 </span><br> 위자드 풍력</h1>
<div class="line animated" data-swiper-animation="fadeInUp" data-duration="1.2s" data-delay="1.8s" data-swiper-out-animation="fadeIn" data-out-duration="2s"></div>
<p class="animated" data-swiper-animation="fadeInUp" data-duration="1.2s" data-delay="1.3s" data-swiper-out-animation="fadeIn" data-out-duration="2s">위즈테마 템플 AK버전이 출시 했습니다. <br>쉽고 퀄리티가 다른 위즈테마 템플릿. 불법사용을 금지합니다</p>
<div class="btn_wrap" hidden><a href="<?php echo G5_THEME_URL?>/company/company_02.php" class="btn btn-default animated" data-swiper-animation="fadeInUp" data-duration="1.2s" data-delay="1.5s" data-swiper-out-animation="fadeIn" data-out-duration="2s">more</a></div>
</div>
</div>
<div class="overlay data-overlay" data-overlay="0,0,0,0"></div>
<div class="swiper-img slide-1 swiper-slide-cover data-image" data-background="https://placehold.co/1920x1024.png?ver=<?php echo G5_CSS_VER; ?>>"></div>
<!-- 실제 이미지를 넣을시 코드 예)<?php echo G5_THEME_URL?>/img/main/ak_visual_03.jpg?ver=<?php echo G5_CSS_VER; ?> -->
</div>
<!-- 추가 -->
<div class="swiper-slide slide05">
<div class="swiper-content">
<div class="content text-left">
<h1 class="animated" data-swiper-animation="fadeInUp" data-duration=".8s" data-delay="1s" data-swiper-out-animation="fadeIn" data-out-duration="2s"><span>탄소중립 </span><br> 위자드 풍력</h1>
<div class="line animated" data-swiper-animation="fadeInUp" data-duration="1.2s" data-delay="1.8s" data-swiper-out-animation="fadeIn" data-out-duration="2s"></div>
<p class="animated" data-swiper-animation="fadeInUp" data-duration="1.2s" data-delay="1.3s" data-swiper-out-animation="fadeIn" data-out-duration="2s">위즈테마 템플 AK버전이 출시 했습니다. <br>쉽고 퀄리티가 다른 위즈테마 템플릿. 불법사용을 금지합니다</p>
<div class="btn_wrap" hidden><a href="<?php echo G5_THEME_URL?>/company/company_02.php" class="btn btn-default animated" data-swiper-animation="fadeInUp" data-duration="1.2s" data-delay="1.5s" data-swiper-out-animation="fadeIn" data-out-duration="2s">more</a></div>
</div>
</div>
<div class="overlay data-overlay" data-overlay="0,0,0,0"></div>
<div class="swiper-img slide-1 swiper-slide-cover data-image" data-background="https://placehold.co/1920x1024.png?ver=<?php echo G5_CSS_VER; ?>>"></div>
<!-- 실제 이미지를 넣을시 코드 예)<?php echo G5_THEME_URL?>/img/main/ak_visual_03.jpg?ver=<?php echo G5_CSS_VER; ?> -->
</div>
<!-- 추가 마감 -->
/wzd_lib/inc/swiper.php
에서 추가
var menu = ['<?php echo $slogan01 ;?>', '<?php echo $slogan02 ;?>', '<?php echo $slogan03 ;?>', '<?php echo $slogan04 ;?>']
------
<?php echo $slogan04 ;?>' , '<?php echo $slogan05 ;?>' 형식으로 추가