이곳은 워드프레스 사이트 설정을 하는 곳입니다. 왼쪽 사이드바에서 설정 메뉴를 클릭합니다.
서브 메뉴에는 일반, 쓰기, 읽기, 토론, 미디어, 고유주소가 있습니다. 각각 서브 메뉴를 순서대로 설명하겠습니다.



일반 설정


일반 설정에서는 사이트의 제목과 태그라인등을 작성할 수 있습니다.

사이트 제목 : 웹사이트의 제목입니다. 디폴트는 설치시에 지정한 이름으로 적혀있습니다. 사이트의 특성에 맞게 수정하도록 합니다.
태그 라인 : 태그라인은 방문자에게 사이트를 요약해서 알려줄 수 있습니다.사이트의 설명이나 부제목 정도로 이해하면 됩니다.
워드프레스 주소 : 워드프레스가 실제 설치된 주소입니다.
사이트 주소 : 인터넷 브라우저 주소창에서 보이는 주소입니다. 사이트 주소가 반드시 워드프레스 주소와 동일하지는 않습니다.
이메일 주소 : 블로그 관리용 이메일 주소입니다.
새 사용자를 위한 기본 규칙 : 새 사용자가 만들어질 때 디폴트 사용자 권한입니다.
시간대 : 글의 작성 시간을 표시합니다.
날짜 표시 형식 : 한글이 포함된 것보다. 숫자로 이루어진 두번째 표시 형식을 추천합니다.
사이트 언어 : 사이트의 언어를 설정할 수 있습니다.



쓰기 설정


쓰기 설정은 특별히 설정할 것이 없습니다. 디폴트 설정 그대로 사용합니다.

기본 글 카테고리 : 글을 쓸 때 카데고리를 지정하지 않고 저장했을 때 자동으로 정해지는 카데고리를 설정하는 것입니다.
기본 글 형식 : 글을 쓸 때 기본으로 지정되는 글 형식입니다.





읽기 설정


전면 페이지 표시 : 사이트에 접속했을 때 어떤 화면을 보여줄지를 결정합니다.
최근 글은 블로그처럼 글을 작성한 순서대로 최신글이 맨 위에 위치하도록 하는 것입니다.
정적인 페이지는 특정 페이지를 만들고 사이트 접속시에 첫 화면에서 지정한 페이지를 볼 수 있도록 설정하는 것입니다. 단, 테마에 따라서 테마가 지정한 페이지로 설정되는 경우도 있습니다. 변경은 가능합니다.

페이지당 보여줄 글의 수 : 글 목록에서 몇개의 글을 보여줄지를 결정하는 것입니다.
보여줄 가장 최근의 신디케이션 피드 수 : RSS 피드에 대한 설정입니다. RSS는 Really Simple Syndication 의 약자로서 워드프레스 사이트에 있는 컨텐츠를 RSS로 퍼블리싱해서 사용자가 구독할 수 있도록 합니다. RSS는 일종의 컨텐츠 신문구독 시스템이라 생각을 해도 괜찮습니다.

검색 엔진 접근 여부 : 웹사이트가 완성되기 전까지는 체크를 해제하는 것이 좋습니다. 워드프레스 웹사이트가 완성된 이후에 체크해서 활성화 하면 됩니다.
체크를 하면 구글 검색엔진에 노출되고 구글 검색엔진의 정책 및 조건에 맞으면 색인(Indexing)이 되어서 작성한 글이 구글 검색으로 찾아볼 수 있습니다.          



토론 설정


토론 설정은 댓글에 관한 설정입니다.  

'댓글을 쓸 수 있게 합니다.' : 
회사소개등 페이지에 댓글을 다는 경우는 많지 않기 때문에 페이지 위주로 사이트를 구성할 경우에는 기본 글 설정에서 '댓글 쓸 수 있게 합니다' 를 비활성화 합니다. 그렇지만 블로그성 사이트라면 댓글을 허용하는 편이 좋습니다. 이곳에서 댓글 비활성화를 하여도 개별 글이나 페이지에서 댓글 사용 여부를 선택할 수 있습니다. 개별 글에서 설정한 것이 우선 적용됩니다.

'댓글을 쓴 사람의 이름과 이메일을 꼭 남겨야 됩니다' : 반드시 체크합니다. 스팸 로봇의 댓글을 막을 수 있습니다.

글쓴이에게 이메일 보내기 : 체크를 하면 댓글이 달릴 때 이메일로 알려줍니다.

댓글이 보이기 전에 : 댓글을 다는 것에 대한 승인 여부입니다. 해제하는 것이 좋습니다. 일일이 승인하려면 번거롭습니다.



미디어 설정


이미지의 사본의 크기를 설정하는 곳입니다. 워드프레스는 이미지 업로드시 자동으로 이미지 복사본을 만듭니다. 그 때 생성되는 이미지의 크기를 결정할 수 있습니다.



이미지 설정 팁)

워드프레스를 어느 정도 사용한 유저라면 고화질 이미지 업로드로 호스팅 서버의 하드디스크 용량을 다 써버려서 서버 용량을 추가로 증설해야 하는가? 하는 고민에 빠져본 경험이 있을 것입니다. 따라서 나름대로의 자신만의 이미지 업로드 정책이 필요할 것입니다.

미디어 설정에서 최대 크기의 이미지 폭은 가능한 1024 이하로 하는 것이 좋으며, 최대 크기의 이미지 폭은 워드프레스 전체 레이아웃의 크기와 맞추면 됩니다. 가령 예를 들어서 워드프레스 화면의 폭이 800 이라면 최대 크기의 이미지 폭은 800으로 맞추면 됩니다.

또한 아래처럼 이미지 세로 크기인 높이는 0으로 지정하면 워드프레스가 이미지 폭의 크기에 비례해서 자동으로 리사이징해서 이미지를 생성해주기 때문에 편리하게 이용할 수 있습니다.




고유주소 설정


고유주소 설정은 콘텐츠 글에 대한 URL 주소의 형식을 설정하는 것을 말합니다.
기본, 날짜와 이름, 월과 이름, 숫자, 글 이름, 사용자 정의 구조 중에서 선택할 수 있습니다.

가령, 기본으로 설정을 하면 http://shuman.kr/?p=123 형식으로 글에 대한 주소가 만들어집니다.
그렇지만 동일한 글이지만 글 이름으로 설정을 하면 http://shuman.kr/site-introduce 와 같이 글의 주제를 명시적으로 URL에 표기가 가능합니다
따라서 고유 주소 설정은 '글 이름' 으로 하는 것이 좋습니다.
(단, 페이지의 경우 기본으로 설정하지 않으면 무조건 글이름 형식으로 보여집니다.)







사용자 권한 관리


워드프레스 코어는 기본적으로 사용자의 권한 관리를 위한 사용자 메뉴를 제공합니다. 워드프레스에서 관리하는 사용자의 권한 등급은 아래와 같습니다.

워드프레스 사용자 권한 체계)

권한명
권한
구독자(Subscriber)
포스팅된 글을 읽고 댓글을 달 수 있습니다. 자신의 프로필 정보는 수정이 가능합니다.
기여자(Contributor)
글을 쓸 수는 있으나 글을 발행할 수는 없습니다.
글쓴이(Author)
글을 쓸 수도 있고 글을 발행할 수도 있습니다.
편집자(Editor)
기여자나 글쓴이의 글도 편집할 수 있습니다.
관리자(Administrator)
모든 권한을 가지고 있습니다.


국내에서 사용하는 일반적인 시스템의 권한 체계와는 조금 틀린면이 있습니다. 당장 권한의 이름만 보아도 꼭 언론사의 회사 시스템 같은 느낌이 들기도 합니다. 그 이유는 워드프레스의 태싱이 블로그에서부터 출발했기 때문입니다.
태생 자체가 그렇다보니 워드프레스는 웹진과 같은 사이트에는 바로 적용해서 사용하기에 충분합니다.

웹진이나 팀블로그의 경우 두 명이상의 관리자가 운영하는 경우가 많은데 워드프레스는 그런 경우에 최적의 CMS라 할 수 있습니다. 


사용자 메뉴


권한 관리를 위한 사용자 메뉴화면에 들어가기 위해서 왼쪽 사이드바 메뉴에서 사용자를 클릭합니다.



- 모든 사용자 

나의 웹사이트에 등록된 모든 사용자 목록을 조회할 수 있는 화면입니다. 현재는 shuman 이라는 사용자 1명만 등록되어있습니다. 역할을 보니 관리자로 되어있습니다. shuman은 관리자이기 때문에 사용자를 등록하고 워드프레스 사이트를 관리하는 모든 권한을 부여받은 사용자입니다.



- 사용자 추가하기

이 화면은 새로운 사용자를 추가하는 화면입니다. 이곳에서 사용자 정보를 입력하여 사용자를 추가하고 역할을 설정할 수 있습니다. 그럼 사용자를 추가하겠습니다.



사용자 정보를 입력합니다. 사용자명은 한글로 입력하면 오류가 발생하기 때문에 영문으로 입력합니다.
역할 부분을 선택해서 원하는 사용자 권한을 부여할 수 있습니다. 홍길도 유저는 구독자 권한으로 선택하고 '새로운 사용자를 추가' 버튼을 클릭합니다.



사용자 목록 화면에 honggildong 사용자가 추가된 것을 확인할 수 있습니다. 역할은 구독자 입니다. 이런식으로 각각의 사용자를 등록해서 권한을 부여하면 됩니다.

실제로 웹진이나 팀블로그 같은 사이트는 혼자서 사이트에 글을 쓰는 경우는 많지 않습니다. 여러명이 글을 쓰고 글들을 검토하는 권한을 부여받아서 공동으로 작업을 하는 경우가 많습니다. 글을 쓰는 사람들을 기자라고 하면 기자는 기여자(Contributor) , 글쓴이(Author) 의 권한을 부여하고 편집장 역할을 하는 사람에게는 편집자(Editor) 권한을 부여하면 훌륭한 팀블로그를 만들어 갈 수 있습니다.



- 나의 프로필

관리자의 프로필 정보를 설정하는 곳입니다. 




사용자명은 변경할 수 없으며 이름, 성, 닉네임, 이메일등 사이트 대표 관리자의 프로필 정보를 입력하는 곳입니다.





이전 포스팅)


Gmail에서 POP3 설정하기


Gmail을 사용하면 외부 메일을 자신이 사용하는 Gmail 계정에서 편리하게 확인할 수 있습니다.
Gmail에 있는 POP3 기능을 사용하는 것입니다. POP3 설정을 하기 위해서 먼저 자신의 Gmail에 로그인 합니다.

오른쪽 상단에 톱니바퀴 모양의 환경설정 아이콘을 클릭합니다.




메뉴 중에서 환경설정을 클릭합니다.



G메일의 환경설정 화면이 나옵니다. '계정 및 가져오기'를 클릭합니다.





아래와 같이 계정 및 가져오기 화면이 나옵니다. 내 POP3 메일 계정 추가 텍스트링크를 클릭합니다.




메일 계정 추가화면에서 수신한 이메일 계정의 주소를 입력합니다.




이메일 주소를 입력한 뒤 다음 단계 버튼을 클릭합니다.



POP3 메일 계정을 추가하는 화면이 나옵니다. 




사용자 이름을 admin에서 admin@shuman.kr 로 변경하고 카페24에서 메일 계정 생성시 입력했던 비밀번호를 입력합니다.
G메일에서 확인하기 편리하도록 수신 메일에 라벨 지정 항목 체크박스에 체크를 한 뒤에 계정추가 버튼을 클릭합니다.



POP3 메일 계정이 정상적으로 연결되었습니다. 다음 단계 버튼을 클릭합니다.

 


이메일 계정에 대한 이름을 입력합니다. 다음 단계버튼을 클릭합니다.



smtp는 사용하지 않을 것이므로 취소 버튼을 클릭해서 창을 닫습니다.



조금 전에 들어가 보았던 Gmail의 환경설정 > 계정 및 가져오기 탭의 다른 계정의 메일 확인 부분에 admin@shuman.kr이 추가된 것을 확인할 수 있습니다. 적색 박스안에 '지금 이메일 확인'을 클릭합니다.



Gmail이 외부 메일을 확인하고 있습니다. '기록 보기' 를 클릭합니다.




메일 계정 기록 팝업에서 메일을 한 개 가져왔다는 메시지가 보입니다. 이제는 Gmail 메일 화면으로 돌아갑니다.






CONTACT US 문의하기 시스템의 메일링 확인하기


조금전 고객이 CONTACT US 문의하기에서 다음과 같이 문의내용을 입력하고 보내기 버튼을 클릭하였습니다.




메시지가 성공적으로 발송되었다는 메시지가 나왔습니다. 


이제 Gmail로 고객의 문의 내용이 정상적으로 접수되었는지 확인하겠습니다. Gmail 환경설정 > 계정 및 가져오기 화면에 들어갑니다. 이 화면에서 외부 메일 수신여부를 체크할 수 있습니다.
아래처럼 메일 한개를 가져왔다는 메시지를 확인할 수 있습니다. 이제 Gmail 화면으로 들어가 보도록 하겠습니다.



Gmail 받은편지함에 메일이 들어온 것을 확인할 수 있습니다. 메일을 클릭합니다.



고객의 문의하기 내용이 정상적으로 메일링 된 것을 확인할 수 있습니다.




유용한 TIP - Contact Form 7으로 메일 발송시 한글이 깨지는 경우



Contact Form 7을 사용하면서 메일의 제목의 한글이 깨지는 경우가 있습니다. 이런경우는 HTML 태그관련 문제인 경우가 많습니다. 이럴때는 띄어쓰기를 하면 해결할 수 있습니다.



컨택트 폼 화면에 들어갑니다.




발신인 부분을 아래와 같이 띄어쓰기를 해줍니다.
[your-name]<[your-email]> 과 같이 쓰면 한글이 깨지고

아래 화면과 같이 [your-name] <[your-email]> 띄어쓰기를 하면 한글이 깨지는 것을 방지할 수 있습니다.







이전 포스팅)


호스팅 메일 설정하기 - 카페24 메일 설정


Contact Form 7 컨택폼에서 설정한 이메일 주소의 도메인이 웹사이트의 도메인과 다를 경우 Gmail이나 일반적인 메일사이트에서는 메일을 스팸처리합니다. 이럴 경우에는 호스팅 서비스 설정에서 이메일 계정을 등록해서 사용해야 합니다.
여기에서는 카페24 호스팅에서 이메일 등록하는 방법을 알아보도록 하겠습니다.

카페24 홈페이지( http://www.cafe24.com ) 에 로그인 합니다. 나의서비스관리를 클릭합니다.


왼쪽 메뉴에서 호스팅관리 > 기본관리 > 이메일계정 추가/삭제 를 클릭합니다.



아래와 같이 이메일 계정을 등록하고 삭제할 수 있는 화면이 나옵니다.






현재 사용중인 이메일 계정이 0으로 나옵니다.



이메일 계정 현황에서 추가신청 버튼을 클릭합니다.



이메일 계정을 추가하는 화면이 나옵니다.



사이트에서 사용할 신규 메일 계정을 입력합니다. 도메인은 shuman.kr을 선택한 뒤에 확인 버튼을 클릭합니다.



이메일이 추가되었다는 알림창이 뜹니다.




이메일 계정 현황 화면에 조금전에 만든 admin@shuman.kr 이메일 계정이 생성된 것을 확인할 수 있습니다.



메일 설정을 완료해도 바로 적용되는 것은 아닙니다. 5분이 지난뒤에 카페24 시스템에 반영이 됩니다. 이메일 계정관리에 대한 내용은 아래를 참고 바랍니다.


워드프레스 사이트의 대표 이메일 설정하기


워드프레스 관리자 화면 왼쪽 메뉴에서 설정 > 일반을 클릭합니다.



이메일 주소란에 조금전 신규로 만든 메일 계정인 admin@shuman.kr을 입력합니다.






Contact Form 7 의 컨택폼에서 이메일 계정 변경


카페24에서 도메인에 해당하는 신규 메일을 생성했으므로, Contact Form 7 플러그인의 컨택폼에서 이메일을 admin@shuman.kr 로 변경합니다. 왼쪽 사이드바 메뉴를 통해서 Contact Form 7 관리화면에 들어갑니다.

     

컨택트폼 목록에서 문의하기를 클릭합니다.




메일 탭을 클릭한 뒤에 메일 계정의 To 부분에 조금 전에 카페24에서 신규 메일 계정을 만든 admin@shuman.kr 을 입력한 뒤에 저장하기 버튼을 클릭합니다.     




메일 양식을 다음과 같이 변경합니다. 숏코드를 사용해서 [your-name] <[your-email]> 를 입력합니다.     


Message Body 부분에 이름, 연락처, 문의유형을 아래와 같이 추가 입력합니다.



모든 입력이 완료되면 저장하기 버튼을 클릭합니다.




CONTACT US 메뉴에서 문의하기 메일링 테스트


메일링 테스트를 하기위해서 http://shuman.kr 사이트에 접속합니다. 메인 화면 상단에 메뉴 중에서 CONTACT US를 클릭합니다.



문의하기 화면에 다음과 같이 문의 내용을 입력을 한 뒤에 보내기 버튼을 클릭합니다.




아래 화면과 같이 메시지가 성공적으로 발송됐습니다 라는 메시지가 나오면 정상적으로 문의하기 기능이 수행된 것입니다.





카페24에서 메일 확인하기


카페24의 이메일 계정현황 화면에 들어와서 확인하면 조금전까지 사용량이 0에서 0.03M로 늘어난 것을 확인할 수 있습니다.
그렇지만 고객의 메일이 들어온 것은 확실한데 메일 본문을 확인할 길이 없습니다. 메일을 확인하기 위해서는 아웃룩을 연결하거나 G메일등 웹메일의 POP3 메일 설정을 해야 확인이 가능합니다. 다음 시간에는 GMail을 활용한 POP3 메일 설정을 이어서 진행하도록 하겠습니다.



다음 포스팅)



이전 포스팅)


문의하기 양식 만들기


일반적인 회사 홈페이지에서 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)



메뉴 구성하기


홈페이지에서 사용할 페이지와 카테고리를 등록했으면 홈페이지 메뉴에서 보이도록 하는 연결 작업을 진행해야 합니다.
메뉴 연결 작업은 메뉴 편집기에서 할 수 있습니다. 메뉴 편집기는 왼쪽 사이드바의 외모 > 메뉴를 클릭하여 들어갑니다.



메뉴 편집하기 탭에서 메뉴를 구성하고 편집할 수 있습니다.



메뉴에 사용하기 위해서 이미 만들어놓은 페이지와 사용자정의 링크, 카테고리가 왼쪽 박스에 나타납니다. 

메뉴를 구성하는 작업순서는 다음과 같습니다.
첫 번째, 메뉴에 연결할 페이지를 배치
두 번째, 메뉴에 연결할 카데고리를 배치



모두 보기 탭을 클릭해서 추가했던 모든 페이지를 확인합니다.



메뉴에 추가 하기를 원하는 항목을 체크한 뒤에 '메뉴에 추가' 버튼을 클릭합니다.



오른쪽 박스에 메뉴가 추가된 것을 볼 수 있습니다. 




메뉴를 원하는 트리 구조로 구성하는 것은 어렵지않습니다. 단지 메뉴를 마우스로 클릭해서 드래그해서 원하는 곳에 가져다 놓으면 됩니다. 서브메뉴로 만드는 것도 간단합니다. 메뉴 간의 상하위 구조를 만들기 위해서 살짝 오른쪽으로 움직이면 서브메뉴로 만들어집니다.
회사 비전을 드래그해서 회사 소개 쪽으로 아래 그림과 같이 배치합니다.




이러한 방법으로 나머지 메뉴도 배치해서 메뉴 구성 작업을 완료합니다.



이번에는 카데고리를 메뉴에 추가해보겠습니다. 왼쪽 박스에서 카테고리를 선택한뒤에 모두 보기 탭을 클릭합니다.



조금 전에 페이지에서 했던 작업처럼 메뉴에 구성하기 원하는 항목을 체크한 뒤에 메뉴에 추가 버튼을 클릭합니다.





오른쪽 박스에 카테고리 항목도 새롭게 추가된 것을 볼 수 있습니다.


카데고리 항목도 마우스로 드래그해서 메뉴 구성을 진행합니다. 금주 제품서비스 안내 카데고리를 드래그해서 제품서비스 안내 밑으로 배치합니다.



메뉴의 배치가 다음과 같이 완료되었습니다. 



이제 메뉴 설정부분에 '상단 주 메뉴' 체크박스 부분에 체크를 한 뒤에 메뉴 저장 버튼을 클릭하여 메뉴 구성을 완료합니다.



웹사이트 화면에 등록한 메뉴가 정상적으로 보이는지 확인하기 위해서 왼쪽 상단의 사이트명을 클릭해서 사용자 화면으로 이동합니다.



사용자 웹사이트 화면을 확인하면 오른쪽 상단에 메뉴가 생성된 것을 볼 수 있습니다.




 
일전에도 강조했듯이 메뉴를 만들기 위해서 무엇보다도 중요한 것은 사이트맵을 기획하거나 메뉴구조도를 미리 만들어 보는 것입니다.

자신의 생각을 글이나 그림, 도표로 정리되지 않은 상태에서 메뉴를 구성하면 여러 번 변경하는 일이 빈번하게 발생할 수 있기 때문입니다. 먼저 내가 만들 워드프레스 사이트의 목적을 생각하고 목적에 입각해서 메뉴 구성을 그려보고 워드프레스에 적용하면 됩니다.



페이지 만들기


워드프레스의 콘텐츠 형식은 두 가지로 분류됩니다. 글과 페이지입니다. 글은 블로그 같은 동적인 곳에 적합하고 페이지는 정적인 곳에 적합하기 때문에 회사 소개나 사이트 소개에 대한 내용은 페이지(Page) 콘텐츠로 작성해야 합니다.

왼쪽 사이드바에 페이지 > 새 페이지 추가를 클릭합니다.



페이지를 추가 할 수 있는 화면이 나옵니다. 페이지를 만드는 것도 카테고리와 동일하게 스프레드시트를 통해서 정리한 뒤 입력하는 것이 좋습니다. 페이지를 추가 할 목록은 다음과 같습니다.


이곳에 사이트 소개에 대한 제목과 본문을 입력해야 합니다.
메뉴 연결을 구성을 위해 만드는 것이므로, 본문 내용은 임시로 간략하게 작성합니다. 



제목에 '회사 소개'라고 입력합니다. 제목을 입력하자마자 하단에 고유주소가 생성되는 것을 볼 수 있습니다.


고유주소는 작성하는 페이지에 접속할 수 있는 URL이 됩니다. 고유주소란에 노란색으로 마킹되는 부분이 나타나는데 이곳이 바로 슬러그 부분입니다. 슬러그는 해당 글에 대한 짦막한 요약 정보라고 보면됩니다. 제목을 한글로 입력하면 자동으로 생성되는 슬러그는 한글로 생성이 됩니다. 그렇지만 슬러그는 영문으로 변경하는 것이 좋습니다. 간혹 호스팅 업체에 따라서 한글이 깨지는 경우가 발생하기 때문입니다.

슬러그를 편집하려면 고유주소 옆에 편집 버튼을 클릭해서 변경할 수 있습니다. 슬러그는 잘 작성하는 것이 좋습니다. 글에 대해서 잘 정리된 슬러그는 구글 검색엔진에게도 좋은 정보를 제공하기 때문입니다.

페이지에 대한 슬러그는 메뉴구조도 등에 따로 잘 정리해 두는 것이 좋습니다.



그럼 조금 전 입력한 한글 슬러그를 편집 버튼을 클릭해서 영문 슬러그 변경하고 OK 버튼을 클릭합니다.



고유주소 슬러그(노란색 마킹) 부분이 영문으로 변경되었습니다.



오른쪽에는 페이지 속성부분이 있습니다. 내용은 어렵지 않습니다.



상위 : 페이지의 상하위 구조를 만들 때 사용하는 것입니다. (카테고리의 부모 옵션으로 생각하면 됩니다.)
템플릿 : 일반적으로 기본 템플릿을 사용합니다. 테마에 따라 제공하는 템플릿이 상이합니다.
순서 : 화면에서 보이는 순서를 조정합니다.



마지막으로 본문 내용을 간략히 입력하고 공개하기 버튼을 클릭합니다. 본문 작성이 완료되면 반드시 공개하기 버튼을 클릭해야 합니다.  아직 공개하기 버튼이 눌러지지 않은 페이지는 메뉴를 구성하기 위한 메뉴 편집기 화면에서 나타나지 않아서 메뉴로 구성할 수 없습니다.



왼쪽 사이드 메뉴에서 페이지 > 모든 페이지를 클릭합니다.



회사 소개 페이지가 추가된 것을 확인할 수 있습니다. 이제 등록해야할 나머지 페이지들도 지금까지 했던 방법대로 등록합니다.



나머지 페이지 들도 위와 같은 방법으로 차례차례 등록을 진행합니다.


모두 등록이 완료되면 모든 페이지 목록에 다음과 같이 메뉴에 사용할 페이지가 나타날 것 입니다.




+ Recent posts