brunch

매거진 IMPREZA 테마 활용

라이킷 13 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Oct 18. 2023

워드프레스 & 게시판. #3

IMPREZA 테마로 워드프레스 웹사이트 만들기

리스트만 게시판 모양이 아니라 방문자나 회원이 프런트앤드에서 글을 작성할 수 있는 방법은 없나?

흔히 말하는 게시판, 말 그대로 방문자나 회원도 글을 쓰고 답변도 받고 하는 게시판은 그럼 워드프레스의 기본 구조로 만들 수 없을까라는 아쉬움이 있어서 저는 이렇게 해결을 했었습니다.

이전에 사용했던 방법으로는 'caldera forms'라는 플러그인 기능을 핵심으로 프런트 앤드 글 작성용 폼과 수정용 폼을 만들고 내 글은 커스텀 쿼리를 만들어 표시했던 것이 있었습니다. 하지만 아쉽게도 2022년도부터 이 플러그인은 더 이상 업데이트를 하지 않는다고 공지가 나왔습니다. 폼과 관련된 모든 개발은 이걸 가지고 했었는데 참 당황스럽기도 하고 아쉽기도 하고...

이후 대체할 방법을 찾다가 발견한 플러그인은 이거입니다. > Frontend Post Submission Manager

이건 정말 딱 목적에 맞게 프런트 앤드에서 콘텐츠를 작성할 수 있는 폼, 그리고 내 글을 모아 볼 수 있게 해 주는 대시보드, 그리고 원하면 글을 다시 수정도 할 수 있게 해 주는 기능을 가지고 있습니다. 게시판 기능을 구현하고자 할 때 쓰는 거라면, 기존의 칼데라 폼 보다 더 쉬운 방법으로 기획을 구현할 수 있기도 했습니다.

참고로, 라이트 버전(free)도 있긴 한데 이건 단순 게스트가 작성하는 형태만 이용이 가능하고, 내가 쓴 글을 모아 보거나 작성했던 글을 다시 수정할 수 있는 과정을 구성할 수 없습니다. 아 그리고 커스텀 포스트 타입은 지원을 하지 않고 워드프레스의 기본적인 post 형태인 '글'로만 작성이 되는 한계도 있습니다.

필요한 전체 작업을 요약해 보면 아래와 같습니다.

테스트용 사이트 > https://oks-dev.tk/wpcomponent/qna/

그럼 만드는 과정을 순서대로 정리해 보겠습니다.

1. 커스텀 포스트 타입 만들기

워드프레스의 기본 타입인 글(post)은 대개 사이트에서 주요 콘텐츠를 작성하는 목적으로 사용이 되므로 구분을 위해 질문과 답변을 위한 새 글 타입을 하나 추가하는 게 편리합니다.

포스트 타입을 추가하는 방법은 코드로 작성하는 방법이 있고, 어드민에서 간편하게 추가하는 방법도 있습니다. > Custom Post Type UI, Advanced Custom Fields (ACF)

이전엔 CPT UI를 주로 사용했었는데, 이번에는 ACF 플러그인을 사용해서 추가해 봤습니다.

타입의 이름, 슬러그, 워드프레스 편집기 화면에서 어떤 것들을 이용할지 선택하는 정도만 해도 금세 타입을 만들 수 있습니다. 'CPT UI'보다 좀 더 간편하게 타입 추가가 가능했습니다.

2. 프런트 앤드 글 작성을 위한 폼 만들기

구매한 플러그인을 설치합니다.

폼을 만들기에 앞서, 폼을 이용할 방문객은 두 가지 상황이 있습니다.

1) 사이트의 회원이고 로그인한 상태로 질문 올리기

2) 게스트로 로그인 없이 질문 올리기

즉, 로그인을 했다면 해당 유저가 글의 작성자가 되는 것이고, 로그인을 하지 않았다면 미리 약속된 유저의 글로 만들어지게 하면 됩니다. (워드프레스의 콘텐츠엔 작성자(author) 정보가 필요)

위 두 상황에 맞게 폼을 표시하려면 두 가지 타입의 폼이 필요하게 됩니다.

두 폼의 큰 차이는 이렇습니다. (※새 폼을 추가할 때 타입을 선택할 수 있음)

게스트용 폼의 경우 글이 만들어질 때 특정 작성자(Author)의 글로 생성이 되도록 설정하는 게 있고, 로그인 필요 폼의 경우 로그인을 유도하는 설정과, 내 글을 모아볼 수 있는 대시보드의 설정이 있습니다.

(※ qna_guest라는 유저네임으로 사용자를 하나 추가. role은 Contributor면 충분)

폼의 필드는 로그인 전이건, 로그인 후이건 모양은 똑같이 만들었습니다. 간단하게 제목, 내용, 그리고 커스텀 필드 정보로 '비밀번호' 입력 필드를 추가했습니다. '비밀번호' 필드는 작성자가 이 글이 비밀번호를 입력해야 볼 수 있는 글로 만들고 싶을 때 적는 필드입니다. (※ 워드프레스에도 비밀번호 보호된 글 기능이 이미 있음)

3. 폼을 넣을 페이지 만들기

폼은 쇼트코드 형태로 원하는 페이지에 넣어서 표시할 수 있게 만들어집니다.

'질문 답변' 페이지는 이후 질문 글들을 목록 형태로 표시할 페이지, '질문 올리기'는 2번에서 만든 폼을 표시할 페이지, '내 질문'은 내가 작성한 글만 볼 수 있는 대시보드를 표시할 페이지입니다.

우선 [질문 올리기] 페이지 편집 시 이 페이지를 보는 유저가 로그인 상태인지, 로그아웃 상태인지에 따라 보여줄 로우를 설정합니다. (!!! Impreza가 버전업 되면서 추가된 기능)

그다음에는 만들어진 폼의 쇼트코드만 해당 로우에 표시되도록 추가하면 끝입니다. [Custom HTML] 화면 요소를 이용해서 쇼트코드를 적어줍니다.

페이지를 열어서 폼이 제대로 작동하는지 글을 하나 작성해 봅니다.

프런트 앤드 폼을 통해 작성한 것이 워드프레스의 QnA(post_qna)라는 포스트 타입의 글로 새로 작성이 된 게 확인됩니다. 편집을 열어보니 제목, 내용, 커스텀 필드의 내용까지 잘 저장된 게 확인이 되네요. 그리고 로그인을 안 한 게스트의 글은 게스트 유저의 글로 작성이 되는 것까지 확인됩니다.

'내 질문' 페이지에는 대시보드가 표시되는 쇼트코드를 넣습니다. 그러면 플러그인에서 제공하는 글 목록 및 액션 버튼이 있는 대시보드가 표시됩니다. (로그인한 사용자의 글만 보여줌)

'질문 답변' 페이지는 QnA 포스트 콘텐츠들을 불러다 목록으로 보여주는 곳입니다. 여기는 게시판 형태의 모습을 가진 그리드 레이아웃을 만들어서 불러다 표시를 하면 됩니다. 이 리스트를 표시하는 방법은 기존 게시판#1 글을 한 번 참고해 보세요.

4. 관리자가 할 일

관리자는 새 질문의 편집 화면에서 이 글을 게시하는 것을 결정하고, 댓글을 입력할 수 있습니다.

Draft 상태의 글인 경우 오른쪽 메타 박스를 보면 [Publish] 버튼이 있습니다. 클릭하면 이 글을 리스트에서 볼 수 있는 '게시'상태로 변경할 수 있습니다.

그러면 아래쪽 댓글 기능도 활성화되고, 어드민 내에서 댓글을 입력하거나 또는 글의 상세 페이지에서 댓글을 입력할 수 있게 됩니다.

5. 기타 조치들

1) 비번 보호 글 상태로 자동으로 바꾸기

워드프레스의 콘텐츠들은 비번을 입력해야 볼 수 있도록 하는 보호 기능이 있습니다. 가시성을 [Password protected]으로 선택하면 비번을 입력할 수 있게 되고, 여기 입력된 비번으로만 콘텐츠를 읽을 수 있게 바뀝니다.

앞서 2번의 질문용 폼에서 미리 만들어 둔 비번 필드에 입력된 정보는 글에 이렇게 메타 정보로 저장이 됩니다. 이 정보를 보고 관리자가 비밀번호를 입력해 주면 게시될 때 비번 보호글이 될 수도 있지만, 실수를 방지할 수 있게 자동으로 체크 후 변경이 되는 게 더 좋을 듯하네요.

워드프레스의 훅 중에는 편집기에서 아까 본 Publish나 Update 버튼이 클릭이 될 때 발생하는 연결고리가 있습니다. 바로 save_post라는 것인데, 이 연결 고리를 이용해서 원하는 동작을 추가할 수 있습니다. 다른 포스트 타입에서는 동작을 안 하도록 구체적으로 훅을 지정할 수도 있는데, 1번에서 추가한 'post_qna'라는 콘텐츠에서만 작동이 되도록 'save_post_post_qna' 훅을 이용하면 딱입니다.

질문하기 폼의 비밀번호 필드에 입력한 정보는 글의 메타 정보로 저장이 되는데, 만약 비번이라는 메타 정보에 입력된 게 있다면, 글을 비번 보호 글로 변경해라라는 동작을 추가한 겁니다.

> 글의 메타 정보를 얻을 수 있는 함수 : get_post_meta

> 글의 상태를 변경하는 함수 : wp_update_post

/**
* post_type : post_qna -> save_post 훅을 이용해서 비번이 입력돼 있다면 비번글로 만들기
*/
add_action( 'save_post_post_qna', 'oks_check_qna_post_have_password', 10, 3 );

function oks_check_qna_post_have_password( $post_id, $post, $update ) {

    $password_meta = get_post_meta( $post_id, 'post_qna_password', true );

    // unhook this function so it doesn't loop infinitely
    remove_action( 'save_post_post_qna', 'oks_check_qna_post_have_password' );
    // update the post, which calls save_post again
    wp_update_post( array(
        'ID' => $post_id,
        'post_password' => $password_meta
    ) );
    // re-hook this function
    add_action( 'save_post_post_qna', 'oks_check_qna_post_have_password' );
}

요약: 'save_post_post_qna'라는 훅이 작동 시 내가 만든 함수가 실행되도록 한다. get_post_meta로 비번 정보의 값을 얻은 다음, 이걸 가지고 비번 보호 글로도 만들었다가, 비번이 지워지면(유저가 대시보드에서 글 수정 시 비번을 지울 수도 있음), 다시 일반 게시글로도 전환하는 동작을 추가.
중간에 remove_action을 했다가 다시 add_action 했다가 하는 건 wp_update_post 동작 시 무한 로딩에 빠지는 걸 방지하는 조치라 그냥 따라 적으면 됩니다.

2) 비번 입력 후 글의 보호가 풀리는 시간 변경

글이 비번으로 보호된 경우, 입력한 비밀번호가 일치하면 브라우저의 쿠키로 저장되어 일정 기간 동안은 계속 비번 입력 없이 볼 수 있게 됩니다. 워드프레스의 기본 시간을 확인해 보니 10일이라고 하네요. 너무 길다면 이 시간을 바꿀 수 있습니다. > post_password_expires