이전 포스팅)


호스팅 메일 설정하기 - 카페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 메일 설정을 이어서 진행하도록 하겠습니다.



다음 포스팅)


'워드프레스 > 워드프레스 플러그인' 카테고리의 다른 글

글작성 끝판왕, 숏코드 Shortcodes Ultimate 플러그인 (1)  (12) 2015.11.13
Jetpack 플러그인으로 이미지 갤러리를 풍성하게  (1) 2015.11.12
Gmail에서 POP3 메일 설정하기  (0) 2015.11.07
Contact Form 7 플러그인으로 문의하기 양식 만들기 (2)  (1) 2015.11.05
Contact Form 7 플러그인으로 문의하기 양식 만들기 (1)  (0) 2015.11.04

이전 포스팅)


문의하기 양식 만들기


일반적인 회사 홈페이지에서 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 호스팅 메일설정은 다음 시간에 계속 진행하도록 하겠습니다.




'워드프레스 > 워드프레스 플러그인' 카테고리의 다른 글

글작성 끝판왕, 숏코드 Shortcodes Ultimate 플러그인 (1)  (12) 2015.11.13
Jetpack 플러그인으로 이미지 갤러리를 풍성하게  (1) 2015.11.12
Gmail에서 POP3 메일 설정하기  (0) 2015.11.07
호스팅 메일 설정하기 - 카페24 이메일 계정 설정  (0) 2015.11.06
Contact Form 7 플러그인으로 문의하기 양식 만들기 (1)  (0) 2015.11.04
지난 시간에 로컬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)



'워드프레스 > 워드프레스 플러그인' 카테고리의 다른 글

글작성 끝판왕, 숏코드 Shortcodes Ultimate 플러그인 (1)  (12) 2015.11.13
Jetpack 플러그인으로 이미지 갤러리를 풍성하게  (1) 2015.11.12
Gmail에서 POP3 메일 설정하기  (0) 2015.11.07
호스팅 메일 설정하기 - 카페24 이메일 계정 설정  (0) 2015.11.06
Contact Form 7 플러그인으로 문의하기 양식 만들기 (2)  (1) 2015.11.05

메뉴 구성하기


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



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



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

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



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



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



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




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




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



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



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





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


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



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



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



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



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




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

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



'워드프레스 > 워드프레스 관리자화면' 카테고리의 다른 글

워드프레스 설정 메뉴  (2) 2015.11.10
사용자 메뉴로, 워드프레스 사용자 권한 관리하기  (0) 2015.11.09
메뉴에 연결할 페이지 만들기  (0) 2015.11.02
카테고리 만들고 구성하기  (1) 2015.10.29
메뉴 구조도 만들고 메뉴 구성 준비하기  (0) 2015.10.27

페이지 만들기


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

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



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


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



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


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

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

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



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



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



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



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



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



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



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



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


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




'워드프레스 > 워드프레스 관리자화면' 카테고리의 다른 글

사용자 메뉴로, 워드프레스 사용자 권한 관리하기  (0) 2015.11.09
나만의 워드프레스 메뉴 구성하기  (1) 2015.11.03
카테고리 만들고 구성하기  (1) 2015.10.29
메뉴 구조도 만들고 메뉴 구성 준비하기  (0) 2015.10.27
위젯을 사용해서 홈페이지에 사이트로고 넣기  (0) 2015.10.26

카테고리란?


카테고리란 글에 대한 주제를 분류할 수 있는 워드프레스의 기능입니다. 카테고리 자체에는 콘텐츠가 담겨있지 않습니다. 단지 사용자가 카테고리를 클릭하면 그 카테고리로 지정된 글 목록이 보여지게 됩니다.

처음에 글을 쓰게 되면 글의 갯수가 많지 않아서 분류의 필요성을 느끼지 못합니다. 그렇지만 작성한 글의 갯수가 많아지면 태그나 카테고리를 통한 분류를 하지않을 경우 글이 정리 되지 않고 나중에 찾아보기도 어렵습니다.

카테고리는 글의 정리를 위한 도구인 셈입니다. 워드프레스에서 카테고리 기능은 왼쪽 사이드바에 글 > 카테고리 에 위치하고 있습니다. 카테고리는 글에 대한 관리의 목적으로 만들어진 것이라고 볼 수 있습니다. 카테고리 아래에 있는 태그 역시 마찬가지 입니다.


워드프레스에서 글을 작성하면 시간의 역순으로 글이 보여집니다. 가장 최근에 작성한 글이 맨 위에 보이는 식입니다. 기본적으로 글이 시간의 역순으로 보여지는 까닭은 워드프레스의 태생 자체가 블로그를 위한 프로그램으로 시작되었기 때문입니다. 

워드프레스에는 페이지라는 개념도 있습니다. 카테고리의 글이 동적이라면, 페이지는 회사 소개등에서 볼 수 있는 정적인 페이지를 표현하는데 주로 사용합니다.

워드프레스를 처음 설치하고 글을 쓰기 시작할 때 카테고리를 따로 지정하지 않았습니다. 그렇지만 워드프레스가 설치되고 나면 기본적으로 '미분류'라는 카테고리가 생성되어 있습니다. 그래서 카테고리를 새로 만들지 않은 글들은 자동으로 '미분류'라는 카테고리로 분류가 되는 것입니다.


그럼 이제 카테고리를 새로 만들고 구성해보도록 하겠습니다.    


카테고리 구성하기


카테고리를 구성하기 위해서는 왼쪽 사이드바 메뉴에서 글 > 카테고리 화면에 들어가야합니다. 글 > 카테고리를 클릭합니다.



카테고리 화면을 보면 새 카테고리를 추가하기 위해서 이름을 입력하고 슬러그를 입력하게 되어있습니다. 슬러그를 입력할 때는 가능한 영어로 네이밍을 하는 것이 좋습니다. 한글로 작성했을 때 호스팅 서비스에서 충돌을 일으킬 때 한글이 깨지는 경우가 간혹 발생할 수 있기 때문입니다.
또한, 구글 검색엔진에 최적화를 위해서도 영어로 슬러그를 작성할 것을 권고합니다.



카테고리는 카테고리간 상하위 구조로 구성할 수 있습니다. 상하위 구조로 구성할 때 사용하는 것이 '부모' 옵션입니다. 이 옵션을 사용해서 계층적인 구조로 카테고리를 구성할 수 있는 것입니다.




현재 구성하려고 하는 카테고리를 스프레드시트에 정리합니다. 대분류 중분류 옆에 해당 카테고리의 슬러그도 영문으로 함께 기입합니다. 아래과 같이 작성이 스프레드시트에 작성이 완료되고 나면 워드프레스 카테고리 화면에서 입력하여 구성하면 됩니다.



그럼 먼저 대분류인 '제품서비스 안내' 부분을 입력하겠습니다. 이름란에 '제품서비스 안내'를 입력합니다. 그리고 슬러그에는 product-report 라고 입력합니다. 부모 부분은 최상위이기 때문에 없음으로 선택된 상태에서 새 카테고리 추가 버튼을 클릭합니다.



오른쪽 화면에 '제품서비스 안내' 카데고리가 추가되었습니다. 




이번에는 두번째로 중분류인 '금주 제품서비스 안내'를 추가하겠습니다.


중분류인 '금주 제품서비스 안내'는 대분류인 '제품서비스 안내' 밑에 트리처럼 연결되어야 하므로, 부모 옵션에서 '제품서비스 안내'를 선택해야 합니다.




중분류인 '워드프레스 시작하기'는 대분류인 '워드프레스 강좌' 밑에 트리처럼 연결되어야 하므로, 부모 옵션에서는 '워드프레스 강좌'를 선택해야 합니다. 부모를 선택한 뒤, 이름과 슬러그를 입력하고 새 카테고리 추가 버튼을 클릭합니다.



'금주 제품서비스 안내' 가 하위라는 것을 알려주는 인식자인 대쉬(-)가 붙고 중분류가 추가 된것을 목록에서 확인할 수 있습니다.



등록한 카테고리에 대한 수정을 하려면 카테고리 이름 아래에 있는 편집을 클릭합니다. 


※ 삭제 버튼을 클릭할 때는 주의를 해야합니다. 카테고리의 삭제를 하면 별도의 휴지통에 보관되지 않고 바로 완전히 삭제되기 때문입니다.

카테고리 편집 화면에서 이름이나 슬러그 부모 옵션을 변경하고 수정할 수 있습니다. 



이제 이런 방법으로 구성할 나머지 카테고리도 모두 등록합니다. 






'워드프레스 > 워드프레스 관리자화면' 카테고리의 다른 글

나만의 워드프레스 메뉴 구성하기  (1) 2015.11.03
메뉴에 연결할 페이지 만들기  (0) 2015.11.02
메뉴 구조도 만들고 메뉴 구성 준비하기  (0) 2015.10.27
위젯을 사용해서 홈페이지에 사이트로고 넣기  (0) 2015.10.26
외모의 위젯 메뉴-위젯 기능으로 풍성한 웹사이트 만들기  (0) 2015.10.24
워드프레스의 사이트 메뉴를 구성하는 방법을 알아보도록 하겠습니다.
왼쪽 메뉴바에서 외모 > 메뉴를 클릭합니다. 아래에 나오는 화면이 메뉴를 편집하는 화면입니다. 이곳에서 내 사이트의 메뉴를 구성할 수 있습니다.


현재 사이트 화면에서 오른쪽 상단의 메뉴 부분에는 아직 메뉴를 구성하지 않았기 때문에 디폴트로 샘플페이지가 보입니다.



메뉴구조도 만들기

메뉴를 구성하기 위해서는 먼저 메뉴구조도를 만드는 것이 중요합니다.

메뉴 구조도는 사이트를 기획할 때 가장 중요한 요소 중의 하나입니다. 잘 구성된 메뉴구조도는 구글 검색엔진 최적화(SEO)에도 좋은 결과를 나타냅니다. 사이트 기획의 핵심 요소인 메뉴구조도를 만드는 것은 어렵지 않습니다.
메뉴 구조도를 만들 때 앞서 설명한 알마인드를 사용해도 되고 MS 엑셀이나 구글 스프레드시트를 이용해도 됩니다.

참고 포스팅)

아니면, 컴퓨터 프로그램이 아닌 단순히 종이에 연필만 있어도 메뉴구조도를 만드는데는 문제가 없습니다.
여기에서는 스프레드시트를 사용해서 메뉴구조도를 만들고, 워드프레스 메뉴 관리화면에 적용하도록 하겠습니다. 

먼저는 머리속에 만들려는 사이트에 대한 구상을 하고 그 다음은 생각했던 내용을 메뉴 구조도로 만들면 됩니다.
메뉴 구성은 대분류, 중분류로 2단계 구성합니다. 


항목 중에 구분이라는 항목을 두었는데 구분은 메뉴에 연결된 화면의 종류에 따라서 페이지, 카데고리, 사용자 정의로 분류할 예정입니다.

머리속에 구상한 가상 회사의 메뉴 구조도를 아래와 같이 작성하였습니다.



사이트 메뉴 구성 준비하기

이제 메뉴구조도를 기반으로 워드프레스 사이트의 메뉴를 구성하겠습니다. 



현재까지 메뉴 이름 왼쪽에 페이지, 사용자정의 링크, 카테고리 부분이 비활성화 되어있습니다. 



메뉴를 구성하기 위해서는 먼저 메뉴를 생성해야 합니다. 메뉴 이름 란에 기본 메뉴 라고 입력한 뒤 메뉴 생성 버튼을 클릭합니다.




조금전에 비활성화 되어있던 왼쪽의 페이지, 사용자정의 링크, 카테고리 부분이 활성화 되고, 오른쪽에 메뉴 설정 부분도 설정이 가능하게 변경되었습니다.




워드프레스에서 메뉴를 구성하는 방법은 왼쪽(페이지, 사용자정의 링크, 카테고리) 부분에서 메뉴를 구성하기를 희망하는 것을 선정해서 메뉴에 추가하면 됩니다.

그렇지만, 메뉴를 구성하기 위해서는 실제로 구성할 페이지와 사용자정의 링크, 카테고리가 존재해야 합니다. 그래야 메뉴와 연결할 수 있습니다. 카데고리, 페이지등 메뉴 연결에 필요한 세부적인 작업은 바로 다음 글에서 이어서 진행하겠습니다.

이어지는 포스트)
카테고리 만들고 구성하기


'워드프레스 > 워드프레스 관리자화면' 카테고리의 다른 글

메뉴에 연결할 페이지 만들기  (0) 2015.11.02
카테고리 만들고 구성하기  (1) 2015.10.29
위젯을 사용해서 홈페이지에 사이트로고 넣기  (0) 2015.10.26
외모의 위젯 메뉴-위젯 기능으로 풍성한 웹사이트 만들기  (0) 2015.10.24
외모의 테마 메뉴-테마 기능으로 워드프레스 디자인하기  (0) 2015.10.24
워드프레스 웹사이트를 만들기 위해서는 자신이 어떤 것을 만들지에 대한 생각과 기획이 있어야합니다.
웹사이트 기획은 전문가만 할 수 있는 것은 아닙니다. 웹사이트 기획은 웹사이트가 필요한 사람이면 누구든지 할 수 있습니다. 단지 그것이 절실히 내게 필요한가 필요하지 않은가에 대한 생각만 필요할 뿐입니다.

웹사이트 기획을 할 때 추천하는 방법은 손수 사이트맵이나 메뉴구조도를 만들어보는 것입니다.
머리속으로만 생각하는 것보다 A4지 위에 글이나 그림으로 도식화해서 정리하면 한 눈에 이해하기도 쉽습니다.

사이트맵이나 메뉴구조도를 만들 때 마인드맵을 이용하는 것 또한 효과적인 방법입니다.
토니부잔이 세운이론인 마인드맵은 생각을 정리해주고, 사고의 폭을 넓혀주는 역할을 합니다.

여기서는 알마인드를 사용해서 사이트맵 메뉴구조도를 만들어 보겠습니다.
알마인드를 이용해서 자신이 만들려고 하는 것을 도식화 하면 됩니다. 처음하는 것이어서 무엇부터 시작해야할지 막막하면 다음 예제를 따라해도 좋습니다.

예제는 특정 웹사이트를 선택해서 웹사이트의 메뉴 구조를 보고 메뉴 구조도를 만들 것입니다.
여기에서는 블로터라는 사이트를 참고해서 만들도록 하겠습니다.


블로터 사이트에 접속해서 메뉴구조 파악하기


[작업 순서]
1. 블로터 사이트에 접속합니다. 




2. 메뉴를 확인합니다. 블로터 사이트의 메뉴에는 대메뉴가 있고 중메뉴가 있습니다.

대메뉴)





중메뉴)






알마인드 설치하고, 사이트맵 메뉴 구조도 만들기

알마인트 사이트에 접속하여 무료인 Lite 버전을 설치합니다.



이제는 알마인드를 실행한뒤, 블로터를 중심으로 마인드맵을 그려보겠습니다. 이렇게 작성된 마인드맵은 사이트를 한 눈에 확인할 수 있는 메뉴구조도가 되는 것입니다.

설치가 완료되면 알마인드를 실행합니다. 
테마맵을 선정하는 화면이 나오는데, 기본맵으로 상태에서 확인을 누릅니다.




확인을 누르면 중심토픽이 나옵니다.





중심 토픽이라고 된 곳에 블로터라고 입력합니다.




메뉴 구조도를 만들 것이기 때문에, 디폴트인 방사형보다는 오른쪽 방사형 으로 선택합니다.
방사형의 경우에는 중심을 기준으로 사방으로 가지선이 그려지고, 오른쪽 방사형은 오른쪽 중심으로 가지선이 그어집니다.




그럼 대메뉴를 하나하나 만들어 보겠습니다. 스페이스바를 누르면 하위 가지 메뉴를 작성할 수 있습니다.
스페이스바를 누르고 '뉴스'를 입력합니다.

뉴스를 입력한 뒤에 엔터를 치면 대메뉴를 입력할 수 있습니다.



 위 메뉴에 있는 '컨퍼런스', 'TV', '북스', '광장', '아카데미', '블로터'를 입력합니다.




이제는 아래 메뉴대로 뉴스 하위 메뉴를 입력하겠습니다.




알마인드에서 하위 가지를 입력하기 위해서는 스페이스바를 누르면 됩니다. 마우스로 뉴스를 선택하고 스페이스바를 누릅니다.



이제 하위 토픽이라고 하는 곳에 하위 메뉴를 작성합니다.




오른쪽에 블로터라는 대분류 메뉴에 중분류가 있습니다.






오른쪽 중분류도 위와 동일한 부분으로 입력합니다.






이로써 블로터 웹사이트의 사이트맵이라 할 수 있는 메뉴구조도가 완성되었습니다.

여러분들도 함께 따라하시거나, 자신이 원하는 사이트를 위와 같이 기획하시면 됩니다.
보시면 아시겠지만, 마인드맵으로 메뉴구조도를 만들면, 한 눈에 사이트가 정리되는 효과를 볼 수 있습니다.



'워드프레스 > 워드프레스 일반' 카테고리의 다른 글

워드프레스 책이 출간되었습니다. 진심 추천해요!  (21) 2017.03.24
워드프레스의 금기사항 두 가지  (0) 2016.01.19
워드프레스의 장점은 어떤 것이 있을까요?  (0) 2015.10.19
워드프레스로 만든 국내 홈페이지는 어떤 것이 있을까?  (0) 2015.10.17
워드프레스는 일당백을 하는 일꾼  (0) 2015.10.12

+ Recent posts

티스토리툴바