WordPress Spacious 테마 사용하기
WordPress 사용법을 익히기 위해 유튜브에서 Spacious 테마를 사용하는 방법을 설명한 동영상을 보면서 요약한 자료이다
개발환경
Autoset 9.1
WordPress 4.4
WordPress Spacious Theme 1.3.6
완성된 사이트 캡쳐 이미지
설치 후 디폴트로 생성된 샘플 페이지 보기
http://127.0.0.1/wordpress/wp-admin/ 에 접속하여 설치시에 등록했던 아이디, 비번을 입력하면 관리자 화면에서 샘플페이지를 확인할 수 있다
관리자 화면의 상단 바에서 왼쪽에 있는 사이트 제목을 반복해서 누르면 관리자 작업 화면과 샘플 페이지로 번갈아 이동할 수 있다
관리자 정보 변경
관리자 화면 왼쪽 메뉴에서 사용자 > 모든 사용자 > 정보변경후 변경사항 저장
웹사이트의 제목 등 정보 변경
설정 > 일반 > 정보변경후 변경사항 저장
관리자 화면 우측 상단을 이용하여 관리자 정보변경 화면으로 이동할 수도 있고 로그아웃할 수도 있다
관리자 화면 우측 상단에서 관리자가 로그아웃하면 다시 로그인 정보입력 화면으로 이동한다
Spacious 테마 다운로드
https://ko.wordpress.org/themes/spacious/
spacious.1.3.6.ziphttp://demo.themegrill.com/spacious/
WordPress 에 Spacious 테마 설치
외모 > 테마 > 새로추가 > 테마 업로드 > 파일선택 > 다운로드한 zip 파일선택 > 열기 > 지금 설치하기 > 활성화
관리자 화면 상단바의 사이트 제목을 누르면 설치한 Spacious 테마가 샘플 페이지에 적용된 것을 볼 수 있다
관리자 화면이 샘플 페이지로 변경되면 작업하기에 불편하므로 샘플 페이지를 새로운 탭에서 열고 확인할 필요가 있다
관리자 화면 상단바의 사이트 제목에서 마우스 우측을 누르고 [새탭에서 링크 열기]를 선택하면 된다
샘플 페이지 삭제
페이지 > 모든 페이지 > 페이지 리스트에 마우스를 올리고, 휴지통 링크 클릭
페이지 리스트 위에 있는 휴지통 링크를 클릭하면 다시 복원할 수도 있다
새로운 페이지 추가 (여기서 입력되는 페이지 제목은 탑 메뉴의 제목으로 사용된다)
페이지 > 새 페이지 추가
제목 : Welcome 입력 > 우측 끝에 있는 [공개하기] 버튼 클릭
페이지 편집화면 상단에서도 '새 페이지 추가' 링크를 누르면 새 페이지를 추가할 수 있다
또 다른 새 페이지를 추가하여 제목 : About Us 입력 > 공개하기 클릭
이런 방법으로 'Contact Us', 'Photography', 'Video', 'Copywriting' 페이지를 추가한다
페이지의 제목이 메뉴의 라벨로 사용될 페이지를 모두 생성했다면.....
관리자 화면 상단 사이트 제목을 눌러서 설정된 탑 메뉴를 확인할 수 있고 각 메뉴를 누르면 해당 페이지로 이동하는 것을 확인할 수 있다
탑 메뉴의 순서 변경하기
외모 > 메뉴 > 메뉴이름 : main navigation menu 입력 > 메뉴생성
왼쪽의 페이지 패널에 있는 모든 페이지 제목을 선택 > 메뉴에 추가, 우측 메뉴 구조 패널에 메뉴들이 추가된다
우측 메뉴구조 패널에 추가된 각 메뉴를 상하로 드래그하면 메뉴의 위치를 변경할 수 있다
메뉴구조 하단에서 Primary Menu, Footer Manu 중에서 Primary Menu 에 선택한다
우측 하단의 메뉴 저장 버튼을 눌러 메뉴 구조를 저장한다
관리자 화면 상단 사이트 제목을 탑 메뉴의 순서가 설정과 일치하는지 확인한다
탑 메뉴 항목 삭제, 라벨 편집 및 새로 메뉴에 추가
위의 메뉴구조 패널에서 각 메뉴 우측 끝에 있는 역삼각형 아이콘을 누르면 삭제 링크가 있다
메뉴의 라벨을 변경하려면 역삼각형 아이콘을 누르고 네비게이션 라벨 항목을 편집하면 된다
메뉴의 라벨은 디폴트로 각 페이지의 타이틀이 메뉴 라벨로 사용되고 있으므로 Welcome 페이지는 메뉴로 사용될 때 Welcome라는 라벨이 기본으로 사용되고 있다. 위과 같은 방법을 사용하면 Welcome 메뉴의 라벨을 Home 등으로 변경할 수 있다
외부 사이트에 링크하는 메뉴 설정하기
메뉴를 클릭하여 현재 사이트 외부에 있는 웹페이지로 이동하려는 경우
페이지 패널 아래에서 [사용자 정의 링크] 항목을 선택하고 URL, 메뉴 아이템을 입력하고 메뉴에 추가를 누른다
각 메뉴에 하위 메뉴 설정하기
하위 메뉴를 가진 상위 메뉴를 클릭하는 경우에는 아무런 반응이 없어야 하고 마우스가 상위 메뉴로 올라가면 그 하위의 메뉴들이 그 아래에 나타나야 한다
하위 메뉴를 만들려면 위와 같이 [사용자 정의 링크]를 생성하여 URL에 #을 입력하여 클릭에 반응하지 않는 빈 링크를 만들 수 있다
빈 링크를 메뉴에 추가하고 메뉴 구조 패널에서 빈 링크 메뉴의 아래 우측 아래로 메뉴를 드래그하면 하위 메뉴가 된다
[메뉴 저장] 버튼을 누르고 상단 바에서 사이트 제목을 눌러 하위 메뉴가 제대로 작동하는지 확인한다
Footer 메뉴 만들기
페이지 하단에도 메뉴를 만들 수 있다
메뉴 편집 화면에서 [새로운 메뉴를 생성하세요] 하는 링크를 클릭한다
메뉴 이름 : 'Footer Menu' 입력 > 메뉴 생성
이후의 메뉴 편집/삭제/하위메뉴 설정 등은 위에서 다룬 바와 동일하다
다만, 메뉴 구조 패널의 하단에서 'Primary Menu', 'Footer Menu' 중에서 Footer Menu 를 선택하고 메뉴 저장을 누르면 된다
페이지로 이동하여 페이지 하단 우측에서 Footer 메뉴를 볼 수 있고 클릭하면 해당 페이지로 이동할 수 있다
메인 메뉴, Footer 메뉴 선택하여 편집하기
2개 이상의 메뉴가 생성되어 사용되는 경우에는 메뉴 편집 화면의 콤보박스에서 편집하고자 하는 메뉴를 선택하고 [선택] 버튼을 누르면 선택된 메뉴를 언제라도 편집할 수가 있다
Front Page 지정하기
웹브라우저에 도메인만 입력해도 보여지는 페이지를 인덱스 페이지 혹은 메인 페이지, 프런트 페이지라고 한다
설정 > 읽기 > '정적인 페이지' 선택, 전면 페이지 : 'Welcome' 선택, [변경사항 저장] 버튼 클릭
상단바에서 사이트 제목을 클릭해서 프런트 페이지를 확인하고 탑메뉴의 'Home' 이 선택되어 있는지도 확인한다
각 페이지에 내용 추가하기
현재까지 메인메뉴, Footer 메뉴, 프런트 페이지를 설정하였는데 각 페이지의 내용은 비어 있는 상태이다
페이지 > 모든 페이지
모든 페이지 리스트에서 내용을 편집하고자 하는 페이지에 마우스를 올리고 [편집] 링크를 선택한다
에디터 우측 상단에서 Visual, Text 모드를 Visual 로 설정
글을 입력하고 글자의 크기, 링크, 비순서 리스트 등을 설정
모든 내용을 입력한 후, 우측 끝에 있는 [업데이트] 버튼을 눌러 저장한다
상단바의 사이트 제목을 눌러 프런트 페이지의 메뉴에서 해당 메뉴를 눌러 내용을 확인한다
페이지 컨텐츠에 이미지 추가하기
http://pixabay.com 에서 무료 이미지를 검색하고 다운로드한다
페이지 > 모든 페이지
이미지를 추가하고자 하는 페이지에 마우스를 올리고 [편집] 링크를 누른다
컨텐츠 가운데 이미지를 삽입하고자 하는 곳에 마우스 커서를 넣는다
에디터의 좌상단에 있는 [미디어 추가] 버튼을 누른다
미디어 삽입 페이지에서 [파일 업로드] 탭을 누른다
중앙에 있는 [파일을 선택하세요] 버튼을 눌러서 원하는 이미지 파일을 선택하고 [열기] 버튼을 누른다
파일이 업로드되면 [미디어 라이브러리] 탭이 활성화되고 업로드된 이미지가 보인다
이미지를 클릭하고 왼쪽 패널에서 이미지 관련 부수적인 정보와 정렬, 링크 정보, 크기를 입력하고 [페이지에 삽입하기] 버튼을 누른다
만약 [미디어 라이브러리]에 업로드된 이미지를 삭제하려면 이미지를 선택하고 우측패널에서 [영구적으로 삭제하기] 링크를 누른다
Contact Form 플러그인 설치
이용자가 자신의 연락처를 입력하고 저장할 수 있는 입력폼이 필요하므로 Contact Form 7 플러그인을 설치한다
플러그인 > 플러그인 추가하기
플러그인 추가 페이지에서 우측 상단 검색란에 'Contact Form 7'을 입력하고 엔터키를 눌러 검색한다
검색결과에서 해당 플러그인의 [지금 설치하기] 버튼을 누른다
설치에 성공하면 [플러그인을 활성화] 링크를 클릭한다
관리자 화면 왼쪽 메뉴에 [Contact] 메뉴가 새로 생긴다
새로 생긴 Contact > 컨택트 폼 선택
리스트의 제목 중에서 [컨택트 폼 1] 을 클릭하여 편집 화면으로 이동한다
4개의 탭 ( 폼, 메일, 메시지, 추가설정 )을 차례로 선택하여 적절하게 편집한다
편집화면 위에 있는 Shortcode ([contact-form-7 id="32" title="컨택트 폼 1"] 형식)를 복사한다
복사된 내용을 다른 페이지의 내용으로 붙여넣기 하면 그 페이지에는 Contact Form 7 이 설정된다
우측 패널의 [저장하기] 버튼을 누른다
Contact Us 페이지에 Contact Form7을 설정할 것이므로 페이지 > 모든 페이지를 선택하여 Contact Us 편집화면으로 이동한다
에디터의 우측 상부에서 Text 모드를 선택하고 에디터 창에 복사했던 내용을 붙여넣기 한다
우측패널의 [업데이트] 버튼을 클릭하여 페이지 변경사항을 저장한다
관리자 화면 상단바의 사이트 제목을 누르고 프런트 페이지로 이동하여 우측 상단 메뉴에서 [Contact Us] 를 누른다
Contact Us 페이지에서 폼이 제대로 보이는지 확인한다
이미지 갤러리 플러그인 설치 및 사용하기
Photography 페이지에 이미지 갤러리를 설정해야 하므로 이미지 갤러리 플러그인을 설치한다
플러그인 > 플러그인 추가하기
플러그인 추가 화면의 우측상단 검색란에 'Nextgen Gallery' 입력하고 엔터키를 누른다
검색결과 화면에서 [지금 설치하기] 버튼을 눌러 설치한다
[플러그인을 활성화] 링크를 누른다
관리자 화면의 왼쪽 메뉴패널에 [Gallery] 메뉴가 새로 생성되었는지 확인한다
페이지 > 모든 페이지
Photography 페이지를 선택하여 편집화면에 열고 에디터 우측 상단에서 [비주얼] 모드를 선택한다
비주얼 에디터의 상단에 아이콘들 중에 초록색 사각형 아이콘 (Attach NextGen Gallery to Post)이 추가된 것을 누른다
NextGen Gallery 화면에서 [Add Gallery / Images] 탭을 선택
업로드 이미지 화면의 콤보박스에서 'create a new gallery' 를 선택하고 우측에 임의의 갤러리 이름(Image Gallery 1)을 입력한다
갤러리 이름 입력란 우측의 [Add Files] 버튼을 누르고 갤러리에 포함될 이미지를 모두 선택한다
[Start Upload] 버튼을 누르면 업로드가 시작된다
이미지 업로드가 완료되면 [Display Galleries]탭을 선택한다
디스플레이 타입을 선택하고 'What would you like to display?' 버튼을 누른다
Source : Galleries
Galleries : 입력박스를 클릭하여 위에서 생성한 갤러리 이름(Image Gallery 1)을 선택한다
[Customize the display settings] 버튼을 누르고 'show slide show link' 항목에서 '아니오' 선택
[Sort or Exclude images] 버튼을 누르고 이미를 드래그하여 순서를 정하고 갤러리에서 제외할 이미지는 Exclude 를 선택한다
갤러리를 설정완료했으면 하단의 [Save] 버튼을 눌러서 갤러리 편집창을 닫는다
갤러리가 포함된 페이지 편집창이 보이고 갤러리는 한개의 이미지만 보이게 된다
우측 패널의 [업데이트] 버튼을 누르고 상단바에서 사이트 제목을 눌러서 [Photography]메뉴를 누르면 갤러리를 확인할 수 있다
이미지 갤러리의 섬네일 이미지를 클릭하면 팝업창에 해당 이미지가 원래의 크기로 보여지고 마우스를 올리면 좌우측 이미지로 이동도 가능하다
이미지 갤러리의 섬네일 크기 변경하기
이미지 갤러리가 설정된 페이지를 편집모드로 열고 이미지 갤러리를 클릭하면 갤러리 설정창이 다시 나타난다
갤러리 설정창의 우측상단의 'X' 아이콘을 누르면 설정창을 닫을 수 있다
갤러리가 설정된 페이지에서 마우스 포인터를 갤러리 우측에 두고 백스페이스 키를 누르면 설정된 갤러리를 쉽게 삭제할 수 있다
위와 같이 페이지에서 삭제된 갤러리는 Ctrl + Z 키를 눌러서 다시 복원할 수 있다
섬네일의 크기를 변경하려면 페이지 편집 화면에서 설정된 갤러리를 클릭하여 갤러리 설정창을 연다
갤러리 설정창의 [Display Galleries] 탭을 누르고 [Customize th display settings] > Overide thumbnail settings : 예
Thumbnail Dimensions : 폭, 높이를 적절히 변경, 하단의 [Save] 버튼을 눌러 저장하면 편집창이 닫힌다
상단바의 사이트 제목을 클릭하여 변경된 이미지 갤러리의 섬네일 크기를 확인한다
이미지 갤러리의 구성 이미지 하단에 설명문(Description) 넣기
갤러리 설정창의 [Manage Galleries] 탭을 누르고 리스트에서 해당 갤러리 이름을 클릭하여 설명문 입력화면을 연다
Alt & Title Text / Description 입력난에 해당 사진의 설명문을 입력하고 [Save Changes] 버튼을 누르고 화면을 닫는다
갤러리가 포함된 페이지의 편집화면에서 오른쪽에 있는 [업데이트] 버튼을 눌러 변경내용을 저장한다
상단바의 사이트 제목을 클릭하여 이미지 갤러리 페이지로 이동한 후 각 이미지를 클릭하면 이미지 하단의 설명문을 볼 수 있다
페이지에 유튜브 동영상 포함하기
페이지 > 모든 페이지 > 유튜브 동영상을 포함할 페이지를 선택하여 편집 화면에 연다
http://youtube.com 사이트에서 원하는 동영상을 찾고 웹브라우저 주소창에서 그 URL을 복사한다
페이지 편집화면의 에디터 우측상단의 [비주얼] 모드로 설정하고 복사된 URL을 에디터에 붙여넣기 한다
페이지 편집화면의 우측에 있는 [업데이트] 버튼을 눌러 저장한다
상단바의 사이트 제목을 클릭하고 탑메뉴에서 비디오가 포함된 페이지를 클릭하여 유튜브 동영상이 해당 페이지에서 실행되는지 확인한다
Theme Option 설정
한 테마에는 다른 테마와 다른 옵션들이 있으며 해당 옵션에 대한 설정기능을 가진다
테마의 옵션항목의 설정을 변경하려면 외모 > 사용자 정의하기....
외모 > 사용자 정의하기 > Header
Header 옵션에는...
- Header Logo : 로고 이미지 업로드, 100 X 100 크기의 로고 이미지가 권장됨
- Show : 로고 이미지만 보이게 할 것인지 텍스트도 보이게 할 것인지 설정
- Header Image Position : 로고 이미지가 사이트 제목 위/아래에 오도록 설정
외모 > 사용자 정의하기 > Design
Design 옵션에는...
- Site Layout : 4가지 중 택 1, Boxed Layout은 배경색 설정가능, Wide Layout은 배경색 설정 불가
- Default Layout : Side bar 의 위치에 따라 4가지 중 택 1, 모든 Post, Page에 공히 적용됨
- Default Layout for pages only : Page에만 적용됨. Side bar의 위치에 따라 4가지 중 택 1
- Default Layout for single post only : Post 에만 적용됨. Side bar의 위치에 따라 4가지 중 택 1
- Blog Posts display type : 블로그 프런트 페이지에 사용된 이미지의 크기에 따라 4가지 중 택 1
- Primary color option : 링크, 버튼 등에 사용될 주 색상 설정. http://www.colourlovers.com/ 참조
- Color skin : 사이트의 밝기에 따라 2가지 중 택 1
- Custom CSS : 사용자 제작 CSS 등록
외모 > 사용자 정의하기 > Additional
Additional 항목에는 ...
- Activate favicon : 선택하면 favicon이 활성화 됨.
- Upload favicon : favicon 활성화를 선택한 경우에는 favicon 파일을 업로드해야 한다
참고 : 구글에서 Favicon Generator 로 검색하면 favicon 파일을 생성할 수 있는 툴을 찾을 수 있다
외모 > 사용자 정의하기 > Slider
Slider 항목에는....
- Activate Slider : 헤더에서 슬라이드 쇼를 활성화하려면 체크
- Disable Slider in Posts pages : 포스트 페이지에서 슬라이드 쇼를 비활성화하려면 체크
- Image Upload #1 ~ #5 : 슬라이드 쇼에 포함될 이미지를 5개까지 업로드할 수 있다
- 사이트 아이덴티티 : 사이트 제목, 태그 라인(사이트 제목 아래에 위치하는 문자열), 사이트 아이콘 설정(폭, 높이 512픽셀 이상)
- 색상 : 헤더 글 색상, 배경색상 선택
- 헤더 이미지 : 헤더 이미지 업로드, 1400 X 400 크기 권장
- 배경 이미지 : 배경 이미지 업로드
- 메뉴 : 다수개의 메뉴를 생성하거나 편집할 수 있다 ( [외모 > 메뉴] 에서 하는 작업과 동일 )
- 위젯 : 사이드바에 들어갈 위젯을 설정함
- 정적인 전면 페이지 : 프런트 페이지를 설정할 수 있다
이 사이트에서는 서로 어울리는 색상들을 팔레트로 구성하여 각 구성 색상들의 색상코드를 제공하고 있다
예를 들어, 배경색상과 주 색상이 서로 어울리지 않으면 좋은 디자인이라고 할 수 없으므로 많은 팔레트를 검색하여 그 중에서 마음에 드는 것을 고르고 팔레트를 구성하는 각 생상의 코드를 복사해서 디자인에 적용할 수 있다
사이트에 접속하여 Browse > Palettes 를 선택하고 검색창에 원하는 색상을 입력하고 검색하면 수 많은 팔레트를 볼 수 있다
검색된 팔레트 중 한개를 클릭하면 해당 팔레트 아래쪽에 구성 색상별로 16진수 색상코드를 볼 수 있다
색상코드를 복사하여 Primary color option 항목이나 배경 색상 등을 선택하는 곳에 복사하면 된다
헤더 로고 이미지 만들기
로고에 들어갈 그래픽 소품은 https://pixabay.com/ko/에서 무료로 구할 수 있다
글자를 그래픽 이미지로 변환하여 로고를 작성하려면 http://picmonkey.com에서 도움을 받을 수 있다
picmonkey 사이트에 접속하여 Design 메뉴를 누르면 로고 편집이 가능하다
편집화면의 왼쪽에서 Text 아이콘 > 글자체 선택 > Add Text 를 선택하면 편집창에 텍스트를 입력할 수 있다
글자의 색상, 크기 등도 자유롭게 선택할 수 있다. 글자의 색상도 colourlovers.com에서 얻은 색상을 활용하면 좋을 것이다
캔바스의 크기를 조정하고 배경을 투명하게 할 수 있는 메뉴도 준비되어 있다
로고편집을 마쳤으면 편집창 상단에 있는 [Save] 버튼을 누르고
왼쪽 위에서 파일명과 파일포맷(확장자,png)을 선택하고, 왼쪽 아래에서 [Save to my computer]를 누르면 된다
그래픽 소품도 준비되고, 로고 파일도 준비가 되었다면 이들을 모두 합쳐서 한개의 로고 이미지 파일로 만들어야 한다
https://pixlr.com 에서는 이미지 편집기능을 웹상에서 사용할 수 있도록 제공한다
빈 캔바스를 생성하고 위에서 만든 로고와 그래픽 소품을 모두 읽어와서 이 곳에서 결합하고 한개의 이미지로 생성한다
완성된 로고 이미지를 적당한 크기로 잘라서 확장자를 png로 설정하고 컴퓨터에 저장한다
사이트에 헤더 로고 적용하기
외모 > 사용자 정의하기 > Header > Header Logo > [이미지를 선택하세요] 버튼을 누르고 준비된 로고 이미지를 업로드한다
외모 > 사용자 정의하기 > Header > Show > Header Logo only 선택 > 상단의 [저장 & 발행] 버튼을 누른다
상단바의 사이트 제목을 눌러서 프런트 페이지의 헤더에 로고가 설정되어 있는지 확인한다
다른 페이지에도 로고가 동일하게 적용되었는지 확인하고 로고를 클릭하면 [Home] 페이지로 이동하는 것도 확인한다
프런트 페이지에 슬라이드 쇼 설정하기
슬라이드 쇼는 프런트 페이지에만 설정하는 것이 일반적이다
어떤 페이지가 프런트 페이지로 설정되어 있는지 확인한다
슬라이드 쇼를 구성하기 전에 Spacious 테마 데모 페이지를 방문하여 이미지의 폭과 높이를 확인한다
슬라이드 쇼 구성 이미지의 크기를 결정해야 하는 시간을 절약할 수 있다
Spacious 데모 페이지를 방문하여 슬라이드 쇼를 구성하는 이미지를 한개만 다운로드해서 탐색기로 확인하면 폭과 높이를 바로 알 수 있다
확인된 폭과 높이 (1400 X 500) 를 슬라이드 쇼를 구성할 모든 이미지에 적용한다
이미지가 큰 경우에는 pixlr.com 사이트에서 적당한 크기로 잘라주는 방법이 있다
왼쪽에서 [자르기 도두]를 선택하고 상단 툴바의 [강제] 항목에서 '출력크기' 선택, 폭:1400, 높이:500 으로 설정한다
이 상태에서 자르기 영역을 드래그한 후 [엔터]키를 누르면 해당 영역이 잘리고 파일에 저장하면 정확한 크기의 이미지를 얻을 수 있다
설정 > 읽기 > 전면 페이지 를 확인하여 어떤 페이지가 프런트 페이지로 설정되어 있는지 확인한다
외모 > 사용자 정의하기 > Slider > Activate Slider > Check to activate slider 선택
외모 > 사용자 정의하기 > Slider > Disable Slider in Posts... > Check to disable slider in Post Pages 선택
외모 > 사용자 정의하기 > Slider > Image Upload #1 >
[이미지를 선택하세요] 선택하고 이미지 업로드, 타이틀, 설명, 링크 입력
이런 방법으로 모두 5개의 이미지를 업로드하여 슬라이드 쇼를 구성할 수 있음
[저장 & 발행] 버튼을 누르고 프런트 페이지로 이동하여 슬라이드 쇼가 작동하는지 확인한다
Widgets 과 사이드바 기본설정 확인하기
Widget 은 웹사이트에서 부가적인 기능을 가지고 있으며 화면의 상하좌우 사이드바에 보여지도록 설정할 수 있다
Widget 의 종류는 외모 > 위젯 에서 확인할 수 있다
widget 은 어떤 사이드 바에 포함되어야만 화면에 보여지게 된다
사이드 바의 종류는 외모 > 위젯 에서 확인할 수 있으며 다음과 같은 것이 있다
- Right Side bar
- Left Side bar
- Header Side bar
- Business Top Side bar
- Business Middle Left Side bar
- Business Middle Right Side bar
- Business Bottom Side bar
- Contact Page Side bar
- Error 404 Page Side bar
- Footer Side bar One
- Footer Side bar Two
- Footer Side bar Three
- Footer Side bar Four
위젯은 디폴트로 우측 사이드바에 포함되는 것으로 설정되어 있으며 아래와 같이 확인할 수 있다
외모 > 사용자 정의하기 > Design > Default Layout
왼쪽 사이드 바에 위젯 배치하기
디폴트로 우측 사이드 바에 위젯이 배치되어 있으므로 위에서 확인한 Default Layout 에서 왼쪽 사이드바 아이콘을 선택한다
왼쪽 사이드바로 설정은 되었지만 왼쪽 사이드바에는 아무런 위젯을 배치하지 않았기 때문에 비어 있는 상태이므로 위젯을 추가해주어야 한다
외모 > 사용자 정의하기 > 위젯 > Left Sidebar > [+ 위젯 추가] 버튼을 누른다
외모 > 위젯 을 이용해도 된다
오른쪽에 나타난 위젯 중에서 원하는 위젯(여기서는 검색 위젯)을 선택한다
상단에서 [저장 & 발행] 버튼을 누른다
페이지를 실행하여 왼쪽 사이드바에 검색 위젯이 나타나는지 확인한다
사이드 바에서 위젯 제거하기
우측 사이드바에 디폴트로 설정되어 있는 위젯들을 삭제하려고 한다
외모 > 사용자 정의하기 > 위젯 > Right Sidebar
포함된 각 위젯의 역삼각형 아이콘을 클릭하면 나타나는 [삭제] 링크를 누른다
우측 사이드바에 포함된 모든 위젯을 삭제한다
외모 > 사용자 정의하기 > Design > Right Sidebar 아이콘을 선택한다
[저장 & 발행] 버튼을 누르고 페이지에서 우측 사이드바의 위젯 상태를 확인한다
Archives, Meta 위젯이 여전히 보여지고 있는데 꼭 삭제해야 한다면 꼭 필요한 위젯을 추가하면 이들 2개의 위젯은 사라진다
한개의 위젯도 없는 사이드 바에는 위에서 처럼 Archives, Meta 위젯이 기본으로 추가되고 삭제할 수도 없다
사이드 바에 Featured Page(특성 페이지) 설정하기
웹사이트의 주요 특성이 표현된 페이지(Featured Page)가 있다면 그 페이지의 특성 이미지와 요약을 사이드 바에 표시할 수 있다
먼저 Featured Page로 선정한 페이지를 편집하여 요약(Excerpt)과 특성 이미지(Featured Image)를 설정해 놓고, 'TG: Featured Single Page' 위젯을 사이드바 추가할 때 Featured Page로 지정하면 해당 페이지의 Featured Image와 인용구가 사이드바에 보이게 된다
페이지 > 모든 페이지 > 특성 페이지로 사용할 페이지를 선택하여 편집화면에 연다
페이지 편집화면의 상단 우측에 있는 [화면 옵션] 버튼을 누르고 '요약' 과 '특성 이미지' 옵션을 선택해야 특성 페이지 속성을 입력할 수 있다
'요약' 입력란에 특성 페이지의 요약내용을 입력하고, 화면 우측 하단에서 '특성 이미지' 링크를 클릭하여 이미지를 선택하고 [특성 이미지 설정] 버튼을 누르면 된다
페이지 편집화면의 우측에 있는 [업데이트] 버튼을 누른다
외모 > 사용자 정의하기 > 위젯 > Right Sidebar > [+ 위젯 추가] > TG : Featured Single Page
Title : 사이드바에 제목으로 보여질 문자열 입력
Page : 특성 페이지로 지정된 페이지를 선택
Show Image before title 선택 > [저장 & 발행] 버튼을 누르고 페이지를 실행하여 사이드바에서 특성 페이지 소개가 보이는지 확인한다
사이드바에서 보여지는 특성 페이지 위젯 하단의 [Read more] 링크를 누르면 특성 페이지로 이동할 수 있다
사이드 바 내에서 위젯의 순서는 위젯 설정창에서 포함된 위젯을 상하로 드래그하여 놓으면 된다
Footer Sidebar One ~ Four 설정하기
페이지의 하단에 위치하는 Footer Sidebar는 전체의 폭을 사용하므로 4개의 영역으로 나누어 좌에서 우로 나란히 배치하는 특징을 가지고 있다.
Footer 의 4개의 사이드 바에 위젯을 추가하는 방법은 다른 사이드바와 동일하다
참고로, 페이지 라는 위젯은 각 페이지 리스트를 나열하고 링크를 설정해주는 기능을 가지고 있다
4개의 사이드바를 모두 설정하고 [저장 & 발행] 버튼을 누른 후 페이지를 실행하여 페이지 하단에 4개의 영역으로 나누어 위젯이 배치되어 있는지 확인한다
Contact Page Sidebar
일반적으로 이용자가 사이트 관리자에게 메일을 작성하는 페이지에서는 사이드바에 복잡한 소개나 링크를 배치할 필요가 없다
그러므로 Contact Page 에서는 일반적인 사이드바의 내용이 아니라 연락처와 같은 정보가 보여지면 좋을 것이다
이러한 경우에 사용되는 사이드 바가 Contact Page Sidebar 이다
특정 페이지에서 Contact Page Sidebar 를 사용하기 위해서는 페이지 편집화면에서 Contact Page Template을 지정해야 한다
Contact Page 로 사용될 페이지를 편집화면에 연다
편집화면 상단 우측에서 '화면 옵션' 버튼을 누르고 '페이지 속성' 옵션을 선택한다
편집화면 우측에서 '페이지 속성' 섹션의 [템플릿] 란에 'Contact Page Template' 선택하고 [업데이트] 버튼을 누른다
위와 같은 절차를 거치면 위에서 지정한 페이지에서만 Contact Page Sidebar 가 적용된다
외모 > 위젯 > 텍스트 위젯 선택 > Contact Page Sidebar 선택 > [위젯 추가] 버튼을 누른다
텍스트 위젯에 포함될 타이틀, 컨텐트 를 입력하고 [저장하기] 버튼을 누른다
Contact Page를 실행하여 Contact Page Sidebar가 적용되어 있는지 확인한다
Business Template 사용하기
Spacious 테마에서 제공하는 비즈니스 템플릿은 화면의 메인 영역을 Top, Middle Left, Middle Right, Bottom 으로 구분하여 사용할 수 있도록 한다
특정 페이지에 비즈니스 템플릿을 적용하려면 해당 페이지 편집화면의 우측상단에 있는 '화면 옵션' 버튼을 누르고 '페이지 속성' 옵션을 선택해야 한다
페이지 편집화면의 우측의 '페이지 속성' 섹션에서 [템플릿] : Business Template 으로 선택 > [업데이트] 버튼을 누른다
위와 같이 특정 페이지의 템플릿을 'Business Template'으로 지정하면 해당 페이지는 아래와 같은 4개의 사이드바가 설정된다
Business Top Sidebar
Business Middle Left Sidebar
Business Middle Right Sidebar
Business Bottom Sidebar
프런트 페이지에서 비즈니스 템플릿을 사용하여 4개의 사이드바 안에 다음과 같은 위젯을 포함하려고 한다
Business Top Sidebar : TG Service 위젯 ( 몇개의 페이지를 소개하는 요약, 특성 이미지와 링크를 보여준다 )
Business Middle Left Sidebar : TG Featured Single Page 위젯
Business Middle Right Sidebar : TG Testimonial 위젯
Business Bottom Sidebar : TG Call To Action 위젯 (연락처 정보 페이지로 이동하도록 간단한 설명과 버튼을 제공함)
라인 아이콘을 특성 이미지로 사용하려면 http://www.elegantthemes.com/ 에 접속하여 Blog 메뉴로 이동하여 검색란에 'line icon' 이라고 입력하고 검색하면 100개의 라인 아이콘을 무료로 받을 수 있다
Business Top Sidebar에 TG Service 위젯을 포함하는 방법
이 영역에 권장되는 위젯은 TG Service, TG Call To Action, TG Featured 위젯 등이다
외모 > 사용자 정의하기 > 위젯 > Business Top Sidebar > [+위젯 추가] >
각 Page 입력 박스에 Featured Image와 요약이 설정된 페이지를 선택한다
6개의 입력박스 중 필요한 만큼만 입력하면 된다
미리 각 페이지에 요약과 특성 이미지를 설정해 놓아야 한다.
특성이미지는 위에서 다운로드한 라인 아이콘 등을 활용하면 좋을 것이다
[저장 & 발행] 버튼을 누르고 프런트 페이지를 실행하여 비즈니스 탑 사이드바를 확인한다
Business Middle Left Sidebar 에 TG Featured Single Page 위젯 설정하기
Business Middle Right Sidebar에 TG Testimonial 위젯 설정하기
Business Bottom Sidebar에 TG Call To Action 위젯 설정하기
외모 > 사용자 정의하기 > 위젯 > Business Bottom Sidebar > TG Call To Action 위젯 선택
Main Text, Additional Text, Button Text, Button Redirect link 등을 입력하고 [저장 & 발행] 버튼을 누른다
프런트 페이지를 실행하여 비즈니스 템플릿 설정을 확인한다