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

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

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

사이트 이미지
웹사이트

회원관리 사이트

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

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

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

사이트 이미지
쇼핑몰

해외 쇼핑몰

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

사이트 이미지
쇼핑몰

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

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

포트폴리오 보기

블로그 인기글

커스텀 디자인

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

Brizy Pro

페이지 빌더

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

Elementor Pro

페이지 빌더

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

Advanced Custom Field Pro

사용자 정의 필드

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

Pods

사용자 정의 콘텐츠 타입

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

블로그

본 가이드는 Material Kit 스킨 구매 후 사용방법에 대한 설명입니다. 스킨을 설치하는 방법은 여러 블로그에 나와있으니 생략합니다. 스킨은 제작 완료됐고 최종점검 중입니다. 이틀간 점검 진행할 것입니다. 카드 PG 신청은 승인이 났으니 다음 주면 카드 결제가 가능할 것 같습니다.


데모 사이트: https://explorer36.tistory.com


구매 사이트: https://martian.kr/shop/material-kit-2/




스킨 설치 후 적용을 클릭합니다. 



처음 설치 후에는 홈화면 꾸미기에 "사용안함"이 활성화 돼있습니다. 우선 커버기능을 사용하지 않는 상태에서 테스트를 합니다. 글 목록 형태에서 "목록+내용"을 선택합니다.


스킨옵션 화면


스킨옵션 화면은 아래와 같습니다.



상단부터 차례대로 설명합니다.


1. 로고



로고를 사용할 경우 이미지 높이가 40픽셀로 돼있으나 검정색 글자와 흰색 글자의 로고로 된 이미지를 아래와 같이 만들어야 합니다.



투명배경이므로 흰색글자는 보이지 않습니다. 폭 250픽셀, 높이 80픽셀입니다. 샘플은 스킨 폴더의 images 폴더에 들어있습니다(logo.png). 포토샵으로 만들고 업로드하면 됩니다. 두 가지 로고를 사용하는 이유는 처음에는 투명 배경이므로 흰색 글자의 로고가 나오고 스크롤하면 배경이 흰색으로 되므로 검정색 글자로 되야하기 때문입니다. 로고를 사용하지 않을 경우 블로그 타이틀이 나타납니다. 


2. 페이지 처리 방식



페이지처리(페이지네이션, 페이징)는 글 목록 하단에서 번호를 클릭하면 다음 페이지로 이동하는 것과 스크롤하면 자동으로 다음 페이지가 로딩되는 무한 스크롤 방식이 있습니다. 무한 스크롤 사용 시 아이콘, 텍스트 등을 선택해서 표시하거나 나타나지 않게 할 수 있습니다.


커버기능을 사용하지 않을 때는 홈화면과 카테고리 목록 화면에서 적용되고 커버기능을 사용할 때는 카테고리 목록에서만 적용됩니다.



3. 컬러타입



컬러타입은 5가지로 만들었지만 다른 컬러타입을 원할 경우 자신만의 코드를 작성해 각 코드 앞에 .thema_custom을 붙여주면 됩니다. 아래는 .thema_orange가 붙은 것으로 오렌지 컬러타입의 예입니다.


/********thema_orange*******/

.thema_orange .btn.btn-primary, .thema_orange .pagination>.page-item.active>a, .thema_orange .pagination>.page-item.active>a:focus, .thema_orange .pagination>.page-item.active>a:hover, .thema_orange .pagination>.page-item.active>span, .thema_orange .pagination>.page-item.active>span:focus, .thema_orange .pagination>.page-item.active>span:hover {

color: #fff;

background-color: #ff9800;

border-color: #ff9800;

box-shadow: 0 2px 2px 0 rgba(255,152,0,.14), 0 3px 1px -2px rgba(255,152,0,.2), 0 1px 5px 0 rgba(255,152,0,.12);

}

.thema_orange .dropdown-menu .dropdown-item:focus, .thema_orange .dropdown-menu .dropdown-item:hover, .thema_orange .dropdown-menu a:active, .thema_orange .dropdown-menu a:focus, .thema_orange .dropdown-menu a:hover {

box-shadow: 0 2px 2px 0 rgba(255,152,0,.14), 0 3px 1px -2px rgba(255,152,0,.2), 0 1px 5px 0 rgba(255,152,0,.12);

background-color: #FF9800 !important;

color: #FFF;

}

.thema_orange .thumb a {

color: #6d5a10 !important;

}

.thema_orange .carousel-item:after {

opacity: 0.15;

background-color: #FF9800 !important;

background: #FF9800 !important;

}

.thema_orange .purple-filter:after {

background: rgba(255,152,0,.20);

background: linear-gradient(45deg,rgba(255,152,0,.20) 0,rgba(255,205,0,.25) 100%);

background: -moz-linear-gradient(135deg,rgba(255,152,0,.20) 0,rgba(255,205,0,.25) 100%);

background: -webkit-linear-gradient(135deg,rgba(255,152,0,.20) 0,rgba(255,205,0,.25) 100%);

}

.thema_orange .purple-filter:before {

background: rgba(0,0,0,.4);

}

.thema_orange .cover-special-contents ul li .title, .thema_orange .cover-wide-panel h2 {

color: #FF9800 !important;

}

.thema_orange .sb-scrollbar {

background: #FF9800 !important;

}


위 코드는 스킨의 images 폴더에서 main-style.css 파일을 열면 상단에 있습니다. 맨 앞에만 붙이지 말고 중간에도 있으니 잘 확인해야 합니다. 자신만의 코드를 사용할 수 있도록 기본 스타일시트와 분리했으며 HTML 편집화면의 CSS 탭에서 추가하면 됩니다.




4. 커버기능 사용여부(커버기능 사용하지 않을 때)



스킨옵션 상단에서 사용안함으로 선택했을 때는 위 옵션에서 커버사용 안함에 반드시 선택돼야 합니다. 


5. 슬라이드 옵션(커버기능 사용할 때)



커버 기능중에 슬라이드가 있는데 이것은 아래와 같이 반드시 상단에 배치해야 합니다. 슬라이드의 형태는 우측에서 좌측으로 이미지가 이동되는 "슬라이드", 서서히 나타나는 "페이드", 이미지가 커지는 "줌인"이 있습니다. 시간은 슬라이드 애니메이션이 되고나서 다음 애니메이션이 시작될 때까지 대기 시간입니다. 15000은 15초입니다. 자동슬라이드에서 정지를 선택되면 처음엔 정지되고 좌우측의 화살표 내비게이션 아이콘을 클릭하면 슬라이드가 진행됩니다. 또한 슬라이드에 마우스가 있으면 중지됩니다.



6. 리스트 타입(커버기능 사용하지 않을 때)



이 옵션은 커버 기능을 사용하지 않을 때의 홈 화면에서만 적용됩니다. 카테고리 글목록 페이지에서는 기본적으로 썸네일형입니다. 글 목록의 리스트 타입에서 리스트형은 상하로  배치되며 썸네일형은 좌우로 배치됩니다.



리스트형



썸네일형


7. 컬럼 수(커버기능을 사용할 경우)



커버기능을 사용할 경우 5개의 커버 아이템에 대해서 컬럼 수를 2개에서 4개까지 설정할 수 있도록 했습니다. 나머지 커버 아이템은 특성상 넓은 폭을 사용하므로 컬럼 수를 조정하면 안됩니다. 블로그 글을 출력할 경우 글의 내용이 많으면 모양이 좋지 않으므로 기본으로 사용하고 글 내용을 직접 간단하게 입력할 경우에만 컬럼 수를 선택해 사용하는 것이 좋습니다.


컬럼 수 수정방법은 다음과 같습니다.



예를들어 썸네일 리스트의 기본 컬럼 수는 4개인데 3개로 설정했을 경우 사이트에서 보면 아래처럼 하나의 컬럼은 아래로 밀려나게 됩니다. 그러면 당황하지 마시고 위 커버 아이템 수정 화면으로 가서 컬럼 하나를 삭제하면 됩니다.





반대로 컬럼 수를 늘리면 맨 우측에 빈공간이 발생하는데 이 때는 글 수를 늘리면 됩니다. 예를들어 커버 리스트는 컬럼 수가 3개가 기본입니다. 4개로 변경하면 4번째 들어갈 컬럼을 만들기 위해 마지막 컬럼을 비워두므로 빈공간이 발생하는 것입니다. 여기에 하나의 글을 추가하면 됩니다.


벽돌 리스트는 이러한 제한이 없이 자동으로 조절됩니다.


8. 커버 배경 이미지 패럴랙스 사용 여부(커버기능 사용할 경우)



와이드 패널과 메인 리스트 커버 아이템, 하단 푸터 이미지 등의 배경 이미지가 페이지 스크롤 시 고정되므로 패럴랙스 효과가 나타납니다.


9. 헤더 폰트 사이즈



각 페이지 상단에 큰 배경 이미지의 헤더 폰트 크기를 변경합니다.


10. 헤더 메뉴 영역 넓이 사이즈 입력(기본 1200px, 최소 1200px)



상단 메뉴바의 폭을 조절합니다. 메뉴가 많을 경우 두줄로 되는 것을 방지할 수 있습니다.


11. 블로그 글 영역 넓이 사이즈 입력(기본 800px, 최소 500px)



블로그 글 영역의 폭을 조절할 수 있습니다.


12. 방명록 제목, 방명록 설명



방명록의 제목과 설명을 변경할 수 있습니다.


13. 푸터 텍스트, 푸터 컬럼, 푸터메뉴 표시여부



푸터 텍스트는 메뉴 바로 위에 나타납니다. 필요할 경우 푸터 메뉴 바로 위에 3단의 컬럼이 나타나도록 설정했습니다. 기본 레이아웃은 1:1:1이므로 3개의 같은 크기의 컬럼이 나타납니다.  이 컬럼에 로고나 회사정보, 메뉴를 배치할 수 있으며 이곳에 메뉴를 배치할 경우 하단의 푸터 메뉴를 표시하지 않게 설정합니다.




위와같이 회사정보나 메뉴 위치를 다양하게 변경할 수 있습니다. 하단 메뉴를 비활성화 하고 컬럼에 배치하려면 관리화면 사이드바에서 HTML 배너 출력 위젯을 사용합니다.



로고는 이미지 파일을 업로드 한 링크를 복사해서 img 태그를 사용해 입력합니다. 메뉴는 태그 입력기를 사용하세요.


<img src="https://tistory1.daumcdn.net/tistory/1888731/skin/images/logo-dark.png">


14. 각 페이지 배경 이미지



각 페이지의 배경 이미지를 변경할 수 있습니다. 기본적으로 제 테스트 블로그에서 가져오게 설정돼있으니 자신만의 이미지를 업로드 하거나 스킨의 images 폴더에서 header-slide-1~~6의 이미지를 사용하세요. 이미지는 아래의 사이트에서 무료로 받을 수 있습니다.


https://unsplash.com/t/business-work


15. 푸터 하단 텍스트, 하단 카피라이트, SNS URL 



회사정보를 이 위치에 넣을 수도 있습니다. 하단 카피라이트는 회사 이름만 입력해도 Copyright 아이콘과 년도가 나오도록 했습니다. 년도는 해가 바뀌면 자동으로 변경됩니다. SNS URL은 카카오톡 친구추가 페이지를 만들었다면 이곳에 링크를 추가할 수 있습니다.


다음 글에서는 메뉴 설정, 원페이지 링크 만드는 방법 등 기타 기능을 설명드립니다.