워드프레스의 기본 빽업(backup) 기능


워드프레스는 자체적으로 시스템을 빽업할 수 있는 기능을 내장하고 있습니다. 내장된 빽업기능은 왼쪽 사이드바 메뉴에서 도구 > 내보내기 메뉴에 있습니다.



내보내기 메뉴에 들어오면 워드프레스에 내장된 backup 기능을 사용할 수 있습니다. 수작업으로 필요시에 데이터를 backup 한 뒤에 가져오기를 통해서 backup 데이터를 import 할 수 있습니다. 


워드프레스에 내장된 빽업 기능을 사용하는 것도 좋지만, 주기적으로 시스템 자동빽업 기능으로 사이트를 편리하게 관리하고 싶다면 플러그인을 활용해서 좀더 파워풀한 빽업기능을 사용하는 것이 좋습니다.

빽업 기능자체가 중요한 기능이기 때문에 플러그인 또한 검증된 플러그인을 설치하는 것이 좋습니다. 만약 빽업 플러그인을 통해서 빽업을 받은 상태에서 시스템을 복원해야할 경우가 생길 때 빽업받은 화일이 오류가 있거나 동작이 되지 않는다면 진퇴양난의 상황에 직면할 것입니다. 그래서 검증된 플러그인의 사용은 중요합니다. 

워드프레스 빽업 플러그인으로 거의 독보적인 점유율을 차지하고 있어서 빽업 끝판왕이라 해도 손색이 없는 BackWPup 플러그인입니다. BackWPup 플러그인은 제가 사용해보고 여러차례 테스트해보았지만 빽업 기능의 오류가 없고 복원도 정상적으로 작동하는 훌륭한 플러그인입니다.



워드프레스 빽업은 나한테 맡기라 BackWPup 플러그인 설치하기


BackWPup 플러그인을 설치하기 위해서 왼쪽 사이드바 메뉴에서 플러그인 > 플러그인 추가하기 메뉴를 클릭합니다.



플러그인 검색창에서 backwpup 을 입력하고 검색합니다. BackWPup 플러그인은 40만명 이상이 사용하고 있는 대표적인 backup 플러그인임을 확인할 수 있습니다. 최근 업데이트도 4주 전에 있을 정도로 시스템 유지보수 및 지원 관리도 잘되고 있습니다. 지금 설치하기 버튼을 클릭해서 플러그인을 설치합니다.




플러그인 설치가 완료되었습니다. 플러그인을 활성화 링크를 클릭합니다.     



플러그인 설치가 완료되면 왼쪽 사이드바 메뉴에 BackWPup 이라는 메뉴가 생성된 것을 확인할 수 있습니다.     



플러그인이 설치되면 처음에는 플러그인 설명을 하는 화면이 나타납니다.





     

원클릭으로 워드프레스를 바로 빽업하기


먼저 BackWPup > Dashboard 메뉴에 들어갑니다. 



Dashboard 화면에서는 원클릭 빽업 기능을 제공합니다. 여러가지 부수적인 세팅을 하지 않아도 클릭한번으로 바로 워드프레스를 빽업하는 기능입니다. 원클릭 빽업은 간단합니다. 바로 아래 화면에 Download database backup 버튼을 클릭하면 됩니다. 아래 버튼을 클릭합니다.




버튼을 클릭하자마자 자신의 컴퓨터에 sql 화일이 다운로드 된 것을 확인할 수 있습니다. sql 화일은 워드프레스의 데이터베이스의 화일입니다. 여기에서는 MySQL을 데이터베이스로 사용하고 있기 때문에 MySQL 안에 있는 워드프레스 데이터베이스 전체가 빽업된 것입니다. 이 화일만 있으면 자신의 워드프레스 데이터베이스가 손상되었다해도 다시 복원할 수 있는 것입니다.




그럼 이제 본격적으로 BackWPup 플러그인을 사용해보도록 하겠습니다.


# 빽업 작업을 만들고 시스템 전체 빽업하기

시스템 빽업을 하기 위해서는 신규 빽업작업을 만들어야 합니다. BackWPup에서는 빽업작업을 Job이라고 합니다. 신규 빽업작업을 만들기 위해서 왼쪽 사이드바에서 BackWPup > Add new job 메뉴를 클릭합니다.



Add new job메뉴를 클릭하면, 빽업 작업을 만드는 화면이 나타납니다. 다른 것은 바꿀 필요가 없고 아래 박스로 표시한 부분만 변경합니다. 먼저 General 탭에서 Jab Name 항목에 시스템 전체 빽업이라고 작성합니다. 그리고 아래쪽에 Archive Format 항목은 Zip 부분에 체크를 합니다. 기본으로는 Tar GZip으로 되어있으나 Tar GZip은 테스트해본 결과 압축해제시 에러가 발생했습니다




Job Destination은 빽업 받은 화일의 목적지를 정하는 항목으로 일단 첫번째 Backup to Folder 항목에 체크를 합니다. 이렇게 설정한 뒤 일단 아래쪽의 저장버튼을 클릭해서 신규 빽업작업의 설정내역을 저장합니다.



빽업 받은 화일은 어디에?


빽업 작업이 수행되면 빽업 받은 화일이 어디에 생성되는지는 알아야합니다. 상단 오른쪽에 To:Foler 탭을 클릭합니다.
이 화면에 들어오면 uploads/backwpup-0ab680-backups/ 폴더안에 빽업화일이 생성되는 것을 확인할 수 있습니다.



 uploads 폴더는 자신의 웹호스팅 서버나 로컬PC의 워드프레스가 설치된 디렉토리 경로에서 /wp-content/uploads 폴더를 말합니다.



워드프레스 전체빽업 실행하기


조금전 신규 빽업 작업을 시스템 전체빽업이라고 만들었습니다. 이제 생성한 신규빽업 작업을 실행해서 워드프레스를 빽업할 차례입니다. 왼쪽 사이드바에서 BackWPup > Jobs 메뉴를 클릭합니다.


Jobs 메뉴에 들어오면 조금전 만들었던 신규 작업인 시스템 전체 빽업이 나타납니다. 맨 오른쪽을 보면 Last Run 항목이 not yet으로 아직 빽업 작업이 수행되지 않된 것을 확인할 수 있습니다.

만약 추가적으로 빽업 작업에 수정할 일이 있다면 Edit를 클릭해서 수정하면 됩니다. 
화살표가 가르키는 Run now을 클릭하면 전체 빽업이 진행됩니다. Run now 링크를 클릭합니다.



빽업 작업이 진행되고 있습니다. 프로그레스 진행바가 표시되면서 빽업 작업이 진행됩니다. 자신의 워드프레스 사이트의 규모에 따라서 작업 시간이 소요될 것입니다. 그렇지만 일반적으로 빽업시간은 그리오래 걸리지 않습니다.



전체 빽업 작업이 완료되었습니다. 프로그레스 진행바가 100%로 표시되면 완료된 것입니다. 전체 작업시간은 14초가 걸렸습니다.
아래처럼 목록을 통해서 작업시간과 로그를 확인할 수 있습니다.




빽업 화일 확인하기


워드프레스 시스템 빽업 작업이 완료되었으므로 빽업한 화일을 확인해야합니다. 워드프레스 서버에서 작업을 한 경로로 이동합니다. FTP 프로그램을 이용해서 자신의 서버에 접속합니다. 로컬PC에 설치한 유저는 로컬의 경로로 이동하면 됩니다.

/wp-content/uploads 디렉토리 경로로 이동하니 backups, logs, temp 세 개의 폴더가 신규로 생성된 것을 확인할 수 있습니다.
backups 폴더를 클릭하면 아래와 같이 zip화일로 압축된 워드프레스 빽업 화일을 나타납니다. 이 빽업화일은 데이터베이스 빽업 뿐아니라 워드프레스 서버내 화일도 모두 빽업된 화일입니다. 이 화일 하나만 있으면 자신의 워드프레스 사이트를 그대로 복원할 수 있는 것입니다.
logs 폴더는 로그화일이 있는 폴더이고 temp는 임시화일 폴더입니다. 



이번 시간에 공부한 배치작업은 수작업으로 사람이 클릭을 해서 빽업을 했지만 다음시간에 공부할 배치작업은 시간을 정해놓으면 주기적으로 자동 빽업을 받는 배치 작업에 대해서 알아보도록 하겠습니다.


사이트의 불청객 불퍼머


인터넷을 통해서 콘텐츠를 무단으로 복사해서 사용하는 불펌은 언제나 블로그나 웹사이트 운영자의 골치거리입니다. 자신의 사이트 콘텐츠를 다른 사람이 링크로 공유하는 것은 좋은 일이지만 불법 복사해서 사용하는 것은 반갑지 않은 일입니다. 특히 네이버나 티스토리등 블로그를 운영해서 이른바 파워블로거까지는 아니더라도 준파워블로거(대략 일방문자 5,000명 ~ 10,000명정도, 수치는 개인적인 생각) 수준의 블로그를 운영하는 사람이라면 불펌과의 전쟁은 한차례 치루었을 것입니다.


주객이 전도된 황당한 사건


저의 경우에도 네이버 블로그 운영시에 황당한 일을 여러번 겪곤했습니다. 당시에는 이른바 제품 리뷰성 블로그를 운영하고 있었습니다. 일방문객은 준파워블로그 수준이었습니다. 그런데 제가 운영했던 네이버블로그의 콘텐츠가 그대로 복사되어 제목만 변경되어서 다른 네이버 블로그에 게시되고 있었습니다. 그런데 더욱 황당한 것은 원본인 제블로그는 검색이 되지 않고, 제 것을 복사한 불퍼머의 블로그 내용만 네이버에서 검색되는 사건이었습니다.

저는 즉각 조치에 나섰습니다. 당장 저의 콘텐츠를 무단으로 도용한 블로거에게 댓글과 메일을 보냈고, 네이버 서비스팀에 해당 내용을 전달하였습니다.

결국 네이버 서비스팀에서 검토 후에 불퍼머의 게시물을 내리고 저의 콘텐츠를 다시 정상으로 검색되도록 조치하였습니다. 이 일로 저는 콘텐츠 보호에 대한 생각을 새롭게 하는 계기가 되었습니다.





워드프레스 콘텐츠를 보호하자


네이버와 마찬가지로 워드프레스로 만든 사이트 역시 마찬가지입니다. 워드프레스로 만든 자신의 사이트의 인지도가 높아질수록 자신의 콘텐츠는 불법복사의 위험에 노출될 확률이 높아집니다.

웹사이트상에서 불법 복사를 하는 가장 일반적인 방법은 두 가지가 있습니다.
첫번째는 마우스 드래그이고, 두번째는 마우스 우클릭을 이용해서 콘텐츠를 복사해가는 것입니다.
웹사이트 콘텐츠를 보호하는 방법은 여러가지가 있지만 일단 기본적인 두가지 기능으로 콘텐츠 보안 강화를 한다면, 불법 복사에 상당한 효과를 볼 수 있습니다.
 
이런 두 가지 기능을 웹사이트에 적용하려면 기술상으로는 일반적으로 자바스크립트 프로그래밍 기술이 사용됩니다.
그렇지만 워드프레스를 사용한다면 자바스크립트 코딩을 하지 않고 플러그인 설치와 활성화만으로 마우스를 이용한 콘텐츠 복사 방지 기능을 구현할 수 있습니다.


콘텐츠 복사 방지 파수꾼 WP Content Copy Protection & No Right Click 플러그인 설치


여기에서는 WP Content Copy Protection & No Right Click 플러그인을 사용하겠습니다.
콘텐츠 복사 방지 플러그인을 설치하기 위해서 관리자화면의 왼쪽 사이트바에서 플러그인 추가하기 메뉴를 클릭합니다.




플러그인 검색창에서 wp content copy를 입력하고 검색합니다. 첫번째 검색된 플러그인의 지금 설치하기 버튼을 클릭해서 설치합니다.



플러그인이 설치되었습니다. 플러그인을 활성화 링크를 클릭해서 플러그인을 활성화합니다.




마우스 복사 방지 기능 확인하기


콘텐츠 보안 플러그인이 제대로 설치되었는지 확인하는 것은 간단합니다. 플러그인이 설치되고 활성화되었다면 바로 테스트가 가능합니다.
자신의 워드프레스 사이트에 들어가서 마우스 우클릭 버튼을 클릭해보거나 마우스 드래그를 해보면 됩니다.
오른쪽 마우스를 클릭하면 아래 화면과 같이 경고창이 뜨고 마우스 오른쪽 버튼이 동작하지 않습니다.


또한 마우스 드래그해서 텍스트나 이미지를 복사하려해도 복사가 되지 않는 것을 확인할 수 있습니다.




페이지 관리의 가독성


워드프레스에서 기본으로 제공되는 페이지 관리 화면은 목록 형태의 화면으로 사이트의 전체 페이지 구조를 파악하는 데에 가독성이 떨어지는 것이 사실입니다. 페이지는 상하위의 구조가 트리 형태로 디스플레이 된다면 페이지를 관리를 좀 더 쉽게 접근할 수 있을 것입니다. 일반적으로 많은 페이지들은 메뉴와 연결된 경우가 많이 있습니다. 물론 메뉴는 카데고리나 사용자 정의로도 구성할 수 있습니다. 만약 페이지만으로 워드프레스 사이트의 메뉴를 구성한다면 페이지 관리화면의 가독성은 필요한 이슈가 될 것입니다.

현재 슈만 사이트의 예제 화면을 통해서 확인해보도록 하겠습니다. 사이트에 방문한 유저에게 보여지는 메뉴는 다음과 같습니다.




위와 같은 메뉴를 구성하기 위해서는 페이지 관리 화면에서 아래와 같이 페이지를 만들고 구성했습니다. 그렇지만 워드프레스에서 기본으로 제공되는 페이지 관리화면은 목록화 화면이기 때문에 페이지 구조가 한 눈에 들어오지는 않습니다. 가독성이 떨어지는 것입니다. 일반적으로 사람들은 목록화 화면보다는 트리 구조의 화면을 선호합니다.





페이지 구조를 트리 형태로 보기


Admin Menu Tree Page View 플러그인을 사용하면 트리 구조로 페이지를 보여주기 때문에 가독성이 높고 마우스 드래그앤드랍으로 페이지의 위치를 변경할 수 있습니다.
그렇지만 슬러그와 페이지본문에 대한 작업을 할 수 없기 때문에 추가적으로 페이지 관리화면에서 작업을 해야합니다. 페이지를 구성하는데 유용한 플러그인이라 할 수 있습니다. 최종 업데이트가 된지는 오래되었지만 워드프레스 4.2.2 버전에서 테스트한 결과 특별한 문제점은 발견되지 않았습니다.


Admin Menu Tree Page View 플러그인


Admin Menu Tree Page View 플러그인을 설치하기 위해서 왼쪽 사이드바 에서 플러그인 추가하기 메뉴를 클릭합니다.



플러그인 키워드 검색창에 admin menu tress page view 를 입력하여 검색합니다. 첫번째 검색된 플러그인의 지금 설치하기 버튼을 클릭합니다.



플러그인을 활성화 링크를 클릭해서 설치를 완료합니다.



플러그인의 설치가 완료되면 왼쪽 사이드바의 페이지 메뉴에 다음과 같이 트리 형태의 페이지 구조가 보여지는 것을 확인할 수 있습니다. 페이지들 중에서 메뉴로 구성한 것은 서비스 채널과 회사소개 메뉴입니다.



트리 형태로 보여주기 때문에 목록화 화면보다는 가독성이 높습니다. 서비스 채널 메뉴 앞에 마이너스(-) 모양의 폴더 아이콘을 클릭합니다.


아이콘 모양의 + 와 - 버튼을 클릭하면 폴더를 접었다 펼 수 있습니다.



위치 이동은 마우스 드래그앤드랍으로 가능합니다. 회사소개 메뉴를 마우스드래그앤드랍으로 서비스 채널 앞으로 옮겨보겠습니다. 회사소개를 클릭해서 드래그합니다.


마우스 드래그로 페이지 메뉴가 이동됩니다.


마우스로 간단하게 페이지의 위치 이동이 된 것을 확인할 수 있습니다. 그렇지만 동일한 Depth 안에서만 이동이 가능합니다. 



세부 수정 및 확인은 상세화면에서


회사소개 부분에 마우스를 오버하면 페이지 편집(Edit)과 보기(View) 기능이 제공됩니다. 또한 새로운 페이지를 만들기 위해서 After와 Inside 버튼을 클릭해서 신규 페이지를 작성할 수 있습니다. 상세화면에 들어가기 위해서 회사소개 부분을 마우스로 클릭합니다.



메뉴를 클릭하면 아래와 같이 페이지 편집화면으로 바로 이동됩니다. 이곳에서 페이지의 본문 내용이나 속성을 입력하면 됩니다.


워드프레스 사용자 권한 관리


사용자 권한 관리를 위해서 워드프레스는 기본적으로 사용자 메뉴를 제공합니다. 그렇지만 사용자 메뉴는 역할별 세부 권한 관리 기능은 제공되지는 않습니다. 먼저 워드프레스에 기본으로 제공되는 사용자 권한 기능을 확인해보면 이해가 빠릅니다.
왼쪽 사이드바에서 사용자 > 모든 사용자 메뉴를 클릭합니다.


모든 사용자 메뉴를 클릭하면 다음과 같은 화면이 나타납니다. 사용자의 권한을 변경하기 위해서는 목록화면에서 일괄 작업으로 권한 바꾸기를 할 수도 있고, 목록화면에서 해당 사용자의 사용자명을 클릭하여 들어가면 상세화면 안에서 권한 관리가 가능합니다.



사용자 명을 클릭하고 상세화면에 들어가면 아래와 같이 권한 관리를 할 수 있습니다. 그렇지만 특정 사용자별로 테마만 수정하게 한다든지 화일만 업로드 한다든지 하는 세부 권한 부여하는 기능은 별도로 존재하지 않습니다.



User Role Editor 플러그인


따라서, 이런 세부 권한이나 역할별 세부 권한을 설정하기 위해서는 별도의 플러그인을 설치해야 합니다. 워드프레스 사용자들이 세부 권한을 위해서 많이 사용하고 있는 플러그인은 User Role Editor입니다. 강력한 기능으로 현재 30만명 이상이 사용하고 있는 User Role Editor은 역할별 세부 권한 설정에 유용한 도구입니다. 그럼 플러그인을 설치하고 사용하는 방법을 알아보겠습니다. 왼쪽 사이드바 메뉴에서 플러그인 추가하기 메뉴를 클릭합니다.



플러그인 검색창에서 User Role Editor 를 입력하고 엔터를 칩니다. 맨 첫번째 검색된 User Role Editor를 설치하면 됩니다. 지금 설치하기 버튼을 클릭합니다.



플러그인을 활성화 링크를 클릭합니다.



역할별 권한 관리하기


왼쪽 사이드 메뉴에서 사용자 메뉴를 클릭하면 User Role Editor라는 서브 메뉴가 생성된 것을 확인할 수 있습니다. User Role Editor를 클릭합니다.



사용자의 역할별 세부 권한을 설정하는 화면이 나타납니다. 아래 화면에서 보는 것과 같이 역할별(편집자, 글쓴이, 기여자, 구독자)로 세부적이 권한이 체크박스로 나타난 것을 확인할 수 있습니다. 현재 구독자에게 기본적으로 부여된 권한은 읽기 권한입니다.    


구독자에게 읽기 권한 외에 추가적으로 페이지 발행 권한 및 파일 업로그 권한을 부여하려면 아래와 같이 체크한 뒤에 Update 버튼을 클릭하면 됩니다.



만약 편집자의 역할을 변경하기 위해서는 Selct Role and .. 항목에서 선택해서 변경하면 됩니다. 




사용자별 권한 관리하기


User Role Editor 관리 화면에서는 역할별로 사용자 관리를 하였습니다. 그렇지만 User Role Editor 플러그인은 사용자별 관리 기능도 제공합니다. 사용자별 관리를 하기 위해서는 사용자 > 모든 사용자 메뉴의 사용자 목록 화면에 들어가야 합니다. 사용자 목록 화면에서 개별 사용자명 부분에(여기에서는 honggildong) 마우스를 가져다 대면(마우스 오버를 하면) Capabilites 라는 텍스트 링크가 나타납니다. Capabilities를 누르면 개별 사용자인 홍길동에 대해서 User Role Editor 세부 권한 관리을 할 수 있는 것입니다. Capabilities를 클릭합니다.



개별사용자인 홍길동에 대한 세부 권한 관리 화면이 나타납니다. 이곳에서 원하는 세부 권한을 체크한 뒤에 Update 버튼을 클릭하면 개별 사용자별로 세부 권한을 조정할 수 있습니다. 이렇게 User Role Editor 플러그인은 세부 권한을 위해서 직접 MySQL DB 테이블을 엑서스 하지않아도 편리하게 세부 권한 조정이 가능한 유용한 시스템 플러그인입니다.



포스팅을 많이하다보면 글의 갯수가 늘어나기 마련입니다. 카데고리를 통해서 글을 관리한다고 해도 때로는 동일 카데고리 안에 있는 글의 순서를 조정할 필요를 느끼게 됩니다.
그렇지만 워드프레스에서 기본적으로 글의 발행 일자 순이나 역순으로만 글의 순서가 정해집니다. 따라서 글의 순서를 바꾸려면 발행되는 일시를 변경해야하는 번거로움이 있습니다.



Post Type Order 플러그인 설치 및 설정


그렇지만 Post Types Order 플러그인을 사용하면 간편하게 글의 순서를 조정할 수 있습니다. 플러그인을 설치하기 위해서 왼쪽 사이드바에서 플러그인 추가하기 메뉴를 클릭합니다.



오른쪽 플러그인 검색창에서 post types order를 입력하고 엔터키를 칩니다. 맨 왼쪽에 Post Type Order 플러그인이 검색됩니다. 30만명 이상이 설치한 대표적인 글관리 플러그인 입니다.



지금 설치하기 버튼을 클릭합니다.



플러그인을 활성화 링크를 클릭합니다.



왼쪽 사이드바 메뉴에서 설정을 클릭하면 Post Types Order 라는 서브메뉴가 생성된 것을 확인할 수 있습니다. Post Types Order를 클릭합니다.



Post Types Order 플러그인의 설정 화면이 나타납니다. 이곳에서 중요한 설정은 글에 대한 순서를 조정하는 사용자 권한을 정하는 것입니다. 일반적으로 글에 대한 통제는 편집자 이상으로 설정하는 것이 좋습니다. 따라서 Editor나 Administrator로 선택하고 저장버튼을 클릭합니다.



글의 순서 조정하기


플러그인의 설정이 완료되었으니 글에 대한 실재적인 순서를 조정할 차례입니다. 왼쪽 사이드바 메뉴에서 글을 클릭하면 Re-Order 라는 서브 메뉴가 생성된 것을 확인할 수 있습니다. Re-Order를 클릭합니다.



글의 순서를 조정할 수 있는 화면이 나타납니다. 아래 쪽에 있는 이미지 갤러리 만들기 글을 맨 앞으로 순서를 옮기겠습니다. 


순서를 조정하는 것은 간단합니다. 마우스로 이미지 갤러리 만들기 드래그해서 다음과 같이 배치하면 그만입니다. 불편하게 발행일자를 조정해서 글의 순서를 변경하지 않아도 되는 것입니다.



워드프레스 포스트 관리 및 예약기능의 끝판왕


워드프레스에서 작성한 포스트 갯수가 많아지면 각 포스트를 관리하는 것이 만만한 일은 아닙니다. 워드프레스 설치 시에 기본으로 제공되는 글 > 모든글 화면에서 한 눈에 포스트를 확인 및 관리하는 것 역시 쉬운일은 아닙니다. 기본 제공화면은 단순히 글에 대한 목록 화면이기 때문에 이번 달이나 지난 달에 내가 얼마만큼 포스트를 작성했는지 일일이 조회하면서 확인해야하기 때문입니다.

그렇지만 Editorial Calendar 플러그인을 사용하면 이런 고민을 해결 할 수 있습니다. Editorial Calendar 플러그인은 캘린더 즉, 월간 달력 형태의 관리 UI를 제공하고 있습니다. 포스트의 작성 현황이 캘린더에 표시되어 한 눈에 확인이 가능한 가독성 측면의 이점이 있습니다.

월간 달력 형태로 UI가 제공되는 것 뿐아니라 작성한 포스트에 대해서 마우스 드래그앤 드롭으로 포스트를 이동할 수 도 있습니다. (단, 포스트 공개 전에 가능합니다. 포스트 공개하기 버튼을 누른 상태에서는 마우스 드래그앤드롭 기능은 비활성화 됩니다.) 또한 월간 달력을 보면서 원하는 날짜를 클릭해서 바로 그 날짜에 포스트를 작성할 수 있습니다.

무엇보다 작성하는 포스트의 예약 기능이 있기 때문에 포스팅을 많이 할 때 무척 유용한 나만의 시스템 도우미가 됩니다.


Editorial Calendar 플러그인 설치하기


플러그인 추가하기 메뉴를 클릭합니다.



플러그인 검색창에서 editorial calendar를 입력하고 엔터키를 칩니다. 검색된 Editorial Calendar 에서 지금 설치하기 버튼을 클릭합니다.



플러그인을 활성화 링크를 클릭합니다.



플러그인 설치가 완료되면 왼쪽 사이드바 메뉴에서 글 > Calendar 라는 서브 메뉴가 생성됩니다. Calendar 메뉴를 클릭합니다.



Calendar를 클릭하면 캘린더 관리 화면이 아래와 같이 나타납니다.




Editorial Calendar 사용하기


오늘 일정으로 이동해서 Editorial Calendar를 사용해보도록 하겠습니다. Show Today 버튼을 클릭합니다.



Show Today 버튼을 클릭하면 아래 그림과 같이 오늘 날짜가 있는 월간 캘린더로 날짜가 이동됩니다. 그럼 이제 몇 개의 테스트용 포스트를 작성하고 이동 및 편집하는 과정을 확인하겠습니다.




포스트를 작성하기 원하는 날짜에 마우스를 가져다 대면 아래 화면과 같이 New Post 라는 텍스트가 나타납니다. 캘린더에서 12월2일 날짜 위에 마우스를 가져다대고 마우스 오버시 나타나는 New Post라는 텍스트를 클릭합니다.



간단하게 포스트를 작성할 수 있는 입력 창이 나타납니다.




글을 작성하는 입력창에서 Status 항목을 보면 세 가지 옵션이 나타납니다. 옵션은 다음과 같습니다.

Draft : 작성하는 포스트를 임시 저장하는 기능입니다.
Pending Review : 말그대로 작성한 포스트를 대기중 상태로 임시 보류하는 펜딩 기능입니다.
Scheduled : 유용한 기능인 포스트 예약 기능입니다. Scheduled 를 선택하고 위의 Time 항목에서 시간을 설정하면 해당 날짜의 시간에 작성한 포스트가 발행되는 기능입니다.



그럼 세 가지 옵션에 해당하는 테스트용 포스트를 각각 만들어보겠습니다. 첫번째는 Draft 상태로 작성하는 포스트입니다. 제목에 A70S 제품 사용법 안내라고 입력하고 본문을 작성한 뒤에 Status를 Draft로 선택하고 Save 버튼을 클릭합니다.



캘린더에서 12월2일에 임시저장 상태인 DRAFT 로 포스트가 작성되었습니다. 두번째 포스트는 Pending Review 상태로 작성하겠습니다. New Post를 클릭합니다.




두 번째 포스트의 제목과 본문을 아래과 같이 작성하고 Status 항목을 Pending Review로 선택한 뒤에 Submit for Review 버튼을 클릭합니다.



두 번째로 작성한 포스트는 PENDING 이라고 캘린더에 표기된 것을 확인할 수 있습니다. 세 번째 포스트는 예약 포스트로 작성하겠습니다. New Post 텍스트를 클릭합니다.



세 번째 포스트의 제목과 본문을 아래와 같이 입력합니다. 예약 포스트로 발행할 것이기 때문에 Status 항목을 Scheduled로 선택하고 Time에 예약 발행할 시간을 선택합니다. 예약시간은 30분 단위로 예약이 가능합니다. 선택이 완료되면 Save 버튼을 클릭해서 저장합니다.




세번째로 예약 발행한 A90S 제품 사용법 안내 포스트가 아래 화면과 같이 표시됩니다. 현재 세 개 포스트 모두 12월2일에 작성되었습니다. 이제 마우스 드래그앤드롭으로 마지막 작성한 포스트를 12월3일로 이동하겠습니다.







세번째 포스트위에 마우스를 가져다대고 12월3일로 드래그 합니다.


이처럼 Editorial Calendar 플러그인은 간단한 마우스 드래그로 포스트의 날짜를 변경할 수 있습니다. 그럼 실제 글목록에서 포스트 글이 제대로 작성되었는지 확인하겠습니다.



왼쪽 사이트바 메뉴에서 글 > 모든 글 메뉴를 클릭합니다.



캘린더에서 작성한 포스트 세 개가 모두 정상적으로 작성된 것을 확인할 수 있습니다. 각 세 개의 글은 임시글과 대기중 예약됨으로 글 작성 상태가 표시되고 마지막에 마우스 드래그앤드롭으로 12월3일 일정을 변경했던 A90S 제품 사용법 안내는 12월3일에 정상적으로 예약이 변경된 것을 확인할 수 있습니다.




킹콩보드


킹콩보드는 가장 최근에 만들어진 한국형 게시판 플러그인입니다. 최근에 만들어진 플러그인 답게 킹콩보드의 가장 큰 장점은 커스텀 포스트 타입을 지원하는 것입니다. 처음에는 커스텀 포스트 타입을 중요성을 느끼지 못할 수 도 있으나, 커스텀 포스트 타입 구조를 따르는 것은 추후 복잡해진 시스템 유지보수에서 중요한 역할을 차지합니다.

워드프레스 플러그인 중에서 커스텀 포스트 타입 구조를 지키는 플러그인들은 향후 유지보수가 유리하다라고 생각하면 됩니다.

킹콩보드 플러그인 설치


왼쪽 사이트바 메뉴에서 플러그인 추가하기를 클릭합니다.


     
플러그인 검색창에 kingkong board를 입력하고 엔터키를 칩니다. 맨 처음 검색된 Kingkong Borad의 지금 설치하기 버튼을 클릭합니다.



플러그인을 활성화 링크를 클릭합니다.



왼쪽 사이드바 메뉴에 아래와 같이 킹콩보드 메뉴가 생성된 것을 확인할 수 있습니다. 대시보드 를 클릭합니다.



킹콩보드 게시판 생성하기


카페24에서 호스팅을 받을 때 Global IT라는 무료 테마를 설치하였다면 킹콩보드가 자동으로 설치되었고 공지사항 게시판이 자동으로 만들어져있을 것입니다. 카페24를 이용하지 않는 경우에는 아래에 신규 게시판 생성 버튼을 클릭합니다.



신규 게시판을 생성하는 화면이 나타납니다. 이제 킹콩보드 게시판의 각 항목을 입력하고 게시판을 생성하도록 하겠습니다.



킹콩보드 게시판의 옵션은 상당히 많습니다. 이 옵션을 모두 설정하는 것은 불필요한 일입니다. 기본적으로 게시판 제목과 슬러그 및 권한 정도만 설정하면 일반적인 게시판으로 사용하는데 무리가 없습니다. 세부적인 설정은 사용해가면서 학습해 나가면 되는 것입니다.

킹콩보드에서 만드는 게시판은 이전에 만들었던 사이트 메뉴에서 서비스 채널 > FAQ 메뉴에 연결할 예정입니다. 따라서 킹콩보드 게시판은 FAQ 게시판 용도로 만들 것입니다.


게시판 옵션에서 제목을 아래와 같이 FAQ 게시판으로 입력하고 게시판 슬러그에는 faqboard 를 입력합니다.




FAQ 게시판을 만들것이므로 권한 조정이 필요합니다. 일반 유저들은 글을 읽기만하고 편집자(Editor)이상 권한 부여자만 게시판에 글을 쓸 수 있도록 아래와 같이 권한을 조정합니다.



다른 옵션을 디폴트로 하고 옵션 화면 맨아래에 게시판 생성 버튼을 클릭합니다.




게시판을 생성한 뒤에 다시 왼쪽 메뉴에서 킹콩보드를 클릭하면 다음과 같이 FAQ 게시판이 생성된 것을 확인할 수 있습니다. 이제 FAQ 게시판의 숏코드를 복사해서 사이트 메뉴의 페이지에 복사해서 붙여넣을 것입니다.



생성한 FAQ 게시판을 사이트 메뉴에 연결하기


현재 사이트 메뉴에서 서비스 채널 > FAQ 를 클릭해보면 FAQ 페이지는 아무것도 없는 공백 페이지인 것을 확인할 수 있습니다.



킹콩보드 화면에 들어가서 숏코드는 복사합니다. 생성한 FAQ 게시판의 숏코드는 [kingkong_board faqboard] 입니다.



이제 사이트에서 FAQ 메뉴에 연결되어 있는 페이지를 찾아서 숏코드를 붙여넣으면 됩니다.



페이지 메뉴에서 FAQ 페이지에 들어가서 복사했던 숏코드를 본문에 붙여넣은 뒤에 업데이트 버튼을 클릭합니다.         



사이트 메뉴에서 서비스 채널 > FAQ 메뉴를 클릭하면 아래와 같이 FAQ 게시판이 생성된 것을 확인할 수 있습니다.
글작성을 위해서 글쓰기 버튼을 클릭합니다.




FAQ 제목과 내용을 입력하고 저장버튼을 클릭합니다.



저장이 완료되면 목록 화면이 나타납니다. 댓글을 확인하기 위해서 제목글 부분을 클릭합니다.


댓글을 입력하고 등록 버튼을 클릭합니다.



입력한 댓글이 아래와 같이 디스플레이되는 것을 확인할 수 있습니다.



국내 웹사이트만의 독특한 현상


국내 웹사이트의 독특한 현상이 한 가지 있습니다. 그것은 바로 웹사이트의 게시판 기능입니다. 우리나라에서는 웹사이트 게시판이 일반인들에게 활성화 되어있지만 외국의 경우에는 그렇지 않습니다. 해외에서는 게시판 보다는 포럼 형태가 보편화 되어있습니다. 워드프레스의 태생 자체가 외국에서 개발되다보니 오랫동안 우리 입맛에 맞는 게시판이 많이 있지는 않았습니다. 그렇지만 워드프레스가 국내에도 대중화 되면서 게시판 플러그인이 점차 확산되고 있습니다.

대한민국 대표 게시판 KBoard 플러그인의 장단점


현재 국내에서 가장 많이 사용하고 있는 게시판 플러그인은 KBoard 입니다.
KBoard 플러그인의 장점 세 가지 정도가 있습니다.
첫째, 사용자가 많다는 점입니다. 사용자가 많으면 아무래도 문제 발생시에 도움과 해결책을 찾아보기 쉽습니다.
둘째, 우리가 사용하기에 친숙한 UI 구조를 가진다는 점입니다.
세째, 무료 게시판 스킨 외에 유료로 구입하면 세련된 게시판으로 꾸미기가 가능합니다.

그렇지만 아쉬운 점은 KBoard의 경우에는 커스텀 포스트 타입 구조를 따르고 있지 않아서 워드프레스의 내보내기 기능으로 빽업을 하는 것이 어렵습니다. 따라서 KBoard 자체 빽업 기능을 이용해야 합니다.

KBoard 플러그인 설치


KBoard 플러그인을 설치하기 위해서 워드프레스 플러그인 사이트에 등록되어 있지 않아서 왼쪽 사이드바 메뉴에서 플러그인 추가하기로 설치를 할 수 없습니다.



따라서 KBoard를 만든 제작사인 코스모팜 사이트에 들어가서 다운로드를 받아서 설치를 해야합니다.
그럼 웹브라우저를 열고 코스모팜 사이트( http://cosmosfarm.com ) 에 접속합니다. 메뉴에서 제품 > KBoard를 클릭합니다.




KBoard 플러그인을 다운받을 수 있는 화면이 나타납니다. 아래에 두 개의 플러그인을 다운로드 받을 수 있도록 되어있습니다.
첫번째 kboard-wordpress-plugin-5.0 플러그인은 KBoard 플러그인으로 반드시 다운로드 받아서 설치해야하는 필수 플러그인이고 
두번째 kboard-comments-wordpress-plugin-4.1 플러그인은 KBoard 댓글 플러그인으로 선택 플러그인 입니다. 두 개의 플러그인을 모두 다운로드 링크를 클릭해서 다운로드 받습니다.





로컬 PC에 다음과 같이 정상적으로 파일이 다운로드 되었습니다. 



이제 다운받은 플러그인 두개를 설치하면 됩니다. 왼쪽 사이드바 메뉴에서 플러그인 추가하기 메뉴를 클릭합니다.



플러그인 추가 화면에서 상단에 있는 플러그인 업로드 버튼을 클릭합니다.



파일 선택을 해서 조금 전에 다운로드한 플러그인 zip 화일을 찾습니다.



먼저 KBoard 필수 플러그인을 선택합니다.



지금 설치하기 버튼을 클릭합니다.




플러그인을 활성화 링크를 클릭합니다. 나머지 한 개의 댓글 플러그인도 같은 과정으로 설치합니다.




KBaord 플러그인 사용하기


플러그인의 설치가 완료되면 왼쪽 사이드바 메뉴에 아래와 같은 KBoard 메뉴 아이콘이 생성된 것을 확인할 수 있습니다. KBoard 메뉴를 클릭합니다.      



KBoard 메뉴를 클릭하면 게시판 서브 메뉴가 펼쳐집니다. 게시판을 사용하기 위해서 먼저 게시판 생성을 클릭합니다.



게시판 관리 화면이 나타납니다. 이곳에서 게시판을 생성할 수 있습니다. 먼저 게시판 이름을 원하는 이름으로 변경하겠습니다.




게시판 이름을 고객문의 게시판으로 변경하고 댓글 사용 항목을 활성화로 선택한 뒤에 화면 맨 아래쪽에 변경사항 저장 버튼을 클릭합니다.




변경 사항 저장이 완료되면 생성된 게시판을 페이지에 연결하는 작업을 해야 합니다. 게시판을 페이지에 연결하는 작업은 두 가지 방법이 있습니다. 게시판 자동 설치에서 바로 페이지를 연결해도 되고, 게시판 숏코드는 복사해서 페이지를 생성한 뒤에 붙여 넣어도 됩니다.




우리는 이전에 사이트의 메뉴를 만들면서 서비스 채널 > 문의 게시판 이라는 빈 페이지를 만들어 놓은 것이 있습니다. 바로 이곳에 KBoard 게시판을 연결하도록 하겠습니다.







게시판 관리의 게시판 자동 설치 항목에서 문의 게시판을 선택한 뒤에 저장 버튼을 클릭합니다. 이렇게 되면 KBoard 게시판과 메뉴 페이지가 자동으로 연결되어집니다. 



연결이 제대로 되었는지 웹사이트의 메뉴에서 서비스 채널 > 문의 게시판을 클릭합니다.




원래 빈 페이지였던 곳에 KBoard 게시판이 생성된 것을 확인할 수 있습니다. 게시판에 글을 쓰기 위해서 글쓰기 버튼을 클릭합니다.




문의 내용을 작성하고 저장버튼을 클릭합니다. 비밀글이나 공지사항 기능도 함께 제공되고 썸네일과 첨부화일도 첨부가 가능합니다.



저장이 되었습니다. 목록보기 버튼을 클릭해서 목록화면에서 어떻게 보여지는지 확인합니다.



문의 게시판에 작성한 첫번째 글이 등록되었습니다. 이제 댓글을 입력해 보겠습니다. 문의글 제목 부분을 클릭합니다.



댓글을 작성하고 입력 버튼을 클릭합니다.




작성한 댓글이 다음과 같이 글의 아래쪽 부분에 나타나게 됩니다.


워드프레스를 오래 사용하다 보면 많은 플러그인을 설치하게 됩니다. 플러그인이 늘어나면서 관리자 화면의 왼쪽 사이드바 관리자 메뉴 항목이 너무 많아지는 것 경우가 일반적입니다. 그렇게 되면 아래 쪽에 위치한 플러그인은 잘 보이지 않아서 작업을 하기가 불편합니다. 이럴때 유용하게 사용할 수 있는 메뉴 관리 플러그인이 있습니다. 바로 Admin Menu Editor 입니다.




메뉴 정리 플러그인 Admin Menu Editor


Admin Menu Editor는 메뉴 정리 플러그인 중에서 가장 많이 사용하는 대표적인 플러그인입니다. 플러그인 추가하기 화면에 들어가서 검색창에서 Admin Menu Editor를 넣고 엔터키를 칩니다.




대표적인 플러그인 답게 10만명 이상이 설치해서 사용하고 있으며, 플러그인 업데이트도 3개월 전에 이루어져서 안심하고 사용할 수 있습니다. 지금 설치하기 버튼을 클릭합니다.



플러그인 설치가 완료되었습니다. 플러그인을 활성화 링크를 클릭합니다.



관리자 화면의 왼쪽 사이드바 메뉴에서 설정을 클릭하면 Menu Editor 라는 서브 메뉴가 생성된 것을 확인할 수 있습니다. Menu Editor를 클릭합니다.



Menu Editor 관리 화면이 나타납니다. 오른쪽 Menu Editor 관리화면에 왼쪽 사이드바에 있는 메뉴들이 그대로 있습니다.




이제 아래 쪽에 있는 왼쪽 사이드바의 Pricing Table 메뉴를 위쪽의 페이지 메뉴 아래로 옮기도록 하겠습니다.



방법은 간단합니다. 아래의 화면처럼 Pricing Table 메뉴를 마우스로 클릭한 뒤 드래그해서 페이지 메뉴 아래로 옮긴 뒤에 Save Changes 버튼을 클릭하면 됩니다. 



작업이 완료되면 아래 그림과 같이 메뉴의 위치가 변경된 것을 확인할 수 있습니다.



HTML과 CSS을 사용해서 제품이나 서비스에 대한 가격 정보를 제공하는 페이지를 하나 만드는 것이 결코 쉬운 일은 아닙니다. HTML에 대해서 숙련된 사용자라면 모르겠지만 그렇지 않은 일반 유저에게는 하나의 HTML 페이지를 만드는 것도 고역일 수 있습니다. 그렇지만 워드프레스에서는 그럴 필요가 없습니다. 원하는 기능에 맞는 플러그인만 설치하면 HTML 작업 없이 그 작업을 훌륭히 해낼 수 있습니다.

가격을 표시하는 페이지를 만들 때 많이 사용하는 플러그인은 Easy Pricing Tables Lite by Fatcat Apps 플러그인 입니다. 플러그인을 설치하기 위해서 왼쪽 사이드바 메뉴에서 플러그인 > 플러그인 추가하기 를 클릭합니다.




오른쪽 플러그인 검색창에서 Easy Priceing Tables Lite 를 입력하고 엔터를 칩니다. 




맨 첫번째에 나온 Easy Pricing Tables Lite by Fatcat Apps 를 설치하겠습니다. 지금 설치하기 버튼을 클릭합니다.



플러그인이 설치되었습니다. 플러그인을 활성화 라는 텍스트 링크를 클릭합니다.



플러그인을 활성화 하고 나자 왼쪽 사이드바 메뉴에서 Pricing Tables 라는 메뉴가 생성되었습니다.



플러그인으로 서비스 가격표 만들기


왼쪽 사이드바 메뉴에서 Pricing Tables > Add New 를 클릭합니다.




제목 란에 우리의 서비스 가격표 라고 입력합니다.



New Column 버튼을 클릭해서 컬럼은 총 3개로 만듭니다. 



이제는 3개의 컬럼 테이블에 제공 서비스 내역과 가격을 Plan Name, Pricing, Plan Features, Button Text, Button URL 등을 항목별로 입력합니다.

Plan Name : 제공할 제품 및 서비스의 이름을 입력합니다.
Pricing : 서비스 가격을 입력합니다.
Plan Features : 제공되는 서비스의 세부 내역을 입력합니다.
Button Text : 버튼 위에 표시되는 텍스트를 입력합니다.
Button URL : 버튼을 클릭했을 때 이동되는 페이지를 표시합니다.

모든 항목을 입력한 뒤에 3D 프린팅 부분에는 Feature 버튼을 클릭 한 뒤 저장 버튼을 클릭합니다.



숏코드를 가져오기 위해서 하단에 있는 Deploy 버튼을 클릭합니다.




서비스 가격 페이지 만들기


이제는 가격표 플러그인을 화면에 보여줄 페이지를 만들 차례입니다.
새로운 페이지를 만들어서 제목을 다음과 같이 입력하고 Insert pricing table 버튼을 클릭합니다.



선택 콤보 박스에서 조금전에 만든 우리의 서비스 가격표를 선택한 뒤에 Isert 버튼을 클릭합니다.



가격표 숏코드가 본문에 자동으로 삽입된 것을 확인할 수 있습니다. 미리보기 버튼을 클릭해서 가격표 페이지가 정상적으로 보이는지 확인합니다.



사용자 화면에서 제작한 서비스와 가격이 제대로 디스플레이 되는 것을 확인할 수 있습니다.




워드프레스에서 기본으로 제공하는 이미지 갤러리 외에 Jetpack 플러그인을 사용하면 타일 형식의 이미지 갤러리를 이용할 수 있습니다. Jetpack 플러그인은 워드프레스 닷컴의 계정이 있어야만 사용할 수 있는 플러그인입니다.
Jetpack 플러그인은 여러가지 기능이 묶여있는 통합 플러그인 팩입니다. 자주 사용하는 기능이 많은 플러그인으로 설치하면 유용하게 활용할 수 있습니다

Jetpack 플러그인 설치


왼쪽 사이드바 메뉴에서 플러그인 > 플러그인 추가하기 를 클릭합니다.



플러그인 검색창에서 Jetpack 을 입력하고 검색합니다.



첫번째 나오는 플러그인이 설치하려고하는 Jetpack 플러그인입니다. 지금 설치하기 버튼을 클릭합니다.



플러그인 설치가 완료되었습니다. '플러그인을 활성화' 링크를 클릭합니다.



왼쪽 사이드바 메뉴 상단에 알림판 밑에 Jetpack 메뉴가 생성된 것을 확인할 수 있습니다.



왼쪽 사이드바 메뉴에서 플러그인 > 설친된 플러그인 을 클릭합니다.



이곳은 설치된 플러그인의 목록을 볼 수 있습니다. Jetpack은 워드프레스닷컴 계정이 있어야 사용이 가능합니다.



상단 화면에 'Connect to Wordpress.com' 이라는 버튼이 보입니다. 워드프레스닷컴 계정 인증을 위해서 클릭합니다.



그렇지만 연결이 되지 않고 Jetpack 오류가 발생합니다.




오류 내용을 자세히 보니 xml_rpc-32700 에러입니다. 이런 경우에는 카페24 호스팅의 설정 때문에 발생한 것입니다. 카페24에서 제공하는 스팸 필터의 기능으로 발생한 에러이기 때문에 카페24에서 설정을 바꾸면 문제를 해결할 수 있습니다. 



카페24 스팸 필터 기능 설정


카페24 홈페이지에 로그인 한 뒤에 '나의서비스관리'를 클릭합니다.



왼쪽 메뉴에서 계정관리 > 스팸 SHILED 를 클릭합니다. 현재 스팸 필터의 기능이 사용함으로 되어있습니다.
이것을 사용안함으로 선택한 뒤에 적용버튼을 클릭합니다.




다시 '설치된 플러그인' 화면에서 워드프레스닷컴 연결 버튼을 클릭합니다.




워드프레스닷컴 계정 인증 화면이 나옵니다. 계정을 입력합니다. 워드프레스닷컴 계정이 없다면 만들어야 합니다. 계정을 입력한 뒤 승인하기 버튼을 클릭합니다.



계정이 성공적으로 인증되었습니다.





상단에 Settings 버튼을 클릭합니다.



30여가지의 사용가능한 플러그인 목록이 나옵니다. 아래로 내려서 타일갤러리를 찾습니다.



타일 갤러리 오른쪽에 Activate를 클릭해서 타일갤러리 플러그인을 활성화 시킵니다.




갤러리 편집 화면에서 Type 콤보를 클릭하면 Tiled Mosaic 라는 옵션을 선택한 뒤에 갤러리 업데이트 버튼을 클릭합니다.




갤러리 업데이트를 해도 글 편집화면 상에서는 타일갤러리로 보여지지는 않습니다. 저장을 한 뒤에 사용자 화면에서 보아야 타일갤러리 적용 화면을 확인 할 수 있습니다.



동일한 크기의 바둑판 형식의 일반 이미지 갤러리가 아닌 Jetpack 플러그인을 사용한 타일 갤러리가 만들어 진 것을 확인할 수 있습니다.






이전 포스팅)


문의하기 양식 만들기


일반적인 회사 홈페이지에서 Contact Us 라는 메뉴가 있습니다. 고객은 문의사항이 있을 때 Contact Us를 클릭해서 담당자에게 문의를 합니다.
문의하기 양식 페이지를 만드는 방법은 다음과 같습니다. 먼저 Contact Form 7을 사용해서 컨택폼을 만들고 만들어진 컨택폼에서 생성된 숏코드를 복사해서 문의하기 페이지에 복사한 숏코드를 붙여 넣으면 문의하기 양식이 완성됩니다.

왼쪽 사이드바에서 Contact 메뉴를 클릭하면 컨택트 폼을 추가하고 관리하는 화면이 나옵니다.


왼쪽에서 새로 추가 메뉴를 클릭합니다.




콘택트 폼을 추가하는 화면이 나옵니다. 기본 언어 사용하기의 새로 추가 버튼을 클릭합니다.



아래와 같이 콘택트 폼을 추가하는 화면이 나옵니다. 이 화면에서 문의하기 양식을 만들수 있습니다.
폼 탭 아래에 있는 Textarea 영역에 보면 이름, 이메일, 제목, 메시지, 보내기 버튼이 텍스트로 적혀있습니다.
이 곳을 편집해서 프론트엔드 쪽에서 입력하기 원하는 입력부분을 추가하거나 편집하면 됩니다.

여기에서는 문의하기 화면에 휴대폰 연락처와 문의유형을 두가지 항목을 기존 항목에 추가해 보도록 하겠습니다.





먼저 제목을 문의하기라고 적습니다.




휴대폰 연락처를 입력하기 위해서 tel 버튼을 클릭합니다.



tel 설정 팝업이 뜨면 필드 입력 필수체크 값인 Required field에 체크하고, 이름 란에는 휴대폰 연락처라고 입력하고 Insert Tag 버튼을 클릭합니다.



아래와 같이 태그가 자동으로 생성된 것을 확인할 수 있습니다. 



이 부분을 아래와 같이 변경합니다.


문의유형은 콤보박스로 만들겠습니다. 콤보박스로 만들기 위해서 drop-down menu를 클릭합니다.


필수 항목에 체크를 한 뒤에 Options 항목에 제품서비스 문의, 고객불만, 배송문의, 건의하기를 입력합니다.
첫번째 콤보박스를 아무것도 입력받지 않으려면 Insert a blank item as the first option에 체크박스를 합니다.
입력이 완료되면 Insert Tag 버튼을 클릭합니다.



Insert Tag의 입력이 완료된 뒤에 아래와 같이 문의유형의 텍스트 부분을 편집합니다.



숏코드를 복사


아래 적색 박스 부분이 완성된 컨택폼의 숏코드입니다. 마우스 오른쪽 버튼을 클릭해서 복사합니다.
복사한 숏코드는 문의하기 페이지를 만든 뒤에 붙여넣을 것입니다.





문의받을 메일 설정하기


고객이 문의한 내용에 대해서 관리자는 메일을 확인해야합니다. 자신의 메일 주소를 To 부분에 입력한 뒤에 저장하기 버튼을 클릭합니다. 





문의하기 페이지 만들기


왼쪽 메뉴에서 새 페이지 추가 버튼을 클릭합니다.



제목 란에 문의하기를 입력하고 본문 부분에는 미리 복사해 둔 컨택폼 숏코드를 붙여넣고 공개하기 버튼을 클릭합니다.



Contact Us 메뉴에 문의하기 페이지 연결하기


메뉴를 설정하기 위해서 외모 > 메뉴 를 클릭합니다.




왼쪽 페이지 부분의 모두 보기 탭을 클릭해서 문의하기 페이지를 찾습니다.



문의하기에 체크를 한 뒤에 메뉴에 추가 버튼을 클릭합니다.


맨 아래에 문의하기 메뉴가 추가된 것을 확인할 수 있습니다.



문의하기를 펼쳐서 네비게이션 라벨의 이름은 CONTACT US로 변경합니다. 네비게이션 라벨은 실제 웹사이트의 메뉴에서 보여지는 이름을 말합니다. 워드프레스는 네비게이션 라벨을 별도로 지정할 수 있어서 만들어진 페이지의 이름과 상관없이 자유롭게 메뉴이름을 지정할 수 있습니다. 입력을 완료한 뒤에 메뉴저장 버튼을 클릭합니다.




이제 www.shuman.kr 로 접속해서 메뉴와 문의하기 페이지가 정상적으로 작동하는지 확인합니다.



아래와 같이 조금 전에 만든 CONTACT US 메뉴가 상단 메뉴에 정상적으로 디스플레이 됩니다.



CONTACT US 메뉴를 클릭합니다. 문의하기 페이지가 정상적으로 디스플레이 되는 것을 확인할 수 있습니다.



문의유형 부분을 클릭해보면 등록했던 4가지의 문의유형이 정상적으로 보입니다.




이제는 문의내용을 입력한 뒤에 관리자 메일에 문의사항이 정상적으로 메일링 되는지 확인하도록 하겠습니다.
아래와 같이 입력 후 보내기 버튼을 클릭합니다.






성공적으로 전송되면 다음과 같은 메시지가 보입니다.



컨택폼에서 설정한 메일 계정으로 로그인해서 문의 내용이 정상적으로 메일링 되었는지 확인합니다.
구글로 로그인 해서보니 스팸함에 한 건의 메일이 왔습니다.




스팸으로 분류된 메일을 클릭합니다.




고객의 문의내용은 관리자 메일에 정상적으로 들어왔습니다. 그런데 스팸 메일로 분류되어 들어왔습니다. 
Gmail이나 일반적인 메일 사이트는 메일 발송 도메인과 웹사이트에 설정되어 있는 메일 주소의 도메인이 틀리면 스팸으로 분류를 합니다.
여기에서처럼 메일을 보낸 사이트의 도메인은 shuman.kr 인데 실제 메일 주소는 gmail.com 인 경우입니다. 이렇게 도메인이 다를때 문제가 발생하는 것입니다.
따라서 이럴때는 웹호스팅에서 제공하는 메일을 사용하는 것을 추천합니다. 웹호스팅에서 메일설정을 한 뒤에, 컨택폼의 메일 설정을 admin@shuman.kr과 같이 호스팅하고 있는 도메인 메일로 하는 것입니다.

이에 대한 카페24 호스팅 메일설정은 다음 시간에 계속 진행하도록 하겠습니다.




지난 시간에 로컬PC에 워드프레스를 설치하고 관리자 화면에 대한 기본적인 설명을 하였습니다. 
또한 로컬과 별도로 www.shuman.kr 이라는 도메인을 닷홈에서 구매하고, 카페24에서 호스팅을 받고 카페24 호스팅 공간에 워드프레스를 설치하는 과정도 함께 학습해보았습니다.

이번 시간에 할 일은 홈페이지에서 고객이 문의할 수 있는 메뉴와 페이지를 구성하겠습니다.

Contact Us 문의 양식을 만들고 폼메일 테스트 하는 것은 호스팅 서비스에 설치한 워드프레스에서 진행하도록 하겠습니다. 각각 개인적으로 복습하는 차원에서 로컬PC에서 관리자 화면에서 설정했던 부분을 호스팅을 받고 있는 워드프레스에 다실 설정해보도록 합니다. 

관련 포스팅)


워드프레스 폼메일 전송은 Contact Form7 플러그인으로 간편하게


일반적으로 홈페이지에서 문의하기나 문의양식은 Contact Us 라는 메뉴로 존재하는 경우가 많습니다. Contact Us의 프로세스는 해당 홈페이지에서 고객이 궁금한 점이 있을 경우 고객이 Contact Us 페이지에서 문의 내용을 작성하고 전송버튼을 누르면 워드프레스 관리자에게 메일로 해당 메일이 전달되어서 관리자가 확인하고 답변을 주는 방식입니다.

일반적인 웹시스템에서는 프로그램 개발이 필요한 부분입니다. 그렇지만 워드프레스는 플러그인으로 해결이 가능합니다.
워드프레스에서는 이런 기능을 하는 훌륭한 플러그인이 많이 있습니다. 여러 가지 플러그인 중에서 전세계에서 가장 많이 사용하는 보편적인 플러그인은 Contact Form 7 플러그인 입니다.




Contact Form 7 플러그인 설치


그럼 Contact Form 7 플러그인을 설치하겠습니다. 플러그인을 설치하기 위해서 왼쪽 사이드 메뉴에서 플러그인 > 플러그인 추가하기를 클릭합니다.



플러그인을 추가할 수 있는 화면이 나옵니다. 




오른쪽 상단에서 플러그인 검색창에서 Contact Form 7 을 입력하고 Enter 키를 누릅니다. 왼쪽 맨 처음에 Contac Form 7이 검색됩니다.




Contact Form 7은 백만명 이상이 설치하였다고 적혀있습니다. 일반적으로 많은 사용자가 사용한 플러그인이나 테마의 경우 검증작업이 된 안전한 테마라고 볼 수 있습니다. 오른쪽 상단에 지금 설치하기 버튼을 클릭해서 설치를 진행합니다.




플러그인의 설치가 완료되었습니다. 플러그인 설치가 완료되었다고 플러그인을 바로 사용할 수 있는 것은 아닙니다. 플러그인을 활성화 하는 작업을 하여야 플러그인을 사용할 수 있습니다. 플러그인을 활성화 하는 방법은 아래 화면에서 플러그인 활성화 링크를 클릭하거나 설치된 플러그인 화면에 들어가서 플러그인을 활성화 해주어야 합니다. 



왼쪽 메뉴에서 설치된 플러그인 화면을 클릭합니다.


지금까지 설치되어있는 플러그인이 나타납니다. 



Contact Form 7 아래에 있는 활성화 링크버튼을 클릭합니다.


활성화가 되면 바탕화면이 파란색 바탕으로 아래와 같이 변경됩니다.


활성화 되고나면 왼쪽 사이트바에 Contact 메뉴가 나타납니다.




이어지는 포스팅)
Contact Form 7 플러그인으로 문의하기 양식 만들기 (2)



+ Recent posts