이전 포스팅)


호스팅 메일 설정하기 - 카페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 버튼을 클릭합니다.



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



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



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



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



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



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



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


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




카테고리란?


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

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

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


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

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

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


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


카테고리 구성하기


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



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



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




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



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



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




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


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




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



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



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


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

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



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






워드프레스의 사이트 메뉴를 구성하는 방법을 알아보도록 하겠습니다.
왼쪽 메뉴바에서 외모 > 메뉴를 클릭합니다. 아래에 나오는 화면이 메뉴를 편집하는 화면입니다. 이곳에서 내 사이트의 메뉴를 구성할 수 있습니다.


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



메뉴구조도 만들기

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

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

참고 포스팅)

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

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


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

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



사이트 메뉴 구성 준비하기

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



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



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




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




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

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

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


워드프레스 웹사이트를 만들기 위해서는 자신이 어떤 것을 만들지에 대한 생각과 기획이 있어야합니다.
웹사이트 기획은 전문가만 할 수 있는 것은 아닙니다. 웹사이트 기획은 웹사이트가 필요한 사람이면 누구든지 할 수 있습니다. 단지 그것이 절실히 내게 필요한가 필요하지 않은가에 대한 생각만 필요할 뿐입니다.

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

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

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

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


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


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




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

대메뉴)





중메뉴)






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

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



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

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




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





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




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




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

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



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




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




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



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




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






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






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

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



홈페이지에 사이트 이미지로고 넣기


나만의 사이트를 구축할 때 만들고 보고 싶은 것이 바로 나만의 사이트 로고입니다.
홈페이지에 사이트 로고를 넣기 위해서는 먼저 사이트 이미지를 포토샵등 이미지 툴을 통해서 제작해야합니다. 여기에서는 로고 이미지는 만들어졌다는 가정 하에 진행하도록 하겠습니다.
기본적으로 이미지 로고를 만들기 위해서는 포토샵이나 포토스케이프등 이미지 도구를 사용할줄 알아야합니다. 여기에서는 따로 포토샵에 대한 설명을 하지는 않습니다.

그렇지만, 아직 포토샵을 다루지 못하는 분들은 워드프레스를 공부하면서 틈틈히 짬을 내어서 포토샵을 공부하시기 바랍니다. 아무래도 디자인이 훌륭하지 못한 사이트는 방문자의 재방문율을 낮출 가능성이 많기 때문입니다.

현재 블로그의 사용자화면은 다음과 같이 구성되어 있습니다. 



실습용으로 제작한 이미지 로고는 왼쪽 상단에 화살표가 표시된 부분에 배치하도록 하겠습니다.



로고 이미지를 웹사이트에 배치하기 위해서는 위젯기능을 사용해야 합니다. 워드프레스 관리자 화면에서 왼쪽 메뉴에서 위젯을 클릭합니다.



위젯 관리 화면에 들어습니다. 이미지 로고는 텍스트 위젯을 활용해서 보여줄 수 있습니다. 원래 텍스트 위젯은 텍스트나 글을 보여주는 위젯이지만 HTML 기능을 지원하기 때문에 텍스트 위젯에 HTML 소스를 입력해서 이미지를 보여줄 수 있는 것입니다.



텍스트 위젯을 마우스로 누른 상태에서 주 사이드바 영역의 맨 위부분으로 드래그합니다.





주 사이드바 영역에 텍스트 위젯이 이동되면서 위젯이 이름과 본문을 입력하는 창이 뜹니다. 본문 입력 영역에 로고이미지의 HTML 소스를 입력하면 됩니다. 일단 왼쪽 하단에 닫기 링크를 클릭합니다.  





텍스트 위젯이 상단에 배치된 것을 확인할 수 있습니다.



로고이미지로 사용될 HTML 소스를 만들겠습니다. HTML은 웹표준에서는 반드시 알아야하는 필수 항목입니다. 워드프레스를 공부하기로 마음먹었다면 HTML 역시 틈틈히 공부하는 것이 좋습니다.

임시 글을 하나만들어서 이미지에 대한 HTML 소스를 가져오겠습니다. 왼쪽 메뉴에서 글 > 새 글 쓰기를 클릭합니다. HTML 이미지 소스만 필요하고 삭제할 글이기 때문에 제목은 별도로 입력하지 않아도 됩니다.




아래 미디어 추가를 클릭해서 로고로 사용할 이미지를 업로드 합니다. 미디어 추가 버튼을 클릭합니다.



이미지 화일을 업로드 할 수 있는 화면이 나옵니다.



왼쪽 파일 업로드 탭을 클릭하여 로고 이미지 화일을 업로드 합니다.






사이트 로고로 사용할 이미지가 업로드 되었습니다. 화면 하단에 글에 삽입하기 버튼을 클릭합니다. 


본문 입력 HTML 편집기에 이미지 화일이 로딩되었습니다. 




이미지를 마우스로 클릭합니다. 마우스로 클릭하면 이미지가 선택되고 옵션이 뜹니다. 연필 모양의 편집 아이콘을 클릭합니다.



이미지 상세화면이 나타납니다. 표시 설정의 연결 부분에 URL이 보입니다. 이 부분은 이미지를 클릭했을 때 화면이 이동하는 URL 경로입니다.




연결의 옵션부분을 미디어 파일에서 사용자 정의 URL로 변경합니다.


아래 URL 부분은 아직 연결할 페이지가 없으므로 삭제합니다.




고급 옵션 부분에서 새 창/탭 링크 열기 부분에 체크를 한 뒤에 업데이트 버튼을 클릭합니다.



다시 편집기 화면이 나타납니다. 편집기 오른쪽 상단에 텍스트 탭 부분을 클릭합니다.



이미지에 대한 HTML 소스가 나타납니다.




텍스트를 선택해서 복사합니다.



이제 다시 외모 > 위젯 화면으로 이동하여 주 사이드바에 텍스트 위젯을 클릭해서 펼칩니다.



조금전에 복사한 이미지 URL을 텍스트 위젯의 본문 항목에 붙여넣고 저장하기 버튼을 클릭한 뒤에 닫기 버튼을 클릭합니다.



로고 이미지 적용을 확인하기 위해서 화면 왼쪽 상단에 사이트명을 Ctrl 을 누른 상태에서 클릭합니다.



사이트에 왼쪽 상단에 사이트 로고가 정상적으로 생성된 것을 확인 할 수 있습니다.







워드프레스에는 위젯과 플러그인이라는 개념이 있습니다. 둘다 워드프레스에 기능을 확장시키는 도구이지만 위젯은 주로 사이드바에 추가해서 사용하는 보여지는 프로그램인 경우가 많습니다. 하지만 위젯도 크게보면 하나의 플러그인이라고 보아도 무방합니다. 

간단하게 생각하면 위젯은 화면의 사이드바에 얹어 놓고서 사용하는 기본 프로그램들이고 플러그인은 눈에 보이지 않지만 내 사이트를 더욱 유용하게 만들어주는 기능을 하는 프로그램입니다.

그렇다면, 유용한 플러그인과 위젯을 많이 사용하면 사용할수록 좋을까요? 그렇지 않습니다. 소프트웨어에도 과유불급의 법칙은 적용됩니다. 워드프레스도 하나의 소프트웨어 프로그램입니다. 프로그램을 많이 사용한다면 서버의 메모리나 CPU 용량을 잡아먹을 것입니다.
그래서 위젯과 플러그인의 최적화 이슈는 발생합니다.
무분별하게 위젯과 플러그인을 남용하면 웹사이트의 속도는 현저하게 떨어집니다. 그래서 꼭 필요한 위젯과 플러그인만 선별하고 설치하는 지혜가 필요합니다.

위젯 관리 화면 구성

위젯은 외모 메뉴의 서브 메뉴로 존재합니다. 왼편 메뉴바에서 위젯을 클릭하면 다음과 같은 화면이 나옵니다.



위젯 화면은 세 가지 영역으로 구분됩니다.
1번 사용할 수 있는 위젯 영역
2번 위젯 영역(현재 사이트에 위젯을 적용하는 영역)
3번 비활성화 위젯 영역

현재 사이트에 위젯을 넣는 부분은 2번 영역입니다. 워드프레스에서 위젯을 사용하는 방법은 간편합니다.
사용하고자 하는 위젯을 드래그하면 됩니다. 즉, 1번 영역에서 사용할 수 있는 위젯을 2번 영역으로 드래그하면 현재 사이트에서 위젯을 사용할 수 있습니다.


위젯 관리하기

사용자 정의에서 관리하기 버튼을 클릭하면 현재 등록된 위젯과 위젯이 적용된 웹사이트 화면을 볼 수 있습니다. 사용자 정의에서 관리하기 버튼을 클릭합니다.



일종의 위젯 미리보기 화면이라 할 수 있습니다. 왼쪽은 현재 사용되는 위젯 종류가 나오고, 오른쪽에는 위젯이 적용된 미리보기 화면이 나타납니다. 위젯을 클릭해서 세부 옵션이나 속성을 설정할 수 있습니다.



주 사이트바 옵션

그럼 검색창에 이름을 넣어보겠습니다.  왼쪽에 주 사이드바를 클릭합니다.


주 사이드바를 클릭하면 등록된 위젯이 아래와 같이 펼쳐집니다.



여기서 다시 검색 부분을 클릭하면, 검색 옵션이 펼쳐지면서 검색창의 이름을 입력할 수 있는 타이틀 항목이 나옵니다.



타이틀에 사이트 검색이라고 입력합니다.


입력을 하자마자 오른쪽 웹사이트 미리보기 화면에 바로 적용되는 것을 확인할 수 있습니다.     



위젯 부분은 이런 식으로 하나하나 입력하고 눌러보면서 사이트에 적용되는 결과를 확인하면 편하게 작업을 할 수 있습니다. 워드프레스는 테마마다 기본 제공되는 위젯도 상이합니다. 따라서 모든 옵션들을 클릭해보고 어떻게 사이트에 적용되서 보여지는 지를 확인하는 것이 중요합니다. 내게 필요한 기능은 취하고 필요없는 기능은 비활성화 하면 됩니다.


드래그로 위젯 배치하기


이번에는 드래그로 위젯을 배치하겠습니다. 왼쪽 메뉴에서 위젯을 클릭하여 위젯 관리화면으로 이동합니다.





위젯 관리 화면이 나타납니다. 이제 웹사이트에 달력 위젯을 달아보려고 합니다. 아래 화면에서 있는 달력 위젯을 사용해서 웹사이트에 배치 할 것입니다. 워드프레스에서는 마우스 드래그로 간편하게 위젯을 배치할 수 있습니다.




아래와 같이 1번 영역(사용할 수 있는 위젯 영역)에 있는 달력 위젯을 2번 영역(웹사이트 적용 영역)의 콘텐츠 사이드바에 배치하도록 하겠습니다. 작업 방법은 간단합니다.



1번 영역에 있는 달력을 마우스로 클릭한 상태에서 2번영역의 콘텐츠 사이드바로 드래그합니다.



드래그가 완료되면 콘텐츠 사이드바 안에 달력이 들어간 것을 확인할 수 있습니다.



화면에서 사용자 정의에서 관리하기 버튼을 누릅니다.


 
오른쪽에 달력이 나타남을 확인할 수 있습니다. 이렇게 직접 배치를 해보면서 사이트의 어느 위치에 위젯이 위치하고 나타나는지 알 수 있습니다. 스스로 하나하나 설정하고 확인해가면 콘텐츠 사이드바 영역에 추가하면 이렇게 보여지는구나 하고 저절로 이해가 될 것입니다.
위젯의 옵션을 적용하고 확인하는 수고는 반드시 필요합니다. 실제 실습해보지 않고 머리로만 이해했을 때는 실무에서 사용하기가 어렵습니다. 시간이 걸리더라도 적용해 보는 것이 시간을 절약하는 길입니다.




이번에는 1번 위젯영역에서 태그 구름을 드래그해서 2번 영역의 푸터 위젯 영역으로 드래그합니다.




타이틀 이름은 태그 구름들이라고 입력하고 저장하기 버튼을 클릭합니다




이번에는 왼쪽 상단에 사이트명을 클릭하여 적용된 웹사이트를 확인합니다.
사이트 하단에 태그 구름들 이라는 항목이 생긴 것을 확인할 수 있습니다. 아직 작성된 태그가 없어서 목록은 나타나지 않지만 푸터 위젯영역이 이곳이라는 것을 알 수 있는 것입니다.




비활성화 위젯 영역

조금전에 태그 구름들 위젯을 드래그해서 3번 영역으로 이동시킵니다.
3번 영역인 비활성화 위젯 영역은 사용자에게는 보여지지 않지만 삭제하지는 않을 때 사용하는 영역입니다. 
일반적으로 위젯을 오랫동안 사용하면 사용했던 설정과 내역이 보관되어 있습니다. 그렇지만 위젯을 삭제하게되면 그 모든 것이 한 순간에 날라갑니다. 이 때는 사용자에게는 보여지지는 않지만 위젯을 보관만 해두는 기능으로 비활성화 기능을 사용할 수 있습니다.





외모 메뉴는 워드프레스 사이트의 외관을 디자인 하는 곳입니다. 한국어로 외모로 번역이 되어서 사람의 외모가 연상되기는 하지만 워드프레스의 외관을 꾸미는 곳이라 생각하면 됩니다.



테마

테마는 워드프레스의 꽃이라 할 수 있습니다. 워드프레스가 전세계 CMS 시장을 절대적으로 석권한 것에 있어서 테마의 공을 부인할 수 는 없습니다. 워드프레스는 다양한 테마를 통해서 성장해왔다고 해고 과언이 아닙니다. 테마는 원래 원어가 씸(Theme)이지만 우리에게는 스킨이라고 하는 것이 이해하기가 편합니다. 

우리나라에서 가장 많이 사용하는 네이버 블로그의 경우에는 블로그 스킨의 종류나 갯수가 그리 많지 않고, 스킨을 적용해서 블로그 구조를 바꾸는 것 역시 간단한 일은 아닙니다. 하지만, 워드프레스의 경우에는 워드프레스 공식 사이트에서 제공하는 테마만 해도 2,042개가 넘고 씸포레스트등 유료 테마와 템플릿이  5천7백건이 넘었습니다. 지금 이 순간도 전세계의 수많은 디자이너와 개발자들은 자발적으로 멋진 테마를 만들어 내고 있습니다. 테마의 갯수가 수천개가 넘다보니 나의 사이트에 적합한 테마를 잘 고르는 것이 중요합니다.


워드프레스 공식사이트 테마 2,042개, 2015년 10월22일 기준 




유료 사이트 씸포레스트의 테마와 템플릿 5,710개, 2015년 10월22일 기준



워드프레스에 테마를 설치하거나 변경하려면 관리자 페이지에서 테마 화면에 들어가야 합니다.
왼쪽 메뉴바에서 외모 > 테마를 클릭합니다.

이 화면은 테마를 관리하기 위한 화면입니다. 현재 적용된 테마는 맨 왼쪽 상단에 위치하며, 활성화라는 문구가 붙어있습니다.



현재 활성화 되어 적용된 테마는 왼쪽에 나옵니다. 현재는 Twenty Fourteen이 적용되어 있습니다.



사용자 정의하기 버튼을 클릭하면 활성화된 테마의 세부 설정을 할 수 있습니다. 왼쪽 메뉴나 활성화 테마에서 사용자 정의하기 버튼을 클릭합니다.



사용자 정의하기를 클릭하면 다음과 같은 화면을 볼 수 있습니다. 왼쪽에는 테마에 대한 설정을 할 수 있고, 왼쪽에서 설정을 하면 설정된 내용이 오른쪽 화면에 나타납니다. 오른쪽 화면은 일종의 미리보기 화면과 같은 기능을 합니다.



왼편에서 테마의 세부 옵션을 수정할 수 있습니다. 현재 적용된 Twenty Fourteen 테마의 경우에는 테마의 옵션이 사이트 제목과 태그라인, 색상, 헤더이미지, 배경이미지, 위젯, 정적인 전면 페이지, 특성 콘텐츠 등을 변경할 수 있습니다.

이런 항목들은 각각의 테마마다 다릅니다. 테마에 따라서 테마 옵션이 차이가 나는 것입니다.
워드프레스가 쉬운 것 같지만 쉽지 않다고 하는 것은 스스로 수많은 테마들을 사용해보고 옵션들을 적용하면서 내게 적합한 테마를 찾아가는 과정이 있어야하는 것 때문일지도 모릅니다. 물론 최신 테마들을 사용하다보면 버그테스터가 되기도 합니다.




그럼 Twenty Fourteen 테마의 옵션 몇 가지를 살펴보도록 하겠습니다.

사이트 제목과 태그라인

이곳에서는 내가 만드는 웹사이트의 제목과 태그라인을 수정할 수 있습니다. 


색상

테마의 색상을 변경할 수 있는 곳입니다.





헤더 이미지

웹사이트 상단 헤더에 이미지를 넣기 위해서는 이곳에서 새 이미지 추가 버튼을 클릭해서 이미지를 업로드하면 됩니다.




테마 추가하기

새로운 테마를 추가하려면 두가지 방법이 있습니다. 

첫째는 워드프레스 공식사이트나 유료 테마사이트 등에 들어가서 테마를 로컬에 다운로드 받은 뒤 설치하는 방법
둘째는 테마 메뉴에서 새로 추가 버튼을 클릭해서 바로 설치하는 방법입니다.

여기서는 두번째 방법을 사용해 보도록 하겠습니다. 새로 추가 버튼을 클릭합니다.




새로 추가 버튼을 클릭하면 워드프레스 유료 테마사이트와 비슷한 모양의 테마 추가 화면이 나옵니다.



테마 추가에 인기 메뉴를 클릭하겠습니다. 



인기 메뉴를 클릭하면, 왼편의 숫자가 2,042라고 나옵니다. 이것은 현재 워드프레스 공식사이트에 등록된 테마의 숫자입니다. 




테마는 인기도 순으로 나타납니다. 테마의 이름을 알고 있다면 오른쪽의 테마 검색 필드에 입력을 해서 검색할 수도 있습니다. 


이번에는 특성 필터 메뉴를 클릭합니다.



특성 필터 메뉴를 클릭하면 색상, 레이아웃, 특성, 주제에 따라서 2,042건의 테마를 선별해서 조회할 수 있습니다. 조회하기 원하는 항목 체크박스에 체크하고 필터 적용 버튼을 클릭하면 됩니다.



검색을 통해서 테마를 찾고 설치해 보도록 하겠습니다. 검색창에 Gridsby 를 넣고 검색을 합니다. 


검색된 테마 위에 마우스를 가져다 대면 설치 버튼이 나타납니다. 설치 버튼을 클릭하면 해당 테마가 설치됩니다.
설치 버튼을 클릭합니다.




테마의 설치작업이 진행되고 완료되었습니다.



왼쪽 메뉴바에서 테마 메뉴를 클릭합니다.




설치된 Gridsby 테마가 두번째에 보입니다. 




이제 테마를 활성화 하겠습니다. Gridsby 테마에 마우스를 가져다 대면 활성화 버튼이 나타납니다. 활성화 버튼을 클릭합니다.



Gridsby 테마가 활성화 되고 맨 앞쪽에 위치하게 됩니다. 테마가 적용된 사이트를 확인하기 위해서 왼쪽 상단의 사이트 이름을 클릭합니다.



다음과 같이 테마가 적용되었음을 확인할 수 있습니다. 테마 적용을 확인한 뒤에는 다시 원래대로 Twenty Fourteen 테마로 변경합니다. 





댓글 메뉴

워드프레스 관리자 화면에서 왼쪽 메뉴바의 댓글 메뉴를 클릭하면 다음과 같은 댓글 관리 화면이 나타납니다.

댓글 메뉴는 글과 페이지의 댓글을 관리하는 곳입니다. 댓글에 대한 승인 처리를 할 수 있고, 부적절한 댓글에 대해서는 스팸 처리를 해서 댓글을 관리할 수 있습니다.



댓글을 관리하는 것은 중요합니다. 일반적으로 스팸글들이 댓글을 통해서 들어오기 때문입니다. 스팸글을 다는 로봇은 갈수록 지능이 진화하고 있습니다. 그렇지만 로봇으로 댓글을 단 것은 사람이 눈으로 보면 확연히 구별이 갑니다. 아무리 자연어 기반의 댓글을 단다고 해고, 갑작스럽게 생뚱맞게 댓글을 다는 경우가 있기 때문입니다. 가령 오늘 날이 흐려서 비가 오고 있는데, 화창하고 좋은 날이네요. 행복한 하루되세요. 라는 글을 쓰는 경우입니다.

스팸 댓글에 대한 관리를 잘하는 것이 자신의 소중한 사이트가 추락하는 것을 막는 좋은 방법입니다. 따라서 여력이 된다면  댓글을 승인하는 프로세스를 고수하는 것도 사이트 운영의 좋은 방법입니다.

워드프레스는 기본적으로 관리자가 승인하지 않은 댓글은 보여지지 않도록 설정되어 있습니다. 글에 대한 관리자의 권한이 강화된 정책입니다. 그렇지만 관리자가 승인하지 않아도 방문자가 쓴 글이 바로 일반사용자에게 보이도록 할 수 도 있습니다. 그럴 경우에는 왼쪽 상단 메뉴의 설정 > 토론 에서 설정하면 됩니다.




방문자가 작성한 글에 대해서 승인처리는 일괄작업 콤보 박스를 통해서 진행할 수 있습니다. 일괄 작업 콤보 박스를 클릭합니다. 그러면 승인하지 않기, 승인하기, 스팸으로 표시하기, 휴지통으로 이동 등의 선택 항목이 나타납니다. 관리자는 이 선택 항목 중에서 하나를 선택하고 적용 버튼을 클릭해서 댓글을 관리할 수 있습니다.




위에 설명한 것처럼 워드프레스는 자체적으로 댓글 시스템이 탑재되어 있습니다. 그렇지만, 소셜 댓글을 플러그인 연동으로 사용할 수도 있습니다. 대표적으로 많이 사용하는 소셜 댓글은 디스커스(Disqus)가 있습니다. 디스커스에 대해서는 추후 플러그인 시간에 자세히 알아보도록 하겠습니다.



페이지 메뉴


워드프레스에서 글을 써서 콘텐츠를 만들 때 두 가지 방법으로 작성할 수 있습니다.
첫번째는 글이고 두번째는 페이지입니다. 글은 포스트라고도 이야기합니다.

포스트는 블로그 같이 계속되어 작성되는 동적인 글을 쓸 때 사용하고, 페이지(Page)는 회사소개나 담장자소개, 인사말, 사이트소개 등  한번 작성되면 잘 변하지 않는 정적인 글을 작성할 때 사용합니다.
간단하게 생각해서 자주 변경되지 않고 고정되는 정적인 글은 페이지로 작성을 하고, 계속 작성을 하는 동적인 글은 포스트로 작성을 하면 됩니다.

글(포스트) : 일반적으로 이해하기 쉽게 블로그의 포스팅
페이지 : 인사말이나 소개등으로 한 번 작성하면 고정이 되는 정적인 글

왼편 메뉴에서 페이지 위에 마우스를 가져다 대면 서브 메뉴로 모든 페이지와 세 페이지 추가 메뉴가 나타납니다.



모든 페이지

페이지 서브 메뉴에 모든 페이지를 클릭합니다.



모든 페이지 메뉴를 클릭하면 작성된 모든 페이지의 목록을 볼 수 있는 화면이 나옵니다.
아직까지 페이지를 만들지 않았기 때문에 샘플 페이지만 목록에 존재합니다. 글 목록을 보는 화면과 마찬가지로 페이지 목록을 보는 화면도 일괄작업과 조회를 위한 필터 기능을 가지고 있습니다.



새 페이지 만들기

페이지를 추가 하기 위해서 새 페이지 추가 버튼이나 메뉴를 클릭합니다.



새로운 페이지를 만드는 화면입니다.
포스트와 동일하게 페이지도 제목을 적고 본문을 작성하는 글이기 때문에 사용 방법은 크게 어렵지 않습니다.

이전 포스트 참고)



다만, 오른쪽에 페이지 속성이라는 옵션이 있습니다. 글에서는 카데고리와 태그 속성이 있었는데 페이지에는 페이지 속성이 있는 것입니다. 작성하는 페이지의 상위 페이지를 설정할 수 있고, 페이지 템플릿을 적용할 수 있습니다. 순서는 숫자를 입력해서 페이지 순서를 결정할 수 있습니다. 특별히 설정할 것이 없을 때는 디폴트로 그대로 놔두어도 상관없습니다.



제목과 본문을 다음과 같이 작성하고 공개하기 버튼을 클릭합니다.



페이지가 발행되었습니다. 라는 메시지가 뜨면 발행이 완료 된 것입니다. 발행이 완료되고 나면 발행 버튼은 업데이트 버튼으로 변경됩니다.





미디어 라이브러리


왼쪽 메뉴에서 미디어를 클릭합니다.



미디어 메뉴를 클릭하면 오른쪽에 미디어 라이브러리 화면이 나타납니다. 이곳에서 웹사이트의 이미지와 동영상, 오디오 및 첨부화일을 업로드하고 관리할 수 있습니다.



왼쪽에 라이브러리와 파일 올리기 라는 미디어의 서브 메뉴 두 개가 나타납니다. 라이브러리는 기존에 업로드된 미디어 화일을 선택해서 사용하는 것이고, 파일 올리기는 로컬PC에 있는 미디어 화일을 워드프레스로 올리는 기능을 합니다.



워드프레스의 장점 중 하나는 동일한 이미지나 동영상 화일 등 미디어 관련 화일들을 중복해서 업로드하지 않고 한 곳에서 관리할 수 있습니다. 네이버 블로그의 경우에는 동일한 한 개의 이미지를 여러 개의 포스팅에 추가하려면 매번 각각의 글마다 동일한 이미지를 첨부해야 합니다.

이렇게 각각의 글마다 이미지를 첨부하면 동일한 이미지인데도 로컬PC에서 서버로 중복해서 업로딩하기 때문에 비효율적입니다. 그렇지만 워드프레스는 미디어 라이브러리가 일종의 링크 기능을 제공하기 때문에 동일한 이미지를 중복해서 업로드하지 않고 미디어 라이브러리 안에서 통합 관리가 가능합니다.

해당 미디어를 관리하기 위해서는 가운데 미디어 이미지를 클릭하면 이미지 상세화면으로 넘어갑니다.



이미지를 클릭합니다.




이미지 상세화면이 나타납니다. 이 화일은 이미지 화일이기 때문에 이미지에 대한 옵션 정보가 함께 나타납니다.
이곳에서 이미지에 대한 상세 정보 및 속성을 수정할 수 있습니다.




오른쪽에 해당 이미지에 대한 URL 정보가 보입니다. 이미지 URL만 있으면, 어디에서든 중복해서 이미지를 업로드하지 않고 이미지를 사용자에게 보여줄 수 있습니다.

이미지 정보는 최대한 정성껏 입력해야 합니다. 특히 대체 텍스트는 검색엔진의 노출에도 영향을 미치므로 해당 이미지를 잘 설명하는 내용으로 충실히 입력해야 합니다. 적어도 제목과 캡션, 대체 텍스트는 꼭 입력하는 것이 좋습니다.



제목 : 이미지에 대한 제목으로 기본적으로 이미지 화일명이 들어간다. 미디어 라이브러리에서 보이는 제목이다.
캡션 : 이미지 아래에 표시되는 설명이다.
대체 텍스트 : 대체 텍스트 단어는 검색엔진에 노출되어서 내 이미지와 포스팅이 검색되는데 영향을 미친다.
설명 : 이미지에 대한 구체적인 설명, 미디어 라이브러리에서 설명부분에 표시되는 내용이다.

충실한 기입을 위해서 다음과 같이 이미지 정보를 수정합니다. 




간단한 이미지 편집 기능


미디어 라이브러리 화면에서 간단한 이미지 편집도 가능합니다. 왼쪽 가운데 있는 이미지 편집 버튼을 클릭하면 기능을 사용할 수 있습니다. 이미지 편집 버튼을 클릭합니다.



이미지 편집 화면이 나타납니다. 


간단한 이미지 도구가 보입니다. 간단하게 이미지 사이즈나 크기의 변경이 가능하고, 이미지를 자르거나 이미지를 회전하는 기능, 이미지를 좌우 상하로 반전하는 기능도 가능합니다.



이미지 자르기


이미지를 자르기 위해서는 마우스를 이미지 위에 올려놓고 마우스를 클릭해서 드래그하면 자르기 옵션이 활성화 됩니다.




이미지에 마우스를 가져다 대고 드래그 합니다.



파일올리기


왼쪽 메뉴에서 파일올리기를 클릭하면 이미지 화일이나 각종 미디어 화일을 첨부할 수 있는 화면이 나옵니다. 파일을 선택해서 이미지를 첨부하면 됩니다.



글쓰기 메뉴


워드프레스에서 본격적인 글쓰기를 하기위해서 사용하는 것이 글쓰기 메뉴입니다. 왼쪽 메뉴바에서 글 부분에 마우스를 가져다 댑니다.



마우스를 가져다 대면 글에 대한 서브 메뉴가 나오는 것을 확인할 수 있습니다.



왼쪽 메뉴에 글 부분에 마우스를 가져다 대지 않고, 바로 글 부분을 클릭하면 오른쪽 화면은 글의 목록이 나타나고, 왼쪽 메뉴는 글에 대한 서브 메뉴가 나타납니다.



왼쪽의 글 메뉴 아래에는 모든 글, 새 글 쓰기, 카데고리, 태그 이렇게 네 개의 서브메뉴가 존재합니다.



모든 글


먼저 서브 메뉴 중에서 모든 글을 클릭합니다.



모든 글을 클릭할 때 나타나는 화면입니다. 이 화면은 왼쪽 메뉴에서 글을 클릭했을 때 나타나는 화면과 동일합니다. 사이트의 모든 글을 관리하는 화면입니다.


서브 메뉴의 모든 글을 클릭하면 글의 목록이 나타나고, 해당 글에 대한 편집과 삭제 및 일괄 처리가 가능합니다. 그리고 글의 중요한 상태 정보인 글의 발행여부를 확인할 수 있습니다. 내가 작성한 글은 발행이라는 과정을 거쳐야지만 다른 사람들에게 보여지는 글로 바뀝니다. 즉, 발행이라는 과정을 거쳐야 나의 글이 인터넷의 바다에 나아가는 것입니다.(단, 호스팅 서비스를 받아야 가능합니다. 지금은 워드프레스를 로컬PC에 설치하고 작업하고 있기 때문에 다른 사람에게 보여지지 않습니다.)



글 목록 화면에서는 일괄작업 콤보 박스가 있습니다. 일괄작업 콤보 박스를 클릭하면 아래와 같이 일괄작업을 할 수 있는 목록이 나타납니다.
편집, 휴지통으로 이동의 작업을 일괄로 작업할 수 있습니다.



일괄작업 적용 방법 : 원하는 작업을 할 글을 체크박스에서 선택하고 일괄작업을 편집이나 휴지통으로 이동으로 선택한 뒤에 적용 버튼을 클릭하면 됩니다.

모든 날짜, 모든 카데고리 필더 : 날짜나 카데고리로 필터를 걸어서 원하는 조건으로 글을 조회하는 기능입니다. 지금은 글이 없어서 조회할 필요를 느끼지 못하지만 글이 100개만 넘어가도 필터 기능이 없으면 무척 불편합니다.




새 글 쓰기



서브 메뉴 중에서 새 글 쓰기를 클릭하면 글을 작성하는 편집기 화면으로 이동하게 됩니다.
새 글 쓰기는 위에서 처럼 화면 왼쪽 메뉴에서 클릭을 해도 되고 글목록이 나오는 오른쪽 화면에서 새 글 쓰기 버튼을 클릭해도 됩니다.



새 글 쓰기 버튼을 클릭합니다. 새 글 쓰기 를 클릭하면, 일반적인 HTML 편집기와 유사한 글을 작성하기 위한 화면이 나옵니다. 



워드프레스에서 글을 쓰는 화면은 다음과 같이 구성되어 있습니다.

실제 글을 입력하는 제목 입력 부분, 본문 입력부분이 있고,
글에 대한 옵션을 정의하는 공개 범위 선택, 글 형식 세팅, 카데고리, 태그 선택 부분이 있습니다.

먼저 글을 작성하고 글에 대한 옵션을 지정하도록 하겠습니다.



제목 란에 제목을 워드프레스란 무엇일까요? 와 같이 작성하고 본문 란에 내용을 다음과 같이 간략히 작성합니다.



간략한 본문 작성이 완료되었습니다. 이제는 이미지를 첨부해보겠습니다. 이미지 첨부는 미디어 추가 버튼을 통해서 할 수 있습니다. 미디어추가 버튼을 클릭합니다.


포스팅에 업로할 이미지를 드래그하거나 '파일을 선택하세요' 버튼을 클릭합니다.



미디어 라이브러리 탭에 선택한 이미지 화일이 나타납니다. 


첨부되는 이미지의 크기는 디폴트로 보통으로 선택됩니다. 원본크기로 업로드 하려면 전체 크기를 선택하면 됩니다.
설정이 완료되면 화면 우측 하단의 '글에 삽입하기' 버튼을 클릭합니다.




본문에 선택한 이미지가 추가된 것을 볼 수 있습니다.



글쓰기 집중 모드란?


 오른쪽에 글쓰기 집중모드라는 기능이 있습니다. 글쓰기 집중모드 부분을 클릭하겠습니다.





글쓰기 집중 모드를 클릭하면 그림과 같이 글쓰는 것외에는 모든 옵션이 사라집니다. 글쓰는 집중력을 높이기 위한 기능입니다.



공개하기 옵션


글의 작성이 완료되면 공개하기 옵션을 선택해야합니다. 아직 미완성이거나 공개하지 않을 때에는 임시 글로 저장하기 버튼을 클릭하면 됩니다.



미리보기는 글을 공개하기 전에 사전에 어떻게 보여지는지를 확인하는 기능이고, 임시 글로 저장하기 버튼은 저장은 되나 공개는 되지 않는 기능입니다.

워드프레스는 공개하기 버튼을 클릭해야 다른 사람이 볼 수 있는 글로 인터넷상에 퍼블리싱 됩니다. 따라서 글을 포스팅하다가 아직 미완성 중이라면 공개하기 버튼을 클릭하지 않는 것이 좋습니다. 미완성된 글에 공개하기 버튼을 클릭하면 완성되지 않은 글이 다른 사람에게 보여지기 때문입니다. 미완성된 글을 실수로 공개해버리면 구글의 검색엔진은 그 글을 완성된 글이라 판단하고서 해당 글의 완성도 점수를 줄 것입니다. 그렇다면 완성되지 않은 글이기 때문에 그 글에 대한 구글의 최적화 지수는 낮아질 것이고, 전반적으로 자신의 사이트에 좋지 않은 영향을 미치게 됩니다. 그래서 꼭 공개하기 버튼은 글의 모든 작성이 완전히 완료된 뒤에 클릭해야합니다.



글 형식 옵션


글형식 옵션은 기본은 표준으로 세팅되어 있습니다. 이미지나 비디오 위주의 포스팅을 한다면 글 형식을 이미지나 비디오로 변경해서 사용하면 됩니다.



카데고리 옵션


아직까지 카데고리를 등록하지는 않았습니다. 카데고리를 등록하고 해당글을 어떤 카데고리에 속할 지를 결정할 수 있습니다. 추후에 서브 메뉴에 있는 카데고리 기능을 설명하면서 카데고리의 등록과 구성을 어떻게 하는지 알아보도록 하겠습니다.




태그 옵션


태그는 작성한 글에 대한 일종의 요약 정보라 할 수 있습니다. 포스팅을 끝낸 뒤 해당 글을 가장 잘 표현할 수 있는 태그를 달아놓으면 글을 찾거나 관리하는데 무척 유용합니다. 사용자 입장이나 검색엔진 입장에서도 태그는 해당 글을 판별하는 중요한 정보가 됩니다.

입력 필드에 신규 태그를 입력하고 추가하기 버튼을 클릭하면 태그가 생성이 됩니다.




특성이미지 옵션


특성이미지는 하나의 포스팅 글에 여러개의 이미지를 포함하고 있을 때, 여러개의 이미지 중에서 대표해서 보여줄 이미지를 이야기 합니다.
특성 이밎 설정을 클릭해서 이미지를 첨부하거나 선택하면 됩니다.




공개하기 버튼


모든 설정이 끝나면 '공개하기' 버튼을 클릭해서 글의 내용을 포스팅합니다. 공개하기 버튼을 클릭합니다.


공개하기가 완료되면 '글이 발행되었습니다.'라는 메시지가 상단에 나타납니다.



또한 글이 발행되고 나면, 공개하기 옵션에서 공개하기 버튼은 업데이트 버튼으로 변경된 것을 확인 할 수 있습니다.





+ Recent posts