레이아웃 수정 (3)

이제는 레이아웃에 위젯을 넣어보자

홈페이지 좌측 로그인 정보 밑에 카운터를 넣어 볼 것이다.

해당 항목이나 위치를 찾기 어려울 대는 소스보기를 해서 찾을 수 있지만

파일을 읽어보면 대부분 주석이 잘 되어 있어 쉽게 찾을 수 있다.

layout.html  61~90번째줄을 보면 레이아웃의 왼쪽부분<div id="columnLeft">안에 로그인위젯과 왼쪽 2차메뉴가 있는 것을 알 수 있다.

카운터위젯을 로그인 정보 바로 밑에 삽입하고자 한다면 아래 빨간색으로 표시된 위치에 카운터위젯코드를 삽입하면된다.

    <div id="contentBody">
        <div id="columnLeft">

            <!-- 로그인 위젯 -->
            <img src="./images/blank.gif" class="zbxe_widget_output" widget="login_info" skin="xe_official" colorset="{$layout_info->colorset}" />
<!-- 카운터위젯 코드삽입 위치  -->
            <!-- 왼쪽 2차 메뉴 -->
            <img src="./images/blank.gif" alt="" class="mask" />
           
            <!--@if($menu_1st)-->
            <ol id="lnb">
                {@ $idx = 1 }
                <!--@foreach($menu_1st'list' as $key => $val)--><!--@if($val'link')-->
                <li <!--@if($val'selected')-->class="on"<!--@end-->><a href="./{$val"href'}" <!--@if($val'open_window'=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val'link'}</a>

                    <!-- main_menu 3차 시작 -->
                    <!--@if($val'list' && ($val'expand'=='Y'||$val'selected') )-->
                    <ul>
                    <!--@foreach($val'list' as $k => $v)--><!--@if($v'link')-->
                        <li <!--@if($v'selected')-->class="on"<!--@end-->><a href="./{$v"href'}" <!--@if($v'open_window'=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v'link'}</a></li>
                    <!--@endif--><!--@endforeach-->
                    </ul>
                    <!--@endif-->
                </li>
                {@$idx++}
                <!--@endif--><!--@endforeach-->
            </ol>
            <!--@endif-->

        </div>

카운터위젯 코드를 만들어 보자

제어판 > 사이트 설정 > 위젯을 클릭한다.

설치된 위젯프로그램목록이 나온다.

그중에 "기본카운터 위젯"의 "코드생성" 버튼을 누른다.

아래와 같은 코드 생성창이 나타난다.

스킨의 종류를 선택하고 우측 "선택" 버튼을 반드시 눌러야 칼러셋이 나온다.

맨아래 코드생성 버튼을 누르면 코드가 생성된다.

이코드를 복사하여 원하는 위치에 붙여넣으면 된다.

빨간글씨가 추가된 부분이다.

            <!-- 로그인 위젯 -->
            <img src="./images/blank.gif" class="zbxe_widget_output" widget="login_info" skin="xe_official" colorset="{$layout_info->colorset}" />
            <img class="zbxe_widget_output" widget="counter_status" skin="styx_flash" colorset="normal" />
            <!-- 왼쪽 2차 메뉴 -->
            <img src="./images/blank.gif" alt="" class="mask" />
           
 

이제 layout.html파일을 FTP로 업로드한다.

홈페이지에 접속하면 카운터가 추가된 것을 볼 수 있다.

물론 레이아웃 수정은 관리자페이지의 레이아웃 편집창에서 직접 웹상에서 할 수 있다.

다만 초기화를 해야할 상황이 생기면 작업한 내용이 없어지기 때문에 복잡하거나 중요한 사항은 파일을 직접 수정하는 것이 좋다고 생각한다.

모든 위젯을 레이아웃에 삽입하는 경우도 동일한 방법으로 하면된다.