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

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

지난 과정에서 추가한 커스텀 엔드포인트로 ‘발자국’ 페이지의 구글 지도 마커와 인포 윈도를 표시합니다. 먼저, 다음 3개의 파일을 편집기로 엽니다.

  • inc/enqueue-script.php
  • inc/header-footer.php
  • page-templates/trace-page.php

바로 코드를 추가하여 변경합니다.

jQuery Ajax 워드프레스 REST API Request

편집기에 열린 trace-page.php 파일에서 대략 41번 줄에서 57번 줄까지는 구글 지도 마커와 인포 윈도 데이터를 워드프레스 wpdb 클래스를 사용하여 가져온 것입니다.

// 41번 줄에서 57번 줄
var locations = [
    <?php
        global $wpdb;
        //
        echo implode( ',', $geo );
    ?>
]

해당 코드를 모두 지우고, 파일 11번 줄인 다음 코드 1번 줄 다음에 2번에서 19번 줄을 추가하고 저장합니다.

<script> // 이 줄 다음에 추가
var locations = [];
jQuery(document).ready(function($) {
    var restEndpoint = 'http://localhost/wp-json/picspress/v1/geo'; // geo 엔드포인트
    $.ajax({
        url: restEndpoint,
        success: function(data){
            for (i = 0; i < data.length; i++) {
                locations[i] = {
                    'lat': data[i].lat,
                    'lng': data[i].lng,
                    'info': '<a href="' + data[i].post_url + '"><img src="' + data[i].img_url + '"></a>'
                };
                console.log(data[i].lat, data[i].lat, data[i].post_url, data[i].img_url, i);
            }
            initMap(locations);
        }
    });
});

코드는 jQuery Ajax 통신 기본 패턴을 사용하여 워드프레스 REST API 엔드포인트로 요청한 것입니다.

사이트 발자국 페이지에 접근하여 브라우저의 개발자 도구(F12)를 열고, 페이지를 새로 고쳐 개발자 도구 Console 로그를 확인합니다. 다음 그림을 참고하세요.

워드프레스 REST API 구글 지도 마커 Console 로그

자바스크립트 변수와 엔드포인트

위의 코드 4번 줄의 엔드포인트는 로그인 전과 로그인 후 기여자 회원을 제외하고 사용하는 것입니다. 기여자가 로그인하여 발자국 페이지를 볼 때는 자신이 등록한 이미지의 마커와 인포 윈도만 구글 지도에 표시하도록 엔드포인트를 동적으로 변경해봅니다.

먼저, 위의 코드 4번 줄을 다음처럼 변경하고 저장합니다.

var restEndpoint = 'http://localhost/wp-json/picspress/v1/geo'; // 이 줄을 아래로 변경
var restEndpoint = currentPage.rest_endpoint;

편집기에 열린 enqueue-script.php 파일에서 대략 14번 줄의 다음 코드를 찾습니다.

// 프런트 페이지
if ( is_page_template( 'page-templates/front-page.php' ) ) {
    wp_localize_script('pics-js', 'currentPage', array(
        'current_condition' => 'front',
    ));
}

위의 코드 다음에 다음 코드를 추가하고 저장합니다.

// 발자국 페이지
elseif ( is_page_template( 'page-templates/trace-page.php' ) ) {
    if ( is_user_logged_in() && current_user_can( 'contributor' ) ) { // 로그인 회원이 기여자(Role)일 때
        $rp = esc_url_raw( rest_url( 'picspress/v1/geo/' . get_current_user_id() ) );
        wp_localize_script('pics-js', 'currentPage', array(
            'rest_endpoint' => $rp,
        ));
    } else {
        $rp = esc_url_raw( rest_url( 'picspress/v1/geo/' ) );
        wp_localize_script('pics-js', 'currentPage', array(
            'rest_endpoint' => $rp,
        ));
    }
}

위의 코드 추가 후 발자국 페이지의 사이트 소스를 보면 로그인 상황에 따라 다음의 데이터가 추가됩니다. 지난 과정에서 이미 경험한 것으로 이 키와 값을 자바스크립트의 변수와 값으로 사용합니다. 이와 같은 워드프레스 기준의 자바스크립트 변수 설정은 남은 REST API 구성 전체에 걸쳐 사용합니다.

워드프레스 5 - 매물의 추억
// 로그인 전, 로그인 회원이 기여자가 아닐 때
var currentPage = {"rest_endpoint":"http:\/\/localhost\/wp-json\/picspress\/v1\/geo\/"};
// 로그인 회원이 기여자일 때 - 아래는 PhotoMan(12) 회원으로 로그인한 예
var currentPage = {"rest_endpoint":"http:\/\/localhost\/wp-json\/picspress\/v1\/geo\/12"};

브라우저의 개발자 도구가 열려있고, 예제 사이트에 관리자로 로그인한 상태에서 발자국 페이지를 새로 고칩니다. 개발자 도구의 Network, XHR, Name, Headers 탭을 순서대로 클릭하여 정보를 확인하세요. 다음 그림을 참고하면 됩니다.

워드프레스 REST API 구글 지도 엔드포인트 Header

다음 그림은 Preview 탭을 클릭했을 때입니다.

워드프레스 REST API 구글 지도 엔드포인트 Preview

바로 어드민바의 로그아웃 링크로 로그아웃 후 개발자 도구의 정보를 앞의 과정처럼 반복해서 확인하세요. 관리자 로그인 때와 같은 결과가 나오면 됩니다.

이번에는 사이트의 ‘로그인’ 메뉴를 이용하여 기여자 회원 중 PhotoMan 회원으로 로그인합니다. 앞에 개발자 도구 정보 확인 과정을 반복하여 엔드포인트 및 응답 개수를 확인하세요. 다음 그림은 PhotoMan 회원으로 로그인 후 발자국 페이지 개발자 도구의 Headers 탭입니다.

워드프레스 REST API 구글 지도 기여자 엔드포인트

다음 그림은 PhotoMan 회원 발자국 페이지 개발자 도구의 Preview 탭으로, 응답 개수는 164개로 실제 위도와 경도 정보가 있는 이미지 포스트 개수와 일치합니다.

워드프레스 REST API 구글 지도 기여자 엔드포인트 응답 데이터

바로 로그아웃 후 PhotoWoman 회원으로 다시 로그인 후 위의 과정을 반복하여 결과를 확인해보세요. 확인 후 관리자로 다시 로그인합니다.

wp_footer

편집기에 열린 header-footer.php 파일의 현재 코드는 다음과 같습니다.

add_action( 'wp_footer', 'pics_footer_script', 25 );
function pics_footer_script() {
    //
}

외부 사이트의 인증 코드, 추가 CSS 코드, 사이트 통계 코드 등 사이트 소스의 head 및 body 태그 위에 추가하는 코드가 있다면, 별개의 파일을 만들어 워드프레스 훅으로 추가하면 관리의 편리를 도모할 수 있습니다. 파일 이름과 다르게 예제에서 사이트 소스의 head 태그 위에 추가하는 코드는 없습니다.

먼저, header-footer.php 파일에서 위의 코드를 찾아 다음 코드로 대체합니다.

add_action( 'wp_footer', 'pics_footer_script', 25 );
function pics_footer_script() {
    // 발자국 페이지
    if ( is_page_template( 'page-templates/trace-page.php' ) ) { ?>
        //
    <?php
    }
}

편집기의 trace-page.php 파일에서 다음 코드 1번과 3번 줄 사이의 모든 코드를 잘라 header-footer.php 파일의 위의 코드 5번 줄과 대체하고 저장합니다.

<div id="trace_map" style="width: 100%; height: calc(100vh - <?php echo $px; ?>px);"></div>
// 이 사이의 모든 소스 코드
<?php
get_footer();

발자국 페이지를 새로 고쳐 구글 지도의 마커 및 인포 윈도 출력과 사이트 소스에서 body 태그 위에 구글 지도 등의 스크립트가 출력되는지 확인하세요.

이번 장에서 연 파일을 편집기에서 모두 닫고, 다음 링크의 이번 장 완성 파일을 받아 압축을 풀어 테마 루트에 덮어쓰세요.

다음 장에서는 사이트의 일부 아카이브 페이지에 ‘더보기’ 기능을 구현합니다.

예제 목차

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

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 커스텀 라우트 및 엔드포인트

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

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

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

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

어떤 의견이 있거나 궁금한 무언가 있다면 다음 링크의 사이트를 이용하세요.

이메일로 소식 받기

이메일로 새로운 포스트를 받으려면 아래에 이메일 주소를 입력하고, 구독합니다! 버튼을 클릭하세요. 그리고 입력한 이메일 계정에 접속하여 구독 확인 메일 내용을 확인하세요.