게시판 만들기 – 디자인 최적화

KBoard의 게시판 디자인을 QPRESS 테마의 스타일에 최적화 시키는 방법을 설명합니다. QPRESS 테마 스타일 적용전의 KBoard Default Skin은 아래와 같은 모습을 보입니다. CSS 코드 추가 아래의 CSS 코드를 '테마 디자인>사용자정의하기>추가CSS'에 삽입 합니다. /* KBoard CSS */ #kboard-default-list div { font-size: var(--font-size-body); } #kboard-default-list .kboard-list-header .kboard-total-count { font-size: var(--font-size-body); } #kboard-default-list .kboard-category .kboard-category-list { background-color:transparent; } #kboard-default-list .kboard-category .kboard-category-list li a { padding: 6px 14px; font-size: var(--font-size-body); color: #000; background: var(--shade)!important; border-radius: 20px; transition:all .2s; } #kboard-default-list .kboard-category .kboard-category-list li.kboard-category-selected a {...

게시판 만들기 – Kboard

워드프레스에 수많은 게시판 플러그인이 존재합니다만, 외국의 게시판(대표적으로 bbPress)은 한국 사람들에게는 아주 이질적인 UI를 지니고 있습니다. 그래서 소위 '한국형 게시판'이라고 불리는 국산 게시판 플러그인을 사용해야만 우리가 전통적으로 이해하는 게시판을 구현할 수 있습니다. 한국현 게시판 플러그인은 KBoard, MangBoard 등이 대표적인데 우선 KBoard 사용에 대해 설명하도록 하겠습니다. KBoard 공식 사이트 : https://www.cosmosfarm.com/products/kboard KBoard 설치 위의 KBoard 공식 사이트에서, 최신 버전을 다운로드 받습니다. 댓글 플러그인도 함께 다운로드 받고 설치 후에 댓글 플러그인도 설치해 주어야 합니다. 설치 방법은 일반적인 플러그인 설치 방법과 동일하게 '플러그인' 메뉴에서...

QBuilder 플러그인을 활용하여 홈 화면 만들기 – 템플릿 사용

이미 만들어진 페이지 템플릿을 사용하여 보다 빠르게 High Quality 페이지를 생성 할 수 있습니다. qpress.kr에서 제공하는 템플릿은 지속적으로 업데이트 될 예정입니다. 아래 그림과 같이 QBuilder에서 컨텐츠(페이지) 생성 시 '템플릿 사용' 사용을 선택 하신 후 '템플릿 보기'를 클릭 하면 사용할 수 있는 템플릿 목록이 뜨게 됩니다. 이 템플릿 목록에서 원하는 템플릿 ID를 복사하여 입력 하시면 해당 템플릿의 내용을 그대로 불러와서 편집 할 수 있습니다. 템플릿 선택 화면 템플릿 편집 화면

QBuilder 플러그인을 활용하여 홈 화면 만들기 – Builder 편집 데모

Builder 사용에 대한 전체적인 개념은 아래 동영상을 참조 하시기 바랍니다.

QBuilder 플러그인을 활용하여 홈 화면 만들기 – 설치 및 숏코드 사용

플러그인 설치 다운로드 페이지에서 QBuilder 플러그인인 다운로드 받아 플러그인 업로드 방식으로 설치합니다. 컨텐츠 생성 및 Builder로 편집 플러그인이 성공적으로 설치되면 좌측 메뉴에 'QBuilder' 메뉴가 생성됩니다. QBuilder 메뉴를 눌러서 Builder 메인 화면으로 들어갑니다. 제목을 입력하여 커텐츠 페이지를 생성한 후 생성된 컨텐츠의 'Builder' 버튼을 클릭하여 Builder를 오픈합니다. 사이트에 적용 생성된 컨텐츠는 숏코드를 통해 페이지 또는 글에 적용합니다. 컨텐츠 목록 페이지에 있는 숏코드를 복사하여 페이지 작성시 숏코드 블럭에 붙여 넣기 하면 됩니다.

검색창 추가

위젯을 활용하여 사이트 상단에 검색창을 추가 할 수 있습니다. 테마 디자인의 위젯 메뉴로 이동하여 헤더 위젯 영역에 '검색'위젯을 끌어다 놓으면 끝납니다. 검색 폼의 스타일은 CSS 코드를 사용하여 수동으로 조정하실 수 있습니다. 필요하실 경우 '테마 디자인'의 '추가 CSS'에 아래와 같이 CSS 코드를 사용할 수 있습니다. .qpw-header-widget .qpw-widget-search input{ border-color:red; }

최신글 숏코드(Shortcode)

작성된 글(Post)은 메인 화면 등에 최신 글로 적용되는 경우가 많습니다. QPRESS 테마 설정의 '카테고리' 탭에서 원하는 최상위 카테고리를 선택하면 사용할 수 있는 숏코드를 확인할 수 있습니다. 이 숏코드를 복사하여, 페이지 내 필요한 영역에 복사 하면 됩니다. 숏코드 옵션 cat_id : 카테고리 고유 아이디count : 출력할 목록 개수animation : 목록 출력 시 Moving (up, opacity, zoom)type : 글 몰록 형태(wide, fixed, flexible, line) 글목록 형태

스팸방지 – reCaptcha 적용

댓글을 비로그인 사용자도 등록할 수 있도록 허용할 경우, 곧바로 Bot의 스팸성 댓글에 시달리게 됩니다. 알려지지 않고 방문자가 없는 사이트라도 이 Bot 공격은 들어오게 되어 있습니다. 이를 효과적으로 막기 위해 흔히 사용하는 것이 나는 '로봇이 아닙니다.' 를 선택하게 하는 구글의 'reCapthca' 기능입니다. 2018년 이후 구글에서는 이렇게 사용자가 선택하는 불편함을 제거한 새로운 방식의 reCaptcha V3를 내놓았는데, 쉽게 말해 사용자는 아무것도 하지 않아도 Bot 공격을 막아냅니다. QPRESS는 이 V3가 적용되어 있으니, 구글 reCaptcha 키만 발급 받으면 바로 사용할 수 있습니다. 1.Google reCaptcha Key...

카테고리 관련 설정

QPRESS 테마는 강력한 카테고리 설정을 가지고 있습니다. 특히 계층형 카테고리 구조에서 최상위 카테고리에 대한 다양한 설정을 제공하되 그 하위 카테고리들은 모두 최상위 카테고리의 설정을 갖도록 하였습니다. 즉 분류별 글쓰기, 분류별 일관성을 극대화 한 것입니다. Q.PRESS 테마의 카테고리 Display 방식 Q.PRESS 카테고리에 대한 설정은 최상위 카테고리에 대한 설정입니다. QPRESS 테마 설정의 '카테고리' 탭으로 이동 하여, 설정 하고자 하는 최상위 카테고리를 선택 합니다. 테마 설정의 '카테고리' 설정 메뉴(최상위 카테고리 중 하나를 선택해야 설정 옵션이 나타남) 카테고리 설정 화면 카테고리 페이지 헤더 :...

테마 색(Color) 설정

웹사이트 디자인에서 가장 중요한 부분이 색깔일 것입니다. 그런데, 한 사이트에서의 색상은 그 일관성이 무엇보다 중요합니다. 페이지마다 다른 색들이 등장하다 보면 한 사이트에 수십개 또는 수백개의 색이 존재하게 되어 그 전문성과 퀄러티를 현저히 저하 시키게 됩니다. QPRESS 테마에서는 2개의 대표 색상(Main Color, Point Color)를 사용하여 관련 색으로 파생시키는 스킴을 지니고 있습니다. 이러한 관련 색상에 관한 개념은 아래 링크를 통해 별도로 참고 하시기 바랍니다. https://www.w3schools.com/colors/colors_monochromatic.asp 관련색 예시 qp.css의 Color Scheme은 색상 이름 앞에 x 가 붙으면 어두운 톤을 더하고 이름 뒤에 x가...