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