ACF(Advanced Custom Fields) 워드프레스 플러그인 사용법
ACF(Advanced Custom Fields)은 워드프레스 프로그래머에서 필수 플러그인 이라고 할 수 있습니다. ACF을 사용하고부터는 워드프레스 위젯을 전혀 사용하지 않고도 쉽게 원하는 페이지 구성을 할 수 있게 되었죠. ACF는 아래와 같은 기능이 필요할 때 사용하게 됩니다.
- 디자인상 워드프레스 기본 에디터로는 구성하기 힘든 경우.
- 페이지 또는 포스트에 Featured 이미지 외에 다른 이미지가 필요한 경우.
- 페이지 또는 포스트 템플릿의 특성상 커스텀 필드가 필요한 경우.
- 갤러리 형식의 이미지가 추가적으로 필요한 경우.
- 포스트 카테고리에 이미지나 커스텀 필드가 필요한 경우.
워드프레스 ACF 는 말 그대로 약방의 감쵸처럼 사용하게 됩니다. ACF의 대표적인 기능은 아래와 같은데요.
- 텍스트, 이미지, WYSIWYG 에디터, 달력, 구글지도 등 모든 커스텀 필드 추가 가능.
- 페이지, 포스트, 카테고리, 메뉴 등 워드프레스 대부분의 화면에 커스텀 필드 추가 가능.
- Repeater(PRO 용) 필드를 사용하면 갤러리, 관련 포스트와 같이 커스텀 필드를 반복적으로 사용 가능.
제 경험상 워드프레스 웹사이트를 프로그램할 때 ACF와 Custom Post Type 플러그인 두 개만 있으면 원하는 대부분의 기능들을 구현할 수 있습니다.
그럼 서두는 이정도로 하고 간단한 사용법에서부터 PRO용 Repeater까지 한번 알아보죠.
1. ACF 플러그인 설치, 커스텀 필드 추가 하기
ACF 플러그인을 먼저 설치합니다.
설치한 후에 왼쪽 메뉴에서 Custom Fields 메뉴를 선택합니다.
화면 위의 'Add New' 버튼을 클릭하면 Field Group을 추가할 수 있는 화면으로 이동합니다.
'+ Add Field' 버튼을 클릭.
위의 그림과 같이 기본 입력 사항을 넣습니다.
- Field Label: 관리자 화면에서 보여지는 제목
- Field Name: PHP화면에서 값을 가져올 수 있는 키값(영문, _ , - 만 허용)
- Field Type: 입력 타입(텍스트, 이미지, WYSIWYG 에디터, 달력 등)
- Return Format: 입력 타입이 이미지나 파일등을 선택했을 때 설정.
- 이미지/파일 Array: 이미지/파일의 Object를 직접 리턴 받아 사용하고 싶은 경우.
- 이미지/파일 URL: 이미지/파일의 URL만 리턴받아 이용할 경우(저는 주로 이 옵션을 선택합니다).
- 이미지/파일 ID: 이미지/파일의 ID만 리턴받는 경우.
Field Type에 따라서 해당 Type에 맞는 옵션들이 나오니 한 번씩 확인해보세요.
기본 입력 사항을 입력했으면, 이 커스텀 필드를 어디에서 입력할 지를 Rule을 정해줘야합니다.
Location 섹션에서 Rule은 아래와 같이 정해줄 수 있습니다.
- Post Type: 모든 글/페이지 등에서 전부 입력하고 싶은 경우.
- Post/Page Template: 템플릿 별로 구분하여 입력하고 싶은 경우.
- Post Category: 글 카테고리별로 구분하여 입력하고 싶은 경우.
- Taxonomy: 카테고리/태그 등에서 전부 입력하고 싶은 경우.
Rule을 두 개 이상 정하고 싶은 경우(예: Template 'Music' 과 'Game'에서 입력하고 싶은 경우)는 'Add rule group'을 클락하여, Rule은 계속 추가할 수 있습니다.
다양한 옵션들이 있으니 한번씩 확인해보시고, 모든 설정이 끝났으면, 오른쪽은 '업데이트' 버튼을 클릭하여 커스텀 필드를 저장합니다.
이렇게 Field Group별로 원하는 커스텀 필드들을 하나씩 추가해 보세요.
2. ACF 커스텀 필드 값을 글/페이지에서 입력하기
커스텀 필드를 추가했으니 그 값들을 입력해 봐야겠죠.
예를 들어 Music 카테고리의 글에 Vocal, Guitar, Piano, Drum이라는 커스텀 필드를 만들었을 경우, 해당 Music 글의 에디터 페이지로 가면, 아래와 같이 커스텀 필드들이 나타나게 됩니다.
위와 같이 커스텀 필드에 원하는 내용을 입력하고, 해당 페이지를 저장하면 커스텀 필드들도 저장이 됩니다.
3. PHP 파일에서 ACF 커스텀 필드 값 가져오기
그럼 저장된 커스텀 필드 내용들을 화면에 보여줘야 되는데요. 여기에서 PHP 코드를 조금 수정해야 합니다.
ACF(Advanced Custom Fields)의 또 하나의 가장 큰 장점이라고 하면 참고 웹사이트가 잘 되어있다는 거죠. 그래서 워드프레스 웹사이트와 달리(?^^) 원하는 PHP 코드가 있을 경우에는 ACF 웹사이트에서 아주 쉽게 찾을 수가 있습니다.
여러분이 기본적인 PHP코드 지식이 있다고 가정하고 몇 가지 경우를 예로 들어서 설명을 드리도록 하겠습니다.
3.1 글/페이지(Single 페이지)에서 커스텀 필드값 가져오기
function
example
예를 들어 위에서 우리가 만들은 Music 포스트에 커스텀 필드를 보여주고 싶은 경우에는 아래와 같이 할 수 있습니다.
또 하나의 fuction은 get_field() 가 있습니다. 이것은 PHP로 리턴 값을 받는 function인데요. 실제로 값이 존재하는지 아닌지 판단할 때 사용하면 좋겠죠.
example
참고로 the_field('text_field');는 실제로는 echo get_field('text_field'); 와 같은 기능을 합니다.
3.2 글/페이지 ID로 커스텀 필드값 가져오기
다음은 글/페이지 ID로 커스텀 필드값을 가져오는 경우입니다. 위에 사용한 the_field()의 파라미터는 실제로 아래와 같습니다.
parameters
그래서 아래와 같이 두번째 파라미터에 post ID를 넣어주면 되는 거죠.
example
3.3 cateory.php에서 각 글의 커스텀 필드 값 가져오기
글의 카테고리 화면에서 각 글에 있는 커스텀 필드 값을 가져오고 싶은 경우가 많이 있습니다. 이런 경우에는 아래와 같이 사용하면 됩니다.
example
3.3 taxonomy 화면에서(cateory.php, archive.php) taxonomy 커스텀 필드값 가져오기
예를 들어서 카테고리 화면에서 배너를 카테고리의 커스텀 필드 이미지로 보여주고 싶은 경우가 있다면, 아래와 같이 하면 됩니다.
example
4. ACF PRO 기능 Repeater 사용하기
마지막으로 PRO 기능 중에 하나인 Repeater를 사용해보도록 하겠습니다.
위에서 예를 들었던 Music 포스트의 커스텀 필드를 볼까요? 커스텀 필드에 Vocal, Guitar, Piano, Drum를 추가했습니다만, 밴드 별로 그 멤버들의 구성원들은 다양할 겁니다. Repeater 커스텀 필드 기능이 없는 경우에는 모든 구성원의 악기들을 전부 커스텀 필드로 넣어줘야 할 텐데요. 악기에는 종류가 무척 많죠 ㅎㅎ. 혹은 상품의 이미지를 넣고 싶은데, 몇 개의 이미지를 넣을지 정해져 있지 않은 경우 등 이럴 때 Repeater의 필요성을 절실히 느끼게 되는데요. 간단하게 Repeater의 기능을 알아보죠.
4.1 Repeater 필드 추가하기
위의 그림처럼, Field Name을 'members'로 하고, Field Type을 'Repeater'로 선택하면, 그 밑에 'Sub Fields'란이 생기게 됩니다.
그러면 그 'Sub Fields' 하위의 커스텀 필드를 만들 수 있게 되는 거죠. 간단하죠?
4.2 에디터에서 Repeater 필드 값 입력하기
위에서 보았던 Music 포스트를 에디터로 열면 그 밑에 Repeater 'Members' 필드가 보이고, 아래 그림처럼 원하는 멤버들을 계속 추가할 수 있게 됩니다.
왼쪽의 숫자 있는 부분을 드래그 앤 드롭하면 순서를 변경할 수 있고, 오른쪽의 '+', '-' 아이콘을 클릭하면 삽입이나 삭제도 쉽게 할 수 있습니다.
4.3 PHP 파일에서 Repeater 필드 값 가져오기
이제 입력된 Repeater 필드의 서브 필드 값을 화면에 보여줘야 할 텐데요. 이것도 아래와 같이 무척 간단합니다.
example
저도 처음에 몇 개 워드프레스 사이트 개발할 때는 유료라서 PRO를 구매하지 않고 Repeater 기능 없이 사용하다가 무척 고생한 적이 있었습니다.
상품 이미지를 10개 정도 넣게 해 줬는데, 나중에 20개로 늘리면 안 되냐고 해서, 커스텀 필드를 20개를 추가 했던 기억이 있는데요. ㅎㅎ
PRO를 구매한 이후에는 Repeater를 사용하게 되면서 일손이 훨씬 줄게 되었죠.
구매한 지 3-4년 되었는데, 업데이트도 잘돼서 아직도 문제없이 잘 사용하고 있습니다. 얼마 전에 확인해보니 가격이 많이 오르긴 했는데, 혹시 워드프레스 웹사이트 많이 개발하시는 분들에게는 구매를 한 번 해보시라고 권하고 싶네요.
오늘은 워드프레스 플러그인 ACF(Advanced Custom Fields) 알아보았습니다. 처음 사용하시는 분들에게는 조금 도움이 되지 않았을까 생각이 들고요, Repeater기능이 뭔지 알고 싶으셨던 분들에게도 약간의 사용 팁이 되지 않았나 싶네요.
다시 한번 강조하지만 ACF(Advanced Custom Fields)와 한두 개의 주요 플러그인만 같이 사용해도 워드프레스 웹사이트를 내가 원하는 대로 변경할 수 있습니다. 위의 그림은 실제로 제가 운영중인 웹사이트의 설치된 플러그인 입니다. 보시면 알겠지만, 웹사이트 프로그램을 위해서 설치된 플러그인은 단지 ACF PRO 밖에 없습니다. 저는 워드프레스 웹사이트 개발에 있에서 최소한의 플러그인을 사용하려고 무척 노력하는 편인데요, 그중에서 뺄 수 없는 플러그인 중에 하나가 바로 ACF이라고 생각합니다. 여러분은 어떻게 생각하시나요?^^
워드프레스 홈페이지 설정 및 템플릿 계층구조
워드프레스에서 홈페이지 설정 및 글(Post), 페이지(Page), 카테고리(Category) 등의 파일을 결정하는 워드프레스의 템플릿 계층 구조에 대해서 알아보겠습니다. 1. 템플릿 계층구조 : 모든 페이지는 in
goodbypoor.tistory.com
흥미로운 다른글들
이 글을 공유합시다
