케이테마는 기본 디자인이 깔끔하고 사용하기 편리하지만, 사용자마다 원하는 디자인은 다를 수 있습니다. 오늘은 개발자 도구와 추가 CSS 기능을 활용해 폰트 크기, 색상, 버튼 스타일, 페이지 박스 위치 등 디자인 요소를 변경하는 방법을 소개합니다.

 

1. 개발자 도구로 CSS 클래스 또는 ID 확인하기

개발자 도구(DevTools)는 Google Chrome, Firefox, Edge에서 제공하는 강력한 도구입니다. 원하는 디자인 요소의 CSS 코드를 찾을 수 있습니다.

사용 방법:

  1. 브라우저에서 웹사이트를 열기
    테마를 적용한 웹사이트를 엽니다. 워드프레스를 사용하는 홈페이지는 테마에 관계없이 모두 동일하게 적용할 수 있습니다. 

  2. 개발자 도구 실행하기

  3. 요소 선택 도구 사용
    개발자 도구 창이 열리면 좌측 상단의 요소 선택 도구(마우스 아이콘) 를 클릭합니다.
    원하는 변경 대상 위로 마우스를 올려 클릭하면 해당 요소의 HTML 코드와 CSS가 표시됩니다.

    1. 요소의 코드를 확인할 수 있습니다. 코드의 class값이 page-content-title 이라는 클래스와 h2, mb-5 클래스가 같이 있는 것을 확인할 수 있습니다. 
    2. 해당 요소에 적용된 스타일을 볼 수 있습니다. 
    3. 스타일이 적용된 css파일을 볼 수 있습니다. 캐쉬플러그인을 사용하는 경우 정확한 경로가 표시되지 않을 수 있습니다. 워드프래스 캐쉬플러그인 추천 
  4. CSS 클래스/ID 확인
    예를 들어, 버튼의 스타일을 변경하고 싶다면 버튼의 classid 값을 확인하세요. 이번 예시에서는 “page-content-title” 가 클래스 이름이 되겠습니다. 

 

2. 추가 CSS 메뉴에서 스타일 지정하기

케이테마는 워드프레스의 추가 CSS(Custom CSS) 기능을 지원합니다. 확인한 클래스나 ID를 사용해 원하는 디자인을 적용할 수 있습니다.

적용 방법:

  1. 워드프레스 관리자 화면에서 “사용자 정의하기”로 이동
    워드프레스 대시보드 → 외모 → 사용자 정의하기 클릭.

  2. 추가 CSS 메뉴 열기
    사용자 정의 화면에서 “추가 CSS” 메뉴를 선택합니다.

  3. CSS 코드 작성
    확인한 클래스나 ID를 기반으로 스타일을 추가합니다.
    위 1단계에서 확인한 page-content-title 를 이용하여 스타일을 변경합니다. 

  4. 저장하여 스타일을 적용합니다.
    .page-content-title{
    color:red;
    text-decoration:underline;
    }

 

3. 예제: 자주 사용하는 스타일 변경

1) 폰트 크기 변경

사이트의 본문 폰트 크기를 변경하려면 아래와 같이 CSS를 추가하세요:

body {
font-size: 18px; /* 폰트 크기 */
}

2) 버튼 스타일 변경

모든 버튼의 스타일을 동일하게 변경하려면:

button {
background-color: #007BFF; /* 파란색 배경 */
color: white; /* 흰색 글자 */
padding: 10px 20px; /* 버튼 내부 여백 */
border: none; /* 테두리 제거 */
border-radius: 5px; /* 둥근 모서리 */
cursor: pointer; /* 커서 스타일 변경 */
}

3) 페이지 박스 위치 조정

특정 페이지 박스 위치를 이동하려면:

.page-box {
margin-top: 20px; /* 위쪽 간격 */
margin-left: auto; /* 왼쪽 정렬 */
margin-right: auto; /* 오른쪽 정렬 */
}

위 코드는 예시코드이므로 정확한 코드는 운영하고 있는 홈페이지의 요소를 분석하여 입력하시기 바랍니다.

 

4. 유용한 팁

  • CSS 우선순위: 특정 요소에 스타일을 강제로 적용하려면 !important를 사용할 수 있습니다.

    .my-button {
    color: red !important;
    }

  • 장 전에 백업: CSS 변경 전, 기존 스타일을 기록해두면 필요 시 복구할 수 있습니다.

  • 브라우저 캐시 초기화: 변경 후 적용이 바로 보이지 않으면 브라우저 캐시를 초기화하거나 새로고침(Ctrl + F5)하세요.

 

개발자 도구와 추가 CSS 기능을 활용하면 케이테마를 보다 유연하게 커스터마이징할 수 있습니다. 위 가이드를 참고해 여러분만의 독창적인 디자인을 만들어 보세요! 😊

혹시 궁금한 점이 있다면 댓글로 남겨주세요.

케이테마는 구글폰트의 api이용하여 구글의 모든 폰트를 지원하고 있습니다. 하지만 구글폰트에 등록되지 못한 한글폰트를 사용하기 쉽지가 않았습니다. 이번 업데이트를 통해 외부 폰트를 사용하기 쉽게 업데이트 하였으니 아래 단계를 따라 확인해보시기 바랍니다. 

한글폰트를 지원하는 다양한 사이트가 있지만 눈누폰트를 기준으로 적용하는 방법을 설명드리겠습니다. 

눈누폰트

눈누폰트는 다양한 국내폰트의 정보를 제공하고 있습니다. 폰트의 미리보기는 물론이고 CDN형태로 제공하고 있어 파일을 서버에 올리지 않고 코드 만으로 적용이 가능합니다. 아래의 링크로 접속하여 원하는 폰트를 확인하시기 바랍니다. 

https://noonnu.cc/

 

눈누폰트 접속 및 폰트 확인

 

미리보기 및 폰트선택

폰트를 확인하고 미리보기를 할 수 있습니다. 회원가입을 하면 폰트 즐겨찾기 등 더 다양한 기능을 제공하고 있습니다. 원하는 폰트를 확인하고 폰트 이름을 눌러 상세페이지로 이동하시기 바랍니다. 

 

폰트테스트 및 코드복사

폰트 미리보기를 통해 제공되는 폰트의 스타일을 확인할 수 있습니다. 굵기와 내가 원하는 텍스트를 입력했을 때 미리보기 까지 가능합니다. 굵기, 글자 미리보기, 사이즈 까지 가능하니 미리보기를 통해 충분히 테스트 해보시기 바랍니다. 

적용하기 원하는 폰트가 있다면 “웹폰트로 사용” 섹션의 복사 버튼을 클릭합니다.  해당 코드는 css코드로 테마에 적용하게 될 내용입니다. 일반적으로 아래와 같은 형태로 제공됩니다. 

@font-face {
font-family: 'SBAggroB';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
font-weight: normal;
font-style: normal;
}

위 내용을 복사하고 아래 단계에 따라 적용을 합니다. 

 

테마사이트 적용

위 복사된 코드를 테마사이트에 적용해야 합니다. 관리자로 로그인을 하여 아래와 같은 단계로 적용하시기 바랍니다. 

 

테마의 사용자정의 ( Customize ) 

관리자로 로그인하여 페이지로 이동하면 상단에 “사용자정의”이라는 메뉴를 확인할 수 있습니다. 위 메뉴를 클릭하고 다음으로 이동하시기 바랍니다. 

 

추가 CSS 적용

사용자정의 메뉴 중 추가 CSS 로 이동하여 위에서 복사한 코드를 붙여넣기 합니다. 추가 이후 아래의 코드로 함께 붙여넣기 해줍니다. 
주의할 점은 font-family 속성이 잘 맞아야 합니다. Roboto 다음에 오는 Noto Sans KR을 삭제하고 위 눈누폰트에서 복사한 코드 중 font-family 에 해당 하는 영문자를 넣습니다. 본 매뉴얼에서는 “SBAggroB”로 되어 있기 때문에 해당 글자가 들어가 있습니다. 

.depicter-revert h1, .depicter-revert h2, .depicter-revert h3, .depicter-revert h4, .depicter-revert p, .depicter-revert figure, .depicter-revert blockquote, .depicter-revert dl, .depicter-revert dd,.depicter-revert .depicter-element,
body {
font-family: Roboto, 'Noto Sans KR', Dotum, '돋움', Helvetica, sans-serif !important;
}

수정 후 

.depicter-revert h1, .depicter-revert h2, .depicter-revert h3, .depicter-revert h4, .depicter-revert p, .depicter-revert figure, .depicter-revert blockquote, .depicter-revert dl, .depicter-revert dd,.depicter-revert .depicter-element,
body {
font-family: Roboto, 'SBAggroB', Dotum, '돋움', Helvetica, sans-serif !important;
}

이후 수정된 코드를 복사하여 붙여넣습니다. 

 

폰트적용 확인

CSS를 적용한 최종 모습은 위와같습니다. 눈누폰트에서 복사한 코드를 넣고 제공되는 css를 입력하면 우측에 미리보기를 통해 적용된 디자인을 확인할 수 있습니다. 

저장하고 화면으로 이동하시면 모든 설정이 완료됩니다. 

 

플러그인이란?

*케이테마 홈페이지 제작에 필요한 플러그인은 데모파일 임포트 실행시 자동으로 설치가 진행됩니다.

워드프레스 플러그인은 워드프레스 사이트의 기능을 확장하고 개선하는 데 사용되는 소프트웨어입니다. 일반적으로 사용자는 워드프레스 대시보드에서 플러그인을 설치하고 활성화하여 사용할 수 있습니다. 이러한 플러그인은 다양한 기능을 제공합니다. 예를 들어 SEO 최적화, 보안 강화, 캐시 관리, 사이트 분석,회원관리, 게시판 기능등이 모두 플러그인이 제공하는 기능입니다.

많은 플러그인은 무료로 제공되지만, 유료 플러그인도 많이 있습니다. 유료 플러그인은 더 많은 기능과 향상된 지원을 제공하니 무료로 이용해보시고 필요한 플러그인에 대해서는 유료로 전환을 검토해보셔도 좋습니다.

  1. 플러그인 쉬운설치
  2. 플러그인 zip파일을 통한 설치
  3. 플러그인 FTP를 이용한 설치
  4. 플러그인 삭제
  5. 플러그인 업데이트

 

플러그인은 워드프레스 관리자페이지에서 쉽게 설치할 수 있습니다. 하지만 워드프래스 관리자 페이지에 등록되지 않은 플러그인의 경우 수동으로 설치해야 합니다. 수동 설치는 관리자페이지에서 zip파일을 통한 업로드와  FTP를 통해 파일을 직접 업로드 하는 방법이 있습니다. 아래 자세한 설명을 통해 각 방법에 대해서 확인하도록 하겠습니다.

 

플러그인 쉬운설치

플러그인의 설치는 관리자페이지에서 쉽게 진행할 수 있습니다.

관리자페이지 > 플러그인 > 새로추가

메뉴로 이동하면 사용자들이 가장 많이 이용하는 플러그인이 표시됩니다. 원하는 플러그인의 이름을 2의 검색폼에 입력하면 검색을 할 수도 있습니다. 목록에서 원하는 플러그인을 “지금설치” 버튼을 통해서 설치를 진행합니다. 설치가 완료되면 “활성화”버튼이 생깁니다. 이 버튼을 눌러 플러그인을 활성화 해보도록 하겠습니다.

관리자페이지 > 플러그인 > 설치한 플러그인

설치한 플러그인 페이지에서 활성화 된 플러그인을 확인할 수 있습니다.

 

플러그인 zip파일을 통한 설치

플러그인이 워드프레스 공식사이트에 등록되지 않은 경우 직접 다운로드 받아 설치가 가능합니다. zip파일 형식으로 된 파일을 등록해야 합니다.

관리자페이지 > 플러그인 > 새로추가 > 플러그인 업로드 > 파일선택 > 플러그인 zip파일 선택 > 열기

관리자페이지에서 플러그인 페이지의 새로추가로 이동하면 플러그인 파일을 직업 업로드 할 수 있는 방법을 제공해줍니다. 상단의 “새로추가” 버튼을 클릭하면 파일을 선택할 수 있게 됩니다. 플러그인 압축파일을 선택하여 열어줍니다.  선택 후 “지금설치”를 클릭하여 설치를 진행합니다.

플러그인 설치가 완료되면 완료화면을 확인할 수 있습니다. “플러그인 활성화”버튼을 누르면 플러그인을 활성화 할 수 있습니다. 자동설치와 마찬가지로 플러그인의 “설치한 플러그인”페이지에서 설치된 플러그인을 확인할 수 있습니다.

 

플러그인 FTP를 이용한 설치

워드프래스 FTP를 통해서 테마나 플러그인을 설치할 수 있습니다. 일반적으로 다음의 경우에 FTP를 통해서 플러그인을 설치하게 됩니다.

  1. 유료플러그인을 구매하는 경우
  2. 무료플러그인이지만 워드프래스 쉬운설치를 지원하지 않는 경우
  3. 보안상의 이유로 서버권한이 제한된 경우
  4. 기타

일반적으로 유료플러그인를 구매하여 사용하는 경우 FTP를 이용해서 설치를 하게 됩니다. 설치는 아래의 단계로 진행이 되게 됩니다.

  1. 플러그인파일 다운로드
  2. FTP를 통해 파일 업로드 – FTP 이용안내
  3. 워드프래스 관리자페이지에서 확인 및 활성화

워드프래스가 설치된 호스팅 서버에 접속하면 다음과 같은 화면이 표시됩니다. FTP에 접속하기 위해서는 일반적으로 호스트/사용자명/비밀번호 정보를 알고 있어야 합니다. 관련하여 FTP 이용안내  글을 참조해주시기 바랍니다.

1번이 본인의 컴퓨터고 2번이 호스팅 서버입니다. 압축 푼 폴더가 있으면 모두 서버쪽으로 이동시켜 줍니다. 선택하여 드래그 드랍을 해주시면 모두 오른쪽으로 이동됩니다. 이때 유의할 점은 2번으로 마우스를 끌어갈때 폴더위에 놓으면 안되고 공백이 있는곳에 놓아야 합니다. 이렇게 하시면 파일이 전송되고 완료후에는 2번에 목록에 표시됩니다.

관리자페이지 > 플러그인 > 설치한 플러그인

설치한 플러그인 페이지에서 활성화 된 플러그인을 확인할 수 있습니다.

 

플러그인 삭제

플러그인의 삭제는 간단하게 할 수 있습니다.

플러그인 > 설치한 플러그인

설치한 플러그인 목록으로 이동하여 플러그인 삭제를 진행합니다. 활성화 상태에 있는 플러그인은 삭제를 할 수 없습니다. 먼저 비활성화를 해주시기 바랍니다. 플러그인을 비활성화 하면 삭제버튼이 생성되는 것을 볼 수 있습니다.  “삭제”버튼을 클릭하면 경고창이 뜨고 삭제를 할 수 있습니다.

여러 플러그인을 삭제하기 원하는 경우 일괄작업으로 진행할 수 있습니다. 삭제를 원하는 플러그인을 체크합니다. 상단의 “일괄작업”을 선택하면 “삭제”가 있습니다. 선택 후 “적용”버튼을 눌러주시기 바랍니다. 활성화 되어있는 플러그인은 비활성화 작업이 먼저 필요합니다.

 

플러그인 업데이트

플러그인 업데이트가 필요한 경우 플러그인 목록에서 진행할 수 있습니다.

“지금 업데이트” 버튼을 누르면 서버와의 통신을 통해서 자동으로 업데이트가 진행이 됩니다. 업데이트가 완료되면 “업데이트 됨!” 이라고 메시지가 표시되게 됩니다.

 

워드프레스 전체 업데이트

워드프레스의 업데이트 요청내역을 전체 확인할 수 있습니다. 관리자페이지에서 알림판의 업데이트 페이지가 바로 그곳입니다. 이곳 페이지에서는 다음에 대한 업데이트를 확인할 수 있습니다.

  1. 워드프레스 업데이트
  2. 플러그인 업데이트
  3. 테마 업데이트
  4. 번역 업데이트

각 업데이트 섹션에서 필요한 업데이트를 진행해주시면 되겠습니다.

업데이트를 모두 진행하면 진행완료 화면이 표시됩니다.

 

이제 모든 업데이트가 완료되었습니다. 업데이트 완료 후 홈페이지를 방문하여 문제가 없는지 확인하시기 바랍니다.

 

결론

플러그인의 설치/삭제/업데이트에 대해서 알아보았습니다. 플러그인의 활용은 워드프레스 사용에 필수적이지만 속도을 저하시키는 요인이기도 합니다. 설치 시 이를 고려하여 설치하시고 사용하지 않는 플러그인은 비활성화 혹은 삭제처리해주시기 바랍니다.

*플러그인 설치/업데이트 전 꼭 백업을 진행하시기 바랍니다.

감사합니다.

엘리멘터(Elementor)는 워드프레스의 강력한 페이지 빌더 플러그인으로, 사용자가 드래그 앤 드롭 방식으로 쉽고 직관적으로 웹사이트를 디자인할 수 있도록 도와줍니다. 아래는 엘리멘터의 주요 옵션과 기능에 대한 구체적인 설명입니다

 

엘리멘터 편집화면 구조

엘리멘터 편집 화면은 크게 네 부분으로 나뉩니다.

  1. 상단 메뉴 : 페이지 전반에 대한 설정 및 관리를 담당합니다.
  2. 위젯 패널 : 엘리멘터는 다양한 레이아웃을 제공합니다. 
  3. 네비게이션 : 페이지의 구조를 계층적으로 보여주는 트리 구조 탐색 도구입니다.
  4. 컨텐츠영역 : 디자인이 적용되는 실시간 미리 보기 영역입니다.

 

1. 상단메뉴

 

1-1. 테마빌더

헤더 및 푸터, 아카이브, 404, 우커머스 페이지 같은 전체 웹사이트를 구성하는 반복되는 부분을 디자인하여 전체제어가 가능하여 사이트의 모든 부분을 맞춤설정할 수 있습니다.

 

 1-2. 히스토리

엘리멘터에서 작업 전 상태로 실행 취소 할 수 있습니다.

 

1-3. 사용자 기본 설정

 

1-4. 키보드 단축키

엘리멘터에서 자주 사용되는 단축키가 안내되어 있습니다.

 

1-5. 워드프레스로 나가기

워드프레스 글쓰기 편집기 창으로 나가게 됩니다.

 

1-6. 엘리멘터페이지표시

작업중인 페이지로 이동 및 새 페이지 추가가 가능합니다.

 

1-7. 게시물설정

페이지 제목, 상태(임시글, 검토대기중, 비공개, 발행함), CSS 등을 관리.  또한 엘리멘터로 모바일사이트를 만들 때 모바일, 테블릿, PC로 선택하여 작업할 수 있습니다.

 

1-8. 상단메뉴 – 우측

체크리스트, 알림메세지, 찾기, 도움말, 미리보기가 제공되어 엘리멘터로 페이지를 만드는 상황에서 도움을 받을 수 있습니다.

 

 

2. 위젯패널

제목(Heading): 텍스트를 삽입하고 스타일링할 수 있습니다.

텍스트 에디터(Text Editor): 서식 있는 텍스트를 추가할 때 사용합니다.

이미지(Image): 이미지를 삽입하고 크기, 정렬, 링크를 설정합니다.

버튼(Button): 클릭 가능한 버튼을 생성하며, 링크, 색상, 텍스트를 설정할 수 있습니다.

비디오(Video): YouTube, Vimeo 등에서 동영상을 삽입하고 설정합니다.

 

3. 네비게이션

 

제공 기능: 드래그 앤 드롭 방식으로 위젯을 캔버스에 추가.  선택한 요소의 콘텐츠(Content), 디자인(Style), 고급 설정(Advanced) 을 변경.  위젯 검색 기능을 사용해 원하는 위젯을 빠르게 찾기.

페이지 구조 보기: 모든 섹션, 컬럼, 위젯을 계층적으로 표시.

빠른 탐색: 특정 요소를 클릭해 직접 수정 가능.

드래그 앤 드롭: 요소를 이동하거나 순서를 재배치.

이름 지정: 섹션과 위젯에 이름을 붙여 작업을 체계적으로 관리.

요소 숨기기 및 표시: 특정 요소를 숨기거나 다시 활성화.

삭제 및 복사: 탐색기에서 바로 요소를 삭제하거나 복사 가능.

응답성 확인: 데스크톱, 태블릿, 모바일 화면에서 요소를 비활성화하거나 수정.

 

4. 컨텐츠영역

제공 기능: 섹션, 컬럼, 위젯을 추가하거나 삭제.  드래그 앤 드롭으로 레이아웃과 컨테이너 위치를 조정.  실시간으로 디자인을 확인하며 작업.

확장 필드

KBoard 게시판의 입력 필드 설정 화면에 대한 상세 설명입니다. 각 입력 필드는 게시판 글쓰기, 보기 화면에서 어떤 데이터를 입력받거나 표시할지를 구성하는 데 사용됩니다. 아래는 주요 필드들의 기능과 설정 방법입니다.

 

텍스트/숨김: 홈페이지 URL

필드 레이블

설명: 사용자가 보게 될 필드의 이름(레이블)입니다.

예시: “홈페이지 URL”은 사용자에게 이 필드가 URL 입력용임을 나타냅니다.

사용 예: “문의 대상 URL” 또는 “관련 웹사이트”와 같이 목적에 따라 레이블을 변경 가능.

 

메타키

설명: 데이터베이스에 저장되는 이 필드의 고유 키입니다.

주의사항: 저장 후에는 변경할 수 없으니 신중하게 설정해야 합니다.

예시: home_url은 이 필드의 데이터가 “home_url”이라는 이름으로 저장됨을 의미합니다.

 

표시할 권한

제한 없음: 모든 사용자가 필드를 볼 수 있습니다.

특정 권한: 로그인 사용자 또는 특정 역할(Role)을 가진 사용자만 필드를 볼 수 있음.

 

기본값

설명: 필드가 비어 있을 때 기본적으로 표시되는 값입니다.

사용 사례: 홈페이지 URL 필드에 “https://example.com”을 기본값으로 설정하여 사용자에게 참고 예시를 제공할 수 있습니다.

 

Placeholder

설명: 사용자가 데이터를 입력하기 전, 필드 안에 나타나는 설명 텍스트입니다.

사용 사례: “홈페이지 URL을 입력하세요”와 같은 메시지로 입력 방법을 안내.

Placeholder는 실제 입력값이 아니며 입력 시 사라집니다.

 

설명

설명: 필드 하단에 추가적으로 표시되는 설명 텍스트입니다.

사용 사례: “예: https://example.com”과 같이 입력 규칙이나 예시를 제공.

 

CSS 클래스

설명: 이 필드에 적용할 CSS 클래스를 지정합니다.

사용 사례: 특정 스타일을 적용하거나 레이아웃을 커스터마이즈할 때 사용.

예시: custom-url-field와 같은 CSS 클래스를 입력하면 해당 필드에만 스타일 적용 가능.

 

스킨 출력 예제

설명: PHP 코드를 사용하여 이 필드를 게시글 본문이나 특정 위치에 출력할 수 있습니다.

코드 예시:

php
<?php echo $content->option->home_url; ?>

home_url 메타키를 기반으로 입력값을 출력.

사용 사례: 사용자 입력 데이터를 게시판 리스트, 본문 등에서 커스터마이즈하여 표시.

 

필수

설명: 체크하면 이 필드는 필수 입력값이 됩니다.

사용 사례: 필드 입력이 필수적일 경우 체크하여 사용자 입력을 강제할 수 있음.

 

게시글 본문에 표시

설명: 필드 입력값이 게시글 본문에 출력될지 여부를 설정합니다.

활성화: 사용자 입력값이 본문에 표시됨.

비활성화: 입력값이 본문에 표시되지 않음(관리자만 열람 가능).

 

숨김(Hidden)

설명: 이 필드를 사용자 인터페이스에서 숨깁니다.

사용 사례: 관리 용도로만 사용하거나 자동 입력이 필요한 경우 필드를 숨길 수 있음.

 

셀렉트 박스

드 레이블

사용자 표시: 사용자가 이 필드를 이해하기 쉽게 이름을 설정합니다.

예시: “문의 유형” 또는 “선택 옵션” 등.

 

메타키

설명: 데이터베이스에 저장되는 이 필드의 고유 키입니다.

주의사항: 저장 후에는 변경할 수 없으므로 신중하게 설정해야 합니다.

예시: meta_key라는 이름으로 데이터가 저장됩니다.

 

라벨

설명: 셀렉트 박스에서 선택 가능한 옵션 항목입니다.

추가/제거: +, - 버튼을 사용해 옵션을 추가하거나 삭제할 수 있습니다.

예: “문의 유형” 필드의 경우, 옵션 항목으로 “구매 문의”, “기술 지원”, “기타” 등을 추가.

 

기본값 설정:

특정 라벨을 기본 선택값으로 지정하려면 해당 라벨을 선택 후 “기본값” 옵션을 체크합니다.

초기화를 통해 기본값 설정을 리셋할 수도 있습니다.

 

표시할 권한

설명: 이 필드를 볼 수 있는 사용자의 권한을 설정합니다.

설정 옵션:제한 없음: 모든 사용자가 필드를 볼 수 있음.

특정 권한: 관리자, 로그인 사용자 등 특정 권한을 가진 사용자만 필드를 볼 수 있음.

 

설명

설명: 필드 하단에 추가로 표시되는 안내 문구입니다.

사용 사례: “문의 유형을 선택해주세요”와 같은 추가 정보를 제공하여 사용자의 이해를 돕습니다.

 

CSS 클래스

설명: 이 필드에 적용할 CSS 클래스를 입력합니다.

특정 스타일을 적용하거나 레이아웃을 조정하고 싶을 때 사용.

예: custom-select-box라는 CSS 클래스를 입력하여 해당 필드만 스타일링.

 

필수

설명: 필드를 필수 입력값으로 설정할지 여부를 체크합니다.

특정 옵션을 반드시 선택해야 하는 경우 체크합니다.

필드가 필수 입력값으로 설정되면 사용자가 값을 입력하지 않고 제출할 수 없습니다.

 

게시글 본문에 표시

설명: 필드에 입력된 데이터가 게시글 본문에 표시될지 설정합니다.

활성화: 선택한 옵션이 게시글 본문에 표시됨.

비활성화: 데이터는 저장되지만 본문에는 표시되지 않음.

 

사용 예시

문의 유형 셀렉트 박스 생성:

필드 레이블: “문의 유형”

메타키: inquiry_type

라벨: “구매 문의”, “기술 지원”, “기타”

기본값: “구매 문의” (선택)

 

CSS 클래스:

custom-select-box로 설정하여 셀렉트 박스의 디자인을 커스터마이즈.

 

필수 설정:

사용자가 옵션을 선택하지 않으면 에러 메시지가 표시되도록 필수 입력으로 설정.

 

라디오 버튼

필드 레이블

사용자 표시: 사용자가 이 필드를 보고 어떤 선택을 해야 하는지 알 수 있도록 설정.

예시: “문의 유형”, “서비스 종류”, “결제 옵션” 등.

 

메타키

설명: 라디오 버튼 필드에서 선택된 값이 저장될 데이터베이스 키입니다.

주의사항:한 번 설정한 메타키는 저장 후 변경할 수 없습니다.  다른 입력 필드와 중복되지 않도록 고유한 이름을 사용하세요.

예시: meta_key라는 이름으로 데이터가 저장됩니다.

 

라벨

옵션 추가/삭제:

  • + 버튼: 새 라벨(옵션)을 추가.
  • - 버튼: 기존 라벨(옵션)을 삭제.

예시:

  • 문의 유형: “구매 문의”, “기술 지원”, “기타”
  • 서비스 종류: “월간 구독”, “연간 구독”, “무료 체험”

 

기본값

설명: 라벨 중 기본 선택값을 설정합니다.

기능:기본값을 설정하지 않으면 사용자가 필드를 작성할 때 아무 옵션도 선택되지 않은 상태로 표시됩니다.  특정 옵션을 기본으로 설정하려면 해당 라벨을 선택한 후 “기본값”을 체크.

초기화: 기본값을 설정한 후 다시 초기화할 수 있는 기능.

 

표시할 권한

설명: 이 라디오 버튼 필드를 볼 수 있는 사용자 권한을 설정합니다.

설정 옵션:제한 없음: 모든 사용자가 볼 수 있음.

특정 권한: 관리자, 로그인 사용자 등 특정 권한을 가진 사용자만 필드를 볼 수 있음.

 

설명

설명: 필드 하단에 추가적으로 표시되는 안내 문구입니다.

사용 사례:선택지에 대한 간단한 설명을 제공.

예: “문의 유형을 선택하세요”, “원하시는 옵션을 하나만 선택해주세요.”

 

CSS 클래스

이 필드에 적용할 CSS 클래스를 입력합니다.

사용 사례:특정 디자인을 적용하거나 레이아웃을 조정할 때 사용.

예: custom-radio-buttons를 입력하여 라디오 버튼 필드만 스타일링.

 

필수

설명: 라디오 버튼 필드를 필수 입력값으로 설정합니다.

사용 사례: 필드가 필수로 선택되어야 하는 경우 체크.  사용자가 옵션을 선택하지 않으면 제출 시 에러 메시지가 표시됩니다.

 

게시글 본문에 표시

설명: 선택한 라디오 버튼 값이 게시글 본문에 표시될지 여부를 설정합니다.

사용 사례: 활성화 – 사용자 선택값이 게시글 본문에 표시됨. / 비활성화 – 선택값은 데이터로 저장되지만 게시글 본문에 표시되지 않음.

사용 예시

문의 유형 라디오 버튼:

  • 필드 레이블: “문의 유형”
  • 메타키: inquiry_type
  • 라벨: “구매 문의”, “기술 지원”, “기타”
  • 기본값: “구매 문의”

 

CSS 스타일링:

CSS 클래스: custom-radio-style을 추가하여 라디오 버튼의 배치를 수평으로 변경하거나 색상을 조정 가능

 

체크박스

 

필드 레이블

설명: 체크박스 필드의 이름입니다.

사용자 표시: 사용자가 선택해야 할 항목의 주제를 이해할 수 있도록 설정.

예시: “이용약관 동의”, “관심 있는 상품”, “문의 항목 선택” 등.

 

메타키

설명: 체크박스에서 선택한 데이터가 저장될 데이터베이스의 고유 키입니다.

주의사항: 저장 후 변경할 수 없으니 신중히 설정해야 합니다.  다른 필드와 중복되지 않는 고유한 키를 사용해야 합니다.

예시: meta_key라는 이름으로 데이터가 저장됩니다.

 

라벨

설명: 사용자가 선택할 수 있는 옵션 항목을 정의합니다.

옵션 추가/삭제+ 버튼: 새로운 옵션 항목을 추가. / - 버튼: 기존 옵션 항목을 삭제.

예시: 관심 있는 상품: “전자제품”, “가구”, “패션”

동의 체크: “이용약관 동의”, “개인정보 제공 동의”

 

기본값

설명: 특정 옵션을 기본으로 선택된 상태로 설정합니다.

기능: 기본값이 설정되면 필드가 로드될 때 해당 옵션이 기본적으로 체크됩니다.

사용 사례: (예) “이용약관 동의”는 기본적으로 체크된 상태로 제공.

 

표시할 권한

설명: 이 체크박스 필드를 볼 수 있는 사용자의 권한을 설정합니다.

설정 옵션: 제한 없음: 모든 사용자가 필드를 볼 수 있음. / 특정 권한: 관리자, 로그인 사용자 등 특정 권한을 가진 사용자만 필드를 볼 수 있음.

 

설명

설명: 체크박스 하단에 추가적으로 표시되는 설명 텍스트입니다.

사용 사례: 선택 항목에 대한 안내문을 제공.

(예) “모든 약관에 동의해야 다음 단계로 진행할 수 있습니다.”

 

CSS 클래스

설명: 이 필드에 적용할 CSS 클래스를 지정합니다.

사용 사례:체크박스 필드의 디자인을 변경하거나 레이아웃을 조정할 때 사용.

: custom-checkbox-style 클래스를 추가하여 스타일링 가능.

 

필수

설명: 체크박스 필드를 필수 입력값으로 설정합니다.

기능: 사용자가 체크하지 않으면 제출 시 오류 메시지가 표시됩니다.

사용 사례: “이용약관 동의” 또는 “개인정보 제공 동의”를 필수로 설정.

 

게시글 본문에 표시

설명: 선택된 체크박스 값이 게시글 본문에 표시될지 여부를 설정합니다.

사용 사례: 활성화: 사용자가 선택한 항목이 게시글 본문에 표시됨. / 비활성화: 데이터는 저장되지만 게시글 본문에는 표시되지 않음.

사용 예시

문의 항목 선택 체크박스:

  • 필드 레이블: “문의 항목”
  • 메타키: inquiry_options
  • 라벨: “구매 문의”, “기술 지원”, “기타”
  • 기본값: “기술 지원”

 

CSS 스타일링:

CSS 클래스: custom-checkbox-layout으로 설정하여 필드 배치와 디자인 커스터마이즈 가능.

 

필수 설정:”이용약관 동의”를 필수로 설정하여 체크하지 않으면 진행이 불가하도록 구성.

 

텍스트 에어리어

필드 레이블

사용자 표시: 사용자가 이 필드를 보고 어떤 데이터를 입력해야 하는지 이해할 수 있도록 설정.

예시: “추가 문의사항” , “의견 작성”, “상세 설명”

 

메타키

설명: 이 필드에 입력된 데이터가 저장될 데이터베이스 키입니다.

주의사항: 메타키는 한 번 설정한 후 저장되면 변경할 수 없습니다. 다른 필드와 중복되지 않도록 고유한 값을 사용해야 합니다.

예시: meta_key라는 이름으로 데이터가 저장됩니다.

 

표시할 권한

설명: 이 필드를 볼 수 있는 사용자 권한을 설정합니다.

설정 옵션:제한 없음 – 모든 사용자가 필드를 볼 수 있음.

특정 권한: 관리자, 로그인 사용자, 특정 역할(Role)만 볼 수 있도록 설정.

 

기본값

설명: 사용자가 필드에 데이터를 입력하기 전에 기본적으로 표시되는 값입니다.

사용 사례:특정 텍스트를 기본으로 입력하여 사용자가 참고할 수 있도록 설정.

(예) “추가 요청 사항을 작성해주세요.”

 

Placeholder

설명: 입력 필드 내부에 표시되는 안내 텍스트로, 사용자가 데이터를 입력하면 사라집니다.

사용 사례:사용자 입력을 유도하는 설명 텍스트를 제공.

예: “여기에 내용을 입력하세요”, “문의 사항을 적어주세요.”

 

설명

설명: 필드 하단에 추가적으로 표시되는 안내 텍스트입니다.

사용 사례:필드 사용 방법이나 추가 정보를 제공.

예: “100자 이상 작성해주세요.”, “입력된 정보는 내부 검토용으로 사용됩니다.”

 

CSS 클래스

설명: 이 필드에 적용할 CSS 클래스를 지정합니다.

사용 사례:텍스트 에어리어 필드의 크기, 색상 또는 레이아웃을 사용자 정의.

예시: custom-textarea 클래스를 사용하여 필드의 높이나 너비를 조정.

 

필수

설명: 사용자가 필드를 반드시 입력해야 하는 경우 이 옵션을 체크합니다.

기능:필수로 설정된 경우, 입력값이 없으면 제출 시 오류 메시지가 표시됩니다.

 

게시글 본문에 표시

설명: 이 필드에 입력된 데이터가 게시글 본문에 표시될지 여부를 설정합니다.

사용 사례: 활성화 –  입력된 텍스트가 게시글 본문에 출력됩니다. / 비활성화 – 입력 데이터는 저장되지만 본문에는 표시되지 않음.

사용 예시

사용자 문의사항 필드:

  • 필드 레이블: “문의 내용”
  • 메타키: user_inquiry
  • Placeholder: “문의하실 내용을 상세히 입력해주세요.”

설명: “최대 500자까지 입력 가능합니다.”

 

CSS 스타일링:

CSS 클래스: textarea-large를 추가하여 텍스트 에어리어의 높이를 키우고 가독성을 향상.

 

필수 설정:

필드가 중요한 정보를 포함해야 하는 경우 필수 옵션을 활성화.

 

파일

KBoard 입력 필드 세부 설정 중 “파일” 필드에 대한 설정입니다. 파일 필드는 게시글 작성 시 첨부파일을 업로드할 수 있도록 구성하는 필드입니다. 아래는 각 항목에 대한 상세한 설명입니다.

 

필드 레이블

사용자 표시: 사용자가 파일 업로드를 이해할 수 있도록 설정.

예시: “첨부파일”, “문서 업로드”, “이미지 첨부”

 

메타키

설명: 업로드된 파일의 정보를 저장하는 데이터베이스 키입니다.

주의사항: 한 번 설정 후에는 변경할 수 없으므로 고유한 이름으로 설정해야 합니다.  다른 필드와 중복되지 않도록 주의.

예시: uploaded_file 또는 attachment_key라는 메타키로 파일 데이터가 저장됩니다.

 

표시할 권한

설명: 이 필드를 볼 수 있는 사용자 권한을 설정합니다.

설정 옵션: 제한 없음 – 모든 사용자가 필드를 볼 수 있음. / 특정 권한 – 관리자, 로그인 사용자, 특정 역할(Role)만 볼 수 있도록 설정.

 

설명

설명: 파일 필드 하단에 표시되는 안내 문구입니다.

사용 사례: 업로드 가능한 파일 형식이나 용량 제한을 안내.

(예) “최대 5MB 크기의 PDF, JPG 또는 PNG 파일을 업로드하세요.”

 

CSS 클래스

설명: 이 필드에 적용할 CSS 클래스를 지정합니다.

사용 사례:

파일 업로드 필드의 디자인 또는 위치를 조정할 때 사용.

예시: custom-file-upload 클래스를 추가하여 특정 스타일 적용.

 

필수

설명: 이 필드를 필수 입력값으로 설정할지 여부를 선택합니다.

기능: 필수로 설정하면, 사용자가 파일을 업로드하지 않을 경우 오류 메시지가 표시됩니다.

사용 사례: 필수 서류(이력서, 증빙 자료 등)가 반드시 필요할 때 설정.

 

게시글 본문에 표시

설명: 업로드된 파일의 정보가 게시글 본문에 표시될지 여부를 설정합니다.

사용 사례: 활성화: 첨부된 파일의 다운로드 링크가 게시글 본문에 표시됨. / 비활성화: 파일은 데이터베이스에 저장되지만 본문에는 표시되지 않음.

사용 예시

문서 첨부 필드 설정:

  • 필드 레이블: “첨부파일”
  • 메타키: uploaded_document
  • 설명: “최대 10MB 크기의 PDF 파일만 업로드 가능합니다.”
  • 필수: 체크하여 필수로 파일을 업로드하도록 설정.

이미지 업로드 필드:

  • 필드 레이블: “이미지 첨부”
  • 메타키: image_attachment
  • CSS 클래스: image-upload-style을 추가하여 업로드 필드의 디자인 커스터마이즈.

 

권한 설정:

표시할 권한: 관리자 또는 로그인 사용자만 업로드 필드를 볼 수 있도록 제한.

 

추가 고려 사항

업로드 가능한 파일 형식 및 크기 제한: 설정 페이지에서 업로드 가능한 파일 형식(PDF, JPG 등)과 최대 파일 크기를 제한해야 함.

서버 설정 확인: 서버 환경에서 허용하는 최대 파일 크기와 업로드 제한 설정을 확인해야 합니다.

 

추가 팁

파일 필드 사용자 정의: CSS 클래스를 사용하여 파일 업로드 버튼의 모양을 커스터마이즈.

파일 관리: 업로드된 파일은 관리자 페이지에서 다운로드 또는 삭제가 가능해야 하며, 사용자에게 적절한 권한을 부여해야 합니다.

 

워드프레스 내장 에디터

필드 레이블

예시:”상세 설명” / “문의 내용 작성” / “추가 정보 입력”

 

메타키

설명: 데이터베이스에서 이 필드에 입력된 데이터를 저장하는 고유 키.

주의사항: 메타키는 저장 후 변경할 수 없으므로 고유한 이름으로 설정해야 합니다.  다른 필드와 중복되지 않도록 주의.

예시: content_editor 또는 description_field와 같은 이름을 사용.

 

표시할 권한

설명: 이 필드를 볼 수 있는 사용자 권한을 설정합니다.

설정 옵션: 제한 없음 –  모든 사용자가 이 필드를 볼 수 있음. / 특정 권한 – 관리자, 로그인 사용자 등 특정 역할(Role)만 필드를 볼 수 있음.

사용 사례:비회원이 필드를 보지 못하도록 제한하거나, 관리자만 접근하도록 설정.

 

기본값

설명: 필드에 기본적으로 입력된 텍스트.

사용 사례: 입력 전 참고 내용을 기본값으로 제공. (예) “여기에 문의 내용을 작성해주세요.”

 

Placeholder

설명: 입력 필드 안에 힌트로 표시되는 안내 텍스트. 사용자가 입력을 시작하면 사라짐.

사용 사례: 사용자가 입력해야 할 내용을 유도. (예) “문의하실 내용을 적어주세요.”

 

설명

설명: 필드 하단에 표시되는 안내 문구입니다.

사용 사례:사용자가 내용을 작성할 때 참고할 수 있는 정보를 제공.

(예) “최대 500자까지 입력 가능합니다.”, “내용을 자세히 적어주세요.”

 

CSS 클래스

설명: 이 필드에 적용할 CSS 클래스를 지정합니다.

사용 사례: 텍스트 에디터 필드의 디자인을 커스터마이즈하거나 레이아웃을 조정할 때 사용.

예시: custom-editor-style 클래스를 추가하여 특정 스타일을 적용.

 

필수

설명: 이 필드를 필수 입력값으로 설정할지 여부를 선택합니다.

기능: 필수로 설정된 경우, 사용자가 입력하지 않으면 제출 시 오류 메시지가 표시됩니다.

사용 사례: 사용자가 반드시 입력해야 하는 중요한 내용을 받을 때 설정.

 

게시글 본문에 표시

설명: 필드에 입력된 데이터가 게시글 본문에 표시될지 설정합니다.

사용 사례: 활성화 – 입력된 내용이 게시글 본문에 표시됨. / 비활성화 – 데이터는 저장되지만 게시글 본문에는 표시되지 않음.

 

워드프레스 내장 에디터의 주요 특징

텍스트 포맷팅: 글씨 크기, 굵기, 기울임 등 다양한 텍스트 편집 가능.

멀티미디어 삽입: 이미지, 비디오, 링크 등을 본문에 삽입 가능.

HTML 지원: 필요에 따라 HTML 태그를 삽입하여 커스터마이즈 가능.

 

사용 예시

문의 내용 작성 필드:

  • 필드 레이블: “문의 내용”
  • 메타키: inquiry_content
  • Placeholder: “문의하실 내용을 여기에 적어주세요.”
  • 설명: “500자 이상 입력해주세요.”
  • CSS 클래스: editor-style-large

게시글 본문 작성 필드:

  • 필드 레이블: “게시글 본문”
  • 메타키: post_content
  • 필수: 체크하여 게시글 본문 입력이 필수임을 설정.

 

추가 팁

사용자 경험 개선: 에디터 기능을 충분히 활용하여 사용자가 직관적이고 편리하게 글을 작성할 수 있도록 유도.

파일 업로드와 결합: 파일 업로드 필드와 함께 사용하면 텍스트와 첨부 파일을 동시에 수집 가능.

 

HTML

KBoard 입력 필드 세부 설정 중 “HTML” 필드에 대한 설정입니다.  HTML 필드는 게시판 글쓰기나 보기 화면에 HTML 코드를 삽입하여 사용자 정의 콘텐츠를 표시하는 데 사용됩니다. 아래는 각 항목의 자세한 설명입니다.

 

필드 레이블

설명: 입력 필드의 이름(레이블)을 설정합니다.

사용자 표시: 관리자가 이 필드를 이해하기 쉽게 레이블을 지정합니다.

예시: “공지사항 배너” / “문의 작성 가이드” / “추가 설명 영역”

 

메타키

설명: 데이터베이스에서 이 필드에 입력된 내용을 저장하는 고유 키입니다.

주의사항: 한 번 설정된 메타키는 저장 후 변경할 수 없습니다.  다른 필드와 중복되지 않도록 고유한 값을 사용해야 합니다.

예시:

custom_html

html_notice_area

 

HTML

설명: HTML 코드를 입력할 수 있는 필드입니다.

기능: HTML 태그를 사용하여 텍스트, 이미지, 링크, 버튼, 스타일 등 다양한 요소를 삽입할 수 있습니다. 간단한 HTML뿐만 아니라 CSS 스타일링 또는 자바스크립트를 포함할 수도 있습니다.

예시:

html
 
<div style="background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;"> <h3>문의 작성 전 참고해주세요!</h3> <p>문의 사항은 최대 500자까지 작성 가능합니다.</p> </div>
 

게시글 본문에 표시

설명: 작성된 HTML 내용이 게시글 본문에 출력될지 여부를 설정합니다.

사용 사례: 활성화– HTML 필드 내용을 게시글 본문에 표시. / 비활성화– HTML 내용은 설정 화면에서만 사용되고 게시글 본문에 표시되지 않음.

사용 예시

문의 작성 가이드 제공:

  • 필드 레이블: “문의 작성 안내”
  • 메타키: inquiry_guide
  • HTML 내용:
  • html
    <p style="color: red;">문의 작성 전 필수 항목을 확인해주세요!</p>
  • 게시글 본문에 표시: 활성화.

공지 배너 삽입:

필드 레이블: “공지 배너”

메타키: notice_banner

HTML 내용:

html
 
<div style="text-align: center; background: yellow; padding: 10px;"> <strong>공지:</strong> 11월 30일까지 모든 제품 20% 할인! </div>

게시글 본문에 표시: 비활성화(게시판 상단에서만 표시).

 

추가 팁

HTML 안전성:사용자 입력을 허용하는 경우, XSS(크로스 사이트 스크립팅)와 같은 보안 문제를 방지하기 위해 HTML 필드를 제한하거나 검증해야 합니다.

CSS와 결합:CSS 클래스나 인라인 스타일을 통해 디자인을 세부적으로 조정 가능합니다.

자바스크립트 사용:필요한 경우 인터랙티브한 콘텐츠를 위해 자바스크립트를 추가할 수 있습니다(주의해서 사용해야 함).

 

숏코드

KBoard 입력 필드 세부 설정 중 “숏코드” 필드에 대한 설정입니다. 숏코드는 워드프레스에서 다양한 기능이나 콘텐츠를 간단한 코드 형태로 삽입할 수 있도록 도와주는 기능입니다. 아래는 각 항목의 자세한 설명입니다.

 

필드 레이블

설명: 필드의 이름을 지정합니다.

사용자 표시: 관리자가 이 필드의 용도를 쉽게 이해할 수 있도록 설정.

예시:”동영상 삽입 코드” / “외부 콘텐츠 숏코드” / “위젯 설정”

 

메타키

설명: 데이터베이스에서 이 필드에 입력된 숏코드 데이터를 저장하는 고유 키.

주의사항: 한 번 설정 후 변경할 수 없습니다. 다른 필드와 중복되지 않도록 고유한 이름을 사용해야 합니다.

예시:

shortcode_content

external_shortcode

 

숏코드

설명: 워드프레스 숏코드 문법을 입력할 수 있는 필드입니다.

사용 사례: 외부 플러그인이나 콘텐츠를 게시판에 삽입하고 싶을 때 사용.

게시글 본문에 표시

설명: 입력된 숏코드가 게시글 본문에 출력될지 여부를 설정합니다.

사용 사례활성화– 숏코드의 결과물이 게시글 본문에 표시됩니다. / 비활성화– 입력된 숏코드는 데이터베이스에 저장되지만 게시글 본문에 표시되지 않습니다.

사용 예시

동영상 숏코드 삽입:

  • 필드 레이블: “동영상 코드”
  • 메타키: video_shortcode
  • 게시글 본문에 표시: 활성화.

갤러리 삽입:

  • 필드 레이블: “갤러리 코드”
  • 메타키: gallery_shortcode

커스텀 버튼 출력:

필드 레이블: “커스텀 버튼 코드”

메타키: button_shortcode

숏코드:

shortcode
[button text="Click Me" link="https://example.com"]

추가 팁

숏코드 지원 여부 확인: 사용하려는 숏코드가 올바르게 동작하려면 관련 플러그인이 활성화되어 있어야 합니다.

디자인 커스터마이징: 숏코드 결과물을 CSS 클래스를 통해 스타일링할 수 있습니다.

HTML과 결합 사용: 숏코드 필드 내에 HTML을 추가적으로 작성해 복합적인 레이아웃을 구현할 수도 있습니다.

 

주요 활용 사례

동영상, 이미지, 오디오 삽입: 미디어 콘텐츠를 쉽게 게시글에 추가.

외부 플러그인과 통합: 워드프레스 숏코드를 활용하여 커스텀 기능 구현.

동적 콘텐츠 출력: 사용자 입력에 따라 변화하는 콘텐츠를 보여줄 때 유용.

이 화면은 KBoard의 입력 필드 설정에서 날짜 선택, 시간 선택, 이메일, 주소 필드의 설정 목록을 보여주는 부분입니다. 각 항목에 대한 자세한 설명은 다음과 같습니다.

 

날짜 선택

기능: 날짜를 입력할 때 캘린더 위젯이 제공되어 사용자가 날짜를 쉽게 선택할 수 있습니다.

필드 값은 일반적으로 YYYY-MM-DD 형식으로 저장됩니다.

사용 사례: 예약 날짜 입력. / 이벤트 또는 약속 날짜 선택.

추가 설정: 기본값 설정 가능(예: 오늘 날짜). / 날짜 범위 제한(예: 최소/최대 날짜 설정).

 

시간 선택

기능: 시간 선택 위젯을 통해 사용자가 시간을 쉽게 선택 가능.  값은 일반적으로 HH:MM 형식(24시간 또는 12시간)으로 저장됩니다.

사용 사례: 예약 시간 입력. / 회의 또는 이벤트 시간 지정.

추가 설정: 시간 간격 설정(예: 15분 단위로 선택 가능). 기본 시간 설정 가능.

 

이메일

설명: 이메일 주소를 입력받는 필드입니다.

기능: 이메일 형식의 유효성을 자동으로 검사(예: @ 및 도메인 형식 확인).  잘못된 형식 입력 시 오류 메시지 제공.

사용 사례: 사용자 연락처 정보 수집. 뉴스레터 구독용 이메일 입력.

추가 설정: 필수 입력 여부 설정.  기본 이메일 주소 설정 가능.

 

주소

기능: 기본 텍스트 필드 형식으로 제공되며, 상세 주소를 입력 가능.  필요에 따라 여러 줄로 나누어 입력할 수 있도록 확장 가능.

사용 사례: 배송지 입력.  사용자 등록 정보에 주소 포함.

추가 설정: 우편번호와 연계하여 자동 주소 검색 기능을 추가(별도 플러그인 필요).

 

추가 팁

사용자 편의성 강화: 날짜와 시간 필드는 캘린더와 시계 위젯을 제공하므로 사용자의 입력 실수를 줄이고 편의성을 높일 수 있습니다.  이메일 필드는 자동 형식 검증을 통해 잘못된 데이터를 차단합니다.

응용 사례: 예약 시스템 – 날짜와 시간을 활용하여 예약 데이터를 수집. / 등록 양식 – 이메일과 주소 필드를 통해 사용자 정보를 효과적으로 수집.

 

CSS 커스터마이징:

필드 디자인을 조정하려면 CSS 클래스를 추가해 스타일링 가능합니다.

 

입력 필드 구조

 

제목

기본 사용: 모든 게시글의 제목은 필수 입력값입니다.

이 화면은 KBoard 입력 필드 세부 설정 중 “옵션” 필드에 대한 설정입니다. 옵션 필드는 주로 사용자의 선택지를 제한하거나 특정 사용자 그룹에 권한을 설정할 때 사용됩니다. 아래는 각 항목에 대한 자세한 설명입니다.

 

필드 레이블

설명: 옵션 필드의 이름을 지정합니다.

사용자 표시: 필드의 용도를 쉽게 이해할 수 있도록 설정.

예시: “게시글 공개 설정” / “사용자 권한 선택” /”상품 옵션 선택”

 

메타키

설명: 입력된 옵션 데이터를 데이터베이스에 저장하는 고유 키.

주의사항: 메타키는 한 번 저장하면 변경할 수 없습니다.  데이터베이스에서 고유한 이름으로 설정해야 다른 필드와 충돌하지 않습니다.

예시:

option_visibility

user_role_option

 

비밀글

설명: 필드 값이 비밀글과 관련된 옵션으로 작동합니다.

설정 옵션: 제한 없음– 모든 사용자가 비밀글 여부와 관계없이 필드에 접근 가능, 특정 권한– 관리자, 로그인 사용자 등 특정 권한 그룹만 필드 값을 볼 수 있도록 제한.

 

공지사항

설명: 이 필드와 관련된 게시글이 공지사항으로 표시될지 여부를 설정합니다.

설정 옵션: 직접 선택– 사용자가 공지사항 여부를 직접 선택할 수 있도록 필드 활성화. / 기본값 설정– 공지사항 여부를 기본값으로 지정하여 항상 적용.

 

사용자 권한 설정

설명: 이 필드에 접근할 수 있는 사용자 그룹을 선택합니다.

권한 옵션:

  • 관리자: 모든 권한을 가진 워드프레스 관리자.
  • 구독자: 워드프레스 사용자 역할(Role) 중 콘텐츠 구독만 가능한 사용자.
  • 고객: WooCommerce나 기타 전자상거래 플러그인에서 설정된 고객 역할.
  • 상점 관리자: 상점 관련 기능을 관리할 수 있는 사용자.
  • Store Vendor: 상점 벤더(공급업체) 역할.
  • Translator: 번역 관련 사용자 역할.
  • Shop Accountant: 상점 회계 역할.
  • 구매자: 전자상거래 플러그인에서 제품을 구매한 사용자.

 

설명

설명: 옵션 필드에 대한 추가 설명이나 안내를 제공하는 텍스트입니다.

사용 사례:옵션 선택 방법이나 기준을 사용자에게 설명.

(예) “공지사항으로 설정하려면 체크박스를 활성화하세요.”

 

사용 예시

게시글 공개 설정:

필드 레이블: “공개 설정”

메타키: visibility_option

비밀글: 제한 없음

공지사항: 직접 선택

설명: “게시글 공개 범위를 선택하세요.”

 

사용자 권한 필드:

필드 레이블: “접근 가능 사용자”

메타키: access_user_role

권한 설정: 관리자, 고객

설명: “관리자와 고객만 이 필드를 볼 수 있습니다.”

 

상품 옵션 필드:

필드 레이블: “상품 옵션”

메타키: product_option

권한 설정: 제한 없음

설명: “상품 옵션을 선택하세요.”

 

추가 팁

사용자 권한의 활용:특정 사용자 그룹만 옵션 필드에 접근할 수 있도록 제한하여 보안을 강화.

(예) 비밀 글 설정, 관리자 전용 설정 등에 활용.

CSS 커스터마이징:필드의 스타일을 조정하거나 레이아웃을 변경하려면 CSS 클래스를 추가해 사용자 정의 가능.

기본값 설정:공지사항이나 비밀글 여부를 기본값으로 설정하여 사용자 작업을 간소화.

 

작성자

KBoard 입력 필드 세부 설정 중 “작성자” 필드에 대한 설정입니다. “작성자” 필드는 게시글을 작성한 사용자의 이름 또는 별명을 입력받는 필드로, 비회원 작성자의 신원을 확인하거나 표시하는 데 사용됩니다. 아래는 각 항목에 대한 자세한 설명입니다.

 

필드 레이블

설명: 입력 필드의 이름으로, 사용자에게 이 필드의 목적을 안내합니다.

사용자 표시: 사용자가 자신이 누구인지 입력하도록 레이블을 설정.

예시:”작성자 이름”, “작성자 닉네임”, “작성자 정보”

 

메타키

설명: 입력된 데이터를 데이터베이스에 저장할 때 사용하는 고유 키.

 

주의사항:

한 번 설정된 메타키는 저장 후 변경할 수 없습니다.

다른 필드와 충돌하지 않도록 고유한 이름을 사용해야 합니다.

 

표시할 권한

설명: 작성자 필드를 표시할 수 있는 사용자 범위를 설정합니다.

설정 옵션: 비회원일 때만 표시– 비회원 사용자가 작성할 때만 필드가 표시됩니다. / 제한 없음– 모든 사용자(회원 및 비회원)에게 필드가 표시됩니다. / 특정 권한– 관리자 또는 로그인 사용자 등 특정 사용자에게만 표시.

사용 사례:

회원은 로그인 정보를 기반으로 작성자를 자동 등록하고, 비회원만 작성자를 수동으로 입력하도록 설정.

 

기본값

설명: 필드에 자동으로 입력될 기본값.

사용 사례:특정 이름이나 닉네임을 기본값으로 설정.

예: “익명” 또는 “Guest” 등.

 

Placeholder

명: 입력 필드 내부에 표시되는 안내 텍스트로, 사용자가 입력을 시작하면 사라집니다.

사용 사례: “이름을 입력하세요”, “닉네임을 작성해주세요”

기능: Placeholder는 실제 입력값이 아니며, 사용자 입력 전 힌트 역할을 합니다.

 

설명

설명: 필드 아래에 표시되는 추가 안내 텍스트입니다.

사용 사례:사용자에게 작성자 정보를 입력해야 하는 이유를 설명.

예: “작성자 이름은 게시글 상단에 표시됩니다.” 또는 “비회원 작성 시 이름을 입력해야 합니다.”

 

사용 예시

비회원 작성자 입력 필드:

  • 필드 레이블: “작성자 이름”
  • 메타키: guest_author
  • Placeholder: “이름을 입력하세요”
  • 설명: “비회원 사용자는 이름 또는 닉네임을 입력해야 합니다.”
  • 표시할 권한: 비회원일 때만 표시.

닉네임 입력 필드:

  • 필드 레이블: “닉네임”
  • 메타키: nickname
  • 기본값: “익명”
  • Placeholder: “닉네임을 작성해주세요”

 

추가 팁

비회원과 회원의 작성자 정보 관리: 회원은 로그인 정보를 기반으로 작성자를 자동 등록하고, 비회원에게는 이 필드를 표시하여 작성자 정보를 수동으로 입력받는 방식으로 관리할 수 있습니다.

익명 작성 기능: 기본값을 “익명”으로 설정하거나 Placeholder를 제공해 비회원 작성자가 부담 없이 정보를 입력하도록 유도.

스타일 커스터마이징: CSS를 활용하여 작성자 필드의 크기, 폰트 스타일 등을 조정 가능.

 

계층형 카테고리

필드 레이블

사용자가 볼 수 있는 카테고리 입력 필드 이름입니다.

예: “문의 유형”, “제품 분류”.

 

메타키

데이터베이스에 저장될 고유 키로, 변경할 수 없습니다.

예: tree_category.

 

표시할 권한

이 필드를 볼 수 있는 사용자 권한을 설정.

예: “제한 없음”으로 모든 사용자 표시 가능.

 

설명

필드 사용에 대한 간단한 안내문을 추가할 수 있습니다.

예: “카테고리를 선택해주세요.”

 

주요 기능:

계층형 구조(상위-하위)를 가진 카테고리를 선택할 수 있습니다.

글 작성 시 카테고리를 분류하여 관리에 유용합니다.

 

캡차(보안코드)

메타키

보안코드 입력 데이터를 저장하는 고유 키.

기본값: captcha.

 

설명

사용자에게 보안코드 입력 이유나 방법을 안내.

예: “자동 스팸 방지를 위해 보안코드를 입력하세요.”

 

주요 기능:

스팸 방지 목적으로 사용되며, 사람이 작성한 글인지 확인.

글 작성 또는 댓글 작성 시 추가 보안 레이어를 제공합니다.

 

내용

필드 레이블

필드 이름으로, 사용자에게 입력할 내용을 안내합니다.

예: “글 내용”, “문의 내용”, “상세 설명”.

 

메타키

입력 데이터를 저장하는 데이터베이스의 고유 키.

기본값: content.

 

Placeholder

사용자가 입력하기 전에 필드 안에 힌트로 표시되는 텍스트.

예: “여기에 내용을 입력하세요.”

 

설명

필드 아래에 추가적으로 표시되는 안내 문구.

예: “최대 500자까지 입력 가능합니다.”

 

필수

필드를 필수 입력값으로 설정. 체크 시 입력이 없으면 제출 불가.

 

주요 기능:

게시글의 본문 내용을 작성하는 필드로 사용.

상세하고 자유로운 입력을 지원.

 

사진

필드 레이블

입력 필드 이름으로 사용자에게 사진 업로드 용도를 안내.

예: “첨부 사진”, “프로필 사진”.

 

메타키

업로드된 사진 데이터를 저장하는 고유 키.

기본값: media.

 

표시할 권한

필드를 볼 수 있는 사용자 권한 설정.

옵션: 제한 없음, 특정 권한.

 

설명

사진 업로드와 관련된 안내 문구를 추가.

예: “최대 5MB 크기의 JPG, PNG 파일만 업로드 가능합니다.”

 

주요 기능:

사용자가 게시글에 사진을 첨부할 수 있는 필드.

파일 크기와 형식은 서버 설정에 따라 제한 가능.

 

첨부파일

필드 레이블

사용자에게 첨부파일 업로드 용도를 안내하는 이름.

예: “첨부 문서”, “파일 업로드”.

 

메타키

업로드된 파일 데이터를 저장하는 고유 키.

기본값: attach.

 

표시할 권한

필드를 볼 수 있는 사용자 권한 설정.

옵션: 제한 없음, 특정 권한(예: 관리자, 회원).

 

설명

첨부파일 업로드와 관련된 추가 안내 문구.

예: “최대 10MB 크기의 PDF 또는 DOC 파일만 업로드 가능합니다.”

 

주요 기능:

사용자가 게시글에 첨부파일을 업로드할 수 있는 필드.

업로드 파일 개수와 용량은 기본 설정에서 제한 가능.

 

통합검색

필드 레이블

통합검색 필드의 이름으로 사용자에게 검색 기능을 안내.

예: “게시글 검색”, “검색창”.

 

메타키

검색어 데이터를 저장하는 고유 키.

기본값: search.

 

표시할 권한

검색 필드를 사용할 수 있는 사용자 권한 설정.

옵션: 제한 없음, 특정 사용자 권한.

 

기본값

검색 허용 범위를 설정.

옵션: “제목만 검색”, “제목과 내용 검색” 등.

 

설명

검색 사용 방법이나 제한 사항을 안내.

예: “키워드를 입력하고 검색 버튼을 눌러주세요.”

 

숨김

검색 필드를 사용자 인터페이스에서 숨길지 설정.

 

주요 기능:

게시판의 제목, 내용 또는 특정 데이터를 검색할 수 있는 필드.

사용자 검색 편의성을 높여 콘텐츠 탐색을 용이하게 합니다.