워드프레스 강좌 / 사용자 정의 필드 입력하고 출력하기

사용자 정의 필드

사용자 정의 필드를 이용하여 글에 추가적인 정보를 입력하고 출력할 수 있습니다. 그 정보를 글 본문에 직접 입력할 수도 있지만, DB에 저장하면 출력하는 것 이외에도 여러 가지로 활용 가능하다는 장점이 있습니다.

사용자 정의 필드 입력하기

사용자 정의 필드는 글 쓰는 화면에서 입력합니다. 사용자 정의 필드를 입력하는 폼이 보이지 않는다면, 화면 옵션에서 [사용자 정의 필드]에 체크합니다.

글 입력 폼 밑에 사용자 정의 필드가 있습니다. [새로 입력]을 클릭합니다.

이름과 값을 입력 후 [사용자 정의 필드 추가] 버튼을 클릭하면 필드가 생성됩니다.

사용자 정의 필드는 여러 개 생성할 수 있습니다. 다음은 두 개의 사용자 정의 필드를 추가한 모습입니다.

color는 red, weather는 Cloudy로 정했습니다. 사용자 정의 필드를 만들었다면, 이름이 선택 목록에 추가되어 재사용이 편해집니다.

사용자 정의 필드 출력하기

테마 파일의 적절한 위치에 코드를 넣으면 사용자 정의 필드의 이름 또는 값이 출력됩니다. 적절한 위치는 보통 글(포스트)을 출력하는 루프(loop) 안이고, 글을 출력하는 템플릿 파일은 보통 single.php입니다.

해당 글에 추가된 사용자 정의 필드 전체를 출력하는 코드는

the_meta();

입니다. 예를 들어 Twenty Seventeen의 single.php의

while ( have_posts() ) : the_post();

아래에 the_meta();를 추가하면, 다음과 같이 순서 없는 목록으로 값과 이름이 출력됩니다.

특정 사용자 필드의 값만 출력하고 싶다면 get_post_meta() 함수를 이용합니다.

get_post_meta( $post_id, $key, $single )
  • $post_id : 글의 아이디
  • $key : 사용자 정의 필드 이름
  • $single : true면 문자열로 반환하고, false 또는 설정하지 않으면 배열로 반환

예를 들어

echo get_post_meta( get_the_ID(), 'weather', true );

는 글의 weather의 값만 출력합니다.

출력 이외의 용도로 사용할 수도 있습니다. 예를 들어

if ( get_post_meta( get_the_ID(), 'color', true ) == "red" ) {
  echo ( '<style>p { color: red; }</style>' );
}

는 color의 값이 red일 때 문단의 색을 빨간색으로 만듭니다.

참고

사용자 정의 필드 관련 플러그인을 이용하면 체크박스, 라디오 버튼, 선택 목록 등 다양한 방식으로 값을 입력할 수 있습니다. 대표적인 플러그인은 Advanced Custom Fields입니다.

같은 카테고리의 다른 글

워드프레스 강좌 / 블록 에디터 / 코드 입력하는 방법

워드프레스 강좌 / 블록 에디터 / 코드 입력하는 방법

워드프레스에서 글 작성할 때 코드를 붙여넣으면, 들여쓰기가 제대로 표현되지 않거나 코드를 실행해버리는 등 원하는 모양으로 나오지 않는 경우가 있습니다. 그럴 경우 그대로 붙여넣지 말고 코드 블록으로 붙여넣습니다. + 아이콘을 클릭하고 를 클릭합니다. 그리고 코드를 붙여넣습니다.

워드프레스 강좌 / 플러그인 / Enlighter / 코드 하이라이터(Code Highlighter) 플러그인

워드프레스 강좌 / 플러그인 / Enlighter / 코드 하이라이터(Code Highlighter) 플러그인

Enlighter 워드프레스 코드 하이라이트 플러그인으로 널리 사용되는 것은 Crayon Syntax Highlighter입니다. 그런데 개발이 중단된지 꽤 되었습니다. 그래서 찾은 다른 플러그인이 Enlighter입니다. 어떻게 사용하는지 간단히 알아보겠습니다. 설치와 설정 설치는 워드프레스 관리자 페이지에서 할 수 있습니다. highlighter로 검색 후 설치합니다. 설정은 Enlighter에서 합니다. 다양한 메뉴가 있는데, 기본 설정 그대로 사용해도 큰 불편은 없습니다. 사용법 - 블록 편집기 Enlighter를 ...

워드프레스 강좌 / 멀웨어 제거, 치료하는 방법

워드프레스 강좌 / 멀웨어 제거, 치료하는 방법

워드프레스와 멀웨어 워드프레스를 사용하는 사이트가 많다보니 공격도 많이 당합니다. 멀웨어에 감염되어서 사이트가 느려지거나, 서버 자원을 필요 이상으로 소비하거나, 다른 사이트로 리다이렉트시키는 등의 문제가 발생합니다. 멀웨어에 감염되면 index.php나 wp-config.php 등 주요 파일이 변형됩니다. 그리고 이상한 파일이 여기저기 잔뜩 생성됩니다. 따라서 치료 방법은 단순합니다. 변형된 파일은 문제 없는 파일로 교체하고, 이상한 파일은 삭제하면 됩니다. 문제는 ...

워드프레스 강좌 / 플러그인 / Ad Inserter / 애드센스 광고 쉽게 삽입할 수 있게 해주는 플러그인

워드프레스 강좌 / 플러그인 / Ad Inserter / 애드센스 광고 쉽게 삽입할 수 있게 해주는 플러그인

Ad Inserter 워드프레스로 만든 사이트 또는 블로그에 애드센스 광고를 넣는 방법은 여러 가지입니다. 그 중 Ad Inserter 플러그인으로 광고를 삽입하는 방법을 소개합니다. Ad Inserter는 광고를 삽입하게 해주는 플러그인으로, 애드센스 광고를 본문 위, 본문 중간 등에 쉽게 넣을 수 있게 해줍니다. 설치 WordPress.ORG에서 공유되는 플러그인이므로 워드프레스 관리자에서 바로 설치할 수 있습니다. 본문에 애드센스 광고 넣기 본문 상단 설정은 ...

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

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

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

워드프레스 강좌 / 플러그인 / Crayon Syntax Highlighter / 코드 문법 하이라이트 플러그인

워드프레스 강좌 / 플러그인 / Crayon Syntax Highlighter / 코드 문법 하이라이트 플러그인

Crayon Syntax Highlighter 프로그래밍을 주제로 하는 블로그나 사이트라면 수많은 코드를 글에 포함하게 됩니다. 코드는 <pre> 태그나 <code> 태그를 이용하여 고정폭 글꼴로 나타낼 수도 있으나, 단색으로 나타내므로 읽는게 불편합니다. 워드프레스에는 이런 불편을 해소해주는 Syntax Highlighter 플러그인이 많습니다. 그 중 사용하기 편하고 다양한 기능을 가진 플러그인이 Crayon Syntax Highlighter입니다. Crayon Syntax Highlighter는 꽤 오랫동안 업데이트가 되지 않고 있어서 ...

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

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

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

워드프레스 강좌 / 언어 변경하기

워드프레스 강좌 / 언어 변경하기

언어 변경 워드프레스를 특정 언어로 설치한 후에 다른 언어로 변경할 수 있습니다. 언어 변경에는 사이트 전체 언어 변경과 사용자별 언어 변경 두 가지가 있습니다. 사이트 전체 언어 변경 사이트 전체 언어 변경은 에서 합니다. 에서... 원하는 언어를 선택한 후... 을 클릭하면... 적용됩니다. 사용자별 언어 변경 사용자별로 다른 언어를 사용할 수 있습니다. 사용자의 프로필로 이동한 후 에서 ...

워드프레스 강좌 / Compress JPEG & PNG images / 이미지 압축 플러그인

워드프레스 강좌 / Compress JPEG & PNG images / 이미지 압축 플러그인

워드프레스에 이미지를 업로드하면, 여러 가지 크기의 썸네일이 만들어져서 디스크를 많이 사용하게 됩니다. 따라서 디스크 사용량을 줄이고 싶을 때 제일 먼저 하는 것이 이미지 압축입니다. 이미지를 압축하는 방법은 여러 가지가 있는데, 그 중 하나가 플러그인을 이용하는 것입니다. Compress JPEG & PNG images는 이미지 압축을 도와주는 플러그인입니다. Smush와는 다르게 원본 이미지 압축도 가능합니다.(Smush도 유료는 원본 ...

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

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

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

워드프레스 강좌