gazette-featured-content-thumbnail

[워드프레스로 모임서비스 만들기] 5. 지도와 지역별 메뉴

지난 시간에는 사용자가 모임에 참가신청을 할 수 있는 기능을 구현해 보았습니다. 오늘은 지난 시간에 이어 모임 정보에 모임 날짜와 모임 장소(지도) 등의 정보를 추가하고 모임을 지역별로 나눠 볼 수 있게끔 지역별 메뉴를 추가해 보기로 하겠습니다. 사실 어떤 모임이든 모임 장소와 시간은 없어서는 안될 필수적인 정보인데 이제야 다루게 되어 조금 늦은 감이 있습니다.

만들 내용

사용자가 ‘새 모임 만들기’를 클릭하면 새 모임 만들기 양식에서 모임 날짜와 장소를 추가할 수 있고, 이렇게 추가된 날짜와 장소는 모임 상세정보 페이지에 다음 그림과 같이 표시됩니다. 또한 사용자들이 자신이 사는 지역의 모임만을 검색할 수 있도록 메뉴에 ‘지역별 모임’ 메뉴를 추가합니다.

그림1. 완성된 모임 상세 페이지

준비물

다음 1개의 플러그인이 필요합니다. 설치하지 않으셨다면 지금 설치하면 됩니다. (설치 방법은 생략)

  • Date and Time Picker Field 날짜정보를 추가할 때 사용할 플러그인으로, ACF 플러그인의 애드온(Add-on) 플러그인

모임 날짜 및 장소 추가하기

모임 날짜와 장소를 추가하는 것은 크게 다음 두 가지 작업으로 나뉩니다. 우선 모임 날짜와 장소를 양식에 추가하여 사용자 입력을 받는 부분이 있고, 나머지 하나는 입력받은 날짜와 장소 정보를 모임 상세 페이지에 표시하는 부분입니다.

모임 날짜와 장소 입력받기

이번에도 사용자 입력폼을 작성하는데는 이전에 새 모임 개설하기에서 사용한 적이 있는 ACF 플러그인을 이용하기로 합니다. Custom Fields 메뉴에서 새로 Field Group을 하나 생성합니다. 이름은 ‘모임 추가 정보’라고 주었습니다.

그림2. 모임 추가 정보 필드 그룹

여기서 우리는 모임 날짜와 모임 장소를 추가하려고 하기 때문에 ‘모임 날짜’와 ‘모임 장소 지도’ 필드를 추가하였고 필드 타입을 각각 ‘Date and Time Picker’와 ‘Google Map’으로 주었습니다. 그리고 Location Rules를 ‘Post Type is equal to moim’ 으로 설정하여 포스트 유형이 모임(moim) 인 경우만 필드가 추가되도록 만들었습니다.

지금까지의 내용이 제대로 반영이 되었는지 확인하려면 어드민 대시보드에서 ‘모임’ 메뉴로 가서 아무 모임이나 하나를 선택하여 확인해 보면 모임 정보 입력 화면에 다음과 같이 모임 날짜와 모임 장소를 추가할 수 있는 부분이 추가되었음을 확인할 수 있을 것입니다.

그림3. 어드민 대시보드 - 모임 정보 입력

모임 날짜와 장소가 모임 커스텀 포스트 유형에 제대로 반영이 된 것을 확인하였으면, 이제 어드민 페이지가 아닌 ‘새 모임 만들기’ 프론트 페이지에서 사용자가 직접 모임 정보를 추가할 수 있도록 해야 합니다. 이 부분은 지난 시간에 소개한 acf_form() 함수를 이용하면 간단하게 해결됩니다. 방금 새로 만든 필드 그룹의 ID값을 지난 시간에 만든 new-moim.php 템플릿 속의 acf_form() 함수에 다음과 같이 추가하면 끝입니다.

<div class="entry-content">
    <?php
    $options = array(
        'post_id' => 'new',
        'field_groups' => array(47, 115), // CHANGE THIS field group id!!
        'submit_value' => '만들기',
    );
    acf_form( $options );
    ?>
</div>

위 코드에서는 필드그룹 ID값으로 ‘115’를 추가했지만, 이 값은 사용자마다 다를 수 있기 때문에 여러분 시스템에 맞는 ID값으로 변경하여 추가하면 됩니다. 이렇게 acf_form()을 추가한 다음 다시 ‘새 모임 만들기’를 해 보면 이제 새 모임 만들기 폼에 다음과 같이 날짜와 장소를 입력할 수 있는 부분이 추가된 것을 확인할 수 있을 것입니다.

그림4. 날짜와 장소가 추가된 새모임 만들기

모임 날짜와 장소 표시하기

날짜와 장소 정보의 입력 처리가 완료되었으면, 이제 이 정보를 모임 상세 페이지에 표시할 차례입니다. 이 작업은 워드프레스에서 커스텀 필드(custom fields)를 화면에 표시하는 일이기 때문에 간단하게 처리할 수 있습니다. 이번엔 모임 상세 페이지를 다뤄야 하기 때문에 해당 템플릿 파일인 single-moim.php 파일을 열어 루프(loop) 속의 적당한 부분에 다음과 같이 코드를 추가합니다.

<div class="entry-content">
    <?php the_content(); ?>

    <h3>모임 날짜: <?php the_field( 'moim_date' ); ?></h3>
    <h3>모임 장소</h3>
    <?php
    $map = get_field( 'moim_location_map' );
    if( !empty($map) ): ?>

        <?php echo $map['address']; ?>
        <iframe 
            width="600" height="350" frameborder="0" style="border:0"
            src="https://www.google.com/maps/embed/v1/place?q=<?php echo $map['address']; ?>&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU" allowfullscreen></iframe>

    <?php endif; ?>
</div><!-- .entry-content -->

위 코드에서 the_field()get_field() 함수는 ACF 플러그인에서 제공하는 필드 출력용 함수입니다. 앞서 양식을 통해 입력 받은 값을 이 함수를 통해 화면에 표시할 수 있습니다. 그리고 여기서는 구글맵(Google Map)을 이용해서 화면에 지도를 표시하는데, 구글맵에서 제공하는 여러 방식들 중 IFrame Embed API 방식을 사용하였습니다. 이 방식은 구글 API 키를 필요로 하는데, API키는 직접 발급받아서 앞서의 코드의 &key= 부분에 추가하면 됩니다.

이제 여기까지 완료하였다면, 아무 모임 페이지나 하나 클릭하여 모임 정보가 모임 상세 페이지에 제대로 반영되었는지 확인합니다. ACF 플러그인에서 대부분의 기능을 제공하고 있기 때문에 별로 어렵지 않게 필드를 추가하고 화면에 필드를 표시할 수 있었습니다. 구글맵의 더 자세한 사용법은 구글맵 문서를 참조하면 되고 ACF의 필드함수의 더 자세한 내용은 ACF 문서를 참조하면 좋을 듯 싶습니다.

그림5. 모임 상세 페이지

지역별 메뉴 추가하기

모임 정보에 장소 정보가 추가되었으니, 이제 추가된 장소 데이터를 기반으로 지역별 메뉴를 한번 추가해 보기로 하겠습니다. 지역을 어떻게 나눌지는 사이트의 성격에 따라 다르겠지만 여기서는 데모의 목적으로 주요 도시별로 구분하여 서울/부산/대전/대구/광주의 5개 지역으로 구분하도록 하겠습니다.

지역별 메뉴를 구현하기 위해서 우선 지역별 메뉴를 구분하는 URL을 만들 필요가 있습니다. 여러 방법이 있겠지만 여기서는 간단하게 다음과 같은 식으로 처리하도록 하겠습니다. 예를 들어 서울 지역의 모임이라면, URL을 다음과 같이 구성하기로 합니다. loc 라는 쿼리 변수를 하나 만들어 이 값에 지역 정보를 넣어 호출하는 방식입니다.

/moim/?loc=대한민국+서울특별시

위와 같은 URL로 호출하면 지역이 서울인 모든 모임의 목록만이 화면에 표시되어야 할 것입니다. 이 때 사용할 수 있는 가장 간단한 방법은 워드프레스의 pre_get_posts 훅을 쓰는 것입니다. 이 훅은 워드프레스의 메인 루프의 쿼리를 변경할 때 사용하는 훅입니다. 테마의 functions.php 파일 속에 다음과 같이 훅을 추가합니다. 이 스크립트는 URL로부터 입력받은 loc 값을 기준으로 쿼리의 범위를 조정합니다.

add_action( 'pre_get_posts', 'my_pre_get_posts' );
function my_pre_get_posts( $query ) {

    // do not modify queries in the admin
if( is_admin() ) { return $query; }

    if ( $query->is_main_query() && is_post_type_archive( 'moim' ) ) {

        if( isset($_GET['loc']) ) {
            $meta_query[] = array(
                array(
                    'key' => 'moim_location_map',
                    'value' =>  $_GET['loc'],
                    'compare' => 'LIKE'
                )
            );
            $query->set( 'meta_query', $meta_query );
        } 
    }
    return $query; 
}

이제 다시 앞서의 URL을 브라우저의 입력창에 입력해 보면 지역이 서울인 모임들만이 목록에 표시되는 것을 확인할 수 있을 것입니다. 지역이 부산/대전/대구/광주인 경우도 마찬가지 입니다.

메뉴로 표시하려면 어드민 대시보드에서 새 메뉴를 하나 만들고 ‘사용자 정의 링크’ 메뉴를 추가한 다음 다음과 같이 메뉴를 설정해 주면 됩니다. 워드프레스의 기본 기능들만 활용하여 간단하게 메뉴가 구성되었네요!

그림6. 지역별 메뉴 구성하기

오늘은 여기까지 입니다.

여기서는 지역별 메뉴를 구성할 때 간단하게 SQL 쿼리의 LIKE 문을 이용한 단순 문자열 검색 방식을 썼지만, 만약 “반경 몇 km” 라든지 “서울의 명동”과 같은 조금 더 정교한 지역 검색이 필요한 경우라면 지도 데이터(geo data)를 직접 액세스하여 구현할 수도 있습니다. 이미 우리가 ACF 필드를 통해 장소정보를 저장했을 때 위도와 경도값도 필드 속에 저장되어 있기 때문에 이 값을 활용하면 되며, Wp-geo-posts 같은 플러그인을 함께 사용하면 조금 더 쉽게 만들 수 있을 것입니다.

또한 여기서는 모임 목록 페이지에 대해 별도의 템플릿 파일을 만들지는 않았지만 통상적으로라면 ‘모임(moim)’이라는 커스텀 포스트 타입에 대해 별도의 템플릿을 가져 가는 것이 좋을 것입니다. 이럴 경우 워드프레스의 템플릿 계층구조에 맞춰 archive-moim.php 라는 템플릿 파일을 하나 만든 다음, 모임 목록에 대한 처리는 이 템플릿에서 담당하도록 하면 편리할 것입니다.

이 글에서 사용한 테마 파일의 소스코드는 GitHub에서 확인할 수 있습니다. 🙂


* 이 연재에서 사용한 전체 소스코드는 여기에서 내려 받을 수 있습니다.

“[워드프레스로 모임서비스 만들기] 5. 지도와 지역별 메뉴”에 대한 0개의 생각