워드프레스 사이드바(sidebar) 만들기 & 위젯 사용

워드프레스에서 사이드바(sidebar)는 전환을 위해서 중요한 역할을 합니다. 하지만 웹 사이트에서 사이드 바를 만들 때 어느 쪽에 무엇을 넣어야 할지 모를 때가 많습니다. 전환을 위해서는 오른쪽 사이드 바를 추천합니다. 사이드바에서 주요 포함 내용은 소개, 이메일 가입, 소셜 링크, 페이스북 페이지, 배너, 추천/리뷰, 인기 글, 최근 글, 메뉴 등이 필요합니다.

 

오늘은 워드프레스에서 제공하는 Accelerate 테마를 가지고 웹 사이트에 사이드바를 만들어 보겠습니다. '사용자 정의 메뉴' 위젯을 사용해서 배치해보고, 배너 광고를 위해서 Image widget 플러그인을 설치한 후 그 이미지 위젯을 사이드 바에 배치해보겠습니다. 텍스트 위젯을 사용해서 콘택트 폼을 배치할 텐데 여기서 텍스트 위젯은 글도 가능하지만 숏 코드, HTML, 자바스크립트도 사용이 가능합니다.

 

사이드바를 만드는 방법은, '외모 < 위젯'으로 들어가서 오른쪽 사이드바에 좌측에 있는 위젯들을 드래그해서 배치하면 됩니다. 비즈니스에 따라 전환에 필요한 여러 가지 위젯들이 있는데 그중에서 세 가지만(사용자 정의 메뉴, Image Widget, 텍스트) 해보겠습니다.

 

외모 < 위젯으로 들어가서 오른쪽 사이드바에 기존에 배치되어 있는 것들을 우측의 역삼각형을 눌러서 삭제를 합니다.

 

이렇게 다 삭제를 하고 난 다음 메뉴를 추가해 보겠습니다. '사용자 정의 메뉴'를 드래그해서 끌어다 갖다 놓습니다.

 

타이틀은 NAVIGATION으로 입력하고, 메뉴 선택은 관리 메뉴로 만들어 놓은 Main을 선택해서 저장하기 합니다.

 

두 번째는 플러그인을 추가해서 배치해 보겠습니다.

 

관리자 화면에서 '플러그인 < 플러그인 추가하기'로 들어갑니다. 'image widget'으로 검색해서 지금 설치하기 후 플러그인을 활성화시킵니다.

 

다시 '외모 < 위젯'으로 가보면 'Image Widget'이 보이는데 이것을 'Right Sidebar' 아랫부분으로 드래그해서 갖다 놓습니다.

 

1번) 이미지를 선택하기 위해 'Select an Image'를 눌러서 내 컴퓨터에 있는 이미지를 선택해서 업로드해 줍니다.

2번) 타이틀은 저는 'Korean Tea at Amazon'이라고 주었습니다.

3번) 연결될 링크 주소를 복사해서 링크 부분에 붙여넣기해 줍니다.

4번) 새 창에서 띄우려면 'Open New Window'를 선택해 줍니다.

5번) 사이즈는 원본 이미지가 너무 크기 때문에 저는 'medium_large'로 지정해 주었습니다. 하지만 Custom을 선택해서 원하는 사이즈로 수정을 해주어도 됩니다.

6번) 정열(Align)은 가운데 정열(center)로 지정해 줍니다.

이렇게 모두 지정해주고 저장하기 해줍니다.

 

마지막으로 텍스트 위젯을 'Right Sidebar' 아랫부분으로 드래그해서 갖다 놓습니다. 콘택트 폼을 넣기 위해서 타이틀은 'Contact'로 해주고 그 아래 비주얼 탭에 shortcode를 입력해보겠습니다. 일단 저장하기 해준 다음 관리자 화면에서 Contact로 들어갑니다.

 

Contact Forms 페이지에 있는 단축코드(shortcode)를 복사해 줍니다.

 

다시 '외모 < 위젯'으로 들어가서 텍스트 위젯의 역삼각형을 눌러서 펼쳐줍니다. 비주얼 탭에 단축코드(shortcode)를 삽입해 준 다음 저장하기 합니다.

 

이제 확인해 보기 위해서, 사이트 보기에서 상단 내비게이션 메뉴 중 하나의 리스트를 클릭해 보겠습니다. 우측 사이드바에 카테고리가 보이고, 그다음에 배너광고가 보이고, 마지막으로 콘택트 폼이 보입니다. 배너광고를 클릭하면 새 창이 열리면서 링크로 연결된 주소 페이지로 이동합니다. 콘택트 폼은 입력을 하고 보내게 하면 이메일로 저한테 오게 됩니다.

 

지금까지 워드프레스 Accelerate 테마를 가지고 웹 사이트에서 '사용자 정의 메뉴', 'Image Widget', '텍스트' 위젯들을 사용하여 오른쪽에 사이드바를 만들어 보았습니다.