XAMPP, 워드프레스 설치 및 설정, 테마와 플러그인 설치는 영상을 통해 안내합니다. 동영상 내용에서 XAMPP 관련 부분은 예제 구성을 위한 최소한의 방법으로 ‘로컬 PC 환경’이라는 제한 기준이기에 가능한 것입니다. 실제 운용 웹사이트 환경에서는 적절하지 않습니다.
동영상에 나오지만, 필요한 파일을 미리 받아 두는 것이 편리하므로 다음의 링크가 있는 제목을 클릭하여 이동 후 파일을 받으세요.
XAMPP, 워드프레스 설치
다음의 동영상을 보고 XAMPP, 워드프레스 설치를 진행합니다. 올바른 최종 예제 결과를 위해 가능하다면 영상의 내용 그대로 따라 하세요. (동영상은 워드프레스 4.8.2 버전으로 제작되었습니다.)
동영상에서 데이터베이스 사용자 암호 없이 진행한 것은 XAMPP 기본값을 그대로 사용한 것이며, 앞에서 말한 데로 로컬 PC 환경의 제한 기준이기에 가능한 것이며, 예제 구성에 영향이 없고 주요 고려 사항이 아니므로 기본 그대로 진행하였습니다. 또, XAMPP 에디터Editor를 아톰 에디터로 설정한 것은 필자의 취향이므로 원하는 에디터를 지정하면 됩니다.
PC 종료 후 또는 XMAPP 종료 후 다시 시작하면 Apache, Mysql 서버가 자동으로 시작되도록 설정하였으므로 XAMPP 실행과 추가 처리에 관한 작업은 잊으세요. 만약, XAMPP 관련 문제가 있다면 안티 바이러스Anti-Virus PC 애플리케이션 실행을 일시적으로 중지해야 할 경우가 있습니다.
워드프레스 설정, 테마, 플러그인 설치
이번에는 테마와 일부 파일, 저장소 플러그인을 설치합니다. 다음 링크가 있는 제목을 클릭하여 테마와 파일을 적당한 위치에 받고 압축을 풉니다. 저장소 플러그인은 관리페이지에서 설치합니다.
다음 동영상을 참고하여 예제를 위한 워드프레스 설정, 테마, 플러그인 설치를 진행합니다.
Favorites 플러그인의 버튼 색상과 아이콘 설정은 구성 예제에 적절히 맞춘 것이므로 나중에 취향에 맞게 변경하면 되며, 워드프레스 기본 설정에서는 미디어 부분의 생성 이미지 크기(해상도)가 이 예제에서 핵심입니다. 동영상에서 나오는 것은 파일을 일자로 분류하지 않는 것만 진행했지만, 나중에 다시 크기를 지정합니다. 읽기 설정은 진행하지 않았는데 이 설정도 page 포스트 생성, 페이지 템플릿 적용 후에 처리합니다. 나머지 설정은 구성 사이트에 맞게 적절히 설정한 것으로 염두에 두지 않아도 됩니다.
동영상 끝의 wp-config.php 파일 편집은 템플릿 편집으로 워드프레스 사이트를 구성할 때 기본으로 필요한 것과 ‘휴지통’ 단계의 번거로움을 제거하는 것, 리비전Revision 포스트 생성을 제한하는 것인데 영상만으로 직접 입력하기 어렵다면 다음 코드를 복사하여 사용하세요.
define( 'WP_DEBUG', true );
define( 'EMPTY_TRASH_DAYS', 0 ); // 휴지통 단계 없애기
define( 'WP_POST_REVISIONS', false ); // 리비전 사용하지 않기
제공한 파일은 테마 하위를 제외하면 다음처럼 구성되어 있습니다.
wp-content/
├── mu-plugins
│ └── pics-tax-cpt.php
├── plugins
│ └── pics-cleaner.php
└── themes
└── pics_press
관리페이지에서 활성화, 비활성화 제어가 기본으로 제한되어 있고, 워드프레스에서 상대적으로 먼저 로드하는 MUP(Must Use Plugins)로 커스텀 포스트 타입Custom Post Types과 커스텀 분류Custom Taxonomies를 정의하기 위해 pics-tax-cpt.php 파일을 미리 만들어 둔 것이며, 현재 내용이 없는 파일입니다. MUP에 관련한 내용은 생략하며, 검색으로 쉽게 정보를 얻을 수 있습니다.
워드프레스에서 생성하는 데이터베이스 필드와 데이터 중 더는 사용하지 않아 불필요한 경우가 있습니다. 그때 간편하게 한 번에 지우기 위해 활성화, 비활성화가 가능한 플러그인 형식으로 가장 단순하게 구성한 것이 pics-cleaner.php 파일입니다. 예제 구성에 필요한 파일은 아니지만, 플러그인의 뜻을 거창하게 해석할 필요가 없다는 것과 플러그인을 만들 때 최소한의 파일 헤더 텍스트만으로 쉽게 구성할 수 있으므로 참고하면 됩니다. 설명은 생략합니다.
예제의 기준 경로
동영상에서 아톰 에디터 ‘Add Project Folder’ 메뉴를 선택하여 로컬 PC의 XAMPP 패키지 설치 경로의 ‘htdocs’ 폴더를 선택하였는데, 이후부터 다음의 용어를 사용합니다.
- (웹)사이트 루트: htdocs
- 테마 루트: htdocs/wp-content/themes/pics_press
다음 장에서 예제에서 사용하는 테마에 관하여 살펴봅니다.
예제 목차
» 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