워드프레스 커스텀 포스트 타입 ‘pic_album’

연재고품격 고품질 워드프레스 무료 사진 저장소완결2

예제에서는 ‘앨범’이라는 이름으로, 이미지 업로드 권한이 있는 사용자가 올린 이미지를, 운영자(관리 그룹) 판단으로 특정 주제(제목)로 묶어 하나의 포스트로 공개(제공)하는 가상의 콘텐츠 기준을 둡니다.

‘앨범’은 워드프레스 커스텀 포스트 타입을 생성하여 등록합니다. 또, 앨범에 등록하는 이미지는 사용자가 등록한 attachment 타입의 이미지 포스트가 됩니다. 이때, 등록하는 attachment 타입의 이미지는 앞의 과정에서 여러 번 반복한 것처럼 ‘특정 포스트에 첨부되지 않은’ 이미지 포스트이며, 등록 방법은 ‘워드프레스 갤러리’ 기능을 사용합니다. 이 정도의 기준을 두고 이어서 안내합니다.

커스텀 포스트 타입 ‘pic_album’

완성 예제의 ‘앨범’ 메뉴를 클릭하면 다음 그림의 페이지를 볼 수 있습니다. 이미지는 임의로 선택한 것이므로 다를 수 있습니다. 이 앨범 페이지는 pic_album 이름의 커스텀 포스트 타입을 정의하고, 페이지 템플릿 만든 후 워드프레스 커스텀 쿼리로 싱글 앨범 포스트 타입 pic_album 포스트만 출력한 것입니다. 그림의 이미지는 싱글 앨범 포스트의 섬네일(Featured Image)입니다.

완성 예제의 앨범 아카이브 페이지

앨범 포스트로 사용할 커스텀 포스트 타입은 inc/pics-tax-cpt.php 파일에 정의합니다. 이 파일을 편집기로 열어 다음 코드를 파일 65번 줄 다음에 새 줄을 추가하여 붙여넣고 저장합니다.

register_post_type( 'pic_album', array(
    'labels' => array(
        'name' => '앨범',
        'singular_name' => '앨범',
        'menu_name' => '앨범',
    ),
    'public' => true,
    'show_ui' => true,
    'show_in_menu' => true,
    'show_in_nav_menus' => true,
    'exclude_from_search' => true, // 's' query var 제외
    'has_archive' => false, // 예제는 main query에 attachment 타입만 허용하며, 페이지 템플릿의 커스텀 쿼리로 구성하므로 아카이브가 필요가 없습니다.
    'menu_icon' => 'dashicons-format-gallery',
    'menu_position' => 6,
    'supports' => array( 'title', 'editor', 'comments', 'thumbnail' ),
    'rewrite' => array( 'slug' => 'album' ),
    'show_in_rest' => false // WP REST API
) );

위의 코드를 추가하면 다음 그림처럼 관리페이지에 ‘앨범’ 메뉴가 추가되고 즉시 포스트 등록이 가능합니다.

관리페이지의 커스텀 포스트 타입 앨범 메뉴

register_post_type

커스텀 포스트 타입 등록 함수로 register_taxonomy 함수처럼 init 훅을 사용하여 등록합니다. 커스텀 포스트 타입과 커스텀 분류는 init 훅을 사용하면서 MUP(Must Use Plugins)로 등록하는 것이 좋습니다. 필수 사항은 아니지만, 워드프레스 사이트의 ‘콘텐츠’ 등록을 위한 타입과 분류는 상대적으로 먼저 로드되어야 하며, 해당 포스트 타입의 콘텐츠와 분류를 더는 사용하지 않을 때를 제외하면 기본으로 존재해야 하므로 MUP로 등록하는 것이 적절합니다.

register_post_type 함수는 다음의 기본 예시를 기준으로 많은 인수를 사용하여 정의할 수 있습니다.

// 기본 예시
register_post_type( $post_type, $args );

모든 인수를 안내할 수 없으므로 예제에서 사용한 인수 중 몇 가지만 소개합니다. 커스텀 포스트 타입과 커스텀 분류 등록에 관하여 정보가 부족하다면 코덱스를 먼저 참고해야 합니다.

labels

등록하는 포스트 타입에 관한 텍스트 출력 문자를 정의할 수 있습니다. 대부분 관리페이지 화면에 적용되는 항목이며, 사이트에서 아카이브 페이지 제목을 정의할 수도 있습니다. 예제에서는 위의 코드처럼 일부 텍스트만 정의하였으며, 정의하지 않은 항목들은 기본 텍스트가 출력됩니다.

public

기본 false로 설정되어 있으며, true로 설정하면 기본 검색에 포함하고 관리페이지의 사이트 메뉴(내비게이션) 선택 항목에 출력됩니다. 기본 타입 post, page와 비슷한 성격의 콘텐츠로 정의한다고 생각하면 됩니다. true로 설정하면 다른 인수 설정이 자동으로 결정되므로 생략할 수 있으며, 예제에서는 생략하였습니다.

exclude_from_search

public true 설정일 때 이 설정은 false로 자동 결정되지만, 예제에서는 attachment 타입 외에 검색에 포함하지 않으므로 true로 설정하였습니다. 워드프레스 기본 검색 s 쿼리 변수의 키워드(search term) 검색에 사용하지 않는다는 뜻으로 ‘검색에서 제외한다’가 true이므로 이름과 반대로 생각해야 합니다.

menu_icon

관리페이지 메뉴에 사용할 워드프레스 Dashicon을 지정합니다. 아이콘은 검색으로 쉽게 찾을 수 있습니다. 다음 링크를 참고하여 필요할 때 사용할 수 있으며, 관리페이지에서는 추가 설치나 스크립트 등록은 필요가 없습니다.
Developer Resources: Dashicons

menu_position

관리페이지 메뉴 출력 위치를 설정하는 것으로 코덱스에서는 다음으로 설명하고 있습니다.

  • 5 – below Posts
  • 10 – below Media
  • 15 – below Links
  • 20 – below Pages
  • 25 – below comments
  • 60 – below first separator
  • 65 – below Plugins
  • 70 – below Users
  • 75 – below Tools
  • 80 – below Settings
  • 100 – below second separato

예제에서는 ‘6’으로 지정하여 기본 타입 post(글) 다음에 메뉴를 출력하였습니다.

supports

포스트 등록 화면에서 사용할 메타 항목(메타박스)을 지정하는 것으로 지정하지 않으면 title, editor 정도의 기본 요소만 나옵니다. 지정할 수 있는 목록을 다음처럼 코덱스에서 안내하고 있으며, 일부는 사용하는 테마의 정의에 따라, 댓글(코멘트)처럼 사이트 전역 설정에 따라 연결된 요소가 있습니다.

  • title
  • editor
  • author
  • thumbnail
  • excerpt
  • trackbacks
  • custom-fields
  • comments
  • revisions
  • page-attributes
  • post-formats

rewrite – slug

퍼머링크 구조와 관련된 것인데, 예제의 설정은 쉽게 퍼머링크에 표시할 텍스트 또는 이름을 album으로 지정한다는 것으로 지정하지 않으면 포스트 타입에서 지정한 pic_album이 됩니다. 퍼머링크와 관련된 것은 추가 정보를 얻어 나중에 따로 학습하는 것이 좋습니다. 어려운 것이 아니라 여러 상황의 실제 경험이 있어야 쉽게 이해할 수 있다는 뜻입니다.

show_in_rest

정의한 포스트 타입의 워드프레스 REST API 사용 여부 설정으로 해석하여 간단하게 이해하면 됩니다. 기본은 false로 추가할 필요는 없지만, 한 번은 익혀둘 필요가 있는 인수이기에 포함하였습니다. 나중에 진행하는 예제의 과정에서 이해를 더하세요.

위에서 안내한 항목 외에 많이 있으며, 예제에서도 추가하여 설정해야 하는 것이 있지만, 사이트 구성에 영향이 없으므로 생략하였습니다.

퍼머링크 재생성

새로운 커스텀 포스트 타입 또는 커스텀 분류를 등록하거나 기존 정의한 내용을 수정한 후 필요한 사항은 ‘퍼머링크 재생성’입니다. ‘재생성’은 거창한 뜻이 아니라, ‘데이터베이스 데이터 업데이트’를 뜻합니다. 다시, 데이터는 데이터베이스 _options 테이블의 rewrite_rules 필드에 저장된 데이터를 말합니다.

결국, 퍼머링크 재생성은 사이트의 URL 구조를 갱신한다는 것으로, 가장 간단하며 확실한 방법은 관리페이지 고유주소 설정 페이지의 ‘변경 사항 저장’ 버튼을 클릭하는 것입니다. 다른 방법이 있다고 해도 버튼을 클릭하는 방법만 알면 됩니다. 퍼머링크를 갱신하지 않으면 커스텀 포스트 타입 등에서 설정한 URL 구조 관련 사항이 적용되지 않으며, 포스트를 등록해도 사이트에서 볼 수 없습니다.

지금 바로 버튼을 클릭하세요.

퍼머링크 구조를 갱신하는 가장 쉽고 간단한 ‘버튼 클릭’은 워드프레스 사이트에 때로 알 수 없는 오류가 생겼을 때 해결을 위해 제일 먼저 떠올려야 하는 필수 절차로, 문제가 해결되는 때가 많습니다.

정리

커스텀 포스트 타입의 정의 및 설정은 등록하려는 콘텐츠의 성격에 따라 다르므로 기획 또는 계획의 선행이 중요합니다. 그렇다 해도 복잡하거나 어려운 것이 아니며, 예제 정도의 설정만으로 쉽게 새로운 포스트 타입을 추가하여 콘텐츠를 등록할 수 있습니다.

다음은 이번 장에서 변경한 파일의 링크입니다. 압축을 풀어 사이트 루트에 덮어쓰면 됩니다.

그 후 관리페이지에서 앨범 포스트 타입 메뉴와 등록 화면을 한 번 더 확인해보세요.

예제 목차

0. 고품격 고품질 워드프레스 무료 사진 저장소

1. 예제 구성 환경과 파일

2. XAMPP, 워드프레스, 테마, 플러그인 설치와 설정

3. 테마 Pics Press

4. page 포스트 타입과 페이지 템플릿, 메뉴 구성

5. 워드프레스 핵심 용어 짚기

6. 워드프레스 포스트 타입 attachment

7. 워드프레스 이미지 사이즈

8. 워드프레스 이미지 사이즈 추가 및 변경

9. 워드프레스 이미지 파일 제어

10. 타입 attachment 템플릿과 image.php

11. 워드프레스 이미지 메타 데이터

12. GPS 데이터를 워드프레스 메타 데이터로 저장

13. 이미지 메타 데이터를 포스트 메타 데이터에 추가

14. Attachment 타입을 위한 워드프레스 커스텀 분류 등록

15. 이미지 메타 데이터를 워드프레스 분류와 필드 데이터에 저장

16. 이미지를 편집할 때 포스트 데이터와 메타 데이터 업데이트

17. 워드프레스 미디어 파일 업로드

18. 워드프레스 싱글 이미지 포스트 페이지

19. 워드프레스 아바타와 Author Archives

20. 워드프레스 이미지 사이즈별 데이터 출력

21. 워드프레스 폼 요소로 원하는 이미지 사이즈 다운로드

22. 워드프레스 텍스트 단락 및 줄 바꿈, wpautop

23. 워드프레스 사진의 EXIF 데이터 출력

24. 구글 지도에 표시하는 사진 촬영 위치

25. 워드프레스 attachment 포스트 타입의 아카이브

26. 워드프레스 함수로 자바스크립트 변수 데이터 생성

27. 워드프레스 커스텀 검색 – 쿼리 변수

28. 워드프레스 커스텀 검색 – 검색 폼과 쿼리 데이터

» 워드프레스 커스텀 포스트 타입 ‘pic_album’

30. 커스텀 포스트 타입의 싱글 페이지

31. 워드프레스 WP_Query

32. 커스텀 쿼리, 페이지 템플릿, 포스트 아카이브

33. 분류 기준의 관련 포스트 커스텀 쿼리

34. wpdb 클래스로 구글 지도에 마커와 섬네일 표시

35. 워드프레스 분류 데이터 쿼리 클래스, WP_Term_Query

36. 워드프레스 템플릿 태그

37. 워드프레스 옵션 페이지, 옵션 필드

38. 워드프레스 사이트 프런트 페이지

39. 사이트 메뉴 및 포스트 페이지 링크

40. 워드프레스 Transient API

41. 워드프레스 분류의 term 데이터를 캐시 데이터로 생성

42. 워드프레스 역할 그룹과 권한으로 구성 요소 제어

43. 간단한 워드프레스 코멘트 폼 수정

44. 워드프레스 대시보드 위젯 추가

45. 워드프레스 REST API 간략 이해

46. 워드프레스 REST API 응답에 커스텀 필드 추가

47. 워드프레스 REST API 커스텀 라우트 및 엔드포인트

48. 워드프레스 REST API 커스텀 엔드포인트로 구글 클러스터 지도 마커와 인포 윈도 표시

49. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 포스트 Ajax Load More

50. 워드프레스 REST API, Underscore.js 자바스크립트 템플릿, 코멘트 Ajax Load More

51. 워드프레스 REST API 인증과 제한 및 제어