케이테마 사용자정의 중에서 테마의 폰트에 대한 설정입니다. 케이테마의 기본 국·영문 폰트는 Noto sans kr과 – Roboto 폰트를 사용하고 있습니다. 보다 상세한 내용은 아래 목록을 참조해주시기 바랍니다.
  • 폰트 이름 : Noto sans kr / Roboto
  • 폰트 경로 : themes/ktheme_starter/assets//font/
  • 영문폰트 경로 : 구글폰트 사용자정의 > 테마스타일 > 폰트스타일
  • 폰트 스타일지정 : themes/ktheme_starter/style.css
  • 폰트 기본크기 : 16px / 1rem
  케이테마는 구글폰트를 사용할 수 있게 지원하고 있습니다. 구글폰트사이트에서 원하는 폰트를 지정하여 style과 css 를 지정해주시면 됩니다. 구글폰트에서 원하는 폰트를 찾으면 다음의 순서를 따라주시기 바랍니다.
  1. 구글폰트에서 원하는 폰트를 찾는다
  2. 폰트페이지에서 원하는 굵기를 클릭하여 포함시킨다
  3. 포함된 폰트스타일을 확인한다
  4. @import 방식으로 이용할 수 있게 선택한다.
  5. 항목을 복사하여 아래 이미지의 2번항목에 붙여넣는다
  6. 항목을 복사하여 아래 이미지의 3번항목에 붙여넣는다
  사용자정의 > 테마스타일 > 테마폰트 구글폰트는 구글사이트에서 제공하는 폰트를 style 형식으로 불러와 테마에서 사용할 수 있도록 해줍니다. 다양한 폰트를 홈페이지 제작에 적용해보시기 바랍니다. 구글폰트적용과 함께 폰트의 기본사이트와 각 제목의 크기를 정해줄 수 있습니다. 기본 크기와 사용되는 클래스는 다음의 페이지를 확인해보시기 바랍니다. 케이테마 문자스타일   폰트의 기본사이즈는 전체 홈페이지의 크기에 영향을 주게 됩니다. 케이테마는 폰트사이즈의 기본단위를 rem으로 사용하고 있습니다. body에서 지정한 폰트크기에 따라 상대적으로 폰트크기가 결정되기 때문에 폰트 기본사이즈는 중요합니다. 일반적으로 16px을 많이 이용하고 있으며 경우에 따라서 14px 혹은 18px사이즈를 사용하기도 합니다. 홈페이지의 성격에 맞게 적용해주시기 바랍니다. 제목보다 더 큰사이즈를 원하신다면 디스플래이 클래스를 이용해보시기 바랍니다.  .display-1 ~ .display-6 까지 종류를 제공하고 있습니다.  

사용자정의 중에서 로고와 아이콘에 대한 설명입니다.  
  • 홈페이지 로고
  • 홈페이지 아이콘 ( 파비콘 )
  홈페이지로고는 테마에서 사용되는 로고를 선택하며 아이콘은 일반적으로 파비콘이라 불리는 홈페이지의 아이콘입니다. 해당 아이콘은 브라우저의 제목부분 앞에 표시가 됩니다.  

홈페이지 로고

로고 이미지 설정은 다음과 같이 이루어 집니다.
  • 홈페이지 로고 : 홈페이지에 기본적으로 표시되는 로고입니다. 일반적으로 흰 배경에 색상이 있는 로고를 사용합니다.
  • 홈페이지 로고 흰색 : 배경색상이 검정이나 검정계열의 색상이면 흰색로고를 사용합니다. 혹은 패브릭테마처럼 색션별로 색상이 변경되는 경우도 있습니다. 이런경우 흰색/검정색 로고가 번갈아가며 표시가 됩니다.
  • 홈페이지 레티나 로고 : 레티나로고는 레티나 디스플래이를 사용하는 경우 표시되는 로고입니다. 해상도가 높은 경우 일반이미지는 깨져보이는 경우가 있기 때문에 레이타 로고가 표시됩니다. 일반적인 로고보다 *2배 혹은 *4배의 로고를 사용합니다.
로고이미지의 경우 흰색과 검정색을 동시에 만들어주시기 권장드립니다. 로고 사이즈의 경우 테마별로 다소 차이가 있으니 해당 테마의 로고사이즈를 참고하시기 바랍니다.  

사이트 아이콘

사이트 아이콘은 일반적으로 파비콘이라 불리는 이미지입니다. 이미지를 선택하면 홈페이지의 좌측상단에 브라우저 제목 앞에 아이콘이 표시되는 것을 확인할 수 있습니다. 이미지는 512*512이상의 사이즈를 권장하고 있으니 제작 시 참조하시면 되겠습니다.   로고나 파비콘 생성에 어려움이 있는 경우 https://www.canva.com/create/logos/ 사이트를 참조하시기 바랍니다. 감사합니다.

케이테마는 얼티메이트 멤버를 이용한 로그인 기능을 제공하고 있습니다. 하지만 로그인 페이지의 디자인은 사용자가 편집할 수 있도록 별도의 페이지를 마련했습니다. 로그인 페이지에서 왼쪽의 이미지 변경방법에 대해서 안내드리겠습니다.

 

얼티메이트 멤버 플러그인 사용페이지

얼티메이트 멤버는 다음과 같이 기능별 페이지를 고정하도록 설정을 제공합니다. 별도의 템플릿을 만들 수는 있지만 그 템플릿이 어떤 페이지에 표시되는가 하는 것은 사용자가 선택하도록 하는 것이죠. 위에 선택된 페이지는 다음의 페이지서 확인이 가능합니다.

 

페이지 수정

페이지화면에서 로그인 페이지를 찾아 마우스를 가져갑니다. 아래쪽에 “편집”메뉴를 확인하여 클릭합니다.

오른쪽상단의 텍스트 탭을 누르면 소스코드를 볼 수 있습니다. 파란색으로 선택된 부분이 이미지소스입니다. 해당 소스를 삭제하시고 왼쪽상단의 “미디어추가”버튼을 누릅니다.

신규로 추가할 이미지를 선택하고 “페이지에 삽입”버튼을 클릭합니다. 현재 이미지의 사이즈는 504*494픽셀로 설정되어 있습니다. 설정된 이미지 규격에 따라 작업하시면 화면이 더 보기가 좋습니다.

이후 업데이트를 하면 수정된 이미지가 표시될 것입니다.

 

 

케이테마에서는 엘리멘터를 통해 대부분의 페이지를 코딩없이 쉽게 제작할 수 있도록 지원하고 있습니다. 하지만 테마에서 제공하는 사용자 정의 기능을 통해서 테마의 설정을 변경할 수 있습니다.  본문에서는 내장된 사용자 정의 기능을 사용하여 워드프레스 테마를 사용자 정의하는 방법을 설명하겠습니다.

  1. 사용자정의 메뉴
  2. 사용자정의 기본제공 항목
  3. 사용자정의 테마제공 항목

 

사용자정의 메뉴

관리자 로그인 > 페이지 상단 “사용자정의” 클릭

관리자페이지 > 외모 > 사용자 정의하기

위 두가지 방법으로 사용자정의하기 페이지로 접근할 수 있습니다. 사용자 정의하기 페이지는 아래의 화면과 같이 표시됩니다.

 

 

사용자정의 기본제공 항목

사용자정의메뉴에서 기본적으로 제공되는 항목은 다음과 같습니다.

 

사용자정의 테마제공 항목

사용자정의 메뉴에서 테마별로 지원되는 메뉴도 모두 다릅니다. 케이테마에서 지원되는 메뉴의 상세내역은 “케이테마옵션” 문서를 확인해보시기 바랍니다. 케이테마에서 기본적으로 제공하는 옵션은 아래와 같습니다.

  • 테마일반 : 테마의 좌우 너비/구조/로고에 대한 옵션을 제공합니다.
  • 테마스타일 : 테마색상, 글자색상, 배경색상 등 색상과 스타일에 대한 부분을 제공합니다.
  • 헤더설정 : 테마에서 제공되는 그리고 향후 제공될 예정인 헤더스타일에 대해서 옵션을 제공합니다.
  • 메뉴설정 : 테마에서 사용되는 메뉴를 설정합니다. 메뉴에 관한 상세한 내용은 “메뉴설정“문서를 확인해보시기 바랍니다.
  • 빵조각메뉴설정 : 테마의 페이지/글/카테고리에서 표시되는 빵조각메뉴에 대해서 옵션을 제공합니다.
  • 슬라이더 설정 : 케이테마는 기본적으로 Depicter 슬라이더를 이용하고 있지만 다른 슬라이더의 쇼트코드를 이용할 수 있도록 옵션을 제공하고 있습니다.
  • 푸터설정 : 테마의 하단에 표시되는 푸터정보에 대한 옵션을 제공합니다.
  • 페이지제목영역 설정 : 페이지/포스트/글 등 상세페이지에서 표시되는 제목영역에 대한 옵션을 제공합니다.

 

결론

워드프레스는 내장된 사용자 정의 옵션 외에도, 많은 워드프레스 테마는 사용자 정의 CSS 코드를 사용하여 웹사이트의 외관과 스타일을 더욱 구체적으로 사용자 정의할 수 있도록 지원합니다. 그리고 케이테마는 이러한 옵션을 통해 창의적인 디자인을 제공하도록 지원하고 있습니다. 상세설명문서를 통해 자세한 내용을 확인해보시기 바랍니다.

감사합니다.

워드프레스 홈페이지 제작을 할때 다양한 플러그인을 사용합니다. 그중 이미지를 이용한 페이지나 갤러리를 만들고 싶을 때는 갤러리 플러그인을 사용하게 됩니다. 오늘은 케이테마에서 사용되는 Visual Portfolio 갤러리를 기준으로 갤러리의 활용에 대해서 설명드립니다.

워드프래스 갤러리 플러그인은 웹사이트에서 이미지 갤러리를 만들고 관리할 수 있게 해주는 확장 프로그램입니다. 이 플러그인은 사용자에게 이미지를 추가하고, 앨범을 만들고, 시각적으로 매력적인 방식으로 웹 사이트에 표시할 수 있는 기능을 제공합니다.

갤러리는 홈페이지의 다양한 영역에서 사용됩니다 주로 다음의 기능으로 활용됩니다.

주로 이미지를 통해 시작적으로 알리고자 하는 목적으로 사용이 됩니다. 아래 단계를 통해서 Visual Portfolio 의 활용에 대해서 알아보겠습니다.

  1. 플러그인 설치 – 플러그인 설치페이지 참조
  2. 카테고리 생성
  3. 아이템 생성
  4. 레이아웃 생성 및 설정
  5. 페이지에 표시

 

Visual Portfolio 플러그인

홈페이지 바로가기 

비쥬얼 포트폴리오는 워드프레스 많은 갤러리 중에서 가장 사랑받는 갤러리 중 하나입니다. 높은 사용자 평점과 함께 가장 모던하고 트랜디한 디자인으로 평가받고 있습니다. 다양한 기능과 무료에서 사용할 수 있는 확장성은 다른 플러그인보다 한단계 더 업그레이드 되었다고 평가할 수 있습니다.

 

카테고리 생성

관리자페이지 > Visual Portfolio > Categories

갤러리를 생성할 때 각 갤러리 이미지가 표시될 카테고리를 먼저 생성하는 것이 좋습니다. 이미지의 분류가 필요없는 경우는 카테고리 생성부분을 생략해도 좋습니다.

카테고리 페이지에서 분류이름을 입력하고 필요시 슬러그나 부모 카테고리도 입력해주시기 바랍니다. 이후 “새 카테고리 추가”버튼을 클릭하면 카테고리가 생성이 됩니다.

 

아이템 생성

관리자페이지 > Visual Portfolio > Portfolio Items > Add New

포트폴리오 아이템페이지에서 “Add New”버튼을 클릭합니다.

갤러리의 이미지를 추가하는 화면입니다. 제목, 내용, 요약글, 카테고리, 특성이미지, 태그 를 입력하고 공개버튼을 클릭해줍니다. 각 항목은 다음과 같이 표시됩니다.

  1. 제목은 해당 이미지의 제목을 입력하면 됩니다.
  2. 내용은 이미지를 클릭하여 페이지로 들어왔을 경우 표시되는 내용들을 입력합니다.
  3. 요약글은 이미지 목록에서 여러 이미지들이 표시 될 때 각 이미지에 대한 간단한 설명을 보여줄 때 사용됩니다.
  4. 이미지가 소속 될 분류를 선택하여 줍니다.
  5. 표시될 이미지를 선택합니다.
  6. 이미지와 연관된 태그를 입력합니다.
  7. 공개합니다.

 

레이아웃 생성 및 설정

관리자페이지 > Visual Portfolio > Saved Laytous

저장된 레이아웃 페이지로 이동하면 새로 추가할 수 있는 버튼이 있습니다. 버튼을 클릭하면 아래와같이 갤러리 레이아웃을 생성할 수 있는 폼이 제공됩니다.

 

레이아웃의 제목을 추가하고  Content Source에서 Post를 선택합니다. 이 부분은 갤러리 이미지를 어디로부터 가지오는가를 선택하는 부분인데 이전단계에서 입력한 이미지는 Post형태로 저장이 되기 때문에 그렇게 선택하면 됩니다. Posts Setting은 Portfolio 를 선택해줍니다. Post중에서도 다양한 종류가 있기 때문에 Portfolio 종류로 선택을 해줍니다.

이렇게 선택을 하면 왼쪽화면에 실시간으로 선택된 내용들이 반영이 됩니다. 세부적인 디자인도 설정할 수 있으니 위 페이지에서 하나씩 적용해보시기 바랍니다.

 

페이지에 표시

레이아웃을 생성하고나면 목록에 생성한 레이아웃이 표시됩니다. 이때 Shortcode가 함께 표시되는데 이 코드를 이용하여 페이지에 표시하게 됩니다. 페이지에 생성과 관리에 대해서는 아래의 링크를 참조하시기 바랍니다.

페이지 생성/링크/삭제/관리

 

원하는 페이지의 편집화면으로 이동하여 쇼트코드를 복사하여 붙여넣습니다. 업데이트를 해줍니다.

 

결론

갤러리 플러그인은 사용자가 웹 사이트에서 이미지 갤러리를 쉽게 만들고 관리할 수 있는 방법을 제공합니다. 그들은 웹사이트의 시각적 매력을 향상시키고, 이미지를 앨범과 범주로 구성하고, 웹사이트로 트래픽을 유도하는 등 다양한 이점을 제공합니다. 홈페이지 제작에 필수적인 갤러리를 이용해서 한층 더 고급스럽운 홈페이지를 제작해보시기 바랍니다.

감사합니다.