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

연재 7748커버완결2

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

아날로그와 디지털 범주 모두에서 이미지(사진)는 의미나 정보를 직관적 또는 추상적으로 전달하는 최고의 표현 방법입니다. 디지털로 분류하는 블로그나 웹사이트로 범위를 좁히면 빼놓을 수 없는 콘텐츠 핵심 요소입니다. 콘텐츠 관리가 핵심인 워드프레스는 이미지를 하나의 콘텐츠 유형으로 기본 정의하고 있으며, 사용자의 의도에 따라 표현하고 구성할 수 있는, 절대 부족하지 않은 기본의 기능을 제공하고 있습니다.

목표

워드프레스에서 이미지(Media)는 콘텐츠를 등록할 때 부가 요소로 첨부하는 종속의 개념으로 사용하는 것이 보통의 방식입니다. 더불어 이미지를 주 콘텐츠로 두고 해당 이미지가 가진 세부 데이터(메타 정보)를 추가 제공한다면 콘텐츠의 양을 더 쉽게 늘릴 수 있으며, 구성의 다양화도 꾀할 수 있습니다. 이미지를 등록(업로드)할 때 워드프레스가 저장하는 메타 데이터를 출력하고, 또 메타 데이터를 저장하는 과정에서 추가 정보를 저장 및 활용하여 등록의 편리를 도모하는, 독립적 이미지 중심의 콘텐츠 제공 워드프레스 웹사이트를 구성하는 것이 예제의 최종 목표입니다.

고품격 고품질 무료 사진 저장소
고품격 고품질 무료 사진 저장소 완성 예제의 프런트 페이지

완성 예제를 먼저 둘러보면 어떤 워드프레스 웹사이트를 구성할 것인지에 관하여 조금 더 쉽게 이해할 수 있습니다. 다음의 제목을 클릭하면 완성 예제 사이트로 이동합니다.

완성 예제 사이트를 보고 알아챈 분도 있을 것인데, 예제는 무료 이미지 저장소 ‘Pixabay’ 사이트를 참고하여 구성합니다.

주제와 예제

사용자의 설정과 기기의 제공 여부에 따라 다르지만, 디지털카메라나 사진 촬영 기능이 있는 스마트 기기로 사진을 촬영하면, 사진 촬영 시각, 해상도, 노출, 셔터 스피드, 위치 정보 등의 사진과 관련한 메타 데이터가 함께 저장됩니다. 보통 EXIFEXchangable Image File format, IPTCInternational Press Telecommunications Council 기준(Format, 형식) 필드 규칙에 따릅니다. EXIF와 IPTC는 사진의 메타 데이터 필드 유형의 기준으로 간단하게 정의할 수 있는데, 상세한 정보는 검색으로 쉽게 얻을 수 있고, 예제의 과정을 통해 체감할 수 있으므로 생략합니다.

예제는 수동으로 인증한 사용자(이미지 등록 권한을 가진 회원)가 이미지(사진)1를 워드프레스에 업로드할 때 자동으로 저장되는 IPTC, EXIF 기준의 메타 데이터를 이미지 파일과 함께 첨부(Attachment) 포스트 타입의 싱글 페이지에 출력하고, 하나의 이미지를 여러 크기(해상도)의 이미지로 생성하도록 설정하여 로그인 사용자(일반 회원)가 원하는 크기의 이미지를 내려받을 수 있는 ‘이미지 열람 및 저장소 웹사이트’입니다.

구글 지도에 표시한 사진 촬영 위치
고품격 고품질 무료 사진 저장소 예제 – 구글 지도에 표시한 사진 촬영 위치

또, 이미지 대량 등록 시 편리를 위해 이미지의 특정 메타 데이터를 자동으로 특정 분류(Custom Taxonomies)로 등록하며, 분류와 키워드(분류)에 의한 검색이 가능하도록 구성하는데, 워드프레스 쿼리를 통한 검색 필드(Query Var)를 추가하지만, 워드프레스 기본 검색 필드를 변경하지 않기 위해 키워드를 첨부 포스트 타입의 특정 필드에 동시에 저장하도록 설정하여 워드프레스 기본 기능을 있는 그대로 사용하는 데 초점을 둡니다.

공개 자바스크립트 소스를 사용하여 이미지 아카이브를 구성하여 콘텐츠 출력의 편의를 도모하며, 워드프레스 REST API의 기본 사용에 의한 ‘더보기’ 기능과 간단한 커스텀 엔드포인트Custom Endpoints 추가로 지도(구글 지도)에 이미지의 촬영 위치 정보를 출력합니다. 나머지, 사이트 운용 및 예제 구성에 필요한 여러 워드프레스 함수와 훅Hook으로 콘텐츠를 표현하고 제어합니다.

예제에서 경험할 수 있는 워드프레스 주요 기능을 몇 가지 나열하면 다음과 같습니다.

  • Attachment Post Type
  • 워드프레스 템플릿 시스템 (Template Hierarchy)
  • 페이지 템플릿 (Page Templates)
  • 옵션 페이지 (Settings API)
  • 워드프레스 쿼리 (WP_Query, get_posts, wpdb)
  • Roles and Capabilities
  • WP REST API
  • Transients API
  • 워드프레스 함수 및 훅

혹시 처음 듣거나 뭔가 어려워 보인다면 걱정하지 않아도 됩니다. 거창한 것이 아니며, 워드프레스를 설치 후 기본 테마로 그대로 사용할 때에도 사용자가 일일이 확인하지 않았다는 것을 제외하면, 늘 사용했던, 사용하는 워드프레스 기본 기능입니다.

대상

핵심 콘텐츠가 이미지(사진)이며, 보통의 설치 플러그인 사용이 아닌 템플릿 파일 편집에 의한 구성이므로 몇 가지 나열하면 다음과 같습니다.

  • 워드프레스 설치, 설정, 쓰기(포스트 작성, 이미지 또는 파일 첨부), 테마와 플러그인 설치에 어려움이 없는 사용자
  • 편집기(PC 애플리케이션 코드 에디터)의 기초 사용이 가능한 사용자
  • 사진이 주 콘텐츠인 워드프레스 웹사이트 구성에 관심이 있는 사용자
  • 혹시 사진 촬영을 업이나 취미로 삼으며, 워드프레스에 관심이 있는 사람
  • 워드프레스 플러그인 저장소 쇼핑이 이제는 싫증 난 사용자
  • 워드프레스 테마 저장소와 유료 테마 사이트 쇼핑이 이제는 싫증 난 사용자
  • 테마를 멋있게 꾸미는 데 관심이 없는 사용자
  • 충실하고 풍부한 콘텐츠가 멋진 웹사이트를 구성한다고 생각하는 사용자
  • PHP 등의 프로그래밍 언어를 모르지만, 패턴과 결과(예제)를 보고 대략 해석할 수 있는 감각적인 사용자
  • 선이론, 선개념의 학습 방식이 절대적이거나 당연하다고 생각하지 않는 사용자
  • 콘텐츠 표현과 관리가 워드프레스 사용의 핵심 목표인 사용자

참고

예제의 모든 설명은 상대적으로 배경지식이 적은 사용자 기준이며, 사용하는 단어도 가능한 평범한 단어를 사용합니다. 예제는 템플릿 파일을 직접 편집하는 방식이므로 관련 프로그래밍 언어의 배경지식이 없다면 어려울 수 있지만, 단순하게 워드프레스 함수와 평범한 코드 스니핏을 패턴에 의해 나열하는 것이 대부분이므로 프로그래밍 언어 자체에 관한 의문을 가지지 않으면 오히려 쉽습니다. 예제에서 모든 것을 설명할 수 없으며, 워드프레스 웹사이트 구성의 초점을 벗어나면 오히려 얻는 이득이 줄어듭니다.

고품격 고품질 무료 사진 저장소 예제의 싱글 이미지 페이지
고품격 고품질 무료 사진 저장소 예제의 싱글 이미지 포스트 페이지

덧붙이면, 템플릿 파일을 편집하지 않고 원하는 워드프레스 시스템 또는 웹사이트를 구성한다는 것은 지금의 워드프레스는 불가능합니다. ‘무엇하기만 하면 뚝딱’이라는 이야기는 처음부터 성립할 수 없는 말입니다. 템플릿 파일을 편집한다는 것이 뭔가 거창한, 대단한 지식을 요구하는 것도 아니며, 모든 것을 이해하지 않아도 되므로 선입견을 버리고 다양한 주제, 다양한 방법으로 경험을 축적하면 그에 따라 배경지식도 얻을 수 있습니다.

예제 구성 과정에서 나오는 워드프레스 함수, API 등에 관하여 기본 개요를 안내하지 않는 것을 기준으로 둡니다. 워드프레스의 함수와 API 정보는 간략 예시와 함께 인터넷에 지나칠 정도로 많이 존재하며, 코덱스Codex에도 체계적으로 안내하고 있습니다. 필요하다면 검색을 통해 얻기 바랍니다. 다만, 필요에 따라 간략한 설명을 덧붙일 경우는 있지만, 예제 과정마다 결과를 통해 체감하며 이해하는 것이 더 좋다고 생각합니다.

예제는 워드프레스 코어나 함수 등의 소스 분석, 프로그래밍 언어에 관한 지식을 전달하는 것이 목적이 아니며, 특정 주제와 데이터로 워드프레스 웹사이트를 구성하는 데 목표를 두며, 활용과 응용의 범위는 독자의 몫입니다. 예제를 통해 판단하고 비판하여 워드프레스에 관한 필요한 정보만 얻을 수 있다면 그만입니다.

예제에서 사용한 이미지에 대한 명칭 및 분류 등의 데이터는 필자 임의로 정하였으므로 현실과 차이가 있습니다. 또 예제에서 안내하는 모든 외부 정보(링크 포함), 공개 소스, 플러그인 등은 해당 서비스 주체로 변경될 가능성이 있습니다.

다음 장에서는 예제 구성에 필요한 환경을 안내합니다.

예제 목차

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. 워드프레스 커스텀 검색 – 검색 폼과 쿼리 데이터

29. 워드프레스 커스텀 포스트 타입 ‘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 인증과 제한 및 제어