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


워드프레스에서 콘텐츠를 만들다보면 과거에 삭제한 버전을 복구해야 할 때가 간혹 있습니다. 워드프레스의 강력한 기능 중의 하나는 작성한 모든 글에 대한 글의 리비전(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

이전 포스팅)

지난 시간에 Shortcodes Ultimate 플러그인의 설치를 완료하였습니다. 이번 시간에는 숏코드를 활용해서 글작성하는 방법을 알아보도록 하겠습니다.
왼쪽 사이드바 메뉴에서 글 > 새 글 쓰기 메뉴에 들어갑니다


새 글 쓰기 화면에 들어왔습니다. 새 글 쓰기 화면에 Insert shorcode 라는 버튼이 생성된 것을 확인할 수 있습니다.
먼저 숏코드가 어떤 종류가 있는지 확인하기 위해서 Insert shortcode 버튼을 클릭합니다.



여러 종류의 숏코드들이 이해하기 쉽게 아이콘으로 나와 있습니다. 각각의 아이콘을 클릭하면 해당 숏코드가 글을 작성하는 본문에 텍스트 형태로 삽입되고 실제 엔드유저쪽에서 보는 사용자 화면에서는 숏코드가 적용된 화면이 나타나게 됩니다. 숏코드가 많지만 몇 가지만 샘플로 사용해보면 숏코드가 동작하는 방법을 금세 익힐 수 있습니다.

숏코드를 이해하는 가장 빠른 방법은 아래에 있는 모든 숏코드를 자신이 실습해서 결과를 확인하는 것입니다.



먼저 글의 제목에는 간단히 숏코드 결과확인 이라고 작성을 합니다. Insert shortcode 버튼을 클릭합니다.




Heading


헤딩(Heading)은 제목에 스타일을 입히는 것입니다. 첫번째 있는 Heading을 클릭합니다. 


헤딩 숏코드에 대한 옵션을 설정하는 창이 나옵니다. 크기와 위치를 설정할 수 있고 글이 들어가는 위 아래의 마진(margin)의 폭을 설정할 수도 있습니다.
그리고 실제 헤딩에 들어가는 텍스트를 옵션창에서 입력이 가능합니다. Content 항목에 '알리바바, 스냅챗 기업가치 무려 16조원으로 평가'를 입력합니다.  입력이 완료된 뒤에 Insert shortcode 버튼을 입력합니다.





본문에 [su_heading] [/su_heading] 태그가 들어간 것을 확인할 수 있습니다. 숏코드란 바로 이것입니다. 여러가지 기능은 간단한 텍스트 태그로 구현해서 편리하기 웹페이지 작성이 가능하도록 한 것입니다. 또한 [su_heading] ... [/su_heading] 태그 사이에 작성한 콘텐츠가 들어간 것을 확인할 수 있습니다. 태그를 여러번 사용하다보면 Insert shortcode 버튼을 클릭해서 작업하는 것보다 바로 HTML 편집기 화면에서 텍스트로 작성하는 것이 더 빠르기 때문에 직접 태그를 입력하는 경우가 많습니다. 

그럼 실제로 이 숏코드가 사용자 화면에서 어떻게 보여지는지 확인하기 위해서 오른쪽에 미리보기 버튼을 클릭해서 확인해보겠습니다.




미리보기 화면을 클릭하니 다음과 같이 화면에 나타난 것을 확인할 수 있습니다.

결과화면)


HTML 스타일 작업을 하지 않았음에도 단 몇자의 숏코드 태그만으로 다음과 같이 멋진 제목글이 만들어졌습니다. 이래서 많은 사람들은 숏코드에 환호하는 것입니다. 이런 숏코드는 프로그래머나 디자이너, 웹퍼브리셔가 아니더라도 충분히 멋진 웹페이지를 만들어낼 수 있도록 도움을 줍니다.







Tabs


두번째는 Tabs container 입니다. 간단히 탭 콘테이너를 구현할 수 있는 숏태그 입니다. Tabs를 클릭합니다.



Tabs 옵션창에서 별도로 입력작업을 하지않고 Insert shorcode 버튼을 클릭합니다.



Tabs에 대한 숏코드 태그는 [su_tabs] ... [/su_tabs] 입니다. 그리고 [su_tabs] 태그안에 [su_tab]이라는 서브 태그가 들어있습니다. [su_tab title="Title 1"]Content 1 은 [su_tabs] ... [/su_tabs] 안에 들어가는 구조입니다. 그리고 이런 태그가 Content1 ~ Content3까지 세 개가 있습니다. 결과를 확인하기 위해서 미리보기 버튼을 클릭해서 결과 화면을 확인합니다.




결과화면)


이런 식으로 각각의 숏코드를 입력하고 결과값이 어떻게 화면에 나타나는지 확인하는 것이 숏코드를 이해하는 가장 빠른 방법입니다. 결국 자주 사용하는 숏코드는 저절로 자연히 텍스트로 입력해서 사용하게 됩니다.


Tab


단일 탭 숏코드입니다. Tab을 클릭합니다.
     


숏코드 옵션창에서 별도의 설정을 하지 않고 Insert shortcode 버튼을 클릭합니다.



단일 탭 숏코드 태그가 [su_tab] ... [/su_tab] 과 같이 생성된 것을 확인할 수 있습니다. 미리보기 버튼을 클릭해서 결과를 확인합니다.



결과확인)

현재 단일 탭의 경우 플러그인 오류가 발생해서 화면에 표시되지 않습니다. 워드프레스는 코어의 버전과 플러그인이 맞지 않을 경우 오류를 발생할 수 있습니다. 따라서 플러그인을 다운받을 때가 유료로 구매할 때는 반드시 해당 플러그인에 대한 업데이트가 지속적으로 이루어지고 있는지 확인한 뒤에 구매하는 것을 권고합니다.


Spoiler


스포일러는 클릭하면 숨겨져있는 콘텐츠를 보이게 하는 숏코드 도구입니다. Spoiler를 클릭합니다.



숏코드는 [su_spoiler] ... [/su_spoiler] 입니다. 미리보기를 클릭합니다.




결과확인)

처음에는 플러스 표시로 표시되어있습니다. 플러스 표시를 클릭하면 

다음과 같이 숨겨진 콘텐츠가 동적으로 펼쳐지어 보여집니다.




Accordion


아코디언은 스포일러가 여러개 멀티로 구성된 숏코드를 말합니다. Accordion을 클릭합니다.


별도의 옵션을 지정하지 않고 Insert shortcode 버튼을 클릭합니다.



아코디언은 [su_accordion] ... [/su_accordion] 태그안에 [su_spolier] [/su_spoiler] 태그가 여러개 멀티로 들어간 구조를 가집니다. 미리보기를 클릭합니다.



결과확인)




Divider


디바이더는 분할선을 그리는 숏코드입니다. Divider를 클릭합니다.


디바이더의 숏코드는 [su_divider] 입니다. 미리보기를 클릭합니다.





결과확인)
화면에 분할선이 나타나고 Go to top을 클릭하면 맨 위 화면으로 스크롤링 됩니다.




Spacer


스페이서는 빈공간을 지정하는 숏코드입니다. 옵션에서 높이값을 입력해서 여백을 주게됩니다. 


옵션에서 높이를 지정합니다.




스페이서의 숏코드는 [su_spacer] 입니다.



결과확인)
눈에 보이지는 않지만 옵션에서 지정한 높이 공간만큼 여백을 가지고 갑니다.



     

Highlight


하이라이트는 형광펜 기능 숏코드입니다. 텍스트에 색상을 입혀서 특정 문구를 강조할 수 있는 기능입니다.



숏코드 옵션창에서 배경색과 텍스트 색상을 선택할 수 있습니다. 텍스트에 하이라이트를 주기 위해서는 반드시 아래와 같이 Content 항목에 텍스트를 입력해야 합니다.



하이라이트 숏코드는 [su_highlight] ... [/su_highlight] 입니다.



결과확인)






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

숏코드 플러그인 Shortcodes Ultimate 사용하기 예제-2  (1) 2015.11.17
숏코드 플러그인 Shortcodes Ultimate 사용하기 예제-1  (8) 2015.11.16
글작성 끝판왕, 숏코드 Shortcodes Ultimate 플러그인 (1)  (12) 2015.11.13
Jetpack 플러그인으로 이미지 갤러리를 풍성하게  (1) 2015.11.12
Gmail에서 POP3 메일 설정하기  (0) 2015.11.07

워드프레스 콘텐츠를 풍성하게 만드는 숏코드


워드프레스를 사용해서 개인블로그나 홈페이지를 제작할 때 사람들이 가장 많이 보게 되는 것은 결국 콘텐츠입니다. 콘텐츠는 기본적으로 텍스트인 글로 구성됩니다. 그렇지만 요즈음 추세는 단순히 글만 들어가는 것보다는 이미지뿐아니라 적절한 아이콘 및 도표, 버튼 등이 함께 들어가면 사용자에게 훨씬 더 훌륭한 사이트로 인식이 되는 것이 사실입니다.
홈페이지 콘텐츠 디자인은 사용자의 재방문율을 높이는 중요한 요소임에는 분명합니다.

누구나 깔끔하게 편집된 글을 보고 싶어합니다. 워드프레스는 글작성에 도움을 주는 숏코드라는 도구를 제공합니다.

숏코드는 글을 작성하면서 필요한 곳에 태그 명령을 사용해서 각종 표, 박스, 아이콘, 버튼들을 쉽게 구현할 수 있도록 하는 훌륭한 도구입니다.
가령 구글 지도를 콘텐츠 본문 내에 삽입하고 싶다면, 본문에 태그로 [shortcode] [su_gmap address='노원구 상계동'] [/shortcode] 와 같이 간단하게 구현할 수 있습니다.

[caption]과 같이 워드프레스에서 자체적으로 제공하는 숏코드들도 있지만 좀 더 풍성한 숏코드 사용을 위해서는 숏코드 플러그인을 설치하는 것이 좋습니다. Avada 같은 훌륭한 유료 테마의 경우에도 자체적으로 숏코드를 내장하고 있습니다. 이런 경우에는 테마에서 제공하는 숏코드를 사용해도 무방합니다.

숏코도는 유료와 무료가 있지만 Shortcodes Ultimate 플러그인은 무료이면서도 기능이 훌륭한 플러그인입니다.


Shortcodes Ultimates 플러그인 설치


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



오른쪽 플러그인 검색창에서 shortcodes ultimate 을 입력하고 엔터키를 칩니다.



맨 처음에 나온 플러인인 Shortcodes Ultimates 입니다. 이미 40만명 이상 설치를 하였고 현재 설치된 워드프레스 버전과 호환된다는 정보가 있습니다. 플러그인을 검색해서 설치할 때는 플러그인의 정보를 꼭 확인하는 것이 좋습니다. 별 다섯개 중에도 적어도 4개 이상의 플러그인인지 최근 업데이트는 언제 되었는지, 현재 사용하고 있는 워드프레스와는 호환이 되는지 등을 확인해야 합니다.

무료나 유료 플러그의 경우에도 업데이트가 1년이상 안되서 새로운 워드프레스 코어가 버전업 되었을 때 에러가 발생하는 경우가 있기 때문입니다.  따라서 별평점, 설치 건수, 최근 업데이트 여부, 워드프레스 버전과 호환 여부는 꼭 확인해야합니다.
Shortcodes Ultimate는 이런 면에서 아주 훌륭한 플러그인 입니다. 지금 설치하기 버튼을 클릭합니다.



플러그인이 성공적으로 설치되었습니다. '플러그인을 활성화' 를 클릭합니다.




플러그인을 활성화하고 나자 도구, 설정 메뉴 밑에 Shortcodes 라는 메뉴가 생성된 것을 확인할 수 있습니다. Shortcodes 메뉴를 클릭합니다.



Shortcodes 메뉴가 펼쳐지면서 아래와 같이 네 가지 서브 메뉴가 존재합니다.




Shortcodes Ultimate 의 첫화면은 세팅 화면으로 플러그인에 대한 설명과 튜토리얼 등을 확인할 수 있습니다. 왼쪽 사이드바에서 Examples 를 클릭합니다.



Examples 화면은 숏코드가 동작하는 것을 예제 화면으로 확인할 수 있습니다. Tabs 부분을 클릭합니다.




아래와 같이 Tabs 숏코드의 동작 모습을 예제화면으로 확인할 수 있습니다. 동작을 확인하다가 사용하고 싶은 숏코드가 있으면 Get the code 버튼을 클릭하면 됩니다. Get the code를 클릭합니다.




노란색 박스안에 Tabs에 대한 숏코드가 나옵니다. 이 코드를 복사해서 글작성시에 첨부하면 바로 사용할 수 있습니다. 그렇지만 글작성 시점에서도 필요한 숏코드를 확인할 수 있으니 이곳에서는 숏코드 동작만 확인만 하면 됩니다.





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

숏코드 플러그인 Shortcodes Ultimate 사용하기 예제-1  (8) 2015.11.16
글작성 끝판왕, 숏코드 Shortcodes Ultimate 플러그인 (2)  (0) 2015.11.14
Jetpack 플러그인으로 이미지 갤러리를 풍성하게  (1) 2015.11.12
Gmail에서 POP3 메일 설정하기  (0) 2015.11.07
호스팅 메일 설정하기 - 카페24 이메일 계정 설정  (0) 2015.11.06

워드프레스에서 기본으로 제공하는 이미지 갤러리 외에 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 플러그인을 사용한 타일 갤러리가 만들어 진 것을 확인할 수 있습니다.





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

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

워드프레스를 사용하면 글을 작성시 여러 개의 이미지를 첨부해서 간편하게 이미지 갤러리를 만들 수 있습니다. 이미지 갤러리를 만들기 위해서는 글 작성 화면에 들어가야합니다. 왼쪽 사이드바에서 글 > 새 글 쓰기를 클릭합니다.



제목에 이미지 갤러리라고 입력한 뒤에 미디어 추가 버튼을 클릭합니다.




왼쪽 메뉴에 갤러리 생성하기를 클릭합니다. 파일을 선택해서 이미지를 업로드 할 수 있고, 미디어 라이브러리를 사용해서 기존에 업로드된 이미지로 갤러리를 구성할 수 있습니다. 파일을 선택하세요 버튼을 클릭합니다.



총 9개의 이미지를 업로드 하였습니다. 파일을 업로드하면 자동으로 미디어 라이브러리에 추가 되게 됩니다.
오른쪽 아래에 있는 '새 갤러리 생성하기' 버튼을 클릭합니다.



갤러리를 편집하는 화면이 나옵니다. 이미지를 드래그해서 이미지의 순서를 변경할 수 있습니다.



그리고 각 이미지별로 이미지 캡션을 입력할 수 있습니다.



연결은 이미지를 클릭했을 때 연결되는 곳을 선택할 수 있습니다.



열 컬럼은 한 줄에 몇개의 이미지를 보여줄지를 결정하는 것입니다.
랜덤하게 보이기 위해서는 랜던 순서에 체크하면 됩니다.


모든 설정을 마치면 '갤러리 삽입' 버튼을 클릭합니다.

글의 본문에 이미지 갤러리가 삽입된 것을 확인할 수 있습니다. 공개하기 버튼을 클릭합니다.



사이트 보기 화면에 들어가보면 훌륭한 이미지 갤러리 페이지가 만들어진 것을 확인할 수 있습니다.



특정 이미지를 클릭하면 이미지를 상세하게 확인할 수 있습니다.



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

워드프레스에 구글 캘린더로 나만의 일정관리하기  (3) 2015.11.30
워드프레스로 Home 메인 페이지 만들기  (0) 2015.11.18
워드프레스 설정 메뉴  (2) 2015.11.10
사용자 메뉴로, 워드프레스 사용자 권한 관리하기  (0) 2015.11.09
나만의 워드프레스 메뉴 구성하기  (1) 2015.11.03
이곳은 워드프레스 사이트 설정을 하는 곳입니다. 왼쪽 사이드바에서 설정 메뉴를 클릭합니다.
서브 메뉴에는 일반, 쓰기, 읽기, 토론, 미디어, 고유주소가 있습니다. 각각 서브 메뉴를 순서대로 설명하겠습니다.



일반 설정


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

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



쓰기 설정


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

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





읽기 설정


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

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

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



토론 설정


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

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

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

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

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



미디어 설정


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



이미지 설정 팁)

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

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

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




고유주소 설정


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

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






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

워드프레스로 Home 메인 페이지 만들기  (0) 2015.11.18
이미지 갤러리 사용하기  (0) 2015.11.11
사용자 메뉴로, 워드프레스 사용자 권한 관리하기  (0) 2015.11.09
나만의 워드프레스 메뉴 구성하기  (1) 2015.11.03
메뉴에 연결할 페이지 만들기  (0) 2015.11.02

사용자 권한 관리


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

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

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


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

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


사용자 메뉴


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



- 모든 사용자 

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



- 사용자 추가하기

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



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



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

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



- 나의 프로필

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




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




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

이미지 갤러리 사용하기  (0) 2015.11.11
워드프레스 설정 메뉴  (2) 2015.11.10
나만의 워드프레스 메뉴 구성하기  (1) 2015.11.03
메뉴에 연결할 페이지 만들기  (0) 2015.11.02
카테고리 만들고 구성하기  (1) 2015.10.29

이전 포스팅)


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]> 띄어쓰기를 하면 한글이 깨지는 것을 방지할 수 있습니다.






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

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

+ Recent posts

티스토리툴바