이용안내
배너 매니저 사용방법 및 코드 예제
배너 매니저는 쇼핑몰 내 배너 및 구조, 텍스트 등을 관리할 수 있습니다.
1. 좌측에서
2. 스킨 선택 후
3. 그룹 안에 이미지, iframe(유튜브), 텍스트 에디터 배너를 추가할 수 있습니다.
예제 1. 일반 배너 사용
<body data-banner="design_code">
<h3>배너 그룹명 : {$wd-group-title}</h3>
<h3>배너 그룹 설명 : {$wd-group-description}</h3>
<div data-banner="group_code_bnr"> <ul> <li><a href="{$wd-href}" target="{$wd-target}"><img src="{$wd-src}" alt="{$wd-name}"> {$wd-name} {$wd-html}</a></li> <li><a href="{$wd-href}" target="{$wd-target}"><img src="{$wd-src}" alt="{$wd-name}"> {$wd-name} {$wd-html}</a></li> <li><a href="{$wd-href}" target="{$wd-target}"><img src="{$wd-src}" alt="{$wd-name}"> {$wd-name} {$wd-html}</a></li> </ul> </div> </body>
<div data-banner="group_code_bnr"> <ul> <li><a href="{$wd-href}" target="{$wd-target}"><img src="{$wd-src}" alt="{$wd-name}"> {$wd-name} {$wd-html}</a></li> <li><a href="{$wd-href}" target="{$wd-target}"><img src="{$wd-src}" alt="{$wd-name}"> {$wd-name} {$wd-html}</a></li> <li><a href="{$wd-href}" target="{$wd-target}"><img src="{$wd-src}" alt="{$wd-name}"> {$wd-name} {$wd-html}</a></li> </ul> </div> </body>
| 코드 | 설명 |
|---|---|
| data-group="디자인명으로" | 스킨 추가 후 지정한 디자인 코드를 HTML body에 설정 (멀티쇼핑몰 대비) |
| data-banner="배너명으로" | 배너 그룹 코드 (고유 ID) |
| {$wd-group-title} | 배너 그룹명 |
| {$wd-group-description} | 배너 그룹 설명 |
| {$wd-href} | 배너 링크 URL |
| {$wd-target} | 링크 열릴 위치 (_blank, _self 등) |
| {$wd-src} | 이미지 경로 |
| {$wd-name} | 배너 이름 |
| {$wd-html} | 추가 HTML 콘텐츠 |
예제 2. 간단 배너 사용
<div data-banner="group_code_bnr">
<ul>
<li>{$wd-banner}</li>
<li>{$wd-banner}</li>
<li>{$wd-banner}</li>
</ul>
</div>
| 코드 | 설명 |
|---|---|
| {$wd-banner} | <a href=...>...</a> 구조를 간단하게 삽입할 때 사용 |
예제 3. 아이프레임 사용
<div data-banner="group_code_frame">
<div>{$wd-iframe-name}</div>
<div>{$wd-iframe}</div>
</div>
| 코드 | 설명 |
|---|---|
| {$wd-iframe-name} | iframe 이름 |
| {$wd-iframe} | iframe 내용 |
예제 4. 텍스트 에디터 사용
<div data-banner="group_code_editor">
<div>{$wd-editor-name}</div>
<div>{$wd-editor}</div>
</div>
| 코드 | 설명 |
|---|---|
| {$wd-editor-name} | 에디터 이름 |
| {$wd-editor} | 에디터 내용 (HTML) |