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

지난 과정에서 추가한 커스텀 엔드포인트로 ‘발자국’ 페이지의 구글 지도 마커와 인포 윈도를 표시합니다. 먼저, 다음 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 로그를 확인합니다. 다음 그림을 참고하세요.

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

위의 코드 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 구성 전체에 걸쳐 사용합니다.

// 로그인 전, 로그인 회원이 기여자가 아닐 때
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 탭을 순서대로 클릭하여 정보를 확인하세요. 다음 그림을 참고하면 됩니다.

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

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

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

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

바로 로그아웃 후 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 태그 위에 구글 지도 등의 스크립트가 출력되는지 확인하세요.

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

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