워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

블로그 인기글

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

위젯은 여러가지 블로그프로그램에서 다른 의미의 용어로 사용되고 있습니다. 티스토리는 사이드바에 있는 카테고리나 최근글 같은 기본적으로 사용되는 요소를 추가하거나 제거할 수 있는 부분을 모듈이라하고 위젯뱅크에서 코드를 복사해서 임의로 추가할 수 있는 부분을 위젯이라고 합니다. 모듈이라고 하면 익스프레스 엔진이나 드루팔에서는 블로그 프로그램에 보조적으로 사용되는 작은 프로그램으로 티스토리의 모듈 개념과 다릅니다.

이러한 위젯이나 모듈을 하나의 용어로 통일을 하자면 플러그인이라고 하는 것이 좋습니다. 플러그인이란 기본적인 프로그램에 그 프로그램의 사용을 확대하기 위해서 사용하는 작은 프로그램으로 설치하고 배치만 하면 사용이 가능합니다. 워드프레스에도 별도의 플러그인 개념이 있는데 사실 위젯이나 플러그인이나 마찬가지 요소입니다. 그러니 큰 개념으로 플러그인이고 워드프레스 페이지에서 사이드바에서 기본적으로 사용하는 프로그램을 위젯이라고 합니다. 위젯을 배치할 수 있는 곳에 플러그인도 배치할 수 있습니다.

워드프레스에서 사이드바나 푸터에 기본적으로 추가하거나 제거할 수 있는 요소를 위젯이라고 합니다. 이러한 요소는 html 페이지에서 div 태그를 이용하여 코딩을 해서 추가하고 php 프로그램으로 함수에 의해서 데이터베이스에서 불러내는 작업을 해야하는 복잡한 일이지만 워드프레스에서는 관리자 페이지에서 박스형태로 존재하여 언제든지 원하는 위젯을 클릭드래그하여 사이드바 영역이나 푸터영역에 붙이면 바로 사용할 수 있게 됩니다. 예전에는 사이드바 영역에 주로 위치했지만 지금은 푸터, 헤더, 컨텐트 영역에도 배치할 수 있어서 사실상 위젯의 위치는 모든 영역에 정할 수 있게 됩니다. 이번 글에서는 이러한 여러가지 위젯을 설정하는 방법을 알아봅니다.

1. 위젯 설정하기


위젯의 종류는 다양하고 테마에 따라서도 다릅니다. 어떤 테마에 있는 위젯이 다른 테마에는 없을 수도 있습니다. 또한 플러그인을 설치하면 위젯으로 배치하여 사용할 수도 있습니다. 


워드프레스를 처음 설치하면 기본적으로 설치된 테마인 Twenty Eleven이 나타나고 사이드바에 기본적인 위젯이 나옵니다. 처음에 나오는 것이 Archives 위젯이고, 그 다음이 메타 위젯이 나옵니다. 이를 순서를 바꾸거나 이름을 변경하거나 다른 위젯을 추가하려면 상단 메뉴에서 테마디자인-위젯을 클릭하면 됩니다.


위젯 페이지는 4부분으로 나누어져 있습니다. 4의 위젯영역에는 처음에 기본적으로 아무런 위젯도 없습니다. 워드프레스는 위젯을 설정하지 않아도 기본적인 위젯이 나오도록 되어있고 하나라도 위젯을 배치하면 기본 위젯은 사라지며 모든 위젯을 제거하면 다시 기본위젯이 나타납니다.

화면 왼쪽에 "사용할 수 있는 위젯"과 그 아래에 "비활성화 위젯"이 있고 오른쪽에 위젯 영역(Widget Area)이 있습니다. 상단에는 화면옵션이 있는데 이것은 위젯을 클릭드래그해서 위젯영역에 배치할 수 없는 브라우저를 이용할 경우에 사용하고 나중에 설명드립니다. 3의 아이콘은 화면을 축소하는 아이콘으로 스크린이 좁은 경우 이것을 클릭하면사용할 수 있는 위젯 영역이 줄어들어서 "비활성화 위젯"영역이 위로 올라와서 클릭드래그하기 편해집니다. 비활성화 위젯에 대해서도 나중에 설명드립니다.

위젯의 타이틀 바에 마우스 오버(5)하면 이동할수 있도록 커서가 바뀝니다. 클릭드래그하여 4의 메인 사이드바에 놓으면 배치가 끝납니다. 위젯을 클릭드래그해서 배치하더라도 원래의 위젯이 남아 있는 것은 다른 영역에도 추가로 배치할 수 있도록 하기 위해서입니다. 이상태에서 자신의 블로그 타이틀(위 이미지에서는 좌측 상단의 WebDesign)을 우클릭해서 다른탭에서 보기를 클릭하면 새탭이 열리면서 블로그 첫 화면이 나오고 위젯이 설치된 것을 볼 수 있습니다.

위젯을 위젯영역에 올려놓기만 해도 위젯이 활성화되지만 타이틀 이름을 바꾸거나 추가로 설정하는 방법을 알기 위해서 7의 카테고리 위젯을 Main Sidebar에 올립니다.

 
위젯은 위젯영역에 올리면 바로 내용을 편집할 수 있도록 펼침상태가 됩니다. 이상태에서 블로그 화면을 보면 2처럼 나옵니다. 테마에 따라서 한글이 기본적으로 나오지 않는 경우도 있는데 이럴때는 영어로 타이틀 제목을 입력해줘야합니다. 글씨도 작게 나오는데 이것도 테마에 따라 다릅니다. 글씨가 작게 나오는 테마를 선택해서 사용하려면 글씨의 크기를 변경해줘야하고 스타일시트를 수정해줘야만 가능합니다. 이것도 나중에 설명드립니다. 

제목과 체크박스에 체크한 후에는 5의 저장하기 버튼을 클릭해야 변경이 되고 블로그 화면에서 보면 9처럼 나옵니다. 6의 닫기와 7의 아이콘은 같은 역할을 하며 위젯 편집영역이 안보이게 됩니다. 8의 삭제를 클릭하면 위젯영역에서 제거되는데 위젯에서 편집하거나 설정해 놓은 것이 다 사라지므로 이럴때 사용하는 것이 비활성화 위젯 영역으로 클릭드래그하는 것입니다.


위젯의 내용을 편집하고 사용하다가 제거하기위해 "사용할 수 있는 위젯영역"으로 클릭드래그하면 편집내용은 다 사라집니다. 편집 내용을 보존하려면 비활성화 위젯 영역으로 이동해줘야 합니다. 화면이 좁은 경우 2의 닫기 버튼을 클릭하면 줄어들면서 아래의 화면이 올라와서 이동하기 편합니다. 1을 클릭드래그하여 비활성화위젯영역에 올리면 끝납니다. 3과 같이 타이틀 이름이 그대로 있고 편집한 내용이 그대로 있습니다. 특히 4와 같은 텍스트 위젯은 자신의 블로그를 소개하거나 이미지를 넣을 수 있고 이미지를 삽입하고 이 이미지에 링크도 걸수 있는데 html 코드를 입력해야 가능합니다. 이렇게 편집해 놓은 것을 삭제하기 보다는 비활성화 위젯영역에 보관하면 언제든지 다시 사용할 수 있게 됩니다. 그러면 이 텍스트 위젯에 대해서 알아봅니다.

2. 텍스트 위젯 사용하기 



텍스트 위젯은 사이드바에 다양한 형태로 요소를 만들 수 있는 위젯입니다. 블로그의 소개글을 올린다든가 트위터 연결버튼을 만든다든가 여러가지 용도로 사용할 수 있습니다. 텍스트 위젯을 메인 사이드바에 올려놓으면 편집화면이 펼쳐집니다. 제목을 입력하고 글내용을 입력합니다. 3과 같이 단락을 만든 경우 4에서 "단락을 자동으로 추가합니다."에 체크해야 5처럼 단락이 만들어집니다. 저장하기버튼을 클릭하는 것도 잊지마세요. 

텍스트 위젯에는 이미지도 삽입할 수 있습니다. 이미지를 사용하기 위해서는 워드프레스에 이미지가 저장되어 있어야 합니다.

 
메뉴에서 미디어- 파일올리기를 선택합니다. Choose File을 클릭하면 브라우저 창이 나옵니다. 올리고자 하는 이미지를 내 컴퓨터에서 찾아서 선택하면 4에 파일이름이 표시됩니다. 업로드를 클릭하면 미디어 라이브러리에 저장됩니다. 이미지 옆에 마우스 오버하면 메뉴가 나타납니다. 편집을 클릭하고 편집창에서 8의 파일 URL을 블럭설정하여 Ctrl+C키를 눌러 주소를 복사합니다.


위젯화면으로 돌아와서 새로운 텍스트 위젯을 추가하고 이미지를 삽입하기 위하여 html 태그를 만듭니다. <img src="     " /> 라고 치고 따옴표 사이에 클릭한 후 Ctrl+V키를 눌러 붙여넣습니다. 저장하기 버튼을 클릭하고 블로그 화면에서 보면 3처럼 나옵니다. 이미지를 삽입하고나면 이미지 대체 텍스트를 추가하는 것이 좋습니다. />앞에 alt="My Photo" 라고  추가하면 됩니다. 그러면 <img src="http://localhost/wordpress/wp-content/uploads/2012/01/500full.jpg" alt="My Photo" /> 으로 됩니다. 이미지 대체 텍스트란 속도가 느린 컴퓨터에서 이미지가 나타나지 않게 인터넷을 사용할 수 있는데 이럴경우 이미지 대신에 글자가 나오도록 하는 기능입니다.


이번에는 이미지를 클릭하면 트위터로 이동하는 링크를 걸어봅니다. 링크는 <a> 태그를 사용합니다. <a 다음에 href=" 를 치고 자신의 트위터 주소를 입력합니다. " 로 닫고 title=" " 을 입력하고 따옴표 사이에 이미지에 마우스 오버시 나타날 타이틀을 입력합니다. 그런다음 이미지 태그의 마지막에 </a>를 입력하면 됩니다. 저장하기를 클릭하고 블로그에서 이미지에 마우스를 올리면 타이틀이 나오고 클릭하면 내 트위터로 이동합니다. 하지만 내 블로그의 화면은 사라지죠. 웹브라우저에서 이전페이지 아이콘을 클릭해야만 다시돌아오게 되는데 내 블로그는 그대로 두고 다른 탭에서 트위터 화면이 나오게 하려면 target="_blank" 를 추가합니다. 그러면 전체적으로 <a href="http://www.twitter.com/martian36" title="Venusian Twitter" target="_blank"><img src="http://localhost/wordpress/wp-content/uploads/2012/01/500full.jpg" alt="My Photo" /></a>과 같이 됩니다.

3. 접근모드 활성화



위젯을 위젯영역에 클릭드래그할 수 없는 웹브라우저가 있을 수 있는데 이럴때는 접근모드 활성화를 이용합니다. 화면 상단의노란색 바에서 화면옵션을 클릭하면 2처럼 접근모드 활성화 링크가 있습니다. 이를 클릭하면 각 위젯의 타이틀 바에 추가 또는 편집 링크가 나옵니다. 이를 클릭하면 내용을 편집하거나 위젯영역의 어떤 위치로 배치할지 설정할 수 있는 화면이 나옵니다.

 
위젯영역에서 편집할 수 있는 화면과 같이 나오고 하단에 어떤 영역으로 보낼 것인지 선택할 수 있습니다. 

4. 위젯 글자 스타일링하기



글자의 수정은 스타일시트에서 수정을 해줘야합니다. 스타일시트의 어떤 부분에서 적용되는지 알아보려면 글자를 클릭드래그해서 블럭설정한 다음에 우클릭하면 메뉴가 나옵니다. 저는 구글 크롬을 사용하는데 메뉴에서 요소검사를 선택하면 하단에 html 코드와 스타일시트창이 나옵니다. .widget-title이라는 클래스 선택자(제 글중에 CSS부분을 보면 자세한 설명이 있습니다.)에 대해서 폰트에 관한 설정이 나옵니다.색상은 #666으로 회색이고 폰트 사이즈는 10픽셀입니다. 이것을 수정하려면 5에 스타일시트 이름과 줄번호가 나오는데 이것을 찾아서 텍스트 에디터로 불러들여 폰트의 크기를 수정해줘야합니다.


현재 Twenty Eleven이라는 테마를 사용하고 있으므로  WAMP서버에서 1과 같은 경로를 찾아서 폴더로 들어가면 style.css 파일이 있습니다. 이것을 텍스트 에디터에 엽니다.


Ctrl+G키를 누르고 줄번호 1729를 입력하고 엔터키를 치면 해당 줄로 이동합니다. 폰트 사이즈를 18픽셀로, 폰트웨이트를 bold로 수정하고 Ctrl+S키를 눌러 저장합니다.


블로그 화면에서 Ctrl+R키를 누르면 새로고침되면서 글자의 크기와 스타일이 바뀌게 됩니다. 클래스 선택자이므로 .widget-title을 사용하는 클래스는 모두 스타일이 바뀌므로 아래에 있는 Category도 글자의 크기가 바뀌게 됩니다.