gazette-featured-content-thumbnail

[워드프레스로 모임서비스 만들기] 1. 모임목록 만들기

워드프레스로 간단한 모임서비스를 한번 만들어 보기로 하겠습니다. 분량이 제법 많은 관계로 하나의 포스트에 모두 담기는 좀 어려울 듯해서 양을 나누어 한번에 하나씩 모임서비스를 만드는 과정을 따라가 보기로 하겠습니다. 여기서 소개할 모임서비스는 사용자들이 이 사이트에 접속하여 모임에 관한 정보를 올리고 서로 공유하는 간단한 웹서비스입니다. 워드프레스가 인기있는 CMS 솔루션이긴 하지만 지금까지는 주로 주로 블로그나 관리자가 포스팅하는 정적인 웹사이트 제작에 많이 사용된 것이 사실입니다. 그렇지만 여기서는 통상적인 웹서비스의 제작에 초점을 맞춰 워드프레스 활용법을 소개하기로 합니다.

시작하기에 앞서

워드프레스 버전과 기본 테마

워드프레스 설치는 이미 되어 있다고 가정하여 설치 부분은 생략합니다. 여기서는 이 글을 쓰는 현재 워드프레스 최신 버전인 4.3.1 버전을 기준으로 하고 테마는 4.3 버전의 디폴트 테마인 TwentyFifteen 테마를 사용합니다. 다만 테마는 꼭 여기서 사용하는 테마가 아니고 다른 테마를 사용하더라도 글의 내용을 이해하거나 따라하는 데 큰 지장이 없을 듯 합니다.

플러그인 방식 vs. 코딩 방식

워드프레스에서 기본적으로 제공하는 기능 외의 기능들은 주로 플러그인을 설치하는 방식으로 처리합니다. 아시다시피 워드프레스는 다양한 분야에 걸쳐 다양한 플러그인들이 존재합니다. 게중에는 무료도 있지만 유료인 플러그인들도 많이 있습니다. 그렇지만 플러그인을 굳이 사용하지 않고 워드프레스가 제공하는 Codex API를 이용하여 직접 기능을 추가하는 방식도 물론 가능합니다. 이 글에서는 가급적 워드프레스 디렉터리에서 구할 수 있는 무료 플러그인을 사용할 예정이며, 코딩방식과 플러그인을 이용한 방법 중 가능한 경우라면 가급적 코딩보다는 플러그인을 사용하고 관리자 대시보드에서의 셋팅 만으로 처리할 수 있는 방법을 선택하려고 합니다. 물론 그렇다하더라도 약간의 코딩은 어쩔 수 없이 필요한 부분입니다.

그럼 바로 시작합니다.

만들 내용

오늘 만들 내용은 모임목록입니다. 관리자(네, 사용자가 아니라 아직은 관리자입니다!)가 모임에 대한 기본적인 사항을 입력하면 아래와 최근 모임 목록이 메인 화면에 시간 역순으로 보이는 간단한 페이지를 만들 것입니다.

그림1. 새로운 모임 목록

그림1. 새로운 모임 목록

준비물

다음 2개의 플러그인이 필요합니다. 설치하지 않으셨다면 지금 설치하면 됩니다. (설치 방법은 생략)

모임 포스트 유형 만들기

워드프레스를 설치하면 기본으로 포스트(Post)와 페이지(Page)라는 두 가지 유형의 포스트 유형(Post Type)이 만들어져 있습니다. 그렇지만 워드프레스는 필요에 따라서 얼마든지 새로운 포스트 유형을 만들어 추가할 수 있으며 여기서는 모임을 위하여 별도로 “모임(Moim)”이라고 하는 포스트 타입을 만들 것입니다. 이렇게 별도의 포스트 유형으로 만들게 되면 관리자 대시보드에는 별도의 메뉴가 생성되고 기존의 포스트나 페이지와는 별도로 모임만 별도로 관리할 수 있어 편리합니다.

Custom Post Type UI 플러그인(이하 ‘CPT UI’)을 설치하였다면, 관리자 화면에서 CPT UI 메뉴에서 Add/Edit Post Type 을 선택하여 다음과 같이 모임이라는 이름으로 간단하게 새 포스트 유형을 하나 추가할 수 있습니다.

그림2. 새 포스트 유형 추가하기

그림2. 새 포스트 유형 추가하기

이렇게 유형을 저장하고 나면 이제 대시보드 메뉴에서 새로 “모임”이라는 메뉴 항목이 만들어 진 걸 확인할 수 있습니다. 모임에 들어가셔서 새 모임을 두어 개 만들어 보세요. 다음과 같이 모임이 별도의 공간에 따로 분리되어 만들어지는 것을 확인할 수 있습니다.

그림3. 관리자 대시보드 - 모임 목록

그림3. 관리자 대시보드 – 모임 목록

모임목록 만들기

이제 모임 목록을 만들 차례입니다. 사이트의 메인페이지에 방금 생성한 모임의 목록이 순서대로 표시되도록 할 텐데 그려려면 몇 가지 사전 준비가 필요합니다. 우선 빈 페이지를 하나 만듭니다. 페이지 이름은 아무렇게나 줘도 상관 없습니다. 여기서는 “새로운 모임”이라고 했습니다. 이 페이지는 사이트의 메인페이지가 될 것입니다. 페이지의 내용은 아무 것도 쓰지 않습니다. 그리고 저장하면 페이지가 하나 만들어 졌을 것입니다.

그림4. 새로운 페이지 생성

그림4. 새로운 페이지 생성

전면 페이지 변경

완료되었다면 다시 관리자 페이지의 설정 > 읽기 메뉴에서 ‘전면 페이지 표시’를 ‘정적인 페이지’로 변경하고 전면 페이지 선택창에서 방금 생성한 “새로운 모임” 페이지를 전면 페이지로 지정합니다.

그림5. 전면 페이지 표시 변경

그림5. 전면 페이지 표시 변경

모임목록 보이기

그런 다음 사이트로 돌아와 메인 페이지를 보면 아무 것도 없는 빈 페이지가 나올 것입니다. 이제 이 빈 공간에 앞서 우리가 만든 모임들의 목록을 채워 넣도록 하겠습니다. 앞서 만든 “새로운 모임” 페이지를 열어 다음과 같이 간단한 단축코드(shortcode)를 입력합니다.

[display-posts post_type="moim" include_content="true" image_size="thumbnail" wrapper="div"]

이 단축코드는 앞에서 우리가 설치한 Display Post Shortcode 플러그인에서 사용하는 단축코드이며, 짐작하듯이 모임 포스트 유형의 목록을 화면에 표시하는 기능을 수행합니다.

모양이 깨진다구요? 맞습니다. 아직 스타일을 적용하지 않아서 그렇습니다. Display Post Shortcode는 여러 가지 조건에 맞는 다양한 포스트 유형의 목록을 화면에 표시해주는 단축코드를 제공하는 플러그인이며, 이 단축코드가 생성하는 HTML 코드는 플러그인에서 정한 일정한 형식을 따릅니다. 이제 약간의 코딩이 등장할 시간입니다. 사용하시는 테마의 style.css 파일을 열어 아래와 같은 CSS 코드를 파일의 맨 아래 부분에 붙여 넣기 합니다. 그러면 아마도 처음 만들 내용에서 보여드린 것과 유사한 모임 목록이 메인 페이지에 표시되는 것을 확인할 수 있을 것입니다.

.display-posts-listing .listing-item {
  clear: both;
  margin-bottom: 1em;
  border-bottom: 1px solid #ededed;
  overflow: auto;
}

.display-posts-listing img {
  float: left;
  margin: 0 10px 10px 0;
}

.display-posts-listing .title {
  font-size: 1.3em;
  font-weight: bold;
}

Display Posts Shortcode 플러그인과 관련하여 더 상세한 내용은 플러그인 문서에서 확인하실 수 있습니다.

오늘은 여기까지 입니다.

한가지 아쉬운 점은 모임 정보를 관리자만 입력할 수 있고 사용자가 입력할 수 없다는 점입니다. 이 부분이 다음 시간에 다룰 내용입니다. 다음 시간에는 사용자가 사이트에서 직접 모임 정보를 입력할 수 있는 입력폼을 만들고 입력값을 받아 저장하고 목록을 업데이트하는 부분을 만들어 보기로 하겠습니다. 🙂


* 이 연재에서 사용한 전체 소스코드는 여기에서 내려 받을 수 있습니다.

“[워드프레스로 모임서비스 만들기] 1. 모임목록 만들기”에 대한 0개의 생각