간략예제를 통한 워드프레스 커스텀 필드 이해

Posted on

워드프레스에 커스텀 필드(Custom Fields)에 대해 간략한 예시로 알아봅니다.

콘텐츠 관리와 표현

국내 온라인 쇼핑몰의 제품 상세페이지를 머리 속으로 떠올려 보세요. 쇼핑몰과 아이템에 따라 다양하겠지만, 글을 통해 떠올려 보면 ‘왼쪽에 제품 이미지가 있고, 그 오른쪽에는 제품명, 가격, 출시일, 제조사, 색상, 추가옵션 등의 항목이 나열 되어 있습니다.

쇼핑몰을 만들고자 하는 것이 아니라는 것을 염두에 두고, 내가 소개하고 싶은 제품을 이런 방식으로 표현하고자 할 때 커스텀 필드를 활용하여 제품이미지, 가격, 제조사, 색상 등의 데이터를 각각의 ‘필드’를 만들어서 글을 작성하고, 그 필드에 데이터가 축적 되게 하면 활용도가 높아질 것 입니다.

각 필드의 데이터를 추출하여 새로운 제품리스트를 만들 수 있게 되어 운영자에게는 콘텐츠 관리의 이점을, 방문객에게는 확장된 콘텐츠 정보를 전달할 수 있게 될 것 입니다.

또, 한 제품에 해당하는 세부 정보(제품명, 제조사, 색상, 가격 등)를 나열식으로 작성하고 리스트형으로 표현해도 무방하지만, 반복 되는 콘텐츠 생산의 부하를 줄이기 위해 ‘템플릿 지원 플러그인‘ 과의 조합으로 더 효율적인 표현이 가능할 것 입니다.

데이터 수집 및 활용

워드프레스 뿐만 아니라 무료로 제공 되며 유용한 웹용 폼 소프트웨어는 상당히 많이 있습니다.  하지만 이러한 ‘폼’ 기능은 운영자가 사용한다기 보다는 회원과 같은 방문자가 참여하는, 다시 말해 방문자가 콘텐츠를 만드는 것으로 볼 수 있습니다.

회원이나 방문자가 특정 포스트에 직접 글을 작성할 수 있도록(콘텐츠를 생산할 수 있게) 운영 되는 웹사이트를 가정해 봅시다.

‘내 웹사이트 자랑하기’ 라는 Custom Post Type 에 회원이나 방문자가 글을 작성할 때 웹사이트 캡쳐 이미지, URL, 간략소개와 같은 커스텀 필드를 ‘필수항목(Required)’ 으로 미리 만들어 놓고 콘텐츠를 생산한다면 각 커스텀 필드별 데이터를 수집할 수 있으며, 수집된 데이터를 다시 활용하여 다양하게 표현해 볼 수 있을 것 입니다.

하지만, 위의 제품소개 예제와는 달리 프론트엔드에서 회원이나 유저가 커스텀 필드에 입력한 데이터가 표현 되기 위해서는 간략한 코딩을 통해야 합니다. ‘템플릿 플러그인과 커스텀 필드 shotrcode를 제공해 주는 플러그인이 설치 되어 있으니, 데이터를 입력하고 콘텐츠 영역에 shotrcode를 삽입하라’고 회원이나 방문객에게 요청하는 것은 무리입니다. 장단점은 있지만, 제품소개 예에서도 플러그인을 사용하지 않고 간략한 코딩을 통한 방법으로 프런트엔드 표현도 가능합니다.


워드프레스의 기본 커스텀 필드를 실제 예제를 통해 살펴 보는 것이 이해가 더 쉬울 수 있으므로, 기본 커스텀 필드 기능과 플러그인의 활용을 통해 커스텀 필드의 데이터를 표현하는 부분만 간략한 예제로 표현해 봅니다.

Codex에서는 커스텀 필드 데이터를 프론트엔드에 나타내는 것을 워드프레스 meta 함수를 이용하여 설명을 하고 있습니다. 여기서는 이야기하지 않으며, 관심있는 분들은 아래의 링크를 통해 확인해 보세요.

http://codex.wordpress.org/Custom_Fields

예제는 아래의 기준에서 작성 됩니다. 결과를 미리 생각하지 말고 그대로 따라해 보세요. 워드프레스 Custom Post Type과 Taxonomy를 이야기 할 때 예시로 많이 사용 되는 것이 ‘Movie’ 라는 소재인데요, 국내 블로그 주제로 많이 삼는 ‘여행’에 관한 소재로 포스트 작성 시 사용할 커스텀 필드를 만들어 프론트엔드에 표현해 봅니다.

  • 워드프레스 버젼 및 테마 : WordPress 3.4.2 영문버젼, Twenty Twelve 테마
  • 사용 플러그인 : Custom Fields ShortcodesGrid Columns
  • 브라우져 : Google Chrome
  • 환경 : 워드프레스 설치 후 위의 테마와 플러그인만 설치
  • 참고사항 : 사용하고 있는 테마나 플러그인, 브라우져에 따라 결과나 기능이 상이할 수 있습니다.
  • 주의사항 : 개인 성향에 따른 사용과 활용의 방법이며, 다양한 방법이 존재합니다.

[플러그인으로 기본 커스텀 필드 데이터를 프론트엔드에 표현하기]

1. 위의 플러그인과 테마를 설치 후 활성화 합니다. 테마는 원치 않으면 설치안해도 됩니다.

2. 새로운 page 작성에서 포스트 제목을 ‘경주에서 신라 화랑을 만나다.’ 라고 입력하세요.
(post가 아닌 page로 테스트 하는 것은 테마의 ‘Full Width’ 템플릿을 사용하기 위한 것이며 별다른 의도는 없습니다.)

3. 콘텐츠 영역을 컬럼으로 나누기 위해 아래 붉은 글씨를 제외하고 그림처럼 직접 입력하세요.

커스텀 필드 활용을 위한 컬럼 나누기

4. 오른쪽 컬럼영역(B)에 내용을 어느 정도 입력합니다. 갤러리도 상관 없습니다.

5. page 작성화면에서 Screen Options의 Custom Fields 항목을 체크하면 아래 그림처럼 Custom Fields를 입력할 수 있는 Meta Box가 나옵니다.

커스텀 필드 메타박스

6. 아래와 같이 해보세요.

  • Name 필드에 ‘place‘, Value 필드에 ‘경주‘ 입력 후 Add Custom Field 클릭
  • Draft 버튼을 클릭하여 임시 저장합니다.
  • 커스텀 필드 입력 영역을 다시 보면 아래 그림처럼 나옵니다.
  • Enter New 를 클릭하여 Name 필드에 ‘date‘, Value 필드에 ‘2012년 10월 19일 금요일‘ 입력
  • Add Custom Field 클릭 후에 Draft 클릭
  • Enter New 를 클릭, Name 과 Value 필드에 각각 ‘friend‘, ‘길동이, 바둑이‘ 입력 후 Draft 클릭
  • Enter New 클릭, Name, Value 각 필드에 ‘mood‘, ‘신라 화랑의 기운이 느껴짐‘ 입력 후 Draft 클릭

커스텀 필드에 데이터 입력 및 저장

7. 미디어 업로드 버튼 영역을 잠깐 보면 아래 그림처럼 녹색 영역의 아이콘이 보입니다. 클릭하여 앞서 만든 커스텀 필드가 모두 있는지 확인해 보세요.

Custom Fields Shortcode 플러그인의 커스텀 필드 목록

8. 커스텀 필드 데이터를 콘텐츠 영역에 나타내기 위해 A 영역에 아래의 내용처럼 해보세요.

  • ‘장소 : ‘ 입력 후 녹색아이콘 클릭 후에 나타나는 항목에서 ‘place’ 클릭
  • ‘일시 : ‘ 입력 후 녹색아이콘 클릭 후에 나타나는 항목에서 ‘date’ 클릭
  • ‘동행 : ‘ 입력 후 녹색아이콘 클릭 후에 나타나는 항목에서 ‘friend’ 클릭
  • ‘기분 : ‘ 입력 후 녹색아이콘 클릭 후에 나타나는 항목에서 ‘mood’ 클릭
  • 4라인을 모두 선택하여 원하는 리스트 타입(Unordered 또는 Ordered)을 만듭니다.

9. 최종적으로 Publish 버튼을 클릭하고 실제 커스텀 필드 데이터가 어떻게 표현 되는지 확인해 보세요.

커스텀 필드를 활용한 포스트 예제 결과

플러그인으로 간단한 예제를 표현했지만, 여기서 좀 더 나아가 중복되는 콘텐츠 생산 부분의  ‘템플릿화’를 통한 ‘사용의 편이성 확보’, ‘확장된 기능의 커스텀 필드 플러그인 사용’ 으로 다양한 ‘사용자정의 필드’를 만들고 활용할 수 있습니다. 이 글에서는 가벼운 이해 정도만 해도 될 것으로 생각됩니다.

워드프레스에서 기본으로 제공 되는 커스텀 필드 기능을 좀 더 다이나믹하게 표현하고 사용하기 위해서는 php, css와 같은 관련지식 및 컴퓨팅 지식이 조금 필요합니다. Codex 에서 제공 되는 코드를 사용해도 간단히 적용 되지만, 상대적으로 지식이 없는 분들에게는 결코 쉽게 이해될 수 없습니다. 하지만,  커스텀 필드를 생성하고 활용할 수 있도록 하는 유용하고 멋진 플러그인이 있으므로 충분히 사용할 수 있다는 것을 기억하시면 됩니다.


콘텐츠 생산과 관리를 중요하게 생각하는 워드프레스 유저라면 커스텀 필드의 사용과 활용은 반드시 필요합니다. 하지만, 사용자의 관점에서 기본 커스텀 필드 기능을 세부적으로 이해하고 사용하려고 하면 워드프레스를 다소 기술적이고 프로그래밍적인 방향으로 보게 될 가능성이 많습니다. 기본 커스텀 필드의 기능의 ‘사용 방법적 한계’를 뛰어 넘는 유용한 커스텀 필드 플러그인과 표현을 도와주는 플러그인의 조합으로 사용하는 것이 좀 더 즐거운 방법으로 생각됩니다.

3 thoughts on “간략예제를 통한 워드프레스 커스텀 필드 이해”

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.