구성 : Caldera Forms + Custom Fields (addon) + wordpress template + simple js
고객으로부터 포토리뷰, 문의글, 자유게시판 등과 같은 컨텐츠를 직접 입력하게 하여 다양한 리스트 화면을 표시하는 동시에, 마이어카운트(Myaccount)와 같은 곳에서 내 글만 모아보고, 편집도 가능하도록 하는 프로세스에 대하여 워드프레스의 기본 컨텐츠 구조를 활용하면 어떨지 한 번 방법을 찾아 보았습니다.
. . . . . .
1. 기본 폼 구성용 플러그인 설치 : caldera forms, (addon) Custom Fields
CF form은 어드민에서 폼으로 접수된 내용을 확인 할 수 있을 뿐 아니라, GUI 환경에서 폼을 마음대로 구성할 수 있고, 여기에 코딩이 추가가 되면 워드프레스의 기본 구조와 맞물려서 다양한 응용이 가능하여 자주 사용을 하는 플러그인입니다. 폼을 직접 만들 때 가장 중요한 것 중 하나가 입력되는 값의 보안 이슈인데 이 부분은 플러그인의 코어 기능에 맡기고, 응용 방법만 활용을 하면 되니 참 유용합니다. Custom Fields는 최근 유료화가 된 것 같은데, 아직은 베타 버전이지만 기존과 같이 다운로드 받아서도 쓰는데에는 큰 문제가 없어서 이번 테스트에는 무료 버전을 사용했습니다. > Github beta 버전 Custom Fields
Custom Fields 애드온의 주요 역할은 폼에서 입력 받은 데이터를 > 포스트로 저장 또는 업데이트를 할 수 있는 프로세스를 이용할 수 있게 해 주는 것입니다.
2. 포스트를 작성하는 폼 만들기
폼을 구성하고, 각 필드를 어떻게 포스트로 자동 만들어지게 하는지는 이 글에서 자세히 설명하고 있습니다. > https://calderaforms.com/doc/wordprees-front-end-post-editing-caldera-forms/
폼을 하나하나 구성해서 만드는 것이 어렵다면, 임포트 기능을 통해 미리 만들어진 전체 폼 구조(포스트 작성 프로세스까지 포함)를 파일로 가져오기를 해도 됩니다. (위 글 내용 중 링크 제공)
3. 폼이 작성완료(submit) 될 때, 포스트가 작성되도록 프로세스 만들기
포스트로 작성 될 때의 내용들(폼 필드로부터 입력된 내용들)은 위와같이 각각 연결을 시켜주면 됩니다. 여기서 중요한 부분은 Post ID의 경우 공란이면 새로운 아이디의 새 글이 작성이 되고, CF의 매직 테그에 의해 현재 글의 ID와 연결이 되면 현재 글의 내용들이 폼에 자동으로 채워지는 에디터로서의 역할까지 이용이 가능하게 됩니다.
저같은 경우는 그래서 폼을 2개를 만들어서 하나는 공란으로 포스트를 새로 작성하는 용도의 폼을 만들고, 하나는 수정을 위한 현재 포스트의 ID가 연결이 되는 에디터로서의 폼을 만들어서 이용했습니다.
(※ 기본 워드프레스의 글 대신 Custom Post Type으로 리뷰(review)를 만들어서 작성이 되는 방식으로 적용하였습니다. > custom post type은 CPT UI 와 같은 플러그인을 활용하면 좀 더 쉽게 만들 수 있습니다.)
만들어진 폼은 쇼트코드로 원하는 페이지나 기타 어느 곳에도 적용이 가능합니다. > 적용 페이지
4. 내가 작성한 글만 모아보기
숍의 경우 My-Account 페이지 내의 탭 메뉴 페이지에 표시를 할 수도 있고, 따로 독립적으로 나의 리뷰만 보는 페이지를 제공할 수도 있을 듯합니다. 일단 테스트용이라 간단하게 페이지에 모아보기를 하는 방향으로 적용해 보았습니다.
My Reviews 라는 페이지를 하나 추가합니다. > 자식테마에 page.php 파일을 복사하여 page-my-reviews.php 파일을 만들어줍니다. > 기본 루프문을 대체하거나 또는 루프가 끝나는 지점 아래에 내가 작성한 글만 모아 표시하는 커스텀 쿼리를 추가합니다.
// WP_Query arguments
$args = array(
'post_type' => array( 'review' ),
'post_status' => array( 'Publish', 'Pending' ),
'author' => $current_user->ID, // '1',
'posts_per_page' => 10,
'paged' => get_query_var( 'page' ) ? get_query_var( 'page' ) : 1,
);
// The Query
$custom_query = new WP_Query( $args );
// The Loop
if ( $custom_query->have_posts() ) {
echo '<ul>';
while ( $custom_query->have_posts() ) {
$custom_query->the_post();
// do something
echo '<li>';
if ( 'publish' == $post->post_status ) {
the_title( sprintf( '<h4 class="alpha entry-title"><a href="%s" rel="bookmark" target="_blank">', esc_url( get_permalink() ) ), '</a></h4>' );
} else {
the_title('<h4>','</h4>');
}
echo '</li>';
}
echo '</ul>'; ?>
<div class="review-pagination">
<?php
echo paginate_links( array(
'base' => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
'total' => $custom_query->max_num_pages,
'current' => max( 1, get_query_var( 'paged' ) ),
'format' => '?paged=%#%',
'show_all' => false,
'type' => 'plain',
'end_size' => 2,
'mid_size' => 1,
'prev_next' => false, // true : 이전 이후 양쪽 버튼 X
// 'prev_text' => sprintf( '<i></i> %1$s', __( 'Newer Posts', 'text-domain' ) ),
// 'next_text' => sprintf( '%1$s <i></i>', __( 'Older Posts', 'text-domain' ) ),
'add_args' => false,
'add_fragment' => '',
) );
?>
</div>
<?php
} else {
// no posts found
_e( 'no review', 'textdomain' );
}
// Restore original Post Data
wp_reset_postdata();
5. 작성했던 글을 수정하기
워드프레스에 에디터로 작성된 본문을 표시하는 템플릿 태그가 존재합니다. > the_content
리뷰 글이 표시가 되고, 유저가 로그인 상태이며, 이 유저가 글의 작성자와 일치하는 경우, 그리고 리뷰 포스트를 수정하기 위한 쿼리 변수가 url에 존재하는 경우?! 기본 글 내용 대신 만들어 두었던 편집용 폼이 표시되도록 조치를 합니다. ( ※ 싱글 페이지 주소 ~~~~/?review_edit=yes )
add_filter( 'the_content', 'show_cf_form_for_author' );
function show_cf_form_for_author( $content ) {
if( is_singular( 'review' ) && is_user_logged_in() && get_the_author_meta( 'ID' ) === get_current_user_id() ){
if (get_query_var('review_edit') == 'yes') {
//change to your form ID you would like to display.
$content = Caldera_Forms::render_form( 'CF5e0df7f46ff05' );
}
}
return $content;
}
/?review_edit=yes 와 같은 쿼리변수는 기본적으로는 없는 것이라 아래와 같은 방법으로 등록하면 사용이 가능합니다.
function add_query_vars_filter( $vars ){
$vars[] = "review_edit";
return $vars;
}
add_filter( 'query_vars', 'add_query_vars_filter' );
4번에서 글을 모아보기 할 때, 글 링크 리스트 옆에 추가로 쿼리변수를 가진 url을 버튼 형태로 두어서 편집 화면으로 갈 수 있도록 하면 될 듯합니다.
#. 부가 조치 (리뷰의 기존 taxonomy가 자동 적용이 되지 않는 문제)
CF custom fields 애드온에서 차후 업데이트가 될 것 같은 문제이긴 한데, 현재의 베타 버전은 기존 글의 제목, 본문은 잘 불러와서 연결이 되는데 분류 체계(카테고리, 태그 등)은 그대로 자동 선택이 되지 않는 문제가 있습니다. 이를 위해서 에디트 화면 주소일 때에는 기존 글의 분류를 체크해서 jQuery를 이용해서 폼의 input 필드에 채워넣는 방식으로 보완을 했습니다.
1) 싱글 글이고 리뷰를 수정하는 주소일 때 (조건은 더 강화 가능) js 파일을 페이지에 추가하고, 현재 글의 분류체계를 js 파일에 변수로 전달
/**
* Enqueue scripts of child theme
*/
function custom_enqueue_script() {
// for review front edit
wp_register_script( 'review-edit-js', get_stylesheet_directory_uri() . '/js/review-edit.js', array('jquery'), '1', true);
if( is_singular( 'review' ) && get_query_var('review_edit') == 'yes' ){
global $post;
$current_user = wp_get_current_user();
if ( $post->post_author == $current_user->ID ) {
wp_enqueue_script( 'review-edit-js' );
// Returns All Term Items for "my_taxonomy"
$cat_list = wp_get_post_terms($post->ID, 'review_category', array("fields" => "all"));
$current_review_cat = $cat_list[0]->name;
$tag_list = wp_get_post_terms($post->ID, 'review_tag', array("fields" => "all"));
$current_review_tag = $tag_list[0]->name;
wp_localize_script(
'review-edit-js',
'data_for_review_edit',
array( 'current_review_cat' => $current_review_cat,
'current_review_tag' => $current_review_tag,
)
);
}
}
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_script' );
2) jQuery로 페이지 로드 후 분류 항목 필드에 자동으로 내용 채워 넣기
jQuery(document).ready(function( $ ) {
var input_cat_selector = '#fld_3693322_3-wrap input[value='+data_for_review_edit["current_review_cat"]+']';
$(input_cat_selector).attr("checked", "checked");
var input_tag_selector = '#fld_223457_3';
$(input_tag_selector).val(data_for_review_edit["current_review_tag"]);
});
결론은, 워드프레스 기본 포스트 타입으로도 글 작성 및 수정이 가능한 폼 적용이 가능하며, 이렇게 쌓인 컨텐츠는 워드프레스 기본 루프나 페이지 빌더의 그리드 요소에 의해 다양한 방식으로 화면에 표시가 될 수도 있으며, 내 글만 모아보기 또한 가능합니다. 짧은 글에 모든 정보들을 다 설명하긴 어려운 부분이 있으니 진행 방식을 한 번 참고해 보는 방향으로 이용해 보시기 바랍니다.
끝.