레이아웃 최적화 세팅 팁 Part. 3 - 블로그 페이지, 사이드 세팅

이번에는 블로그 스타일인 웹진 위젯을 세팅하는 방법과 사이드 영역에 위젯코드를 추출하여 세팅하는 방법에 대해 알아보겠습니다. 시네마 레이아웃에 이런 형태를 준비한 것은 요즘 회사사이트에도 블로그 형식으로 포스팅하는 페이지를 많이들 만드는 추세라 웹진 위젯을 제작하게 되었습니다. 방법은 아주 간단하므로 이해하는데 어려운 부분이 없을 것입니다.

샘플사이트 새창으로 열기

1. 시네마 레이아웃 Part. 1 - 소개 및 설정안내
2. 시네마 레이아웃 Part. 2 - 샘플 사이트 각 페이지 설정 팁
3. 레이아웃 최적화 세팅 팁 Part. 1 - 세팅 절차
4. 레이아웃 최적화 세팅 팁 Part. 2 - 위젯 페이지 세팅(컨텐츠 위젯)
5. 레이아웃 최적화 세팅 팁 Part. 3 - 블로그 페이지, 사이드 세팅(웹진 위젯)
6. 레이아웃 최적화 세팅 팁 Part. 4 - 게시판 세팅
7. 레이아웃 최적화 세팅 팁 Part. 5 - 컨텍트 페이지 세팅

1. 레이아웃 및 페이지 생성

블로그용으로 사용할 레이아웃 및 위젯을 꾸밀 페이지를 생성합니다.

1) 레이아웃 생성

- 컨텐츠 배경 : 검정색

- 컨첸츠 구성 : 2단 사이드 우측

- 프로모션 스타일 : 사용안함

- AD 배너 : 사용안함

- 검색 창 : 사용함

- 위젯 1,2 : 사용함

- 오가닉 탭 : 사용함

2) 페이지 생성

다음 페이지를 생성하고 블로그 용으로 생성한 레이아웃을 연결합니다.

해당 페이지를 열었을 때의 페이지의 모습입니다.

2. 웹진 위젯 세팅

페이지 세팅 버튼 3개중 <페이지 수정>버튼을 클릭하여 위젯 설정 팝업 창을 엽니다. content 위젯과 동일한 방법으로 위젯 셀렉트 박스에 <웹진 형태 최근 문서 출력>을 선택한 후 추가 버튼을 클릭합니다.

여기서 핵심 및 주의해야 될 부분은 섬네일의 가로 사이즈입니다. 본문영역이 샘플사이트와 다를 때 가급적 본문영역에 맞춰주는게 좋습니다. 단순하지만 사이즈 수치를 여러 번 조정해가며 맞추는 방법이 좋을 것 같습니다.

웹진 위젯을 세팅한 모습입니다.

제가 사이즈를 간편하게 알아내는 방법으로 <알툴바>에 섬네일 캡쳐 기능을 활용하여 사이즈를 알아내는 방법입니다.

알툴바를 사용하시는 분들 참고하세요.

알툴바에 보면 캡쳐 메뉴가 있습니다. 클릭해보면 각 영역별 캡쳐 옵션이 있는데 단축키로 Alt+1,2,3,4,5 입니다. 여기서 단위영역인 Alt+1을 클릭 후 사이트에 마우스를 올리면 사이트에 적용된 코드에 맞춰 단위 별로 영역이 활성화가 되는 것을 확인 할 수 있습니다. 원하는 단위에서 클릭을 하면 캡쳐된 팝업 창이 나타나고 캡쳐 이미지의 사이즈를 확인 할 수 있습니다.

3. 사이드 영역 위젯 세팅

이번에는 위젯 코드를 추출하여 사이드 영역에 위젯을 출력하는 방법에 대해 알아보겠습니다.

관리자 > 설치된 위젯 > content 위젯에 오른쪽 <코드 생성> 버튼을 클릭합니다.

위젯 설정 페이지로 연결이 되며 <Part. 2 위젯페이지 세팅>에서 설정 이미지와 동일한 설정 폼이 나타납니다.

* 이미지가 너무 길어서 여기서는 생략합니다.

필요한 설정을 마치고 <코드생성> 버튼을 클릭하면 해당 코드가 출력이 됩니다. 코드 내용을 복사해서 레이아웃 설정 사이드 위젯 영역에 붙여넣기를 하시면 위젯이 출력됩니다.

코드 복사(단축키 Ctrl+C)를 하여 레이아웃 사이드 영역에 붙여넣기(단축키 Ctrl+V)를 하고 저장합니다.

내용형태(목록, 웹진, 갤러리)에 따라 표시항목과 순서 설정을 이것 저것 해보면서 출력되는 형태를 확인해보세요.

위젯 설정은 어느정도 익숙해질 때까지 많이 사용해보는 것이 최선이겠죠.

제가 주로 사용하는 코드형태를 소개합니다.

샘플 사이트 각 영역별 위젯 코드 소개

목록 형 (제목)

 <img class="zbxe_widget_output" widget="content" skin="kso_unadorned" colorset="black" content_type="document" module_srls="2477" list_type="normal" tab_type="none" markup_type="table" list_count="5" page_count="1" subject_cut_size="25" option_view="title,regdate" show_browser_title="N" show_comment_count="Y" show_trackback_count="N" show_category="N" show_icon="N" order_target="list_order" order_type="desc" thumbnail_type="crop" />

웹진형 (이미지+제목+내용)

 <img class="zbxe_widget_output" widget="content" skin="kso_unadorned" colorset="black" content_type="document" module_srls="2477" list_type="image_title_content" tab_type="none" markup_type="table" list_count="5" page_count="1" subject_cut_size="25" content_cut_size="25" option_view="thumbnail,title,content,regdate" show_browser_title="N" show_comment_count="Y" show_trackback_count="N" show_category="N" show_icon="N" order_target="list_order" order_type="desc" thumbnail_type="crop" thumbnail_width="70" thumbnail_height="50" />

갤러리형 (갤러리)

 <img class="zbxe_widget_output" widget="content" skin="kso_unadorned" colorset="black" content_type="document" module_srls="2477" list_type="gallery" tab_type="none" markup_type="table" list_count="9" cols_list_count="3" page_count="1" option_view="thumbnail" show_browser_title="N" show_comment_count="N" show_trackback_count="N" show_category="N" show_icon="N" order_target="list_order" order_type="desc" thumbnail_type="crop" thumbnail_width="62" thumbnail_height="60" />

섬네일+목록형 (이미지+제목)

 <img class="zbxe_widget_output" widget="content" skin="kso_unadorned" colorset="black" content_type="document" module_srls="2477" list_type="image_title" tab_type="none" markup_type="table" list_count="5" page_count="1" subject_cut_size="20" option_view="thumbnail,title" show_browser_title="N" show_comment_count="Y" show_trackback_count="N" show_category="N" show_icon="N" order_target="list_order" order_type="desc" thumbnail_type="crop" thumbnail_width="90" thumbnail_height="85" />

위 코드내용을 참고하시고 대상모듈과 제목 글자 수, 이미지 사이즈, 표시항목 등을 조정하시면 됩니다.

위젯 코드에 대해 알면 부분적으로 수정을 해야 할 때 간단하게 수정할 수 있습니다.

위젯 코드는 모두 설정을 하면 아래와 같은 코드로 출력이 됩니다.

목록 형처럼 섬네일 사이즈 설정이 필요가 없어 값을 비워두면 관련 코드는 출력되지 않습니다. 값을 입력하여 코드가 출력되더라도 적용은 안됩니다.

<img class="zbxe_widget_output" widget="content" skin="kso_unadorned" colorset="white" content_type="document" module_srls="67394" list_type="image_title_content" tab_type="tab_top" markup_type="table" list_count="5" cols_list_count="1" page_count="1" subject_cut_size="10" content_cut_size="30" option_view="thumbnail,title,content,nickname,regdate" show_browser_title="Y" show_comment_count="Y" show_trackback_count="Y" show_category="Y" show_icon="Y" duration_new="48" order_target="list_order" order_type="desc" thumbnail_type="crop" thumbnail_width="100" thumbnail_height="75" />

 

생성된 코드를 확인해보면 대충 어떤 내용인지 알 수 있습니다.

widget="content" 위젯 명

skin="content_ksjade" 위젯 스킨 명

colorset="white" 컬러 셋

content_type="document" 추출대상(게시물, 댓글, 첨부이미지, 트랙백, 피드RSS)

module_srls="67394" 불러올 페이지 및 대상 모듈 값

list_type="image_title_content" 내용형태(이미지+제목+내용)

tab_type="tab_top" 탭 형태 상단

markup_type="table" 출력방식 테이블

list_count="5"목록 수

cols_list_count="1" 가로 이미지 수

page_count="1" 페이지 수

subject_cut_size="10" 제목 글자 수

content_cut_size="30" 내용 글자 수

option_view="thumbnail,title,content,nickname,regdate" 표시항목(섬네일,제목,내용,닉네임,등록일)

show_browser_title="N" 브라우저 제목/출력안함

show_comment_count="Y" 댓글 수/출력

show_trackback_count="N" 엮인글 수/출력안함

show_category="N" 분류/출력안함

show_icon="N" 아이콘/출력안함

duration_new="48" new아이콘 표시 시간

order_target="list_order" 정렬 대상 최신 등록순(update_order 최근 변경순)

order_type="desc" 정렬 내림차순(asc 올림차순) 내림차순이 위에 최신 글이 나타납니다.

thumbnail_type="crop" 섬네일 채우기(crop 채우기/ratio 비율맞추기)

thumbnail_width="100" 섬네일 가로 사이즈

thumbnail_height="75" 섬네일 세로 사이즈

이렇게 하여 위젯 세팅에 대한 부분을 모두 마쳤습니다.

1. 시네마 레이아웃 Part. 1 - 소개 및 설정안내
2. 시네마 레이아웃 Part. 2 - 샘플 사이트 각 페이지 설정 팁
3. 레이아웃 최적화 세팅 팁 Part. 1 - 세팅 절차
4. 레이아웃 최적화 세팅 팁 Part. 2 - 위젯 페이지 세팅(컨텐츠 위젯)
5. 레이아웃 최적화 세팅 팁 Part. 3 - 블로그 페이지, 사이드 세팅(웹진 위젯)
6. 레이아웃 최적화 세팅 팁 Part. 4 - 게시판 세팅
7. 레이아웃 최적화 세팅 팁 Part. 5 - 컨텍트 페이지 세팅

이해가 안되는 부분이나 궁금한 내용은 댓글로 남겨주세요~! 댓글은 로그인을 하셔야 합니다.