1.시작하며
워드프레스는 글이나 페이지등 콘텐츠를 작성할 때 해당 글에 속하는 추가 정보를 입력할 수 있는 “사용자 정의 필드”라는 기능이 있습니다.
이 기능을 이용해서 콘텐츠 작성 시 기본으로 입력할 수 있는 내용(특성 이미지, 카테고리, 태그, 작성자, 작성일, 공개 여부 등) 이외에 부가적인 정보를 입력할 수 있습니다.
예를 들어 작성하는 콘텐츠가 블로그인 경우, 글 작성 시 기분 상태나, 날씨 등의 메모가 가능하고, 다른 예로 작성하는 콘텐츠가 부동산 매물이면 매물의 가격, 위치, 높이, 넓이, 건축 연도, 주차 가능 여부, 전 월세 여부 등 콘텐츠를 제공 받는 입장에서 더 풍부한 정보를 볼 수 있도록 하는 추가 정보가 입력 될 수 있고, 이 데이터를 이용해서 다양한 분류가 가능하여 사용자에게 더 다양한 방법으로 콘텐츠를 제공할 수 있게 됩니다.
추가 데이터 입력을 이용해 다양한 분류가 가능하게 만든 사이트 예
무비 키워드 : 이 사이트를 보면 하나의 영화 콘텐츠에 다양한 정보(배우, 감독, 개봉연도, 장르, 키워드 등)가 등록되어 있고, 이 단어들을 클릭했을 때 관련된 콘텐츠를 모아서 다시 정렬해 줍니다. 또한 중간중간의 메뉴를 통해 다양한 콘텐츠 분류가 가능합니다.
이렇게 탄력적인 콘텐츠 생산을 위한 확장 도구로 워드프레스에서 이미 만들어 놓은 기능이 “사용자 정의 필드”입니다.
하지만 이 기능은 워드프레스 초보자가 사용하기에 제한이 많습니다.
입력방법을 제공할 뿐 입력된 정보를 어떻게 출력해야 하는지 그 구체적인 방법은 워드프레스 테마의 구조나 템플릿체계, 소스코드 등을 어느 정도 다룰 수 있어야 표현이 가능하기 때문입니다.
이 글에서 설명하는 ACF(Advanced Custom Fields) 플러그인은 워드프레스 “사용자 정의 필드” 기능을 편리하게 확장 해 주는 플러그인입니다.
입력 과정을 단순화, 표준화, 세분화해서 단순 텍스트에서부터 지도, 동영상, 이미지 등을 추가로 입력할 수 있게 해 주고, 자체 숏코드와 API를 통해 출력 결과로 표시하는 데 도움을 줍니다.
물론 이 플러그인을 설치해서 사용한다고, 복잡한 과정이 모두 쉬워지는 것은 아닙니다. 하지만 이 플러그인이 없다면 일일이 구현하기조차 힘든것들을 비교적 쉽게 접근할 수 있도록 도와주기 때문에 인기가 많습니다.
2.플러그인 설치
ACF(Advanced Custom Fields) 플러그인은 무료 플러그인과 유료 플러그인으로 나뉩니다.
무료 플러그인은 관리자 메뉴 “플러그인-새 플러그인 설치”에서 Advanced Custom Fields 를 검색해서 자동 설치하면 됩니다.
유료 플러그인은 무료 플러그인의 기능에 아래의 기능이 더 추가되어 있습니다만,
보통 사용단계에서는 무료플러그인만으로도 충분한 기능을 제공합니다.
유료플러그인의 추가 기능 요약
- 반복 필드 제공 : 특정 필드가 반복적으로 등록될 수 있도록 함
- 직관적인 갤러리 필드 제공 : 이미지 갤러리를 등록할 수 있는 필드
- 플렉시블 필드 : 필드 그룹을 여러 개 등록해서 원하는 필드 그룹들을 선택적으로 입력할 수 있도록 함
- 클론 필드 : 기존에 있는 필드를 원하는 순간에 실시간으로 가져와서 사용하는 필드
- 사이트 설정 페이지 : 이전 기능들이 특정 콘텐츠 생성 시 추가 정보 입력이 목적이었다면 이 기능은 사이트 전체에서 활용할 수 있는 사이트 옵션의 추가 할 수 있는 페이지를 생성하고 필드를 생성할 수 있도록 도와줍니다.
3.콘텐츠에 정보를 추가하는 방법
먼저 어떤 콘텐츠를 생성할 때 어떤 정보를 추가 할 것인지 구상해야 합니다.
포트폴리오 콘텐츠를 생성한다고 가정할 때 내 포트폴리오에 맞는 추가 정보 입력이 필요할 것입니다.
예를 들어 건축 사무소의 웹사이트라고 가정하고 단순한 회사소개나 블로그가 아닌 그동안 작업물에 대한 포트폴리오 콘텐츠를 만들고 싶은 경우라면 공사 기간, 공사 비용, 위치, 작업 시작일, 작업 종료일, 공법 등의 정보를 표시하고 싶을 수도 있습니다.
또다른 예로 미술 작품을 보여주는 웹사이트라면 작품의 작가, 제목, 넓이, 높이, 작업기간, 재료 등의 추가 정보를 입력하고, 방문자에게 추가 정보를 보여(표시) 줄 수 있을 것입니다.
플러그인이 설치되면 관리자 메뉴에 “Custom Fields”라는 메뉴가 나타납니다. “Custom Fields-Add New”로 가서 새로운 필드 그룹을 생성합니다. (아래의 예는 미술 작품 포트폴리오를 가정하고 진행합니다.)
필드 그룹의 이름을 적당하게 입력하고 첫 필드를 추가하기 위해 “Add Field”를 클릭합니다.
새 필드 추가에서 아래의 이미지와 같이 Field Label에 “작가”라고 적습니다. Field Name은 “pf_artist” 라고 적습니다. (이 값은 데이터 베이스 내부에서 사용하는 값이 되므로 항상 영어를 사용하도록 하는 것이 좋으며 다른 곳에서 사용하지 않는 독립된 키워드여야 합니다. 이 예에서 저는 포트폴리오 작가라는 의미로 pf_artist 라고 적었습니다. 이 플러그인을 사용하는 사용자들은 본인이 편한 임의의 값을 설정해서 규칙을 가지고 정리하는 것이 좋습니다) Field Type은 “Text”로 선택합니다.
나머지는 기본값으로 두고 하단으로 가서 이 입력 칸이 표시되는 모양을 정리하기 위해 넓이를 33%로 조정합니다. (한 줄에 세 개의 필드 표시 목적)
새 필드 추가에서 Field Label에 “제목”이라고 적습니다. Field Name은 “pf_title”라고 적습니다. Field Type은 “Text”로 선택합니다. 표시되는 모양을 정리하기 위해서 넓이를 33%로 조정합니다.
새 필드 추가에서 Field Label에 “넓이”이라고 적습니다. Field Name은 “pf_width”라고 적습니다. Field Type은 “Text”로 선택합니다. 표시되는 모양을 정리하기 위해서 넓이를 33%로 조정합니다.
새 필드 추가에서 Field Label에 “높이”이라고 적습니다. Field Name은 “pf_height”라고 적습니다. Field Type은 “Text”로 선택합니다. 표시되는 모양을 정리하기 위해서 넓이를 33%로 조정합니다.
새 필드 추가에서 Field Label에 “작업기간”이라고 적습니다. Field Name은 “pf_duration”라고 적습니다. Field Type은 “Text”로 선택합니다. 표시되는 모양을 정리하기 위해서 넓이를 33%로 조정합니다.
새 필드 추가에서 Field Label에 “재료”이라고 적습니다. Field Name은 “pf_material”라고 적습니다. Field Type은 “Text”로 선택합니다. 표시되는 모양을 정리하기 위해서 넓이를 33%로 조정합니다.
모두 입력하면 아래와 같습니다. (label을 클릭하면 접혔다/펼쳐짐)
이제 새롭게 만든 이 필드 그룹이 어디에 표시될 것인지 설정합니다.
지금까지 위에서 만든 필드 그룹은 웹사이트의 포트폴리오 작성 시 사용할 목적으로 만들었기 때문에 글(post) 이나 페이지(page) 편집 시에는 필요가 없습니다. 아래와 같이 포스트 타입을 포트폴리오로 선택합니다. (아래의 이미지는 아바다테마를 사용하는 사이트의 예입니다. 이 글을 읽는 분이 사용 중인 테마가 포트폴리오 포스트 타입을 지원하고 있지 않을 수도 있습니다. 이때는 포트폴리오를 지원하는 테마로 변경하거나, 포트폴리오 포스트 타입을 지원하는 플러그인을 설치하거나 할 수 있고 아니면 그냥 포스트 타입을 글(post)로 선택해서 사용 할 수있으며, 본인이 사용하는 테마에서 지원하는 포스트 타입을 사용할 수도 있습니다. 참고 글 포스트타입의 이해)
더 아래쪽에는 이 필드 그룹의 기본적인 설정을 변경할 수 있습니다. 기본으로 사용해도 충분합니다. (혹시 두 개 이상의 필드 그룹을 표시할 때 우선순위를 설정하거나 할 수 있습니다.)
오른쪽에 “공개”를 누릅니다.
이제 포트폴리오의 “새 글 추가”로 가보면 (아래 이미지는 아바다 테마 포트폴리오의 편집 화면) 하단에 ACF 플러그인으로 지정한 추가 필드가 나타나는 것을 볼 수 있습니다. (33%로 설정되어 한 줄에 입력 필드가 세 개 입니다.)
이제부터 새로운 콘텐츠(포트폴리오)를 만들 때 이 추가 필드에 원하는 내용을 입력해 줍니다.
4. 추가로 입력한 내용을 화면에 표시하는 방법
1)편집 창에 직접 입력하는 방법
아래와 같이 편집 창에 추가필드에 넣었던 값을 그냥 타입핑해 넣는 방법입니다.(이개 뭔 개xx야! 이러려면 뭐하러 플러그인 깔고 추가 필드 만들고, 추가 정보 따로 입력했냐? 라고 생각될 수 있습니다. 하지만 위에서 잠깐 언급했듯이 추가 필드를 따로 만들어서 값을 지정해 주는 가장 큰 이유는 콘텐츠가 많이 쌓인 후에 이 콘텐츠들을 방문자에게 다양하게 표시하기 위함이기 때문입니다. 예) 무비 키워드 )
2)편집창에 숏코드로 입력하는 방법
아래와 같이 편집 창의 추가 필드에 넣었던 값을 숏코드로 표시되도록 합니다. 입력된 값을 표시하는 숏코드의 형식은 [acf field=”Field Name”] 입니다. ( 위의 예에서는 [acf field=”pf_artist”], [acf field=”pf_title”] 등등이 해당됩니다. )
숏코드를 이용해서 필요한 코드를 완성한 후 이 코드를 저장해 두었다가 필요시에 꺼내 사용할 때 유용합니다.
3)템플릿 파일에 적용
필드 그룹을 만들고 여기에 원하는 데이터를 입력한 후 포트폴리오(또는 글, 또는 페이지 등 어떤 포스트 타입이든)를 저장하는 순간 모든 데이터는 워드프레스의 post_meta에 저장됩니다. (db의 postmeta 테이블) 이 저장된 값은 언제든 get_post_meta() 함수를 통해 호출이 가능합니다만 더 빠르고 쉽게 사용 할 수 있도록 ACF 플러그인이 제공하는 get_field() 함수를 사용할 것을 권장합니다.
필드에 저장된 값을 호출하는 함수로는 get_field()를 사용하고, 표시하기 위한 함수로는 the_field()를 사용합니다.
아래는 일반적인 코드의 사용 예입니다.
<?php
/**
* Template Name: portfolio Page
*/
get_header();
?>
<div id="primary">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><!-- .entry-header -->
<p><?php the_content(); ?></p>
<p>작가 : <?php the_field("pf_artist"); ?></p>
<p>제목 : <?php the_field("pf_title"); ?></p>
<p>넓이 : <?php the_field("pf_width"); ?></p>
<p>높이 : <?php the_field("pf_pf_height"); ?></p>
<p>작업기간 : <?php the_field("pf_duration"); ?></p>
<p>재료 : <?php the_field("pf_material"); ?></p>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>
5.과연 필요한 플러그인 인가?
포트폴리오를 작성할 때 이 플러그인을 사용하지 않고 편집 창 안에 원하는 내용을 직접 입력해도 사용자들이 내용을 보는 데 불편함이 없습니다.
또 반복되는 포트폴리오를 작성하는 경우 이전 포트폴리오를 복사해서 원하는 내용만 변경한 후 다시 등록해도 되기 때문에 운영자의 측면에서 크게 불편한 것도 없습니다.
굳이 ACF 플러그인을 사용해서 입력 필드를 분리해 만들어주고, 데이터를 넣고, 입력된 데이터를 내용에 표시하는 이 과정은 결과의 출력 면에서 별다른 차이가 없어 보일 수도 있다는 말입니다.
하지만 편집 창에 내용을 직접 입력하는 것과 ACF 플러그인을 통해 필드를 분리해 입력하는 콘텐츠 생성 방식은 아주 큰 차이가 있습니다.
만약 생산되는 포트폴리오(콘텐츠)의 양이 아주 많아졌다고 가정할 때 추가 필드를 등록한 방식은 다양한 방법으로 재분류 해서 보여 줄 수 있습니다.
콘텐츠가 영화라면 개봉연도별로 리스트를 모을 수도 있고, 12세 이하 관람가 영화를 모아서 리스트를 보여 줄 수도 있으며, 배우별, 감독별, 연도별, 등급별, 장르별, 수상작별 등등 다양한 유형으로 분류가 가능 해 집니다.
하지만 ACF 사용하지 않고 모든 데이터를 편집 창(에디터) 안에 직접 넣어서 콘텐츠를 생성한 경우는 오로지 검색 결과에 의지해서 데이터를 분류할 수 밖에 없는 구조가 되므로 더 다양한 유형으로 결과물을 보여주기 힘들어집니다.
물론 지금 당장 내가 직접 분류된 키워드를 이용해서 다양한 데이터의 호출을 하지 못할 수도 있습니다. 이것이 가능하게 하려면 워드프레스의 템플릿 계층(Template Hierarchy), 워드프레스의 기본 쿼리 등에 관한 기본적인 이해가 필요합니다.
하지만 웹사이트의 운영 목적이 방문자에게 나만의 콘텐츠를 제공하는 것이라면, 좀더 다양한 방법을 연구하게 될 계기가 올 수도 있고, 그 활용을 언제 어떻게 확장하게 될지 알수 없는 일입니다.
작업된 콘텐츠가 많아져서 재구성 하기 너무 어려워 지기전에 필드를 분류해 추가 정보를 입력해 놓는 것도 좋을 것 같습니다.
