WP홈페이지 제작 - 사이드바 정리와 이미지베너 추가

스타일을 수정해서 사이드바의 텍스트를 좀 정리합니다.

구글 크롬의 요소 검사를 통해 클래스명을 살펴보니 <h1> 요소에 "widget-title"로 정의되어 있습니다.

 

관리자 메뉴의 "외모 - WP Editor"를 통해서 custom.css 를 열고, 위젯 제목 텍스트 크기를 줄이기 위해 아래의 스타일을 추가합니다.

.widget-title { font-size: 1.6em; }

 

리스트의 점을 없애고 좌측 마진을 좀 줄이기 위해 아래의 스타일을 추가합니다.

.widget ul li { list-style: none; }

.widget ul { margin-left: 10px; }

 

<수정 전>

 

<수정 후>

 

추가로 클래스 widget-title을 아래와 같이 수정하여 위젯 제목과 리스트 사이에 가로선을 넣어서 구분을 짓도록 하겠습니다.

.widget-title { font-size: 1.6em; border-bottom: 1px solid #eee; }

 

이제 위젯 구성을 좀 바꾸보겠습니다.

검색창, 최근 글, 카테고리만 남기고 나머지는 모두 삭제하고 최신 글의 제목을 "최신 상품"으로, 카테고리 제목을 "제품 카테고리"로 수정한 후 [저장하기]를 클릭하여 적용합니다.

 

 

사이드바 가장 아래에 베너이미지를 추가하도록 하겠습니다.

플러그인 검색을 통해 "image widget"을 검색하고, 설치 후 활성화 합니다.

 

Image Widget

https://wordpress.org/plugins/image-widget/

 

 

관리자 메뉴의 "외모 - 위젯"을 선택하고 <Image Widget>을 사이드바 영역으로 넣습니다(드래그 & 드롭).

 

 

 

[Select an Image] 버튼을 클릭하고 이미지 라이브러리(로컬 파일 업로드 가능)의 이미지를 불러옵니다.

 

Title에 적당한 이름을 넣은 후 Link 에 연결될 인터넷 주소를 넣고 아래쪽 풀다운 메뉴에서 Open New Window 를 선택합니다.

또 Size는 Custom 으로 설정하고 Width, Height 모두 0으로 입력합니다. Align은 center로 설정합니다.

(가로, 세로 사이즈를 넣지 않아야 브라우저의 가로 사이즈가 줄었을 때 자동으로 사이즈가 줄어듭니다)

 

 

 

[저장하기]를 클릭하고 홈페이지의 변경된 모습을 확인합니다.

 

 

브라우저 크기가 줄어도 이미지의 크기가 자동으로 조절됩니다(Responsive).

<1024*768>

 

<800*600>