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

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

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

사이트 이미지
웹사이트

회원관리 사이트

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

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

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

사이트 이미지
쇼핑몰

해외 쇼핑몰

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

사이트 이미지
쇼핑몰

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

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

포트폴리오 보기

블로그 인기글

커스텀 디자인

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

Brizy Pro

페이지 빌더

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

Elementor Pro

페이지 빌더

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

Advanced Custom Field Pro

사용자 정의 필드

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

Pods

사용자 정의 콘텐츠 타입

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

블로그

13. 테마


워드프레스의 테마는 테마에 따라서 설정방법이 모두 다릅니다. 테마에 따라서 위젯도 다르고 메뉴 항목이 없을 수도 있습니다. 기본테마인 Twenty-Eleven은 메뉴의 “외모” 항목에서 코드 수정을 하지 않고 테마를 변경할 수 있지만 대부분의 테마들은 별도의 항목을 추가해서 다양한 설정을 할 수 있도록 하고 있으며 특히 유료 테마의 경우는 아주 복잡한 설정까지 포함돼 있습니다. 이것은 제1장에서 알아보았듯이 블로그는 블로그 글의 주제에 따라서 그에 맞는 테마를 사용해야 하고 사용자의 취향에 따라서 원하는 테마가 다양해서 그에 맞는 설정이 필요하기 때문입니다.


유료 테마든 무료테마든 사용자의 마음에 드는 테마를 찾기는 어렵고 찾았다 하더라도 설치하고 보면 설정화면에서 설정하거나 코드를 직접 수정해야 원하는 모양이 나오게 됩니다. 다음 장 부터는 기본 테마를 바탕으로 자식테마(Child Theme)를 만들어서 php 코드를 추가하거나 스타일시트를 수정하여 원하는 테마를 만들어가는 과정이 나옵니다. 전 단계로서 테마관리에 대해 관리자화면에서 할 수 있는 것은 알아두면 다음 장에서 테마 수정 시 도움이 됩니다. 또한 테마 수정을 하지 않더라도 관리자 화면에서 일부나마 수정하는 방법은 알아두는 것이 좋습니다.


워드프레스 버전이 3.4로 업데이트 되면서 기본테마가 Twenty-Twelve(2012)로 변경될 예정이었지만 현재 개발완료가 안돼서 2012년 11월 경에 3.5버전으로 업데이트되면서 추가될 예정이고 현재 베타버전을 사용할 수는 있습니다. 기본 테마는 다양한 기능이 기본적으로 갖춰져 있어서 이를 수정하여 사용하도록 권장하고 있습니다. 그래서 처음 모양은 단순하지만 원하는 대로 디자인을 변경할 수 있습니다. 테마의 디자인 변경은 파일을 직접 변경하면 나중에 업데이트 시 모두 원상 복구되므로 자식테마를 만들어 이 자식테마를 대상으로 변경하는 것이 좋습니다. 자식테마는 기본테마를 부모테마로 하여 만들어지며 수정하는 내용만 추가하면 자식테마의 내용이 우선 적용되므로 파일관리가 쉽습니다. 



13-1. 테마 관리


주 메뉴-->외모-->테마관리를 선택하면 테마를 관리 화면이 나타납니다. 워드프레스 3.4버전에서 두드러지게 바뀐 점은 테마를 실시간으로 미리 보기하면서 수정할 수 있다는 것입니다. 이 화면의 상단에는 현재 설치되어 활성화된 테마가 있고 테마 소개 내용 아래에 여러 가지 링크 메뉴가 있습니다. 이곳의 메뉴는 주 메뉴에 있는 것과 같고 “사용자 정의하기” 링크를 클릭하면 별도의 화면에서 테마의 실제 화면을 보면서 수정할 수 있는 화면이 나타납니다. 


그 아래의 “존재하는 테마들”에는 설치는 돼 있지만 활성화되지 않는 테마들이 존재합니다. 활성화가 안됐어도 각 테마의 하단에 있는 “실시간 미리보기” 링크를 클릭하면 활성화된 테마처럼 미리보기 하면서 테마를 수정할 수 있습니다. 이 링크를 클릭하여 수정해봅니다.


3-69 테마 관리


화면 좌측에서 제목의 오른쪽에 있는 세모 아이콘을 클릭하면 설정할 수 있는 화면이 나타납니다. 테마 이름이 나온 곳은 테마의 소개에 대한 내용입니다. “사이트 제목과 태그라인”은 주 메뉴의 일반 설정에서 나오는 사이트 제목과 태그라인을 수정할 수 있습니다. 색상과 레이아웃은 주 메뉴의 테마옵션 항목에서 설정하는 것과 같은 내용이 나옵니다. “헤더이미지”와 “배경 이미지”는 주 메뉴의 헤더와 배경에서 설정하는 내용의 일부가 있습니다. “내비게이션”은 블로그 화면에 메뉴가 여러 개 있는 경우 선택할 수 있습니다. “정적인 전면 페이지”는 주 메뉴의 읽기 설정에서 전면 페이지 설정에 관한 내용입니다.


이처럼 테마 관리에서 사용자 정의하기 화면은 테마 설정 부분을 한곳에 모아서 간단한 설정을 할 수 있도록 만든 화면이며 테마에 따라서 설정할 수 있는 항목이 다릅니다.

 

3-70 사용자 정의


13-2 테마 옵션


테마 옵션에서 색상표는 블로그 화면을 두가지 색상으로 변화시킬 수 있는 항목입니다. 기본으로 돼 있는 밝음은 배경이 밝고 글자가 어두운 색입니다. 어둠을 선택하면 배경은 어두운 색에 글자가 밝은 색으로 됩니다. 링크 색상은 링크가 있는 표시로 글자 색을 파란색으로 만듭니다. 웹브라우저는 전통적으로 링크 색상을 파란색으로 설정해 놓고 밑줄까지 만들어놓고 있습니다. 이곳에서 링크된 글자의 색을 변경할 수 있습니다. 밑줄은 웹페이지를 지저분하게 만드는 요인이므로 대부분의 경우 사용하지 않도록 디자인할 때 기본으로 없애고 있습니다. 


기본 레이아웃은 세가지가 있으며 사이드바를 좌측에 배치하거나 또는 우측에 배치할 수 있고 아에 없앨 수 있습니다. 선택의 기준은 콘텐츠가 항상 앞서는 콘텐츠 좌측배열이 가장 좋으며 사이드바에 중요한 내용이 있다거나 글자를 오른쪽에서 왼쪽으로 사용하는 아랍권에서는 콘텐츠 우측배열을 사용합니다. 사이드바 없음을 선택하면 콘텐츠 폭이 줄어들고 사이드바가 사라집니다. 기본 테마의 자식테마 중 하나인 “Twenty Eleven Layouts”를 설치하면 더 많은 레이아웃으로 변경할 수 있습니다.

 

3-71 테마 옵션


13-3 사용자 정의 헤더


기본테마의 헤더는 상단에 사이트 이름과 태그라인 그리고 검색창이 있습니다. 그 아래에 헤더이미지와 메뉴바가 있는 구조인데 기본테마에서 제공하는 사용자 정의 헤더를 이용하면 여러 가지 옵션을 적용할 수 있습니다. 헤더 이미지는 기본적으로 여러 개의 이미지가 설치돼 있고 페이지가 바뀔 때마다 다른 이미지가 나타나도록 하는 구조입니다. 또한 특성이미지 부분에서 알아보았듯이 특성이미지 기능을 사용하면 적용한 페이지의 헤더이미지도 같이 적용되어 블로그 글에서 대표이미지로 사용할 이미지가 동시에 헤더 이미지로도 사용되고 있습니다. 이것은 하나의 이미지를 업로드하면 정해진 사이즈로 자동으로 저장하기 때문에 가능합니다. 


헤더 이미지를 변경하려면 헤더메뉴에서 이미지 선택하기 항목의 파일선택을 클릭하면 내 컴퓨터의 브라우저 창이 열립니다. 원하는 이미지를 선택하고 업로드 버튼을 클릭하면 자르기 화면으로 넘어갑니다. 아래에 있는 미디어 라이브러리에서 이미지 선택하기 버튼을 클릭하면 이미 업로드 된 이미지를 사용할 수 있습니다. 여기서 선택하면 이미 잘라진 이미지가 사용되므로 자르는 과정이 생략됩니다.

 

3-72 사용자 정의 헤더


기본 사이즈가 1000X288픽셀이므로 자르기툴이 이 크기로 정해져 나타납니다. 자르기툴의 내부를 클릭드래그하여 원하는 곳에 배치하고 조절점을 클릭드래그하면 자르는 위치를 조절할 수 있습니다. 높이가 기본인 288픽셀이지만 조절점을 위로 늘려서 높여도 됩니다. 조절이 완료되면 하단에서 “자르고 공개하기” 버튼을 클릭합니다.

 

3-73 헤더이미지 자르기


사용자 정의 헤더이미지를 업로드하면 하나의 이미지가 있을 때는 랜덤이라는 옵션이 없지만 두개 이상의 이미지가 업로드 되면 기본 이미지처럼 랜덤으로 나타나게 하거나 고정된 하나의 이미지로 나타나게 할 수 있습니다. 하나의 이미지만 나타나게 하려면 이미지 좌측의 라디오버튼을 클릭하면 됩니다. 랜덤은 페이지가 바뀔때마다 임의의 이미지가 나오도록하는 기능입니다.

 

3-74 램덤이미지


헤더이미지 삭제버튼을 클릭하고 저장하면 설정 화면에서 헤더이미지가 제거되고 블로그 화면에서도 헤더이미지만 나타나지 않습니다. 헤더이미지를 없애면 블로그를 헤더 부분의 높이를 줄여서 사용할 수 있습니다.


헤더텍스트 항목의 “이미지와 함께 헤더텍스트 보이기”에 체크 해제하면 사이트 이름과 태그라인이 제거되면서 검색창이 메뉴바로 배치되고 블로그의 상단은 헤더이미지가 상단으로 나타나게 됩니다.


글자 색상 항목의 색상선택을 클릭하면 색상환이 나타나서 해더 텍스트의 색상을 변경할 수 있고 원본 해더 글자 복원 버튼을 클릭하면 변경한 색상을 초기화할 수 있습니다.

 

3-75 헤더텍스트 변경


13-4 사용자 정의 배경


배경 메뉴를 선택하면 배경을 사용자 정의할 수 있습니다. 처음 화면은 표시옵션이 나타나지 않으나 배경으로 사용할 이미지를 업로드하고 나면 나타납니다. 대부분의 경우에 배경이미지는 큰 사진 파일을 사용하지 않습니다. 작은 이미지를 사용하여 상하좌우로 반복하도록 하며 큰 사진 파일을 사용하면 페이지가 로딩될 때 시간이 걸리기 때문입니다. 어떤 사이트는 3Mb나 되는 사진파일을 사용한 곳을 볼 수 있었는데 방문자로 하여금 다시는 오지 말라는 잘못된 디자인입니다. 상하좌우로 반복해도 서로 이어지는 이미지를 패턴이라고 하며 포토샵으로 직접 만들거나 패턴사이트에서 만들어 사용할 수 있습니다. 아래의 패턴은 무료 패턴사이트에서 만든 것으로 제 블로그글(http://martian36.tistory.com/828)을 참고하면 됩니다. 아래 미리보기 화면은 패턴이 이어지지 않은 것으로 나오지만 실제 블로그 화면을 보면 정상으로 나타납니다. 


파일을 업로드한 후에 표시옵션의 각 라디오버튼을 클릭해보면 어떤 의미인지 알 수 있습니다. 반복 항목에서 반복 안 함에 클릭하고 위치항목에서 왼쪽을 선택하면 이미지가 왼쪽에 치우쳐서 배치됩니다. 위치항목은 배경이미지의 위치를 지정합니다. 반복 항목은 반복에 체크하면 상하좌우로 반복되고 수평반복은 좌우 방향으로만 반복되며 수직 반복은 상하방향으로 반복됩니다. 패턴을 사용하면 항상 “반복”에 체크해야합니다. 만일의 경우 큰 사진 파일을 사용하고자 하면 위치는 중앙, 반복은 “반복”에 체크하고 사용하면 됩니다. 큰 이미지를 사용할 경우에도 포토샵에서 웹페이지용으로 파일을 최적화하면 같은 크기의 파일이라도 최소의 용량으로 줄일 수 있습니다. 


첨부는 화면을 스크롤할 때 배경이미지가 고정되느냐 아니면 같이 스크롤되느냐의 차이입니다. 배경이미지를 사용하지 않을 경우는 기본색상인 흰색이 사용되므로 원하는 경우 배경색상의 색상선택을 클릭하여 다른 색으로 설정할 수 있습니다.

 

3-76 사용자 정의 배경이미지