워드프레스에서는 기능상으로는 사용자수를 제한없이 추가 할 수 있습니다. 그렇지만 무조건 사용자를 늘리는 것보다는 꼭 필요한 사용자에게 적절한 권한을 부여하고 역할에 맞게 권한을 조정하는 것이 중요합니다.
과거와는 다르게 요즈음 웹사이트의 트랜드는 굳이 로그인을 하지 않아도 어느정도의 웹사이트 기능을 이용할 수 있게하거나 간략하게 죄소한의 정보로 로그인을 요청하는 사이트들이 많이 있습니다.

패스트(FAST) 사회, 빠름이 경쟁력


이미 기존의 대형 인터넷 쇼핑몰의 매출을 뛰어넘은 소셜 커머스 플랫폼인 쿠팡, 위메프, 티몬만 보아도 알 수 있습니다.
예전에는 쇼핑몰 사이트에 가입하려도 사용자에게 여러가지 정보를 요청했었습니다. 그렇지만 소셜 커머스는 전화번호나 이메일 정도의 정보로 간편하게 가입이 되며 사이트의 모든 기능을 이용할 수 있습니다. 
따라서 워드프레스를 통해서 블로그나 중소형 쇼핑몰을 시작하려고 한다면 굳이 로그인을 요청하거나 로그인 절차를 복잡하게 하는 것은 사용자의 웹사이트 접근성을 떨어트리는 일입니다.

따라서 가능하면 로그인 없이 사이트를 이용할 수 있도록 하는 것이 좋습니다. 그렇지만 팀블로그등 여러명이 운영한다면 관리자외에 편집자나 글쓴이 정도의 권한은 부여해야 합니다.

사용자 추가하기


워드프레스에서 사용자를 추가하고 관리하는 것은 어렵지 않습니다. 먼저 왼쪽 사이드바 메뉴에서 사용자 > 사용자 추가하기 메뉴를 클릭합니다.



사용자를 추가하는 화면이 나타납니다. 필수 정보는 사용자명과 이메일 그리고 역할 부분입니다. 필수 정보를 입력하고 새로운 사용자를 추가 버튼을 클릭하면 사용자가 추가 됩니다.



역할 항목은 사용자의 권한을 나타내는 옵션입니다. 사용자의 권한은 아래 화면과 같이 다섯 가지 권한으로 구성됩니다.



사용자 권한 종류


관리자 : 웹사이트 전체에 대한 권한을 가지고 있는 관리자로 Administrator 라고도 합니다.
편집자 : 글을 쓰는 콘텐츠의 생산뿐만 아니라 콘텐츠를 생상하는 생산자들(편집자, 글쓴이)를 총괄 관리하는 사람입니다. 신문사로 따지면 편집장 정도의 위치라고 보면 됩니다. 글에 대한 모든 권한을 가지고 있습니다.
글쓴이 : 글을 작성하고 글을 발행할 수 있는 권한을 가지고 있는 사람입니다.
기여자 : 글을 작성할 수 는 있지만 발행 권한은 가지고 있지를 않습니다. 따라서 기여자가 작성한 콘텐츠는 관리자나 편집자의 검토를 거친뒤에 발행할 수 있습니다.
구독자 : 말 그대로 글을 읽는 사람을 말합니다. 신문사로 치면 신문 구독자라고 생각하면 됩니다.


워드프레스 사용자 권한표


 
관리자
편집자
글쓴이
기여자
구독자
사용자 관리
가능
X
X
X
X
워드프레스 설정
가능
X
X
X
X
글쓰기 기능
가능
가능
가능
가능(발행 불가)
X
페이지 기능
가능
가능
X
X
X
다른 유저 글수정
가능
가능
X
X
X


사용자 권한을 부여한 뒤에 사용자 관리는 사용자 > 모든 사용자 메뉴를 클릭해서 진행하면 됩니다. 모든 사용자 메뉴를 클릭하면 등록한 사용자 정보가 목록 형태로 디스플레이 됩니다.





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

그라바타 Gravatar 서비스로 아바타 만들기  (1) 2015.12.09
토론 메뉴 댓글 설정하고 관리하기  (0) 2015.12.09
워드프레스 고유주소 슬러그 현명하게 사용하기  (0) 2015.12.07
워드프레스에 구글 캘린더로 나만의 일정관리하기  (3) 2015.11.30
워드프레스로 Home 메인 페이지 만들기  (0) 2015.11.18
워드프레스 사이트가 활성화 되면 광고성 스팸 댓글에 시달리게 됩니다. 스팸 댓글이 많이 있는 것은 사이트 신뢰도에 직접적인 영향을 미치게 됩니다. 특히 오랜 기간 관리하지 않는 워드프레스 사이트의 경우 수십 수백여건의 스팸으로 도배되는 경우도 있습니다.

스팸 댓글의 수호자 아키스밋


워드프레스 사이트내에서 스팸을 막는 방법은 여러가지가 있지만 가장 간단한 방법은 워드프레스 설치시에 기본으로 제공하는 아키스밋(Akismet) 플러그인을 사용하는 것입니다. 
아키스밋은 워드프레스를 만든 오토매틱의 워드프레스닷컴에서 운영하는 스팸 댓글 필터링 서비스입니다. 아키스밋은 전세계에 설치되어 있는 워드프레스 시스템을 분석해서 일종의 지식기반 스팸 데이터베이스를 구축해서 스팸 댓글을 필터링합니다. 전세계에 있는 방대한 워드프레스 시스템을 분석했기 때문에 다양한 스팸의 패턴을 분석해서 시간의 흐름에 따라서 더욱 정확한 스팸 필터 프로그램으로 진화하고 있습니다.

아키스밋 사용하기


아키스밋은 워드프레스에 기본적으로 설치되어 있는 플러그인이기 때문에 플러그인을 활성화를 해서 사용하면 됩니다. 다만 아키스밋을 사용하기 위해서는 워드프레스닷컴( https://ko.wordpress.com/ ) 의 계정이 있어야 사용을 할 수 있습니다. 워드프레스닷컴의 계정이 없다면 신규 가입을 해서 계정을 생성하면 됩니다.

그럼 먼저 아키스밋 플러그인을 활성화하기 위해서 왼쪽 메뉴에 설치된 플러그인 메뉴를 클릭합니다.



설치된 플러그인이 목록 화면에 나타납니다. Akismet 플러그 아래에 활성화 링크를 클릭합니다.

`

아키스밋 플러그이 활성화 되면서 아키스밋 안내 문구가 상단에 나타납니다. 아키스밋 계정을 활성화 하세요 를 클릭합니다.



아키스밋 API를 입력하는 화면이 나타납니다. 저의 경우 젯팩이 설치되어있기 때문에 이미 젯팩을 통해서 자신의 메일 계정으로 연결되었다는 메시지가 나타납니다.
Register for Akismet 버튼을 클릭합니다.



아키스밋 서비스 선택 및 API키 받기


아키스밋을 서비스의 종류를 선택할 수 있습니다. 베이직의 경우에는 무료이지만 나머자 세 개는 유료 서비스입니다. 
아키스밋은 비상업용으로는 무료이지만 상업용으로 사용할 때는 구매를 해야합니다. 무료인 Basic의 GET STARTED 버튼을 클릭합니다.



카드 번호를 입력하는 화면이 나타납니다. 베이직은 무료이기 때문에 오른쪽 화면에서 $36.00/YEAR 라고 적혀있는 사이드바를 마우스로 클릭해서 왼쪽으로 드래그합니다.



금액을 왼쪽으로 드래그 하면 아래 화면과 같이 카드정보 입력 화면이 사라지고 성명을 입력하는 화면만 보여집니다. 성명을 입력하고 CONTINUE 버튼을 클릭합니다.



2~4초 정도 아래와 같이 진행중 화면이 나타납니다.



진행이 완료되면 아키스킷의 API 키가 나타납니다. 



키를 마우스로 드래그해서 복사합니다. 이 키를 워드프레스 아키스밋 키 입력화면에서 입력할 것입니다.



이제 다시 아키스밋 화면에 들어가서 복사한 API 키를 붙여넣고 이 키 사용하기 버튼을 클릭합니다.



이 키 사용하기 버튼을 클릭한 뒤에 길게는 시스템 상황에 따라서 10초에서 20초 정도 연결 작업시간이 걸릴 수 도 있습니다.
계정이 활성화되면 바로 아키스밋 설정 화면이 나타납니다. 아래 쪽에 계정 항목은 Personal Free Accoiunt 로 정상적으로 무료 구독이 된 것을 확인 할 수 있습니다. 그렇지만 아직 설정이 모두 끝난 것은 아닙니다.




아키스밋의 설정내용을 확인하고 변경 사항 저장 버튼을 클릭해야 모든 설정이 끝난 것입니다. 변경 사항 저장 버튼을 클릭합니다.





아키스밋을 통해서 걸러진 스팸 댓글은 바로 이곳에


이제 아키스밋이 스팸 댓글을 차단할 수 있습니다. 댓글 메뉴에 들어가면 스팸이라는 서브 메뉴가 있습니다. 아키스밋이 활성화 되었으므로 앞으로 스팸 댓글이 달리면 바로 이곳에 스팸으로 분류되어 저장될 것입니다.



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

사용자 역할별 세부 권한관리 플러그인 User Role Editor  (0) 2015.12.10
소셜 댓글 서비스 디스커스 Disqus 사용하기  (0) 2015.12.08
글 순서를 간편하게 조정하는 Post Types Order 플러그인  (0) 2015.12.05
달력으로 포스트 예약 관리하기 Editorial Calendar 플러그인  (0) 2015.12.04
최신형 킹콩보드 게시판 플러그인으로 자유롭게  (2) 2015.12.03
워드프레스를 사용하면서 고유주소나 슬러그라는 용어를 자주 접하게 됩니다. 고유주소는 슬러그라고 생각해도 됩니다. 고유주소는 콘텐츠 작성한 글이나 페이지의 URL 주소입니다. 즉, 해당 콘텐츠의 접속 경로입니다. 워드프레스의 고유주소 일반 설정을 글 이름으로 세팅하면 글이나 페이지를 작성시에 입력하는 제목을 기반으로 자동으로 고유주소를 만들어냅니다.

아래처럼 제목을 입력하면 워드프레스는 고유주소를 자동으로 생성합니다.



슬러그를 사용할 때 두 가지 중요사항


첫째, 글이나 페이지를 공개한 뒤에는 가능한 슬러그를 변경하지 않는 것이 좋습니다.

그 이유는 글이나 페이지가 공개된 뒤에 슬러그를 변경하면 이미 SNS 등을 통해서 공유된 슬러그 URL의 링크를 클릭해도 페이지를 오류가 나서 해당 사이트의 신뢰성을 떨어트리기 때문입니다. 또한 공개버튼을 클릭해서 인터넷상에 자신의 글을 발행하게 되면 발행 시점부터 구글등 검색엔진이 해당 페이지에 대해서 검색 색인 작업을 자동으로 하게됩니다. 검색엔진에서는 슬러그 변경 전 URL을 색인해놓았는데 만약 슬러그 변경으로 깨진 링크가 발생하면 역시 사이트의 최적화에 좋은 영향을 주기는 어렵습니다.


둘째, 슬러그는 가능한 영문으로 사용하는 것이 좋습니다.

SNS를 통해서 URL을 공유할 때 어떻때 보면 http://shuman.kr/%20%E2%80%8E 과 같이 깨진 주소처럼 보이는 경우가 있습니다. 영문을 사용해서 슬러그를 입력하면 주소가 깨지지 않지만 한글을 사용하면 위와 같은 현상이 발생합니다.
또한 어떤 경우에는 한글 주소자체를 제대로 인식하지 못해서 접속이 되지 않는 경우 또한 발생합니다. 그런 경우에는 호스팅 서버 세팅의 문제일 경우가 대부분입니다. 따라서 서버 설정에 익숙하지 않다면 가능한 슬러그는 영문을 사용하는 것을 추천합니다.


한글 고유주소로 연결되지 않을 때 처리 방법


한글 고유주소가 연결되지 않는 경우에는 UTF-8 유니코드를 사용하지 않아서 그렇습니다. 이럴때는 서버의 .htaccess 파링의 # END WordPress 아래 부분에 다음 내용을 추가해서 명시적으로 유니코드를 사용하도록 하면 됩니다.

# END WordPress

<IfModule mod_url.c>
CheckURL On
ServerEncoding UTF-8
</IfModule>


워드프레스에서 고유주소 설정하기


왼쪽 사이드바 메뉴에서 설정 > 고유주소를 클릭합니다.



고유주소 설정 화면이 나타납니다. 일반 설정 옵션을 글 이름으로 선택하고 변경사항 저장 버튼을 클릭합니다. 

일반 설정 항목에 보면 여러가지 표시방법으로 고유주소를 설정할 수 있습니다. 기본으로는 http://shuman.kr/?p=123 형태로 되어있지만 추천하지는 않습니다. 가능한 해당 글의 정보를 반영할 수 있는 글 이름으로 설정하는 것이 좋습니다. 날짜나 월별로 관리하고 싶다면 날짜와 이름 이나 월과 이름을 사용해도 크게 문제될 것은 없습니다.


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

토론 메뉴 댓글 설정하고 관리하기  (0) 2015.12.09
사용자 추가하고 권한 부여하기  (0) 2015.12.08
워드프레스에 구글 캘린더로 나만의 일정관리하기  (3) 2015.11.30
워드프레스로 Home 메인 페이지 만들기  (0) 2015.11.18
이미지 갤러리 사용하기  (0) 2015.11.11
포스팅을 많이하다보면 글의 갯수가 늘어나기 마련입니다. 카데고리를 통해서 글을 관리한다고 해도 때로는 동일 카데고리 안에 있는 글의 순서를 조정할 필요를 느끼게 됩니다.
그렇지만 워드프레스에서 기본적으로 글의 발행 일자 순이나 역순으로만 글의 순서가 정해집니다. 따라서 글의 순서를 바꾸려면 발행되는 일시를 변경해야하는 번거로움이 있습니다.



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를 클릭합니다.



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


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



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

소셜 댓글 서비스 디스커스 Disqus 사용하기  (0) 2015.12.08
아키스밋(Akismet) 플러그인으로 스팸 댓글 차단하기  (0) 2015.12.07
달력으로 포스트 예약 관리하기 Editorial Calendar 플러그인  (0) 2015.12.04
최신형 킹콩보드 게시판 플러그인으로 자유롭게  (2) 2015.12.03
한국인이 사랑하는 게시판 플러그인 KBoard  (0) 2015.12.02

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


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

그렇지만 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일에 정상적으로 예약이 변경된 것을 확인할 수 있습니다.




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

아키스밋(Akismet) 플러그인으로 스팸 댓글 차단하기  (0) 2015.12.07
글 순서를 간편하게 조정하는 Post Types Order 플러그인  (0) 2015.12.05
최신형 킹콩보드 게시판 플러그인으로 자유롭게  (2) 2015.12.03
한국인이 사랑하는 게시판 플러그인 KBoard  (0) 2015.12.02
콘텐츠 형상관리 성능향상 Revision Control 플러그인  (0) 2015.12.01

킹콩보드


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

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

킹콩보드 플러그인 설치


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


     
플러그인 검색창에 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 제목과 내용을 입력하고 저장버튼을 클릭합니다.



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


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



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



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

글 순서를 간편하게 조정하는 Post Types Order 플러그인  (0) 2015.12.05
달력으로 포스트 예약 관리하기 Editorial Calendar 플러그인  (0) 2015.12.04
한국인이 사랑하는 게시판 플러그인 KBoard  (0) 2015.12.02
콘텐츠 형상관리 성능향상 Revision Control 플러그인  (0) 2015.12.01
관리자 메뉴 정리 끝판왕 플러그인 Admin Menu Editor  (0) 2015.11.26

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


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

대한민국 대표 게시판 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 게시판이 생성된 것을 확인할 수 있습니다. 게시판에 글을 쓰기 위해서 글쓰기 버튼을 클릭합니다.




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



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



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



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




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


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

달력으로 포스트 예약 관리하기 Editorial Calendar 플러그인  (0) 2015.12.04
최신형 킹콩보드 게시판 플러그인으로 자유롭게  (2) 2015.12.03
콘텐츠 형상관리 성능향상 Revision Control 플러그인  (0) 2015.12.01
관리자 메뉴 정리 끝판왕 플러그인 Admin Menu Editor  (0) 2015.11.26
가격을 표시하는 플러그인 Easy Pricing Tables Lite by Fatcat Apps  (0) 2015.11.20

성능을 저하시키는 콘텐츠 변경이력


워드프레스에서 콘텐츠를 만들다보면 과거에 삭제한 버전을 복구해야 할 때가 간혹 있습니다. 워드프레스의 강력한 기능 중의 하나는 작성한 모든 글에 대한 글의 리비전(Revision)이 보관된다는 점입니다. 리비전이 보관된다는 것은 자동으로 빽업본이 저장된다는 것을 의미합니다. 그렇지만 불필요하게 많은 리비전이 보관되면 글이 몇 개 없을 때는 상관없지만 작성한 콘텐츠가 많아지면 모든 글에 대한 변경이력을 보관하고 있는 것 자체만으로도 워드프레스 사이트 성능 저하에 영향을 미치게 됩니다.

따라서 최근 변경이력을 보관할 갯수를 지정해 주는 것이 성능 저하를 막는 좋은 방법입니다. Revision Control 플러그인은 이런 기능을 하는 플러그인입니다. 그럼 Revision Control 플러그인을 설치하고 설정하겠습니다.


Revision Control 플러그인 설치 및 옵션 설정


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



오른쪽 플러그인 검색창에서 Revision Control 을 입력하고 엔터키를 칩니다. Revision Control 플러그인은 최근 업데이트는 11개월 전에 있었지만 그래도 9만명 이상이 설치한 검증된 플러그인임을 확인할 수 있습니다.



지금 설치하기 버튼을 클릭해서 플러그인 설치를 진행합니다.



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



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



Revision Contorol 옵션 설정 화면이 나타납니다. 이곳에서 리비전의 갯수를 조정해서 사이트의 성능 저하를 막을 수 있습니다.
그렇다면 리비전의 갯수가 몇 개 정도가 적절할지 결정을 해야합니다. 리비전 갯수의 설정은 결국은 자신의 경험치가 될 것입니다.
일단 3개 ~ 5개 정도가 무난할 것 같습니다. 이곳에서는 전체적인 리비전 갯수를 설정할 수 있고, 개별 글이나 페이지에서도 개별적인 설정이 가능하기 때문에 변경이 많이 발생해서 리비전이 많이 필요한 글이나 페이지에서는 리비전 갯수를 증가 시키는 것도 좋은 방법입니다.



그럼 여기에서는 글과 페이지 가격 테이블의 리비전 갯수를 5개로 설정하도록 하겠습니다.
Posts와 Pages, Pricing Tables의 항목의 콤보 박스에서 Maximum 5 Revisions stored를 선택하고 Save Changes 버튼을 클릭합니다.



개별 글 리비전 옵션 설정


개별 글 화면에 들어갑니다. 개별 글에 대한 리비전 옵션을 설정하기 위해서는 화면 오른쪽에 화면 옵션 탭을 클릭한 뒤에 Post Revisions 체크박스에 체크를 해야합니다.



체크가 완료되면 글 본문 입력창 아래에 Post Revisions 라는 박스가 나타납니다. 이곳에서 개별 글에 대한 리비전 갯수를 설정하면 됩니다.






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

최신형 킹콩보드 게시판 플러그인으로 자유롭게  (2) 2015.12.03
한국인이 사랑하는 게시판 플러그인 KBoard  (0) 2015.12.02
관리자 메뉴 정리 끝판왕 플러그인 Admin Menu Editor  (0) 2015.11.26
가격을 표시하는 플러그인 Easy Pricing Tables Lite by Fatcat Apps  (0) 2015.11.20
플러그인 없이 HTML 코드로만 구글 지도 만들기  (0) 2015.11.19

일상의 삶이 된 구글


검색 엔진 사업으로 시작한 구글은 안드로이드 및 유망한 회사를 인수합병하면서 이제는 우리의 현실의 삶에 밀접한 영향을 끼치는 회사가 되었습니다. 아이폰과 함께 등장했던 스마트폰 시장의 애플 기류는 그 자체의 폐쇄성 때문에 시장 확장에 어려움을 겪었던 것이 사실입니다. 아이폰 등장과 함께 스마트폰 시장을 완전히 장식할 것 같은 기세는 이미 꺾긴지 오래고, 아무래도 소스공개와 확장성을 겸비한 구글의 안드로이드에게 밀리고 있습니다.

구글의 시스템들이 삶과 밀접한 관련이 있는 것은 구글이 무료로 배포하는 앱과 프로그램들 때문이라해도 과언이 아닙니다.
구글이 얼마 전 공개한 구글 포토의 용량 무제한 정책은 스마트폰으로 사진 찍기를 좋아하는 일반인들에게 큰 찬사를 받았습니다.

사진을 많이 찍다보면 언제나 접하는 문제는 용량의 장벽입니다. 구글 포토는 용량을 무제한으로 만들어주는 대신 그 대가로 사용자의 정보를 획득할 수 있습니다. 사용자의 정보가 구글 서버에 많아지고 사람들이 올리는 사진이 많아질수록 구글의 자동화 엔진은 사진을 자동으로 분류하는 알고리즘을 최적화 할 수 있습니다.

저 역시 오랫동안 구글프로그램과 앱들을 사용하고 있습니다. 특히 생활하면서 없어서는 안 될 프로그램은 바로 구글 캘린더입니다. 스마트폰으로 구글 캘린더를 사용해서 일정을 관리하고 노트북과 함께 활용하고 있습니다. 아직까지 구글 캘린더를 사용하지 않는 분들은 이번 기회에 활용해보시기 바랍니다.

워드프레스에 들어간 구글 캘린더


일을 하다보면 언제나 들여다보는 것이 일정입니다.
워드프레스에 구글 캘린더를 적용하면 그룹이나 팀 간의 일정을 공유하기에 좋은 플랫폼이 됩니다.
그럼 워드프레스 사이트에 구글 캘린더를 적용해보겠습니다.

구글 캘린더를 워드프레스에 적용하기 위해서는 별도의 플러그인을 설치하지 않아도 됩니다. iframe 형태로 바로 워드프레스에 삽입할 수 있습니다.

구글 캘린더에서 소스 복사


먼저 구글 캘린더( https://calendar.google.com/ )에 로그인 합니다. 구글 캘린더에 로그인하면 현재 캘린더에 기록한 일정들이 디스플레이 됩니다. iFrame을 활용해서 이 캘린더를 그대로 워드프레스에 가져오는 방법을 알아보겠습니다.




왼쪽 메뉴의 내 캘린더에서 고객 주간 미팅에 마우스를 올려놓고 마우스 우클릭을 합니다. 우클릭을 하면 뜨는 팝업에서 캘린더 설정을 클릭합니다.




고객 주간 미팅 세부정보 화면이 디스플레이 됩니다. 아래쪽에 있는 이 캘린더 추가하기 항목에 iframe 소스코드를 복사합니다. 이 소스코드가 바로 구글 캘린더 소스입니다.





워드프레스 페이지에 구글 캘린더 붙여넣기



워드프레스에서 새 페이지 추가를 클릭해서 새 페이지를 생성합니다.



새 페이지의 제목은 구글 캘린더를 입력합니다. 오른쪽에 텍스트 탭을 클릭한 뒤에 조금 전 복사했던 구글 캘린더의 iframe 소스를 붙여 넣고 미리보기 버튼을 클릭합니다.




워드프레스 페이지 내에 구글 캘린더가 정상적으로 삽입된 것을 볼 수 있습니다. 구글 캘린더 자체적으로 많은 기능을 내장하고 있기 때문에 별도의 캘린더 플러그인을 설치하지 않고도 워드프레스에서 캘린더 일정을 함께 공유할 수 있습니다. 플러그인을 설치해서 캘린더를 중복관리하지 않아도 되는 이점이 있는 셈입니다.
     


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

사용자 추가하고 권한 부여하기  (0) 2015.12.08
워드프레스 고유주소 슬러그 현명하게 사용하기  (0) 2015.12.07
워드프레스로 Home 메인 페이지 만들기  (0) 2015.11.18
이미지 갤러리 사용하기  (0) 2015.11.11
워드프레스 설정 메뉴  (2) 2015.11.10
워드프레스를 오래 사용하다 보면 많은 플러그인을 설치하게 됩니다. 플러그인이 늘어나면서 관리자 화면의 왼쪽 사이드바 관리자 메뉴 항목이 너무 많아지는 것 경우가 일반적입니다. 그렇게 되면 아래 쪽에 위치한 플러그인은 잘 보이지 않아서 작업을 하기가 불편합니다. 이럴때 유용하게 사용할 수 있는 메뉴 관리 플러그인이 있습니다. 바로 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 버튼을 클릭하면 됩니다. 



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



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

한국인이 사랑하는 게시판 플러그인 KBoard  (0) 2015.12.02
콘텐츠 형상관리 성능향상 Revision Control 플러그인  (0) 2015.12.01
가격을 표시하는 플러그인 Easy Pricing Tables Lite by Fatcat Apps  (0) 2015.11.20
플러그인 없이 HTML 코드로만 구글 지도 만들기  (0) 2015.11.19
숏코드 플러그인 Shortcodes Ultimate 사용하기 예제-2  (1) 2015.11.17
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 버튼을 클릭합니다.



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



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



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

콘텐츠 형상관리 성능향상 Revision Control 플러그인  (0) 2015.12.01
관리자 메뉴 정리 끝판왕 플러그인 Admin Menu Editor  (0) 2015.11.26
플러그인 없이 HTML 코드로만 구글 지도 만들기  (0) 2015.11.19
숏코드 플러그인 Shortcodes Ultimate 사용하기 예제-2  (1) 2015.11.17
숏코드 플러그인 Shortcodes Ultimate 사용하기 예제-1  (8) 2015.11.16
지난 시간에 숏코드를 구글 지도를 만드는 법을 공부하였습니다. 그렇지만 간혹 숏코드 플러그인을 사용하지 않고 워드프레스 페이지에 구글 지도를 삽입해야 하는 경우가 있습니다. 이번에는 숏코드를 사용하지 않고 구글맵스에 들어가서 iframe 태그를 얻어와서 워드프레스 본문 페이지내에 구글 지도를 추가하는 방법을 알아보도록 하겠습니다.

구글 지도 소스코드 얻기


먼저 구글맵 사이트(http://maps.google.co.kr)에 접속합니다. 

구글맵의 검색창에서 구글 지도를 첨부하기 원하는 지역명을 검색합니다. 여기에서는 강남구 서초동을 검색하였습니다.



왼쪽 화면에 공유 아이콘을 클릭합니다.



iframe 태그를 사용해야 하기 때문에 지도 퍼가기 탭을 클릭합니다. 




아래 iframe 부분을 모두 복사합니다. 복사된 소스코드를 워드프레스 본문에 붙여넣기를 할 것입니다.




워드프레스 페이지에 구글 지도 삽입


워드프레스 왼쪽 사이드바 메뉴에서 페이지 > 새 페이지 추가 를 클릭합니다.



제목은 구글 지도 예제라고 입력하고 텍스트 탭을 클릭합니다. 텍스트 탭 화면에서 조금 전에 복사한 구글 지도 소스코드를 붙여넣기를 합니다. 소스 코드를 붙여넣은 뒤에 미리보기 버튼을 클릭해서 구글 지도가 제대로 본문에 삽입되었는지 확인합니다.



숏코드 플러그인을 사용하지 않고도 구글맵에서 구글 지도 HTML 소스코드를 가지고 와서 정상적으로 화면에 디스플레이 된 것을 확인할 수 있습니다.




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

관리자 메뉴 정리 끝판왕 플러그인 Admin Menu Editor  (0) 2015.11.26
가격을 표시하는 플러그인 Easy Pricing Tables Lite by Fatcat Apps  (0) 2015.11.20
숏코드 플러그인 Shortcodes Ultimate 사용하기 예제-2  (1) 2015.11.17
숏코드 플러그인 Shortcodes Ultimate 사용하기 예제-1  (8) 2015.11.16
글작성 끝판왕, 숏코드 Shortcodes Ultimate 플러그인 (2)  (0) 2015.11.14
웹사이트에는 항상 홈(Home)이라는 페이지가 있습니다. 홈은 사이트에 접속할 때 기본적으로 보여지는 페이지를 말합니다.
일반적으로 홈은 회사사이트의 경우 회사 홍보나 간략한 소개로 꾸며지는 경우가 많습니다.
사용자가 사이트에 접속해서 처음 보는 화면이기 때문에 가장 신경이 쓰이는 페이지이도 합니다.

개인 사이트의 경우에도 사이트의 성격을 가장 잘알수 있는 것은 메인 페이지입니다. 워드프레스에서는 메인 페이지를 전면 페이지라는 용어로 사용합니다. 여기에서는 전면 페이지의 디자인 측면은 배제하고 워드프레스를 사용해서 전면 페이지를 만드는 방법을 알아보도록 하겠습니다.

전면 페이지 설정하기


전면 페이지를 꾸미기 위해서는 먼저 Home 이라는 페이지를 만들고 워드프레스 설정 > 읽기 에서 전면 페이지 표시여부에서 정적인 페이지를 선택해야 합니다

먼저 왼쪽 사이트바에서 워드프레스 설정 > 읽기를 클릭합니다.



읽기 설정의 전면 페이지 표시 여부는 디폴트로 최근 글로 되어있습니다. 워드프레스의 태생이 블로그이다 보니 전면 페이지가 글목록이 나오는 최근 글로 선택되어져 있습니다. 이 옵션을 정적인 페이지로 바꾸고 앞으로 만들 전면페이지를 Home 이라는 페이지를 선택해야 전면 페이지가 사이트에서 디폴트 메인페이지로 보이게 됩니다. 정적인 페이지를 선택하고 Home 이라는 페이지를 선택하려면 Home 이라는 페이지를 만들어야 합니다.




Home 이라는 공백의 페이지 만들기


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



일단 콘텐츠 내용은 작성하지 않고 정적인페이지로 연결하기 위해서 필요한 물리적인 페이지를 만들기 위해서 제목에 Home 이라고 작성하고 공개하기 버튼을 클릭합니다.




설정 > 읽기 화면에 들어갑니다.



읽기 설정에서 정적인 페이지의 라디오 버튼을 선택하고 전면 페이지에서 Home을 선택한 뒤 일기 설정의 저장버튼을 클릭합니다.



전면 페이지가 Home 으로 지정되었기 때문에 사이트에 접속하면 조금 전 만들었던 HOME 화면이 나타납니다. 이제 화면에 보여지는 전면페이지를 꾸며보도록 하겠습니다. 전면 페이지를 꾸미는데는 지난 시간에 공부한 Shortcodes Ultimate 플러그인을 활용하도록 하겠습니다.




무엇을 어떻게 만들지 먼저 눈으로 확인하면 공부하는데 이해가 빠를 것입니다. 우리가 만들 화면은 아래와 같습니다.

만들어 볼 전면 페이지 화면


아래 보여지는 전면 페이지를 하나하나 만들어 가겠습니다. 숏코드를 활용하기 때문에 HTML과 CSS를 알지 못해도 아래와 같은 화면을 만들어낼 수 있습니다. 그럼 시작하겠습니다.




홍보용 제목과 유튜브 홍보 영상 배치하기


홍보용 제목은 숏코드의 인용구를 사용해서 만들겠습니다. Insert shorcodes 버튼을 클릭합니다.



인용구 숏코드를 사용하기 위해서 Quote를 클릭합니다.



옵션 박스에서 아래와 같이 홍보 영상 제목을 입력한 뒤에 Insert shorcode 버튼을 클릭합니다.



[su_quote] 숏코드가 본문에 자동 입력되었습니다. 오른쪽에 변경내용 미리보기 버튼을 클릭해서 적용화면을 미리 확인하겠습니다. 변경내용 미리보기 버튼을 클릭합니다.



아래 화면과 같이 결과 화면이 디스플레이 되었습니다. 이제는 홍보용 유튜브 영상을 본문에 보이게 하겠습니다.


숏코드에서 Youtube를 선택합니다.



옵션 박스에서 유튜브 홍보영상의 URL을 입력한 뒤에 Insert shortcode 버튼을 클릭합니다.     



본문에 [su_youtube] 로 유튜브 숏코드가 입력되었습니다. 미리보기로 현재까지 화면을 확인하겠습니다.


현재까지 완성된 화면입니다. 조금씩 홈페이지 메인이 완성되고 있습니다.




서비스 내역 소개하기


홈페이지에서 제공하는 서비스 내역을 소개하는데에는 Heading, ROW, Service, Button  총 4개의 숏코드를 사용하였습니다.

숏코드에서 Heading 을 선택합니다.


Heading 옵션 박스에서 Size 항목을 20로 조정하고 Content 항목에 아래 내용을 입력합니다.



본문에 [su_heading] 숏코드가 입력되었습니다. 



지금까지의 적용화면을 확인합니다.



이번에는 서비스 내용을 소개하는 부분을 만들겠습니다. 먼저 Row 숏코드를 사용해서 화면을 삼등분하고 각 각에 서비스 숏코드를 사용해서 상세 설명을 적어가겠습니다. 

숏코드에서 ROW를 선택합니다.


옵션 박스는 디폴트로 그대로 저장합니다.



본문에는 다음과 같이 숏코드가 입력되었습니다. 이제 본문에서 숏코드를 편집하도록 하겠습니다.


위 코드를 정리해보면 아래와 같습니다. 코드는 정리하는 습관을 들이는 것이 좋습니다. 정리된 코드는 가독성을 높이는 효과를 나타냅니다. 아래에 Content 부분에 서비스 숏코드가 들어갈 것입니다. 


첫번째 Content를 지우고 그곳에 마우스 커서를 위치시킨 다음에 숏코드 선택화면을 띄웁니다.


Service를 선택합니다.



옵션 박스에서 제목에 3D 프린팅을 입력하고 Icon picker 버튼을 클릭해서 서비스 제목앞에 들어갈 아이콘을 선택합니다. 서비스 설명은 Content 항목에 입력한 뒤에 Insert shortcode 버튼을 클릭합니다.



본문에 숏코드 소스가 아래와 같이 자동으로 입력되었습니다. 변경내용 미리보기 버튼을 클릭해서 숏코드 적용화면을 확인합니다.



3D 프맂팅 서비스 제목과 내역이 입력된 화면을 아래와 같이 확인할 수 있습니다.  나머지 두 개의 콘텐츠도 서비스 숏코드를 활용해서 입력합니다.




버튼을 입력하기 위해서 버튼 숏코드를 클릭합니다.



아이콘 피커를 사용해서 버튼의 아이콘을 선택하고 버튼 제목을 입력합니다.




전면 페이지 구성을 위한 숏코드 입력이 모두 끝났습니다. 업데이트 버튼을 클릭해서 적용을 완료합니다.



엔드유저 화면에서 정상적으로 디스플레이 되는지 확인하겠습니다. 웹브라우져에 들어가서 http://shuman.kr 사이트로 접속합니다.
모든 코드가 적용되어서 다음과 같은 화면이 디스플레이 된 것을 확인할 수 있습니다.









글 리스트 화면 만들기


읽기 설정에서 정적인 페이지 전면 페이지를 지정하면 이전에 보이던 글 목록 화면은 사라지게 됩니다. 따라서 이때는 글 목록을 볼 수 있는 별도의 '글 리스트'이라는 더미페이지를 만들고 설정 > 읽기 > 읽기 설정의 글 페이지에서 연결을 해주어야 합니다.

새 페이지를 추가해서 제목에 글 리스트라고 작성하고 공개하기 버튼을 클릭합니다.



글 페이지에서 글 리스트를 선택하고 저장합니다.



이제 '글 리스트' 페이지를 메뉴에 추가해도 되고 그렇지 않으면 다음 URL http://shuman.kr/글-리스트/ 로 접속하면 글 목록 화면을 볼 수 있습니다.


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

워드프레스 고유주소 슬러그 현명하게 사용하기  (0) 2015.12.07
워드프레스에 구글 캘린더로 나만의 일정관리하기  (3) 2015.11.30
이미지 갤러리 사용하기  (0) 2015.11.11
워드프레스 설정 메뉴  (2) 2015.11.10
사용자 메뉴로, 워드프레스 사용자 권한 관리하기  (0) 2015.11.09
이전 포스팅)

Post


포스트는 글목록을 보여주는 기능을 하는 숏코드입니다. 제목과 미리보기 정도가 리스트업 됩니다.


포스트 숏코드 옵션 박스에서 Template 옵션으로 포스트 리스트를 보여주는 방식을 다음과 선택할 수 있습니다.
Template 입력창에 아래 코드를 입력하면 포스트 목록의 보기방식이 결정됩니다.

templates/default-loop.php : 전체글 목록을 보여줍니다. 
templates/teaser-loop.php : 썸네일 이미지와 제목을 보여줍니다.
templates/single-post.php : 단 한개의 글만 보여줍니다.
templates/list-post.php : 글의 제목만 리스트로 보여줍니다.



숏코드는 [su_posts]를 사용합니다.





결과 화면)

Template 옵션에서 default-loop.php를 입력하면 아래와 같이 포스트 리스트가 제목과 미리보기로 리스트업 됩니다.




Table


테이블 숏코드를 사용해서 테이블을 만들 수 있습니다. 빌더 기능을 가지고 테이블을 그릴 수 있는 기능까지는 아니고 HTML 소스코드를 입력하거나 파일을 업로드해서 테이블을 구현하는 숏코드입니다. Table 을 클릭합니다.




테이블 숏코드 옵션 박스에서는 엑셀 업로드 기능을 지원합니다.
테이블을 만들 때 편리한 방법중의 하나는 MS 엑셀을 활용하는 것입니다. 일반적으로 사람들은 업무나 과제를 수행하면서 엑셀을 다루는데 익숙한 경우가 많습니다. 따라서 복잡한 테이블은 엑셀로 만든 뒤 csv 확장자로 저장해서 업로드하면 편리하게 테이블을 만들 수 있습니다.

테이블을 만드는 방법은 아래처럼 CSV file 업로드 기능을 이용하거나 Content 항목의 HTML 테이블 코드를 바로 입력하는 것입니다.





테이블 숏코드는 [su_table] 입니다.




결과 화면)




Service


서비스 숏코드는 해당 사이트에서 제공하는 서비스를 표현하기에 적합한 숏코드입니다.
서비스 제목과 설명으로 구성됩니다. 제품이나 서비스에 대한 소개 뿐아니라 고객센터나 전화상담 등 어떤 내용을 간락하게 설명하기에 적합한 양식의 숏코드입니다.



서비스의 숏코드는 [su_service] 입니다.




결과 화면)




Box


박스는 글과 제목을 적을 수 있는 콘텐츠 박스입니다.


숏코드는 [su_box]를 사용합니다.




결과 화면)




Note


노트는 콘텐츠를 강조하거나 구분지어 사용할 때 편리한 숏코드 기능입니다. 노트의 색상을 변경해서 포스트잇 느낌을 살려서 사용해도 좋습니다.



노트 숏코드는 [su_note]를 사용합니다.



결과 화면)




Expand


익스펜드는 텍스트 블록을 more text와 less text로 보여줄 수 있습니다.



옵션 박스에서 보여주기 원하는 텍스트를 입력합니다.



숏코드는 [su_expand]를 사용합니다.




결과 화면)





Tooltip


마우스가 오버되었을 때 동작하는 툽팁을 위한 숏코드 입니다.


숏코드는 [su_tooltip]을 사용합니다.



결과 화면)


마우스오버를 하면 아래와 같이 툴팁 박스가 생성됩니다.





YouTube


콘텐츠 본문에 유튜브를 연동해서 사용할 수 있는 숏코드입니다.


옵션 박스에서 유튜브의 URL 경로를 입력합니다.




숏코드는 [su_youtube]를 사용합니다.







Permalink


고유주소인 퍼마링크를 만드는 숏코드입니다.




태그는 [su_permalink]를 사용합니다.



결과 화면)



Member


멤버 기능은 로그인한 사용자에게만 보여주는 콘텐츠를 만드는 기능입니다.



옵션 박스에서 로그인 페이지의 URL 링크를 입력하는 곳에 워드프레스 로그인 페이지인 wp-login.php 을 입력해야합니다.




숏코드는 [su_members]를 사용합니다.




결과 화면)
로그인한 사용자에게 입력한 콘텐츠가 보입니다.




Guest


게스트만을 위한 콘텐츠를 제작할 때 사용하는 숏코드입니다.


숏코드 태그는 [su_guests]를 사용합니다.




RSS Feed


RSS Feed 기능을 구현합니다. RSS 기능은 일종의 온라인 신문 구독시스템으로 이해하면 됩니다.
RSS를 통해서 원하는 온라인 콘텐츠를 구독하는 기능입니다.


옵션 박스에스 구독할 RSS URL을 입력합니다. 여기에서는 블로터의 RSS 피드를 입력하였습니다.



숏코드는 [su_feed]를 사용합니다.



결과 화면)
블로터의 기사 피드가 화면에 디스플레이 됩니다.



Gmap


본문 콘텐츠 내에 구글 지도를 구현할 수 있는 숏코드입니다.


옵션 박스에서 구글 지도에서 검색할 지역 이름을 입력합니다


숏코드는 [su_gmap]을 사용합니다.



결과 화면)


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

가격을 표시하는 플러그인 Easy Pricing Tables Lite by Fatcat Apps  (0) 2015.11.20
플러그인 없이 HTML 코드로만 구글 지도 만들기  (0) 2015.11.19
숏코드 플러그인 Shortcodes Ultimate 사용하기 예제-1  (8) 2015.11.16
글작성 끝판왕, 숏코드 Shortcodes Ultimate 플러그인 (2)  (0) 2015.11.14
글작성 끝판왕, 숏코드 Shortcodes Ultimate 플러그인 (1)  (12) 2015.11.13
이전 포스팅)

지난 시간에 이어서 Shortcodes Ultimate의 기능을 계속해서 살펴보도록 하겠습니다. 계속 이어지는 내용이지만 제목이 조금 틀린것은 구글 검색등 검색엔진 SEO 측면 때문에 다른게 변경하여 작성하고 있습니다. 각각의 숏코드에 대해서 글작성 페이지에 적용하고 결과화면을 보는 과정이 동일하므로 동일한 설명은 배제하고 결과화면 위주로 진행하겠습니다.

사용자가 모든 숏코드를 테스트 해보려면 시간이 걸리지만 아래 포스팅을 보면 대략적인 숏코드의 동작을 확인할 수 있습니다.

Button


스타일이 입혀진 버튼을 만들수 있는 숏코드입니다. 다양한 아이콘을 버튼에 조합해서 만들 수 있기 때문에 별도로 버튼을 디자인하는 시간을 절약할 수 있습니다.


버튼에는 많은 옵션들이 있습니다. 버튼에 있는 옵션만 제대로 이해하면 다른 숏코드의 사용법에 대해서도 문제가 없을 것입니다.
다른 숏코드도 마찬가지이지만 버튼의 모양들을 확인하기 위해서는 Examples of use 를 클릭해서 확인하는 것이 좋습니다. Examples of use를 클릭합니다.



다양한 버튼의 디자인이 디스플레이됩니다. 원하는 버튼은 바로 Get the code를 해서 숏코드를 복사해서 글작성 본문에서 사용하면 됩니다.




Link : 링크는 버튼을 클릭했을 때 이동하는 웹페이지의 주소입니다.
Target : 현재 탭에서 화면을 열지 아니면 새 탭열기를 할지를 결정합니다.
Style : 버튼의 형태를 결정하는 것입니다.
Background : 버튼의 배경색상을 결정합니다.
Text color : 텍스트의 색상을 결정합니다.




Size : 버튼의 크기를 조정합니다.
Fluid : 버튼의 폭을 전체 폭인 100%로 할 지를 결정합니다.
Centered : 중앙 정렬을 할지를 설정합니다.
Radius : 버튼의 둥글기 정도를 설정합니다.
Icon : 버튼 앞에 사용할 아이콘을 선택해서 사용할 수 있습니다.


Text shadow : 텍스트 그림자 효과를 설정합니다.
Description : 버튼 이름 아래에 추가적인 텍스트를 입력할 수 있습니다.



버튼의 경우에는 옵션에서 Icon picker를 사용하는 것을 추천합니다. 버튼에 간단한 아이콘을 넣으면 명시적으로 해당 버튼의 기능을 잘 알아볼수 있고 시각적으로도 우수하기 때문입니다. Icon picker 버튼을 클릭합니다.



버튼용 아이콘이 많이 디스플레이 됩니다. 원하는 아이콘을 선택하여 클릭합니다.




로켓모양의 아이콘을 클릭하니 icon:rocket 이라는 텍스트가 자동으로 입력됩니다. insert shortcode 버튼을 클릭해서 옵션을 적용합니다.




버튼의 숏코드는 [su_button] 입니다.




결과 화면)
로켓 아이콘이 들어간 스타일 버튼이 완성된 것을 확인할 수 있습니다.






Label


글작성 페이지에서 Insert Shortcode 버튼을 클릭한 뒤에, 아래와 같이 팝업 창에서 Label을 클릭합니다.



Content 항목에 적절한 내용을 작성한 뒤에 insert shortcode 버튼을 클릭합니다.



라벨의 숏코드는 [su_label] ... [/su_label] 입니다. 미리보기 버튼을 클릭해서 적용 화면을 확인합니다.



결과 화면)
HTML CSS 작업을 별도로 하지 않았지만, 바로 사용해도 좋을 수준의 Label 아이콘이 만들어졌습니다. Label 내의 텍스트는 옵션창의 Content 항목에서 작성해도 되고, [su_label]Label[/su_label] 처럼 바로 HTML 편집기에서 작성해도 좋습니다.



Quote


인용구를 만드는 숏코드입니다.



숏코드 태그는 [su_quote]를 사용합니다.



결과 화면)




PullQuote


막대가 있는 모양의 인용구 숏코드입니다.


숏코드는 [su_pullqute]를 사용합니다.



결과 화면)



Dropcap


드롭캡은 글장식을 위해서 첫글자를 크게 쓰는 방법입니다. 아래 그림을 보시면 이해가 빠르실 것입니다.

드롭캡 예시 화면)






숏코드는 [su_dropcap] 으로 사용합니다. 



결과 화면)
BA를 입력했을 때의 결과 화면입니다.



Frame


이미지 프레임을 만드는 숏코드로 세련된 이미지 액자 스타일이 적용됩니다.



숏코드는 [su_frame] 입니다. 실제 Text 입력 화면에서 입력되는 값은 아래과 같습니다.
이미지가 있는 경로를 img src 태그 안에 정의하면 됩니다.

[su_frame]<img src="http://lorempixel.com/g/400/200/" alt="" />[/su_frame]



결과 확인)




Row


Row 컬럼으로 화면은 분할하는 기능입니다.



Row 숏코드는 [su_row] 태그안에 [su_column] 태그가 멀티로 추가되는 구조입니다.



결과 화면)

화면이 Row로 3등분 된 것을 확인할 수 있습니다.




Column




숏코드는 [su_coulumn] 입니다.


결과 화면)




List


순서가 없는 리스트를 만드는 숏코드 입니다.



숏코드는 [su_list]를 사용합니다.



결과 화면)


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

플러그인 없이 HTML 코드로만 구글 지도 만들기  (0) 2015.11.19
숏코드 플러그인 Shortcodes Ultimate 사용하기 예제-2  (1) 2015.11.17
글작성 끝판왕, 숏코드 Shortcodes Ultimate 플러그인 (2)  (0) 2015.11.14
글작성 끝판왕, 숏코드 Shortcodes Ultimate 플러그인 (1)  (12) 2015.11.13
Jetpack 플러그인으로 이미지 갤러리를 풍성하게  (1) 2015.11.12

+ Recent posts

티스토리툴바