액션(action) 후크는 특정 시점에 사용자가 정의한 함수를 실행하는 데 사용됩니다. 워드프레스 내의 다양한 시점에서 액션 후크를 사용하여 기능을 추가할 수 있습니다[2]. 필터(filter) 후크는 워드프레스 내의 데이터를 수정하거나 가공하기 위해 사용됩니다. 필터 후크를 이용하여 원하는 데이터를 변경하거나 추가할 수 있습니다[3].
워드프레스 테마의 functions.php 파일을 사용하여 액션과 필터 후크를 구현할 수 있습니다. 이 파일은 워드프레스가 실행될 때 자동으로 포함되므로, functions.php에 있는 함수들은 모든 템플릿 파일에서 사용할 수 있습니다[4]. 액션과 필터 후크를 활용하여 워드프레스의 기능을 확장하고, 워드프레스 자체의 동작 원리를 깊이 이해할 수 있습니다[5]. funtion.php 파일에 후크를 적용하는 방법과 플러그인을 이용한 후크적용방법에 대해서 글을 작성하도록 하겠습니다.
케이보드는 커뮤니티가 활성화 되어 있습니다. 카카오 단체톡방과 커뮤니티 문의글을 통해서 답변을 비교적 빠르고 정확하게 받아보실 수 있으니 활용해보시기 바랍니다.
워드프레스 홈페이지 제작, 프로그래밍 전문 Q/A 서비스, 지식을 나누고 수천개 이상의 질의응답을 찾아보세요.
www.cosmosfarm.com
이번 장에서는 케이보드를 설치하는 방법에 대해서 설명을 드리겠습니다. 관리자페이지를 통한 설치와 FTP를 통한 설치 두가지로 알려드립니다. 케이보드가 관리자 플러그인 페이지에서 직접 검색 및 추가가 가능하면 좋겠지만 코스모스팜에서 그렇게 조취를 해놓지는 않았습니다. 따라서 직접 다운로드받아 설치를 해야합니다. 물론 업데이트도 수동으로 해야합니다. 다소간의 번거로움은 있지만 아래 설명을 따라서 차근차근 진행해주시기 바랍니다. 먼저 워드프레스가 설치되어 있는 환경이 필요합니다. 케이보드는 워드프레스 기반으로 운영되는 플러그인이니 필수겠죠? 워드프레스 설치와 운영에 대해서는 이곳 워드프레스 가이드를 참조해주시기 바랍니다.
1.케이보드 플러그인 다운로드
최신버전에 대한 확인은 https://www.cosmosfarm.com/products/kboard 페이지에서 확인할수 있으며 케이보드 6.3 버전은 아래 다운로드 버튼을 이용해 바로 받을 수 있습니다. 게시판 플러그인 다운로드댓글 플러그인 다운로드 케이보드 위젯에 대한 설명은 이곳을 참조해주시기 바랍니다.
2.게시판, 댓글 플러그인을 다운로드 및 업로드
두 파일을 모두 다운로드 합니다. 압축을 풀지는 않습니다. 홈페이지의 관리자 페이지로 접속합니다. 플러그인 > 새로추가 > 플러그인 업로드 순으로 이동하여 업로드 버튼을 클릭합니다. 위에서 플러그인을 다운로드 받은 폴더로 이동하여 게시판 플러그인 먼저 선택을 해줍니다. 파일 이름은 “kboard-wordpress-plugin-버전.zip” 형태로 되어 있습니다. 파일 선택 후 지금설치 버튼을 눌러서 설치를 진행합니다. 잠시 기다리면 설치완료화면이 표시됩니다.
3.활성화 및 설치확인
플러그인 활성화 버튼을 눌러 케이보드를 활성화 시킵니다. 댓글 플러그인도 게시판과 동일한 과정으로 설치하고 활성화를 해주면 됩니다. 플러그인 페이지로 이동하면 게시판/댓글 플러그인이 모두 정상적으로 활성화 된 것을 볼 수 있습니다. 간혹 플러그인 업로드 시 오류가 발생하는 경우가 있습니다. 그런 경우 이곳의 글을 참조해보시기 바랍니다.
FTP를 이용한 플러그인 설치
위 설명의 1번에서 다운로드 받은 후 관리자페이지를 이용하여 업로드할 수 없는 경우 FTP를 이용해볼 수 있습니다. *ftp에 대한 설명과 사용법은 이곳을 참조하시기바랍니다.
1. 다운로드파일 압축풀기
관리자페이지를 이용할때는 압축된 파일을 업로드 했지만 FTP를 이용할 때는 압축을 미리 풀어야 합니다. 폴더 이름이 위 화면과 같이 표시되도록 압축을 풀어야 합니다. ftp에 접속하여 위 경로처럼 넣어줍니다. wp-content/plugins/kboard와 같이 업로드 된 것이 확인되면 완료된 것입니다. 이제 관리자페이지로 접속하여 플러그인을 따로 활성화 해줘야 합니다. 관리자페이지 플러그인 > 설치한 플러그인 페이지로 이동하면 위와같이 화면이 표시됩니다. 활성화 버튼을 눌러서 두개 플러그인을 활성화 해줍니다. 위 화면과 같이 관리자화면 왼쪽에 케이보드 메뉴가 생성되면 정상적으로 설치된 것입니다. 이제 케이보드를 생성하고 다양한 스킨을 활용하여 여러분의 홈페이지를 꾸며볼 수 있습니다. 각 메뉴에 대한 설명과 이용방법은 다음장에서 설명해드리겠습니다.
홈페이지 제작에서 게시판의 기능은 필수적입니다. 공지사항, 문의사항, 자주묻는 질문 등 다양한 정보를 공유하고 소통하는 방법으로 게시판을 사용합니다. 해외는 포럼이라는 형식으로 게시판과 유사하게 사용하고 있습니다. 오늘은 국내 게시판의 종류와 해외 포럼의 종류에 대해서 확인해보도록 하겠습니다. 국내에는 워드프레스를 기반으로 하는 3개의 게시판 플러그인이 있습니다.
케이보드 게시판 플러그인
망보드 게시판플러그인
레인보드 게시판 플러그인
그외 국내 게시판 플러그인이 있습니다만 위 3가지를 사용하시면 대부분의 원하는 기능을 이용가능합니다.
케이보드에 이어 국내에서 많은 사용자를 확보하고 있는 게시판입니다. 기본 게시판 기능에 충실한 스킨이며 자료실, 갤러리, 캘린더, 웹진, 문의하기, 자주붇는 질문 등 다양한 스킨을 무료로 제공하고 있습니다. 각 스킨은 기본 기능을 제공하고 있으며 커머스 기능을 함께 제공하여 쇼핑몰 등 의 기능과 함께 이용이 가능합니다. 다양한 유료스킨이 함께 제공되고 있으며 갤러리형, 웹진형, 질문답변스킨, 캘린더 스킨, 프랜차이즈 스킨, 동영상 스킨 등을 이용할 수 있습니다.
망보드는 각 패키지별로 다음과 같은 특징이 있습니다.
베이직 : MB-BASIC
기능: 자료실, 갤러리, 캘린더, 웹진, 문의하기, 자주묻는질문 게시판
특징: 다양한 확장 기능들이 모듈로 분리되어 있어 언제든지 쉽고 빠르게 원하는 기능을 추가해서 사용하실 수 있습니다
레인보우 플러그인 스킨입니다. 레이보우 스킨은 단비소프트에서 개발하여 무료로 배포중입니다. 단비소프트는 다양한 해외플러그인에 대해서 국내이용자들이 편하게 사용할 수 있도록 애드온을 제공하고 있습니다. 런대시, 얼티밋맴버 등 다양한 인기플러그인에 대해서 번역파일 도 제공하고 있습니다. 정규 커스텀 포스트 타입을 사용합니다.
일부 게시판 플러그인은 워드프레스의 정규 커스텀 포스트 타입을 사용하지 않습니다. 따라서 워드프레스와 분리된 별도의 백업 등을 필요하며 다른 플러그인과의 연동에도 문제를 일으킵니다. 레인보드는 워드프레스의 커스텀 포스트 타입을 충실히 지키니다. 예를 들어 레인보드의 댓글 조차 워드프레스의 기본 댓글을 사용합니다. 또한 디스커스 등 수 많은 다른 댓글 플러그인을 이용하셔도 좋습니다.
정규 회원 권한(user role)을 사용합니다.
따라서, User Role Editor와 같은 플러그인을 이용해 새로운 회원 권한을 만들면 곧 바로 레인보드에서 이를 사용할 수 있습니다. 보다 정교환 회원권한 관리를 원한다면 레인보드가 해답입니다. 기기의 해상도에 따라 최적의 레이아웃이 자동으로 출력됩니다.
게시판 권한 설정
읽기, 쓰기 등 상세한 권한 설정이 가능합니다. 관리자는 별도의 설정 없이 모든 권한을 가집니다.
AOS (Animate On Scroll)는 스크롤 애니메이션을 추가하는 라이브러리입니다. AOS를 사용하면 스크롤을 할 때 요소가 부드럽게 나타나거나 사라지는 등의 다양한 애니메이션 효과를 적용할 수 있습니다. 이 플러그인은 HTML, CSS 및 JavaScript로 작성되어 있으며, 사용하기 쉽고 매우 유용합니다. AOS 플러그인을 사용하려면, 먼저 AOS 라이브러리 파일을 다운로드하고 웹 페이지에 연결해야 합니다. 그런 다음, AOS 클래스를 HTML 요소에 추가하고 원하는 애니메이션 효과를 설정합니다. 자세한 내용은 AOS 공식 문서를 참조하시기 바랍니다.
Animate CSS는 웹 페이지에서 애니메이션 효과를 쉽게 적용할 수 있는 CSS 라이브러리입니다. 이 라이브러리를 사용하면 복잡한 JavaScript 코드를 작성하지 않고도 다양한 CSS 애니메이션을 웹 요소에 적용할 수 있습니다. Animate CSS는 다양한 애니메이션 효과를 미리 정의해놓고, 이를 웹 개발자가 사용하기 쉽게 만든 것이 특징입니다.
Bootstrap 5
Bootstrap 5는 웹 개발에서 가장 인기 있는 오픈 소스 프론트엔드 프레임워크 중 하나입니다. HTML, CSS, JavaScript를 기반으로 웹 페이지 디자인 및 레이아웃을 효율적으로 구축할 수 있도록 도와주며, 반응형 웹 디자인을 지원합니다. Bootstrap 5는 모바일 우선 접근 방식을 채택하고 있어, 다양한 기기에서 동작하는 웹 페이지를 쉽게 만들 수 있습니다. Bootstrap 5의 주요 변경 사항 및 기능은 다음과 같습니다:
jQuery 종속성 제거: Bootstrap 5에서는 JavaScript의 독립성을 높이기 위해 jQuery를 사용하지 않습니다.
개선된 그리드 시스템과 유틸리티 클래스: 더 유연하고 강력한 그리드 시스템과 유틸리티 클래스를 제공합니다.
사용자 정의 속성(Custom Properties) 지원: CSS 사용자 정의 속성을 통해 주요 스타일을 쉽게 변경할 수 있습니다.
업데이트된 폼 컴포넌트: 폼 컴포넌트의 디자인과 기능이 개선되었습니다.
SVG 아이콘 라이브러리 도입: 이전 버전의 폰트 기반 아이콘 대신, Bootstrap 5는 자체 SVG 아이콘 라이브러리를 제공합니다.
Bootstrap 5의 공식 홈페이지 주소는 다음과 같습니다: https://getbootstrap.com/ 공식 홈페이지에서는 Bootstrap을 시작하는 방법, 문서, 예제, 그리고 커뮤니티 지원 등에 대한 정보를 찾을 수 있습니다.
Fullpage
Fullpage.js는 웹 페이지를 전체 화면 섹션으로 나누고, 사용자가 세로 방향으로 원활하게 스크롤할 수 있게 도와주는 jQuery 기반 플러그인입니다. Fullpage.js를 사용하면 각 섹션을 화면에 맞추고, 수평 또는 수직으로 원활한 전환 효과를 적용할 수 있습니다. 이 플러그인은 원페이지 웹사이트, 프레젠테이션, 스토리텔링 등 다양한 용도로 사용됩니다. Fullpage.js의 주요 기능은 다음과 같습니다:
전체 화면 섹션: 웹 페이지의 각 섹션을 화면 크기에 맞게 조절합니다.
수직 및 수평 스크롤: 사용자가 수직 또는 수평 방향으로 원활하게 스크롤할 수 있습니다.
반응형 디자인: 브라우저 크기에 따라 자동으로 조절되며, 모바일 기기에서도 원활하게 작동합니다.
인터랙티브 애니메이션: 각 섹션 간 전환 시 원하는 애니메이션 효과를 적용할 수 있습니다.
확장 가능성: 플러그인과 호환되는 다양한 확장 기능을 사용하여 추가 기능을 제공합니다.
Fullpage.js의 공식 홈페이지 주소는 다음과 같습니다: https://alvarotrigo.com/fullPage/ 공식 홈페이지에서는 Fullpage.js의 사용 방법, 라이센스 정보, 문서, 예제 및 다운로드 링크 등을 확인할 수 있습니다. 그러나 Fullpage.js는 jQuery 기반 플러그인이므로 작업을 시작하기 전에 jQuery를 프로젝트에 추가해야 합니다.
hoverdir
Hoverdir은 jQuery 기반 플러그인으로, 마우스 호버 시 이미지나 요소에 따라 방향을 인식하는 효과를 제공합니다. 이 플러그인을 사용하면 웹 페이지에 있는 요소에 대해 마우스를 올리면 해당 요소의 방향을 인식하고, 콘텐츠를 그에 맞게 보여줄 수 있습니다. 이러한 효과는 이미지 갤러리, 포트폴리오 사이트 등에서 특히 인기 있습니다. Hoverdir 플러그인의 주요 특징은 다음과 같습니다:
방향 인식: 요소에 마우스를 올리면 요소의 방향을 인식하고 해당 방향으로 효과를 적용합니다.
호버 효과: 요소에 마우스를 올리면 방향에 따라 표시되는 정보를 변경할 수 있습니다.
사용자 정의 옵션: 개발자가 원하는 대로 효과의 지속 시간, 애니메이션 속도 등을 설정할 수 있습니다.
플러그인 호환성: jQuery 기반 플러그인으로, 다양한 웹 개발 프로젝트에 적용할 수 있습니다.
Hoverdir 플러그인의 공식 GitHub 저장소 주소는 다음과 같습니다: https://github.com/codrops/HoverDir 케이테마에서는 게시판 갤러리에 해당 플러그인을 사용하고 있습니다. 케이보드 갤러리 15게시판 스킨에 사용되고 있으며 주소는 다음과 같습니다. https://devktheme.mycafe24.com/bbsskins/%ea%b0%a4%eb%9f%ac%eb%a6%ac-15-thumbnail-type15/
Cool icons
“Coolicons”는 다양한 디자인 스타일의 아이콘을 제공하는 무료 아이콘 라이브러리입니다. 이 라이브러리는 SVG 형식의 아이콘을 포함하며, 다양한 크기와 색상으로 사용할 수 있습니다. 또한 “Coolicons”는 개발자와 디자이너가 자신의 프로젝트에 사용하기 쉽도록 각 아이콘을 코드로 복사하여 붙여넣을 수 있는 기능을 제공합니다. 케이테마는 부트스트랩 공식 아이콘과 cool icons라이브러리를 함께 사용하고 있습니다. “Coolicons”의 주소는 다음과 같습니다: https://coolicons.cool/
LightGallery
“LightGallery”는 모바일 및 데스크톱에서 작동하는 반응형 이미지 및 동영상 갤러리 라이브러리입니다. “LightGallery”는 이미지 및 동영상에 대한 다양한 기능을 제공합니다. 예를 들어, 이미지를 빠르게 확대 및 축소할 수 있으며, 슬라이드쇼 모드로 전환할 수도 있습니다. 또한 이미지 및 동영상에 대한 캡션, 태그, 링크 등의 정보를 제공할 수 있습니다. “LightGallery”는 jQuery, Angular, React 및 Vue.js와 같은 다양한 프레임워크와 호환됩니다.케이테마에서는 갤러리 게시판에 적용되어 사용되고 있습니다. 게시판 뿐 아니라 페이지의 각 디자인요소에도 사용될 수 있으므로 페이지 제작 시 활용할 수 있습니다. https://devktheme.mycafe24.com/%eb%94%94%ec%9e%90%ec%9d%b8%ec%9a%94%ec%86%8c/%eb%9d%bc%ec%9d%b4%ed%8a%b8%eb%b0%95%ec%8a%a4-lightbox/ “LightGallery”의 주소는 다음과 같습니다: https://www.lightgalleryjs.com/
modernizr
“Modernizr”는 HTML, CSS 및 JavaScript 기능의 지원 여부를 감지하는 라이브러리입니다. 이 라이브러리는 브라우저의 지원 범위를 확인하고, 지원되지 않는 기능을 대체하는 방법을 제공하여 웹 개발자가 모든 브라우저에서 일관된 경험을 제공할 수 있도록 도와줍니다. “Modernizr”는 플러그인을 사용하지 않으며, 단순한 자바스크립트 파일을 제공합니다. 이 파일은 브라우저가 해당 기능을 지원하는지 여부를 확인하고, 결과를 HTML 요소의 클래스에 추가합니다. 개발자는 이러한 클래스를 사용하여 CSS 스타일을 변경하거나 JavaScript 코드를 실행할 수 있습니다. “Modernizr”의 주소는 다음과 같습니다: https://modernizr.com/
slick slider
케이테마는 외부슬라이더를 지원하지만 내부적으로는 “Slick Slider”를 통합하고 있습니다. “Slick Slider”는 반응형 이미지 및 동영상 슬라이드쇼를 제공하는 jQuery 플러그인입니다. 이 플러그인은 사용하기 쉽고 매우 유연하며, 커스터마이즈할 수 있는 다양한 옵션을 제공합니다. “Slick Slider”는 다양한 슬라이드쇼 기능을 제공합니다. 예를 들어, 자동 재생, 무한 루프, 드래그 및 스와이프 기능, 다양한 전환 효과, 캐러셀 모드 등이 포함됩니다. 또한 사용자 지정 이벤트 및 콜백 함수를 지원하여 개발자가 슬라이드쇼의 동작을 더욱 세밀하게 제어할 수 있습니다. “Slick Slider”는 다양한 프로젝트에서 사용할 수 있으며, 이미지 및 동영상 캐러셀, 제품 슬라이더, 브랜드 로고 슬라이더 등에 적합합니다. 또한 “Slick Slider”는 다양한 브라우저와 기기에서 작동하며, 반응형 디자인을 지원하여 모바일 및 데스크톱에서 동작할 수 있습니다. “Slick Slider”의 주소는 다음과 같습니다: https://kenwheeler.github.io/slick/
owl.carousel
“Owl Carousel”는 가장 많은홈페이지에서 사용하는 플러그인 중 하나입니다. “Owl Carousel”은 반응형 이미지 및 동영상 슬라이드쇼를 제공하는 jQuery 플러그인입니다. “Owl Carousel”은 매우 유연하며 다양한 기능을 제공하여 사용자가 슬라이드쇼를 맞춤화할 수 있도록 도와줍니다. “Owl Carousel”은 다양한 슬라이드쇼 기능을 제공합니다. 예를 들어, 자동 재생, 무한 루프, 드래그 및 스와이프 기능, 다양한 전환 효과, 캐러셀 모드 등이 포함됩니다. 또한 슬라이드쇼의 크기 및 레이아웃을 조정하고, 사용자 정의 이벤트 및 콜백 함수를 사용하여 동작을 세밀하게 제어할 수 있습니다. “Owl Carousel”은 다양한 프로젝트에서 사용할 수 있으며, 이미지 및 동영상 캐러셀, 제품 슬라이더, 브랜드 로고 슬라이더 등에 적합합니다. 또한 “Owl Carousel”은 다양한 브라우저와 기기에서 작동하며, 반응형 디자인을 지원하여 모바일 및 데스크톱에서 동작할 수 있습니다. “Owl Carousel”의 주소는 다음과 같습니다: https://owlcarousel2.github.io/OwlCarousel2/ 케이테마는 위 플러그인을 기반으로 운영되고 있습니다. 별도의 사이트개발이나 디자인 변경시 참고하시기 바랍니다. 각 플러그인은 테마업데이트와 함께 지속적으로 업데이트 됩니다.
최신버전에 대한 확인은 https://www.cosmosfarm.com/products/kboard 페이지에서 확인할수 있으며 케이보드 6.3 버전은 아래 다운로드 버튼을 이용해 바로 받을 수 있습니다. 
플러그인 > 새로추가 > 플러그인 업로드 순으로 이동하여 업로드 버튼을 클릭합니다. 위에서 플러그인을 다운로드 받은 폴더로 이동하여 게시판 플러그인 먼저 선택을 해줍니다. 파일 이름은 “kboard-wordpress-plugin-버전.zip” 형태로 되어 있습니다. 
파일 선택 후 지금설치 버튼을 눌러서 설치를 진행합니다. 잠시 기다리면 설치완료화면이 표시됩니다.
플러그인 페이지로 이동하면 게시판/댓글 플러그인이 모두 정상적으로 활성화 된 것을 볼 수 있습니다. 간혹 플러그인 업로드 시 오류가 발생하는 경우가 있습니다. 그런 경우 
ftp에 접속하여 위 경로처럼 넣어줍니다. wp-content/plugins/kboard와 같이 업로드 된 것이 확인되면 완료된 것입니다. 이제 관리자페이지로 접속하여 플러그인을 따로 활성화 해줘야 합니다. 
관리자페이지 플러그인 > 설치한 플러그인 페이지로 이동하면 위와같이 화면이 표시됩니다. 활성화 버튼을 눌러서 두개 플러그인을 활성화 해줍니다. 
위 화면과 같이 관리자화면 왼쪽에 케이보드 메뉴가 생성되면 정상적으로 설치된 것입니다. 이제 케이보드를 생성하고 다양한 스킨을 활용하여 여러분의 홈페이지를 꾸며볼 수 있습니다. 각 메뉴에 대한 설명과 이용방법은 다음장에서 설명해드리겠습니다.
다양한 유료스킨이 함께 제공되고 있으며 갤러리형, 웹진형, 질문답변스킨, 캘린더 스킨, 프랜차이즈 스킨, 동영상 스킨 등을 이용할 수 있습니다.
망보드는 각 패키지별로 다음과 같은 특징이 있습니다.
정규 커스텀 포스트 타입을 사용합니다.
일부 게시판 플러그인은 워드프레스의 정규 커스텀 포스트 타입을 사용하지 않습니다. 따라서 워드프레스와 분리된 별도의 백업 등을 필요하며 다른 플러그인과의 연동에도 문제를 일으킵니다. 레인보드는 워드프레스의 커스텀 포스트 타입을 충실히 지키니다. 예를 들어 레인보드의 댓글 조차 워드프레스의 기본 댓글을 사용합니다. 또한 디스커스 등 수 많은 다른 댓글 플러그인을 이용하셔도 좋습니다.
정규 회원 권한(user role)을 사용합니다.
따라서, User Role Editor와 같은 플러그인을 이용해 새로운 회원 권한을 만들면 곧 바로 레인보드에서 이를 사용할 수 있습니다. 보다 정교환 회원권한 관리를 원한다면 레인보드가 해답입니다. 기기의 해상도에 따라 최적의 레이아웃이 자동으로 출력됩니다.
게시판 권한 설정
읽기, 쓰기 등 상세한 권한 설정이 가능합니다. 관리자는 별도의 설정 없이 모든 권한을 가집니다.