워드프레스 강좌 / 플러그인 / Advanced Custom Fields / 사용자 정의 필드 만드는 플러그인

워드프레스의 사용자 정의 필드 기능으로 글이나 페이지에 추가적인 정보를 넣을 수 있습니다. 하지만, 단순한 형태로 되어 있어서 많은 정보를 추가할 때 불편함이 있습니다.

이를 보완해주는 사용자 정의 필드 관련 플러그인이 여럿 있는데, 그 중 널리 사용되는 것이 Advanced Custom Fields입니다.

텍스트, 범위, 체크박스, 라디오 버튼, 파일, 이미지, 달력 등 다양한 형식으로 값을 입력할 수 있고, 출력과 활용을 위한 많은 함수를 제공하고 있습니다.

Advanced Custom Fields 설치하기

Advanced Custom Fields는 워드프레스 관리자에서 설치할 수 있습니다. 일반 플러그인과 같은 방식으로 설치하고 활성화하면 사용할 수 있습니다.

한글 이름은 고급 사용자 정의 필드입니다. 하지만, 검색할 때는 Advanced Custom Fields로 하시는 게 찾기 편합니다.

예제

사용법은 플러그인 홈페이지에 자세히 나와있습니다. 영어로 되어 있기는 하지만, 이 플러그인 사용을 고려할 정도라면 영어 매뉴얼에는 익숙하실 겁니다.

여기서는 라디오 버튼 폼을 이용하여 입력과 출력이 어떤 과정으로 되는지 간단히 알아보겠습니다.

필드 그룹 만들기

Custom Field에서 Add New를 클릭합니다.

이름을 정하고 Add Field를 클릭합니다.

Field Label과 Field Name을 정하고, Field Type은 Radio Button으로 정한 Choices에 값과 라벨을 입력합니다. 그리고 공개하기를 클릭하여 저장합니다.

값 입력하기

이제 글 쓰는 화면에 라디오 버튼으로 된 사용자 정의 필드가 있는 것을 볼 수 있습니다. 값을 선택하고 글을 공개합니다.

사용자 정의 필드의 값 출력하기

글을 출력하는 템플릿(보통 single.php)의 루프(Loop) 안에 다음 코드를 입력합니다. abc는 Field Name입니다.

echo get_field( "abc" );

이제 글에서 입력한 값이 출력되는 것을 확인할 수 있습니다.

같은 카테고리의 다른 글

워드프레스 강좌 / 플러그인 / Korea SNS / 카카오톡 등 한국형 SNS 공유 플러그인

워드프레스 강좌 / 플러그인 / Korea SNS / 카카오톡 등 한국형 SNS 공유 플러그인

Korea SNS Korea SNS는 포스트 등을 SNS에 쉽게 공유(게재)할 수 있게 해주는 플러그인입니다. 가장 큰 특징은 카카오톡, 라인, 밴드, 네이버 블로그 등 한국에서 많이 사용하는 SNS를 지원한다는 것입니다. 현재 지원하는 SNS는 다음과 같습니다. Facebook Twitter Google Kakao Story Kakaotalk Link Naver Line Naver Band Naver Blog 설치 에서 Koran SNS로 검색하여 플러그인을 추가하고 활성화시킵니다. 설정 설정은 에서 할 수 있습니다. 어떤 ...

워드프레스 강좌 / Yoast SEO / 사이트맵(sitemap) 활성화하는 방법

워드프레스 강좌 / Yoast SEO / 사이트맵(sitemap) 활성화하는 방법

사이트맵(sitemap) 사이트맵은 사이트에 있는 콘텐츠를 정리한 XML 파일입니다. 네이버 웹마스터 도구나 구글 웹마스터 도구에 사이트맵을 등록해야 검색이 잘 됩니다. 사이트맵은 보통 Google XML Sitemaps 플러그인으로 만듭니다. 사이트맵 생성 플러그인 중에서는 가장 인기있는 플러그인입니다. 만약 Yoast SEO를 사용한다면 Google XML Sitemaps를 사용할 필요가 없습니다. Yoast SEO에 포함되어 있기 때문입니다. Yoast SEO의 사이트맵 기능 활성화하기 General의 Features 탭에 XML sitemaps가 ...

워드프레스 / 우커머스 / 잡다한 정보들

상품 페이지 라이트박스 제거 functions.php에 다음 코드 추가 add_filter( 'woocommerce_single_product_image_thumbnail_html', 'wc_remove_link_on_thumbnails' ); function wc_remove_link_on_thumbnails( $html ) { return strip_tags( $html, '<img>' ); } 우커머스 스타일 제거 functions.php에 다음 코드 추가 add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' ); 관련 상품 제거 CSS에 다음 코드 추가 .single-product .related.products { display: none; } Database Pending 작업 실행하는 방법 예약된 데이터베이스 작업이 진행되지 않는다면 강제로 실행할 수 있습니다. ...

워드프레스 강좌 / 자식 테마(Child Theme)의 뜻과 만드는 방법, 장단점

워드프레스 강좌 / 자식 테마(Child Theme)의 뜻과 만드는 방법, 장단점

자식 테마의 뜻 어떤 테마의 디자인과 기능을 그대로 상속 받는 테마를 자식 테마(Child Theme)라 합니다. 이때 상속해주는 테마를 부모 테마(Parent Theme)라 합니다. 자식 테마 만드는 방법 워드프레스의 기본 테마 중 하나인 Twenty Seventeen의 자식 테마를 만들어보겠습니다. 방법 1 wp-content/themes 폴더에 twentyseventeen-child 폴더를 만듭니다. (폴더 이름은 다른 것으로 해도 상관없습니다.) twentyseventeen-child 폴더 안에 다음의 내용을 가진 style.css ...

워드프레스 강좌 / 함수 / wp_is_mobile() / 모바일 접속 여부 판단하는 함수

wp_is_mobile() wp_is_mobile()은 모바일 기기로 접속하면 true, 모바일 기기가 아니라면 false를 반환하는 함수입니다. 모바일인지 아닌지 구분하는 기준은 $_SERVER 입니다. wp_is_mobile()은 wp-includes/vars.php에 다음과 같이 정의되어 있습니다. function wp_is_mobile() { static $is_mobile = null; if ( isset( $is_mobile ) ) { return $is_mobile; } if ( empty($_SERVER) ) { ...

워드프레스 강좌 / 데모 콘텐츠 추가하는 방법

워드프레스 강좌 / 데모 콘텐츠 추가하는 방법

워드프레스를 공부하거나 테마를 만들 때, 빈 워드프레스 사이트보다는 콘텐츠가 어느 정도 있는 것이 편합니다. 테스트를 위한 콘텐츠를 만드는 방법은 몇 가지가 있는데, 그 중 한가지 방법은 WordPress.ORG에 있는 Theme Unit Test를 이용하는 것입니다. 이를 이용하여 콘텐츠를 추가하는 방법을 알아보겠습니다. Theme Unit Test 다운로드 Theme Unit Test 사이트에 접속합니다. 화살표가 가리키는 링크를 클릭하여 XML ...

워드프레스 강좌 / GS Logo Slider Lite / 파트너, 고객사 로고 슬라이더 만드는 플러그인

워드프레스 강좌 / GS Logo Slider Lite / 파트너, 고객사 로고 슬라이더 만드는 플러그인

기업 홈페이지에 가면 파트너 또는 고객사 로고가 가로 방향으로 흘러가는 것을 볼 수 있습니다. 이를 보통 로고 슬라이더라고 합니다. 로고 슬라이더는 직접 코딩하거나 공개된 오픈 소스를 이용하여 만들 수 있는데, 워드프레스라면 플러그인으로 쉽게 구현할 수 있습니다. 플러그인 추가 화면에서 logo slider로 검색하면 상당히 많은 플러그인이 나오는데, 사용법은 비슷합니다. 가장 먼저 나오는 ...

워드프레스 강좌 / 플러그인 / Google Site Kit by Google / 구글 서비스 통계 보여주는 플러그인

워드프레스 강좌 / 플러그인 / Google Site Kit by Google / 구글 서비스 통계 보여주는 플러그인

사이트나 블로그를 구글 검색 엔진에 등록하려면 Search Console을 이용합니다. 접속 통계는 Google Analytics를 이용하죠. 수익을 얻고 싶다면 구글 애드센스 광고를 게재합니다. 각 서비스의 분석 결과를 보려면 각 사이트에 접속을 해야 하는데, 꽤 귀찮은 작업니다. 만약 워드프레스로 사이트나 블로그를 만들었다면 Google Site Kit by Google 플러그인을 설치하세요. 워드프레스 관리자에서 주요 분석 자료를 ...

워드프레스 강좌 / 플러그인 / HTML Editor Syntax Highlighter / 에디터 텍스트 모드 코드 하이라이트 플러그인

워드프레스 강좌 / 플러그인 / HTML Editor Syntax Highlighter / 에디터 텍스트 모드 코드 하이라이트 플러그인

워드프레스에 글을 작성할 때 보통은 비주얼 모드를 사용하지만, 텍스트 모드로 들어가서 코드를 직접 수정하는 경우도 많습니다. 그런데, 텍스트 모드에서 코드를 보면 흰색 바탕에 검정 글자여서 읽기가 쉽지 않습니다. 이 문제를 해결해주는 플러그인이 HTML Editor Syntax Highlighter입니다. 코딩 강좌 등 하이라이트 된 코드를 방문자에게 보여주고 싶은 것이라면 Enlighter 플러그인을 사용하세요. 플러그인을 설치하고 활성화한 후 텍스트 ...

워드프레스 강좌 / 멀티사이트 만드는 방법

워드프레스 강좌 / 멀티사이트 만드는 방법

서브 도메인과 서브 디렉토리 멀티사이트를 만드는 방법에는 서브 도메인 방식과 서브 디텍토리 방식이 있습니다. cmsfactory.net이라는 도메인이 있을 때, abc.cmsfactory.net 이 서브 도메인이고 cmsfactory.net/abc 가 서브 디렉토리입니다. 서브 도메인 방식으로 멀티사이트를 만드는 것은 언제든 가능하지만, 서브 디렉토리 방식으로 멀티사이트를 만드는 것은 처음 설치했을 때만 가능합니다. 기존 URL과 멀티사이트의 URL이 충돌할 수 있기 때문입니다. 운영 중인 사이트에 멀티사이트를 추가하려고 하면 다음처럼 ...

워드프레스 강좌