배경지식이 없다면 실제 도메인, 유료 웹호스팅으로 워드프레스를 경험하는 것이 좋다고 생각하지만, 예제에서 나중에 제공하는 메타 데이터를 편집한 이미지 391장의 용량 문제와 혹시 따라 하는 분들의 번거로움을 제거하기 위해 PC 환경에서 진행합니다.
서버 및 로컬 환경
예제는 ‘인기 있는 PHP 개발 환경’을 내걸고 있는 ‘XAMPP’ 패키지로 로컬 서버를 간단하게 구성합니다. 이 패키지가 꼭 필요해서 선택한 것이 아니라 몇 가지 검색하여 ‘그냥’ 선택한 것이며, 이 패키지 선택과 사용은 중요한 것이 아니며 다루지도 않으므로 최초 설정만 그대로 따라 하면 됩니다.
다음은 예제를 구성하는 주요 기준과 환경이며, 구글 크롬 브라우저를 제외한 나머지 환경은 각자의 취향에 따르면 됩니다.
- XAMPP for Windows 7.1.9 (PHP 7.1.9)
- Apache 2, MariaDB
- PHP 설정: Allow_url_fopen ‘OFF’ 기준
- 도메인: localhost (80번 포트)
- 로컬 PC 운영체제: Windows 7 (또는 Windows 10)
- 구글 크롬 브라우저
- PC 애플리케이션 코드 편집기
사용하는 PC 운영체제에 따라 XAMPP 패키지도 그에 맞는 버전을 사용하면 되지만, 따로 안내하지는 않으며, PC 애플리케이션 코드 편집기도 노트패드Notepad++, 서브라임 텍스트Sublime Text, 아톰ATOM text editor, Visual Studio Code 등 원하는 것을 사용하면 됩니다.
만약, 배경지식이 있다면 XAMPP 패키지를 사용하지 않고, 직접 서버 소프트웨어를 설치하여 구성하거나 최소 500MB 이상의 용량이 있는 실제 웹호스팅 환경을 사용해도 됩니다. 이때는 최소 PHP 5.6 버전 이상의 환경을 권장합니다.
예제파일, 워드프레스, 테마, 플러그인
예제 구성에 필요한 최초의 테마는 제공하며, 과정마다 필요한 파일 또는 코드를 모두 제공합니다. 예제 구성 핵심 콘텐츠인 이미지도 메타 데이터를 직접 편집한 것으로 해당 과정에서 안내하여 제공합니다. 다음은 테마와 일부 파일을 제외한 예제에서 사용하는 워드프레스 버전 및 플러그인, 기타 리소스에 관한 정보입니다. 플러그인은 진행 시기의 최신 버전 사용 또는 업데이트해도 되지만, 워드프레스 버전은 안내하는 버전 계열에 맞추기를 바랍니다. 그리고 예제 완성 후 최신 워드프레스 버전으로 업데이트하고, 특정 오류가 있는지 확인하면 됩니다.
- 워드프레스 버전: 4.8.x, 4.9.x
- 저장소 플러그인: Favorites 2.1.6, Query Monitor 2.15.0
- Pixabay Goodies: jQuery flexImages v1.0.4
- Lazy Load 1.9.1 (Mika Tuupola)
‘Query Monitor’ 플러그인은 완성 예제 사이트를 운용하는 데는 관련이 없으며, 구성 과정의 도움을 얻기 위한 것으로 예제 완성 후 삭제합니다. ‘Favorites’ 플러그인도 꼭 필요한 플러그인으로 볼 수는 없지만, 해당 기능을 직접 구현할 필요가 없을 만큼 템플릿 편집 방식의 워드프레스 웹사이트 구성에 도움이 되는 플러그인이므로 선택한 것입니다. 또, Pixabay Goodies 중 하나인 ‘Fleximage’ 소스는 실제 Pixabay 사이트에서 사용하는 것으로 비슷한 소스가 있지만, Pixabay 사이트를 예제 참고 사이트로 선정했기에 사용하는 것입니다. ‘Lazy Load’ 소스는 이미지 중심의 웹사이트에 대체로 필요한 트래픽 대책의 기본을 적용하기 위해서 사용합니다. 실제 운용하는 웹사이트에서는 다양한 추가 방안을 모색해야 함을 미리 알립니다. Pixabay Goodies, Lazy Load 소스는 테마에 적용되어 있으므로 다른 작업이 필요하지 않습니다.
다음 장에서 XAMPP 및 워드프레스 설치와 설정, 예제에서 사용하는 테마와 플러그인을 미리 설치합니다.
예제 목차
» 예제 구성 환경과 파일
2. XAMPP, 워드프레스, 테마, 플러그인 설치와 설정
4. page 포스트 타입과 페이지 템플릿, 메뉴 구성
10. 타입 attachment 템플릿과 image.php
13. 이미지 메타 데이터를 포스트 메타 데이터에 추가
14. Attachment 타입을 위한 워드프레스 커스텀 분류 등록
15. 이미지 메타 데이터를 워드프레스 분류와 필드 데이터에 저장
16. 이미지를 편집할 때 포스트 데이터와 메타 데이터 업데이트
19. 워드프레스 아바타와 Author Archives
21. 워드프레스 폼 요소로 원하는 이미지 사이즈 다운로드
22. 워드프레스 텍스트 단락 및 줄 바꿈, wpautop
25. 워드프레스 attachment 포스트 타입의 아카이브
26. 워드프레스 함수로 자바스크립트 변수 데이터 생성
28. 워드프레스 커스텀 검색 – 검색 폼과 쿼리 데이터
29. 워드프레스 커스텀 포스트 타입 ‘pic_album’
34. wpdb 클래스로 구글 지도에 마커와 섬네일 표시
35. 워드프레스 분류 데이터 쿼리 클래스, WP_Term_Query
41. 워드프레스 분류의 term 데이터를 캐시 데이터로 생성
42. 워드프레스 역할 그룹과 권한으로 구성 요소 제어
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