개요 | |
본 글은 워드프레스로 만들어진 사이트에서 흔히 보게되는 사이드바 개요 글이다. 사이드바가 웹페이지에 배치되는 예, 위젯과 사이드바, 위젯과 사이드바를 활용하는예(링크로 소개됨), 마지막으로 사이드바를 구현 해야 하는 개발자에게 필요한 정보(링크로 소개됨) 를 정리한다.
사이드바.
웹사이트에 정보를 표현할 때 사이드바에 표현하기 적합한 정보는 메인에 보이는 컨텐츠와는 다른 류들이 많이 배치된다. 포스트 리스트라든지 광고배너를 넣기도 하고, 네비게이션 용도로 많이 사용한다. 그러나 그 기능이 한정된 것은 아니다. 위젯은 모두 사이드바에 넣어서 표현될 수 있다. 사이드바는 모든 웹페이지에서 항상 보일수도있다. 선택적으로 보일 수도 있다. 회사소개에는 안보이고 제품페이지에서만 보인다든지.
| |
1. 사이드바 의 위치. | |
워드프레스의 사이드 바란 아래 예로 보이는 그림들 처럼 사이트에서의 왼쪽 부분, 오른쪽 등에 배치되는 워드프레스 요소를 지칭하는 것이다.
사이드바가 왼쪽에 있는 예. - 아래그림의 왼쪽 노란색 박스영역이며, 로그인 창이 있고, 카테고리 목록이 보이고, 새글들이 보인다 <- 이것들은 전부 위젯이다. 네비게이션을 도와주는 용도로 사용되고 있다.
사이드바가 오른쪽에 있는예. - 아래그림 오른쪽의 붉은 박스 영역이 사이드바이다. 문서의 차례를 표현하는 용도로 사용되고 있다.
| |
2. 사이드바와 위젯. | |
사이드바에 정보를 표현하는 수단은 보통 위젯을 배치하는 것으로 쉽게 이뤄진다. 즉, 아래그림의 워드프레스 관리자 좌측메뉴의 위젯을 클릭하여 보이는 위젯 설정 화면을 보면 위젯들과 더불어 사이드바도 오른쪽에 같이보인다.
위젯을 선택하여 사이드바에 드래그드롭으로 넣게 되면 웹페이지에서 볼 때 해당 사이드바에 위젯의 내용이 보이게 된다. 워드프레스를 활용하는 입장에서는 위젯과 사이드바 사용 방식이 간단 하다보니(코드나 글작성없이 추가의 정보를 표현하므로), 편리하게 활용할 수 있는 요소다. 워드프레스에서의 기본사용법(코드수정없이 사용하는 방식)에서는 사이드바에 내용을 표현하기 위해서는 위젯을 배치하는 것 외의 다른 방법은 없다.
| |
3. 사이드바와 위젯 활용예 | |
사이드바와 위젯을 활용하는 입장에서는 사용법이 간단하므로 쉽게 사용 가능하다.
아래에 사이드바와 위젯 활용하는 예를 보인다.
1. 위젯을 스크롤 따라 다니게 하는 플러그인 설치와 기본사용법. 보기 -> http://igotit.tistory.com/56
2. 사이드바에 글의 목차를 표현하고 동시에 상기1의 플러그인을 이용하여 목차가 스크롤 따라다니게 구현. 보기-> http://igotit.tistory.com/58
| |
4. 사이드바를 구현 해야하는 개발자에게 필요한 정보. | |
자신이 직접 테마를 만든다든지 혹은 이미 있는 테마에서 사이드바를 추가해야하는 개발에 필요한 정보이다.
1. codex의 sidebars 구현정보 -> http://codex.wordpress.org/Sidebars (개발자를 위한 필수정보는 codex에서 제공되고 있다.)
2. 구현사례. 직접 만드는 테마에서 사이드바와 위젯 구현하기. 보기 -> http://igotit.tistory.com/135
| |
본 글이 포함된 통합 정리 글
WordPress 활용정보 정리 : http://igotit.tistory.com/23
|
138.
'지속가능티끌 > 웹,워드프레스' 카테고리의 다른 글
워드프레스 테마에 공백 생기는 오류 해결 - php 파일 인코딩을 UTF-8 BOM없는것으로 해야함. (0) | 2014.10.24 |
---|---|
워드프레스 테마 만들기 6편. 사이드바 위젯 추가, sidebar.php 템플릿 추가. (0) | 2014.10.23 |
워드프레스 테마 만들기 5편. header.php 다듬기, 메뉴 추가, functions.php, page.php 추가하기. (0) | 2014.10.22 |
워드프레스 테마의 functions.php 기능 이해, 코딩 방법 개념잡기 (1) | 2014.10.22 |
워드프레스 테마 만들기 4편. 포스트 표현용 템플릿 single.php 추가하기 (0) | 2014.10.22 |
댓글