워드프레스에서 액션과 필터는 후크(hook)라고 불리며, 기능 확장에 사용됩니다[1].

액션(action) 후크는 특정 시점에 사용자가 정의한 함수를 실행하는 데 사용됩니다. 워드프레스 내의 다양한 시점에서 액션 후크를 사용하여 기능을 추가할 수 있습니다[2]. 필터(filter) 후크는 워드프레스 내의 데이터를 수정하거나 가공하기 위해 사용됩니다. 필터 후크를 이용하여 원하는 데이터를 변경하거나 추가할 수 있습니다[3].

 
 

케이보드에서도 다양한 필터와 후크를 제공하고 있습니다. 글쓰기, 글읽기, 글삭제 등 게시판 관련은 물론이고 댓글관련도 다양한 훅과 필터를 제공하고 있습니다. 아래의 링크를 참조하시면 되겠습니다. https://www.cosmosfarm.com/products/kboard/hooks

워드프레스 테마의 functions.php 파일을 사용하여 액션과 필터 후크를 구현할 수 있습니다. 이 파일은 워드프레스가 실행될 때 자동으로 포함되므로, functions.php에 있는 함수들은 모든 템플릿 파일에서 사용할 수 있습니다[4]. 액션과 필터 후크를 활용하여 워드프레스의 기능을 확장하고, 워드프레스 자체의 동작 원리를 깊이 이해할 수 있습니다[5]. funtion.php 파일에 후크를 적용하는 방법과 플러그인을 이용한 후크적용방법에 대해서 글을 작성하도록 하겠습니다.

 
 

케이보드는 커뮤니티가 활성화 되어 있습니다. 카카오 단체톡방과 커뮤니티 문의글을 통해서 답변을 비교적 빠르고 정확하게 받아보실 수 있으니 활용해보시기 바랍니다.

코스모스팜 스레드 – Cosmosfarm

워드프레스 홈페이지 제작, 프로그래밍 전문 Q/A 서비스, 지식을 나누고 수천개 이상의 질의응답을 찾아보세요.

www.cosmosfarm.com

안녕하세요. 케이테마를 이용해주시는 모든 고객분들께 감사드리며 오늘은 케이보드에서 제공하는 게시판 커스텀 방법을 알려드립니다. 케이테마에서는 케이보드 게시판스킨을 제공하고 있으며 그중 갤러리 스킨은 기본 4개의 컬럼이 사용되고 있습니다. 홈페이지에 따라서 컬럼의 개수를 조정해야 할 필요가 있습니다. 케이보드 플러그인에서 사용자 옵션으로 지정하고 싶은데 그런 api가 제공이 되지않아 스킨에서 직접 수정을 하셔야 합니다. 아래의 순서와 같이 따라해주시기 바랍니다.
  1. 게시판 스킨경로로 이동 : FTP 접속 후 혹은 root 폴더에서 plugins/kboard/skin/ 폴더에 있는 스킨경로로 이동합니다.
  2. 수정을 원하는 스킨 선택 : 일반적으로 갤러리는 ktheme-thumbnail-type~ 형태이고 목록형은 ktheme-basic~ 형태로 폴더가 있습니다. 스킨폴더로 들어가면 list.php 파일 ( 게시판의 목록 파일 )과 latest.php 파일(최신글로 표시되는 파일 ) 이 있습니다.
  3. list.php 파일 수정 : list.php 파일을 편집기로 열어보면 <!– 게시판 목록 시작 –> 이라는 주석과 함께 <div class=”row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xlg-4 g-5 mb-5″> 형태로 코드가 구성되어 있는것을 확인할 수 있습니다. row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 클래스의 의미는 다음과 같습니다.  ( 각 디스플래이의 사이즈는 https://getbootstrap.com/docs/5.0/layout/grid/ 를 참조하시기 바랍니다 )
    1. row-cols-1 : 한 행에 하나의 컬럼으로 구성한다 ( 기본설정 )
    2. row-cols-md-2 : 기본설정을 따르되 디스플래이가 md사이즈에서는 2개의 컬럼으로 구성한다
    3. row-cols-lg-3 : 기본설정을 따르되 디스플래이가 lg사이즈에서는 3개의 컬럼으로 구성한다
    4. row-cols-xl-4 : 기본설정을 따르되 디스플래이가 xl사이즈에서는 4개의 컬럼으로 구성한다
  4. row 클래스 수정하기 : row-cols-1 에서 숫자에 들어갈 수 있는 값은 1에서 12까지 입니다. 따라서 이 값을 수정해주면 입력한 값 만큼의 컬럼으로 표시됩니다.
  5. col 클래스 수정하기 : <div class=”row”> 형태의 부모를 가진 col-12 col-md-4 col-lg-3 mb-4 형태의 자식요소들이 있습니다. 이런 경우 자식요소에서 컬럼의 개수를 결정하게 됩니다.
    1. col-12 : 기본설정으로 col의 너비는 100%가 됩니다. 부트스트랩은 기본적으로 공간을 12개로 나누어 사용하기 때문에 col-12로 표시한 경우는 12개의 col을 가져라는 의미 입니다.
    2. col-md-4 : md사이즈에서는 4개의 col을 가지라는 의미이므로 한줄에 표시되는 아이템은 3개가 표시가 되게 됩니다. row 클래스에 사용할 때와는 개념이 다르니 유의하셔야 합니다.
  6. 4,5를 참조하여 클래스를 수정하시고 저장 후 ftp를 통해 업로드 하시기 바랍니다.
감사합니다.

케이보드에서 제공하는 갤러리 스킨을 소개드립니다. 케이보드에서 제공되는 기본 스킨 이외에는 모두 유료로 구매를 해야 합니다. 무료스킨이 조금 더 없는 부분은 아쉽지만 무제한 라이선스로 구매를 하시면 전체 제품을 저렴하게 이용 가능합니다. 무제한 라이센스 바로가기기 현재 코스모스팜에서는  다음과 같이 스킨을 제공하고 있습니다. 각 링크별로 확인하시기 바랍니다.
  1. 갤러리 스킨 10종 
    1. KBoard 화이클 갤러리 스킨 – 이미지 갤러리를 띄울 수 있는 워드프레스 갤러리 게시판입니다.
    2. KBoard 퓨어 갤러리 스킨 – 오버레이 이미지 설정이 가능한 워드프레스 갤러리 게시판 스킨입니다.
    3. KBoard 전후사진 플러스 스킨 – 로그인 상태에 따라서 서로 다른 사진을 보여주는 전후사진 게시판 스킨입니다.
    4. KBoard 하이 단체 스킨 – 워드프레스에서 사용할 수 있는 연락처,임원구성,구성원 게시판입니다.
    5. KBoard 모던 갤러리 스킨 – 워드프레스 모던 갤러리 스킨입니다. 갤러리형 커뮤니티에 적합한 스킨입니다.
    6. KBoard 오션 갤러리 스킨 –  워드프레스 오션 갤러리 스킨입니다.
    7. KBoard 원더풀 제품소개 스킨 – 당신의 최고의 제품을 홈페이지에 등록하고 소개하세요.
    8. KBoard 카드 갤러리 스킨 – 카드형 레이아웃의 갤러리형 워드프레스 게시판 입니다. 다양한 용도로 사용이 가능합니다.
    9. KBoard 픽(Pic) 갤러리 스킨 – 워드프레스 픽(Pic) 갤러리 스킨입니다. 중앙정렬 레아아웃으로 깔끔한 디자인을 제공합니다.
    10. KBoard 퍼스트 전후사진 스킨 – 로그인 상태에 따라서 서로 다른 사진을 보여주는 전후사진 게시판 스킨입니다.
  2. 커뮤니티 스킨 5종 
    1. KBoard 퍼스트 뉴스피드 스킨 – 워드프레스 타임라인, 담벼락, 방명록 스타일의 게시판 스킨입니다.
    2. KBoard 인사이드 상담 스킨 – 워드프레스 1:1 문의하기 게시판 스킨입니다.
    3. KBoard 포럼원 커뮤니티 스킨 – 워드프레스에 포럼 형태의 커뮤니티 게시판을 생성할 수 있습니다.
    4. KBoard 비즈 커뮤니티 스킨 – 워드프레스 비즈니스 홈페이지를 위한 커뮤니티 게시판 스킨입니다.
    5. KBoard 에스크원 상담 스킨 – 워드프레스 홈페이지에 상담, 질문답변, Q&A, 고민 게시판을 쉽게 만들 수 있습니다.
  3. 동영상스킨 2종
    1. KBoard 화이클 비디오 스킨 – 동영상 플레이어를 띄울 수 있는 워드프레스 동영상 게시판입니다.
    2. KBoard 플레이 비디오 스킨 – 워드프레스 홈페이지에 유튜브, 비메오, mp4 동영상을 쉽게 게시할 수 있습니다.
  4. 웹진스킨 1종
    1. KBoard 비너스 웹진 스킨 – 워드프레스 웹진 스타일의 깔끔한 스킨입니다.
  5. 자료실 스킨 5종
    1. KBoard 레온 다운로드 스킨 – 다운로드 버튼이 목록에 표시되는 워드프레스 자료실 게시판 스킨입니다.
    2. KBoard 다운로드 스킨 – 워드프레스 자료실 용도의 다운로드 스킨입니다.
    3. KBoard 화이클 다운로드 스킨 – 다양한 첨부파일을 등록해 사용할 수 있는 워드프레스 게시판입니다.
    4. KBoard 화이클 그리드 스킨 – 다양한 첨부파일을 등록해 사용할 수 있는 워드프레스 게시판입니다.
    5. KBoard 오션 다운로드 스킨 – 워드프레스 오션 다운로드 스킨입니다. 자료실 용도로 사용 가능합니다.
  6. 특별스킨 9종
    1. KBoard 크로스 링크 스킨 – 뉴스, 블로그, SNS 등 홈페이지 내부 혹은 다른 사이트의 링크를 등록할 수 있는 게시판 스킨입니다.
    2. KBoard 크로스 캘린더 스킨 – 컨퍼런스, 행사, 강좌, 공지사항, 개인 일정관리를 등록할 수 있는 다용도 워드프레스 캘린더 게시판 스킨입니다.
    3. KBoard 퍼스트 콘텐츠몰 스킨 – 디지털 콘텐츠 또는 홍보/마케팅 등 서비스 상품을 판매할 수 있는 워드프레스 재능마켓 솔루션 입니다.
    4. KBoard 오션 FAQ 스킨 – 워드프레스 오션 FAQ 스킨입니다. 자주 묻는 질문을 만들 수 있습니다.
    5. KBoard 디스커버 FAQ 스킨 – 자주묻는 질문용 워드프레스 게시판 스킨입니다.
    6. KBoard 세계지도 프랜차이즈 스킨 – 세계 지도 위에 여러 장소의 위치를 표시해보세요.
    7. KBoard 오션 프랜차이즈 스킨 – 워드프레스 프랜차이즈 지점 소개용 스킨입니다. 지도위에 지점을 표시 해줍니다.
    8. KBoard 오션 별점 스킨 – 워드프레스 제품 및 이용후기등 리뷰작성용 게시판 스킨 입니다.
    9. KBoard 이모션 고객센터 스킨 – 워드프레스 홈페이지에 질문,답변 고객센터를 구축할 수 있습니다.
코스모스 팜과 함께 케이마트에서도 23종의 케이보드 스킨을 제공하고 있습니다.  케이보드 디자인스킨에서 확인하시기 바랍니다.

케이테마 업종별 데모설치 2부

케이테마에서는 다양한 디자인을 제공하고 있습니다. 법률,서비스,IT, 블로그 등 테마별, 업종별 디자인을 제공하고 있으며 지속적으로 추가될 에정입니다. 데모페이지를 이용하는 방법에 대해서 알려드리니다. 케이테마는 관리자페이지에서 클릭 한번으로 데모페이지와 동일하게 세팅할 수 있습니다. 카페24 호스팅을 기준으로 작성이 되었으며 문의사항은 언제든 연락주시기 바랍니다. 1부에서 데모임포트까지 진행을 했으면 아래의 단계로 진행해주시기 바랍니다.  데모설치 문서보기 데모설치 후 설정해야 할 부분에 대해서 안내드립니다.
  1. 워드프래스 메인페이지 /주소 설정
  2. 케이보드 백업
  3. 슬라이더 설정
  4. 엘리멘터 설정
  5. Ultimate Member 설정
  6. 닌자폼 설정
   

워드프래스 메인페이지 /주소 설정

관리자 페이지에서 설정 – 고유주소페이지로 이동합니다. 고유주소 구조에서 “글 이름”을 선택하고 저장해줍니다. 홈페이지의 첫 화면을 지정해줍니다. “설정 – 읽기 ” 메뉴로 이동하여 “홈페이지 표시” 부분을 “정적인 페이지”로 선택하여 아래 선택박스에서 “메인페이지”를 선택하시기 바랍니다. 이후 저장을 눌러줍니다. 이렇게 하면 홈페이지에 접속했을때 “메인페이지”가 표시되게 됩니다.  

슬라이더 설정

케이테마는 Depicter 슬라이더를 사용하고 있습니다. 워드프래스는 다양한 슬라이더 플러그인을 제공하고 있으며 Depicter는 사용자에게 인기있는 슬라이더 중 하나입니다. 이전단계에서 슬라이더는 활성화 해주었으므로 슬라이더를 이용하는 방법에 대해서 알려드리겠습니다. 제공되는 슬라이더 템플릿을 이용해서 제작할 수도있지만 여기에서는 케이테마에서 미리 제작된 슬라이더를 가지고 오는 방법에 대해서 안내드립니다. 관리자페이지에서 Depicter – Dashboard 페이지에서 import a slider 를 클릭합니다. 임포트하기 원하는 슬라이더를 선택하여 “열기”버튼을 눌러줍니다. 슬라이더 Import에 필요한 파일은 https://k-thememarket.co.kr/ 공지사항에서 다운받을 수 있습니다. 에디트페이지에 들어가면 다음과 같이 표시가 됩니다. 배경이미지가 표시되지 않는 경우 왼쪽 사진 섹션에서 “My Photos”를 선택하고 배경이미지를 선택합니다. 배경이미지를 클릭하면 슬라이더에 표시가 됩니다. 이미지를 마우스 오른쪽 버튼을 누르면 “Set as slider bakcground”라는 메뉴가 나오는데요 해당 메뉴를 선택해주시기 바랍니다. 이후 오른쪽 상단의 “publish”버튼을 눌러 “Publish Changes”를 클릭합니다. 해당 섹션에 다른 페이지에서 사용할 수 있는 shortcode가 함께 표시되는 것을 확인할 수 있습니다. 저장이 되면 버튼이 초록색에서 회색으로 변하게 됩니다. 이렇게 메인페이지에 표시 될 슬라이더 설정은 완료되었습니다.  메인페이지에 다른 슬라이더를 원하는 경우 Depicter Slider 플러그인에서 설정하여 적용해보시기 바랍니다.  

엘리멘터 설정

이제는 엘리멘터 에디터에 대해서 설정할 차래입니다. 왼쪽 관리자 메뉴에서 “Elementor – Settings”페이지로 이동하여 2번 3번 항목을 체크합니다. 2번항목은 색상을 테마색상으로 지정하는 옵션이며 3번 항목은 폰트를 테마에서 제공하는 폰트로 설정한다는 설정입니다. 두가지를 저장하고 “변경사항 저장” 버튼을 눌러줍니다. 홈페이지의 메인페이지로 이동합니다. 상단의 Edit with Elementor 버튼에 마우스를 올리면 “Site Settings”가 표시됩니다. 클릭해서 Layout 메뉴로 이동합니다. Content Width 에 1140px로 표시된 부분을 1320px로 수정합니다. 이후 update버튼을 눌러 수정사항을 반영합니다.  

Ultimate Member 플러그인 설정

Ultimate Member 플러그인은 워드프래스에서 인기있는 사용자관리 프로그램 입니다. wp-members프로그램과 함께 가장 널리 사용되고 있습니다. 케이테마에서는 엘리멘터 프로그램을 이용하여 회원관리기능을 제공하고 있습니다. Ultimate Member – Settings 페이지로 이동합니다. 각 페이지를 사용자 페이지로 지정해야 합니다. 아래 이미지와 동일하게 사용자페이지를 지정해주시기 바랍니다. 이후 “Save Chages”버튼을 눌러 페이지를 저장합니다.  

닌자폼 설정

닌자폼은 워드프래스에서 사용되는 폼 생성 프로그램입니다. 다양한 무료/유료 플러그인이 있지만 무료 플러그인 중에서는 가장 인기있는 플러그인 중 하나입니다. 케이테마에서는 닌자폼을 기반으로 폼 디자인을 제공하고 있습니다. 관리자 페이지 – ninja form – 설정 페이지로 이동하여 중단에 있는 Form Builder “Dev Mode” 를 체크합니다. 이후 저장해줍니다. Dashboard 로 이동하면 Conatct Me 라는 미리 생성된 폼을 확인할 수 있습니다. 클릭하여 페이지에 들어가면 생성된 폼의 세부내역을 볼 수 있습니다. 각 폼을 클릭하면 오른쪽으로 수정할 수 있는 양식이 표시됩니다. Name을 변경하기 원하시면 “이름”으로 바꾸시기 바랍니다. “레이블 위치”는  요소의 왼쪽으로 설정해주시기 바랍니다. “완료”버튼을 누르면 설정이 완료됩니다. 이후 “게시”버튼을 누르면 설정이 완료됩니다.  

케이보드 백업/복구

데모페이지의 게시판과 동일하게 디자인을 만들기 위해서는 케이보드 백업 및 복구작업이 필요합니다. 게시판을 필요에 따라 사용하시는 분은 이번단계는 넘어가도 좋습니다. 관리자메뉴의 “KBoard – 백업 및 복구 “페이지로 이동합니다. “백업파일 선택”항목에서 “파일선택”을 클릭합니다. 복구에 필요한 백업파일은 https://k-thememarket.co.kr/ 의 공지사항에서 제공하고 있으니 확인하시기 바랍니다. 복구가 완료되고나면 “게시판 목록 및 관리”페이지에서 생성된 전체게시판을 확인하실 수 있습니다.  

결론

케이테마는 데모페이지를 원클릭으로 할 수 있도록 지원하고 있습니다. 설치된 플러그인에 따라서 추가설정이 필요한 부분이 있습니다. 해당 부분에 대해서는 위 매뉴얼을 따라 설치해주시기 바랍니다. 추가 문의사항은 케이테마의 문의하기 페이지에서 문의해주시기 바랍니다. 감사합니다.