워드프레스 강좌 / 사용자 정의 필드 입력하고 출력하기
사용자 정의 필드
사용자 정의 필드를 이용하여 글에 추가적인 정보를 입력하고 출력할 수 있습니다. 그 정보를 글 본문에 직접 입력할 수도 있지만, 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입니다.
워드프레스 강좌 / 플러그인 / Google Site Kit by Google / 구글 서비스 통계 보여주는 플러그인
사이트나 블로그를 구글 검색 엔진에 등록하려면 Search Console을 이용합니다. 접속 통계는 Google Analytics를 이용하죠. 수익을 얻고 싶다면 구글 애드센스 광고를 게재합니다. 각 서비스의 분석 결과를 보려면 각 사이트에 접속을 해야 하는데, 꽤 귀찮은 작업니다. 만약 워드프레스로 사이트나 블로그를 만들었다면 Google Site Kit by Google 플러그인을 설치하세요. 워드프레스 관리자에서 주요 분석 자료를 ...
워드프레스 관리자 페이지의 메뉴는 왼쪽에 있습니다. 플러그인이나 테마를 설치하면 메뉴는 더 늘어납니다. 왼쪽의 메뉴를 클릭하면 오른쪽에 관련 내용이 나옵니다. 그런데 보여줄 수 있는 모든 내용이 다 나오지는 않습니다. 화면 크기가 한정되어 있다보니 자주 사용되거나 중요한 내용만 나오기도 합니다. 숨겨진 내용은 오른쪽 위의 에서 보이게 할 수 있습니다.(반대로 화면에 있는 내용을 숨길 ...
워드프레스 강좌 / 플러그인 / UpdraftPlus / 백업, 복원 플러그인
UpdraftPlus UpdraftPlus는 워드프레스 전체를 백업하고 복원할 수 있는 플러그인입니다. 현재 백업/복원 플러그인 중에서 가장 인기있는 플러그인으로, 대표적인 특징은 다음과 같습니다. 쉽고 빠른 백업/복원 파일과 DB 모두를 백업/복원 구글 드라이브, 드롭 박스, 원드라이브 등 외부 저장소에 백업 가능 주기적으로 자동 백업 가능 백업 를 클릭합니다. 팝업창에서 를 클릭합니다. 잠시 기다리면 백업이 만들어집니다. 백업 파일은 /wp-content/updraft 폴더에 저장됩니다. 외부 ...
워드프레스 강좌 / 자식 테마(Child Theme)의 뜻과 만드는 방법, 장단점
자식 테마의 뜻 어떤 테마의 디자인과 기능을 그대로 상속 받는 테마를 자식 테마(Child Theme)라 합니다. 이때 상속해주는 테마를 부모 테마(Parent Theme)라 합니다. 자식 테마 만드는 방법 워드프레스의 기본 테마 중 하나인 Twenty Seventeen의 자식 테마를 만들어보겠습니다. 방법 1 wp-content/themes 폴더에 twentyseventeen-child 폴더를 만듭니다. (폴더 이름은 다른 것으로 해도 상관없습니다.) twentyseventeen-child 폴더 안에 다음의 내용을 가진 style.css ...
워드프레스를 설치할 때 관리자 계정을 만들고 메일 주소를 입력합니다. 워드프레스가 자동 업데이트 되거나, 댓글이 달리는 등 주요 사건이 발생하면 그 메일로 알림을 보냅니다. 따라서 수신 가능한 메일 주소로 설정하고, 변경이 필요하면 바로바로 업데이트하는 것이 좋습니다. 워드프레스 이메일 주소 변경하기 으로 이동합니다. 이메일 주소를 입력합니다. 을 클릭합니다. 새로운 이메일 주소로 인증 메일이 ...
워드프레스 강좌 / 플러그인 / Advanced Custom Fields / 사용자 정의 필드 만드는 플러그인
워드프레스의 사용자 정의 필드 기능으로 글이나 페이지에 추가적인 정보를 넣을 수 있습니다. 하지만, 단순한 형태로 되어 있어서 많은 정보를 추가할 때 불편함이 있습니다. 이를 보완해주는 사용자 정의 필드 관련 플러그인이 여럿 있는데, 그 중 널리 사용되는 것이 Advanced Custom Fields입니다. 텍스트, 범위, 체크박스, 라디오 버튼, 파일, 이미지, 달력 등 다양한 형식으로 값을 입력할 수 ...
워드프레스 강좌 / 플러그인 / Enlighter / 코드 하이라이터(Code Highlighter) 플러그인
Enlighter 워드프레스 코드 하이라이트 플러그인으로 널리 사용되는 것은 Crayon Syntax Highlighter입니다. 그런데 개발이 중단된지 꽤 되었습니다. 그래서 찾은 다른 플러그인이 Enlighter입니다. 어떻게 사용하는지 간단히 알아보겠습니다. 설치와 설정 설치는 워드프레스 관리자 페이지에서 할 수 있습니다. highlighter로 검색 후 설치합니다. 설정은 Enlighter에서 합니다. 다양한 메뉴가 있는데, 기본 설정 그대로 사용해도 큰 불편은 없습니다. 사용법 - 블록 편집기 Enlighter를 ...
워드프레스 강좌 / 플러그인 / Google XML Sitemaps / 사이트맵 만들어주는 플러그인
사이트맵(Sitemap) 사이트맵은 사이트에 있는 콘텐츠의 URL, 업데이트 날짜, 중요도 등을 정리한 XML 파일입니다. Sitemaps.org에서는 사이트맵을 다음과 같이 설명하고 있습니다. Sitemap은 웹마스터가 크롤링에 사용할 수 있는 사이트의 페이지에 대한 정보를 검색 엔진에 알리는 손쉬운 방법입니다. Sitemap의 가장 간단한 형식은 검색 엔진에서 사이트를 보다 지능적으로 크롤링할 수 있도록 각 URL에 대한 추가 메타데이터(마지막 업데이트된 날짜, ...
워드프레스 강좌 / Compress JPEG & PNG images / 이미지 압축 플러그인
워드프레스에 이미지를 업로드하면, 여러 가지 크기의 썸네일이 만들어져서 디스크를 많이 사용하게 됩니다. 따라서 디스크 사용량을 줄이고 싶을 때 제일 먼저 하는 것이 이미지 압축입니다. 이미지를 압축하는 방법은 여러 가지가 있는데, 그 중 하나가 플러그인을 이용하는 것입니다. Compress JPEG & PNG images는 이미지 압축을 도와주는 플러그인입니다. Smush와는 다르게 원본 이미지 압축도 가능합니다.(Smush도 유료는 원본 ...
워드프레스 강좌 / 플러그인 / Schema / 구조화된 데이터 만들어주는 플러그인
구조화된 데이터 SEO와 관련해서 해야 할 것 중의 하나가 구조화된 데이터를 만드는 것입니다. 구조화된 데이터는 콘텐츠에 관련된 정보를 검색 엔진에 알려주는 역할을 합니다. 만약 구조화된 데이터가 없으면 구글 웹마스터도구에서 다음과 같은 메시지를 보여줍니다. 사이트에 구조화된 데이터가 없습니다. 구조화된 데이터은(는) Google에서 사이트의 콘텐츠를 파악하여 검색결과에 리치 스니펫을 표시하는 데 도움을 줍니다. 구조화된 데이터는 HTML 마크업을 ...