gazette-featured-content-thumbnail

[워드프레스로 모임서비스 만들기] 2. 새 모임 개설하기

지난 시간에는 워드프레스의 커스텀 포스트 유형(Custom Post Type) 기능을 이용하여 새로 ‘모임’이라는 유형을 만들고 모임 목록을 메인 화면에 표시하는 부분을 다루었습니다. 이번에는 지난 글의 마무리 부분에서 얘기한 대로 사용자가 새로 모임을 만들 수 있는 기능을 추가해 보기로 하겠습니다.

만들 내용

사용자가 ‘새 모임 만들기’를 클릭하면 아래 그림과 같은 모임을 입력할 수 있는 폼이 뜹니다. 이 때 사용자가 모임에 관한 정보를 입력한 후 ‘만들기’ 버튼을 누르면 새 모임이 생성됩니다.

그림1. 새 모임 만들기

준비물

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

사용자 입력 폼 만들기

웹에서 사용자 입력 폼은 HTML의 폼(form) 입력 태그를 사용하면 간단하게 만들 수 있으며 워드프레스라고 해서 다를 건 없습니다. 그렇지만 이렇게 직접 일일이 폼을 구성할 경우 폼 검증(validation)이나 폼 저장 처리 등에 있어 번거로운 부분들이 많기 때문에 여기서는 폼을 직접 구성하는 대신 Advanced Custom Fields(이하 ‘ACF’) 라는 플러그인을 사용하여 처리할 예정입니다.

ACF를 설치했다면 어드민 대시보드에서 Custom Fields 메뉴를 선택한 다음 ‘Add New’하여 새 필드 그룹을 다음과 같이 생성합니다. 여기서는 모임명/ 모임설명/ 대표 이미지 필드를 각각 생성하고 필드 타입을 각각 Text/ Text Area/ Image로 주었습니다. 그리고 Location 영역에서는 Rules를 “Post Status is equal to Trash”로 지정하였습니다. 원래 ACF 플러그인은 제목 그대로 포스트에 커스텀 필드를 추가할 때 사용하는 플러그인이며, 여기서는 약간 편법적인 방법으로 ACF를 사용하는 것이기에 이렇게 별 의미 없는 곳에 맵핑(mapping) 처리해 둔 것입니다(넹?).

그림2. ACF 새 모임 필드 그룹

새 모임 폼 표시하기

ACF 필드 그룹을 만들었다면 이제 방금 전 만든 필드들을 화면에 폼 형식으로 표시하면 됩니다. ACF 플러그인에서는 acf_form() 함수를 제공하여 사용자가 정의한 필드들을 프론트엔드 화면에 바로 표시할 수 있는 기능을 제공하기 때문에 이 함수를 사용하려 합니다.

커스텀 페이지 템플릿 만들기

그러기 위해선 어딘가에 acf_form() 함수를 둘 곳을 만들어야 합니다. 여기서는 워드프레스의 Page Template 기능을 사용하여 커스템 페이지 템플릿을 하나 만든 다음, 이 템플릿을 임의의 페이지와 맵핑시키는 방법을 사용하려고 합니다. 아쉽게도 약간의 코딩이 필요합니다.

우선 테마 파일이 설치된 디렉터리로 가서 템플릿 파일을 하나 만듭니다. 여기서는 new-moim.php 라는 이름으로 만들었습니다만 이름은 아무렇게나 주어도 상관 없습니다. 그런 다음 아래와 같이 템플릿을 작성합니다.

<?php
/**
 * Template Name: 새 모임
 */
acf_form_head();
get_header(); ?>

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                <header class="entry-header">
                    <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
                </header>

                <div class="entry-content">

                    <?php
                    $options = array(
                        'post_id' => 'new',
                        'field_groups' => array(47), // CHANGE THIS!!
                        'submit_value' => '만들기',
                    );
                    acf_form( $options );
                    ?>

                </div>
            </article>
        </main>
    </div>

<?php get_footer(); ?>

지난 시간에 이어 이번에도 워드프레스 4.3의 기본 테마인 Twenty Fifteen 테마를 사용하였기 때문에 템플릿 파일의 구조도 Twenty Fifteen 테마를 따릅니다. 만약 여러분은 다른 테마를 사용한다면 사용하시는 테마 파일의 구조에 맞춰 HTML 코드들을 변경하면 됩니다.

폼 처리와 관련하여 중요한 부분은 템플릿 파일의 상단에 있는 acf_form_head() 함수와 앞서 소개한 acf_form() 함수 부분입니다. 특히 acf_form() 함수의 $options 중 ‘field_groups’ 부분에서는 여러분이 방금 생성한 ACF 필드의 그룹 ID 값을 입력해줘야 합니다. 필드 그룹 ID값은 브라우저 URL 창에서 확인할 수 있습니다.

그림3. ACF 필드그룹ID 확인

새 모임 페이지 만들기

이제 새 모임을 입력할 페이지를 만들 차례 입니다. 어드민 대시보드에서 새 페이지를 하나 생성합니다. ‘페이지 속성’ 탭에서 ‘템플릿’을 방금 전 만든 ‘새 모임’ 템플릿으로 지정한 다음 페이지를 저장하면 이제 이 페이지에서 앞서 보인 것과 같은 새 모임 입력 폼이 보이는 것을 볼 수 있습니다.

그림4. 페이지 템플릿 지정

새 모임 저장하기

그렇지만 아직 완성은 아닙니다. 지금까지는 어디까지나 입력 폼을 화면에 표시하는 부분만 만들었지 폼값을 입력 받아 워드프레스에 저장하는 부분은 아직 구현하지 않았기 때문입니다. 이제 마지막으로 입력값을 저장하는 기능을 추가해 보기로 하겠습니다. 여기서도 약간의 코딩이 들어 갑니다.

앞서 만든 템플릿 파일(new-moim.php) 을 열어 acf_form_head()가 있는 자리 윗 부분에 다음과 같이 약간(?)의 코드를 추가하면 됩니다. 코드의 내용은 폼으로부터 입력받은 값을 워드프레스에 맞는 형식으로 변환시킨 다음 워드프레스에 저장하는 것이며, 자세한 설명은 생략합니다(궁금하신 분은 메일이나 댓글로 문의 주세요!).

add_filter('acf/pre_save_post' , 'my_pre_save_post' );
function my_pre_save_post( $post_id ) {
    // bail early if not a new post
    if( $post_id !== 'new' ) {
        return $post_id;
    }

    // vars
    $title = $_POST['fields']['field_5625a4d812692']; // CHANGE THIS!!
    $content = $_POST['fields']['field_5625a50812693']; // CHANGE THIS!!

    // Create a new post
    $post = array(
        'post_status'   => 'publish', #'draft'
        'post_type'     => 'moim',
        'post_title'    => wp_strip_all_tags($title),
        'post_content'  => $content,
    );  

    // insert the post
    $post_id = wp_insert_post( $post );

    // change return url to the post
    // $_POST['return'] = add_query_arg(array('post_id' => $post_id), $_POST['return']);
    $return_url = get_permalink($post_id);
    if ( $return_url ) {
        $_POST['return'] = add_query_arg( 'updated', 'true', $return_url );
    }

    // return the new ID
    return $post_id;
}

여기서 특히 유의할 부분은 필드 값을 받는 부분입니다. $_POST['fields']['field_5625a4d812692'] 라고 되어 있는 이 부분 역시 사용자 환경에 맞춰 변경해 줘야 하는 부분으로 어드민 대시보드의 Custom Fields 메뉴에서 해당 필드 그룹을 열고 우측 상단 화면표시 옵션에서 ‘Show Field Key’ 를 Yes로 하면 확인할 수 있으며, 이 값을 가져다 코드에 넣어 주면 됩니다(이 값이 맞지 않으면 제대로 저장이 되지 않습니다).

그림5. ACF 필드 키 확인

새 모임 만들어보기

이제 새 모임 만들기 화면에서 모임 정보를 입력하고 저장하면 새 모임이 다음과 같이 모임 목록에 추가되는 것을 확인할 수 있습니다.

그림6. 새 모임 목록

좀 더 쉬운 방법들

여기까지 따라 읽은 분들 중에는 왜 이렇게 복잡한 방법을 쓰는지 의아해 하시는 분들이 있을 것입니다. 맞습니다! 더 편리한 방법으로 워드프레스에 사용자 입력 폼을 추가할 수 있는 플러그인들이 많이 있습니다. 그 중 대표적인 것이 WP User Frontend 플러그인으로, 이 플러그인을 사용하면 간단하게 드래그&드롭 방식으로 폼을 작성한 다음 페이지에 바로 붙여 넣어 금방 뚝딱하고 사용자 입력폼을 만들 수 있습니다.

그림7. WP User Frontend

또한 Gravity Forms 같은 폼 빌더(form builder) 플러그인들도 워드프레스 사이트에 쉽게 입력폼을 추가할 수 있는 방법을 제공하니, “더 간단한 솔루션”을 찾으시는 분들이라면 한번 사용해 보시면 좋겠습니다.

오늘은 여기까지 입니다.

이번 글에서 사용한 코드는 Github에서 확인하거나 내려받으실 수 있으며, ACF 플러그인 관련 더 자세한 내용은 ACF 공식 문서를 참조하면 됩니다.

다음 번에는 사용자 로그인을 처리하고, 사용자가 로그인을 한 다음 모임을 만들 수 있도록 하는 기능을 다뤄 보도록 하겠습니다. 🙂


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

“[워드프레스로 모임서비스 만들기] 2. 새 모임 개설하기”에 대한 2개의 생각

  • songjungho

    안녕하세요, 연재 잘 보고 있습니다. “새 모임 저장하기”에서 궁금한 점이 있는데요, 혹시 업로드한 이미지를 모임 post 에도 보여주려면 어떻게 하나요?
    혹시나 해서 $content = $_POST[‘fields’][‘field_5625a50812693’] 여기에 image 필드의 키를 넣어봤는데 사진의 id 만 나올 뿐 주소같은 건 나오지 않네요ㅠ

    • Dave Kim

      안녕하세요! ACF의 image 필드 설정에서 Return 값을 Image URL로 셋팅하면 id 값이 아닌 url 값이 반환됩니다. 또한 그냥 id값을 사용하더라도, get_field() 함수나 워드프레스 API의 wp_get_attachment_image() 함수 같은 것을 사용하면 쉽게 url을 추출할 수 있을 것입니다. 감사합니다. 🙂