Word Cracker의 잡다한 정보 모음

bbpress 포럼을 게시판 형태로 수정하기(워드프레스)

25 360

우리나라에서는 게시판이 널리 사용되고 있고 사람들에게 친숙한 편입니다. 하지만 워드프레스를 설치하고 적절한 게시판을 찾으려면 쉽지 않습니다. 외국에서는 토론 중심의 시스템(포럼)이 발전한 반면 국내에서는 정보 나열식의 게시판이 인기를 끌고 있습니다. 한국의 실정에 맞는 게시판이 절실했는데, 최근 들어 국내에서 만든 KBoard(케이보드보드)가 인기를 끌고 있습니다. KBoard를 설치해보니 나름대로 깔끔한 디자인에 사용하기에 무난한 것 같습니다(하지만 케이보드에서 게시글이 구글에 잘 검색이 되지 않거나 늦게 검색되는 현상이 나타나네요. 아마 SEO 최적화가 부족하지 않나 생각됩니다).

개인적으로는 제 나름대로 수정하기 용이한 게시판 플러그인을 찾고 있었는데, bbpress를 사용해보니 의외로 수정이 쉽고 레이아웃도 원하는대로 변경이 가능한 것을 보고 제 자신도 놀랬습니다. 특히 전세계적으로 사용되고 있어 자료를 찾기가 매우 쉽다는 것도 매력적인 것 같습니다. (가령 어떤 함수를 찾고 싶다고 하면 인터넷 검색으로 쉽게 찾을 수 있습니다.)

bbpress를 설치하고 나름대로 수정하길 하루 정도만에 완성한 것이 현재 이 사이트에 설치된 게시판입니다. 최근 게시글 목록도 쉽게 위젯으로 표시가 가능하네요… 그리고 플러그인에서 bbpress를 입력해보면 다양한 플러그인이 검색되고 더구나 유료 플러그인 판매 사이트에서도 bbpress 플러그인 조금 검색이 되네요. 추후에 필요한 기능이 있다면 유용할 것 같습니다. (추가 기능이 필요 없고 단순한 게시판을 원하시는 분은 KBoard로도 괜찮을 것 같습니다. 하지만 SEO 측면이나 범용성, buddyPress와의 연동 등을 고려할 때 bbPress가 훨씬 매력적이라 생각됩니다.)

* 추가: 테마 변경으로 인해 현재 이 사이트에서는 bbPress가 제대로 작동하지 않네요. 추후에 호환성 문제가 해결되면 데모 게시판 링크를 올리도록 하겠습니다.

  • * 데모 (현재 테마와의 충돌 때문인지 이 사이트에서는 일부 기능이 제대로 작동하지 않지만 대략적인 레이아웃을 살펴볼 수 있습니다.테마 변경 후에 일부 기능이 잘 작동하지 않다가 워드프레스 업데이트 후에 잘 작동하네요. 데모 게시판은 자료실에서 다운로드할 수 있는 것과 거의 동일합니다.)

Introduction

이 글에서는 bbpress를 개인의 취향에 맞게 수정하는 방법을 간략히 소개하겠습니다. 이 글은 프로그램에 대한 기본 지식과 CSS에 대한 약간의 지식이 있으면 충분히 이해하고 따라 하실 수 있을 것입니다. 저 같은 비전문가도 몇 시간 만지다 보니 그럴듯한(?) 게시판이 완성되었습니다. 워드프레스를 처음 접하시는 분들은 이 글을 통해 플러그인이나 테마를 수정하는 방법에 대해 어느 정도 방향을 잡을 수 있으리라 생각됩니다.

(추가: 이 글에 설명된 bbPress 템플릿을 여기에서 다운로드할 수 있습니다.)

워드프레스 bbPress 포럼을 한국식 게시판 형태로 바꾸기

제가 선택한 방법은 http://sexylife.co.kr/ 사이트의 글에서 아이디어를 얻었습니다. 이 페이지의 글의 내용은 2012년도에 작성되었기 때문에 최신 버전의 비비프레스에서는 잘 작동하지 않는 것 같습니다. (워드프레스 테마 파일(PHP)을 수정할 때 한글이 깨지는 경우 먼저 PHP 파일의 인코딩을 UTF-8로 변환해보시기 바랍니다.) 하지만 중요한 것은 그 방법을 제대로 파악하면 환경이 다른 것은 큰 문제가 되지 않는다는 것이죠…

기본적으로 비비프레스는 다른 플러그인과 워드프레스의 많은 테마와 마찬가지로 div 태그를 사용하여 공간 분할을 하고 있습니다. 하지만 위 링크의 글에서는 게시판에 적합하게 table 태그로 바꾸는 방법을 채택하고 있습니다. 이것을 염두에 두고 하나씩 살펴보도록 하겠습니다.

참고: 현재 이 페이지에서 공개되고 있는 템플릿은 테이블 형식으로 구현되어 있습니다. 시간이 될 때 포트폴리오 형식 등 다양한 레이아웃의 템플릿을 만들어 공개해볼 예정입니다. (하지만 항상 문제는 시간 같네요^^)

1. bbPress 테마 만들기

물론 bbpress 플러그인 WordPress에 설치되어 있어야 합니다. 이 플러그인이 설치되어 있다는 가정하에 설명합니다. bbpress를 적절히 설정하시고 포럼을 만든 후에 테스트로 글도 몇 개 작성해놓으시기 바랍니다. 작업하는 중간 중간에 레이아웃이 어떻게 표시되는지를 확인해야 합니다. 또 bbpress 쇼트코드(단축코드, 숏코드)를 활용하여 페이지에 붙여넣기 하셔서 게시판 페이지를 별도로 만드는 것도 좋은 방법입니다.

먼저 bbpress 테마를 만들도록 합니다. bbpress > templates > default 폴더 아래에 있는 bbpress 폴더를 현재 테마의 폴더로 옮깁니다. (테마도 자식 테마를 사용하면 편리합니다.) 그리고 bbpress > templates > default > css 폴더 내의 bbpress.css 파일을 테마 폴더 아래에 css 폴더를 만들고 복사합니다.

bbpress-theme2

 

이제부터 본격적으로 bbPress 포럼을 수정할 준비가 되었습니다. 게시판 수정 작업은 방금 복사한 bbpress 자식 테마 폴더의 템플릿을 사용하여 하면 됩니다. 이렇게 하면 bbpress 플러그인이 업데이트되더라도 아무런 영향을 받지 않습니다.

2. 파일 이해하기

1) css 파일

css 폴더의 css 파일은 잘 알고 계시듯이 bbpress 게시판의 레이아웃을 조정하는데 사용됩니다. 템플릿 파일을 수정한 후에 CSS를 통해 레이아웃을 조정하는 일이 더 어려운 작업이 될 것입니다. CSS에 대해 잘 모르신다면 우선 책이나 인터넷을 통해 기본적인 사항을 익히시기 바랍니다. CSS에 대한 기본적인 문법을 익히시고 어떻게 응용되는지만 아시면 됩니다. 일일이 코드를 외우실 필요는 없습니다. (CSS를 사용하거나 공부할 때 w3schools.com을 많이 이용하게 되실 것입니다. 이 사이트와 친해지시면 좋겠죠.)

2) 템플릿 파일

다음으로 템플릿 파일을 살펴볼까요? 와… 파일이 50개가 넘네요. 많은 분들이 파일 개수만 보고 놀래실 것 같아요. 하지만 파일 이름을 자세히 살펴보시면 대충 어떤 역할을 하는지 짐작하실 수 있습니다. 가령 form-reply.php는 reply 양식을 처리하는 파일이고, loop-single-topic.php는 단일 topic의 반복(루프)되는 부분을 처리하는 php라고 이해하시면 되겠습니다.

주로 loop-topics.php와 loop-single-topic.php를 주로 편집하고 경우에 따라 일부 폼 양식 파일을 수정할 것입니다. 여기서 한 가지 이해하고 넘어가야 할 것이 있는데요. forum, topic, reply, post라는 용어가 bbpress에서 사용되고 있습니다. 대강 설명하자면
Forum은 우리가 생각하는 게시판의 개념으로 생각하시면 됩니다.

  •  Topic은 포럼 내에 생성되는 토론 주제를 의미하는데, 우리식으로 생각하면 게시판의 질문이나 올리는 글이 여기에 해당합니다.
  •  Reply는 토픽에 달리는 댓글(답글)입니다.
  • Post는 topic에 포함된 질문과 댓글을 포괄해서 지칭하고 있네요. 그래서 기본적인 bbpress에서 Posts 숫자가 질문과 함께 카운트되고 있음을 알 수 있습니다. 즉, 포럼에 어떤 주제에 대한 질문이나 글을 올리면 Post 개수가 1이 되는 것입니다. (우리나라 게시판에는 답변 수를 중요하게 생각해서 보통 게시판에 보면 답변 개수가 카운트되어 있는 것과는 약간 다릅니다.) 여기에서 이 문제를 언급하는 이유는 나중에 게시판을 수정한 후에 답변 수가 1이 많아지는 문제가 발생하기 때문입니다. 이 문제는 해당 함수를 찾아서 1을 빼줘야 합니다.
  •  또 Refreshness라는 항목이 기본 게시판에 표시되는데, 이 단어는 최종업데이트 정도로 번역되고 있습니다. 여기에서 또 우리나라 게시판과는 다른 면을 볼 수 있습니다. 즉, 포럼에서 가장 최근에 답변이 달린 항목(토픽)을 맨 위에 표시되게 하여 토론 참여를 유도하는 역할을 하는 것 같습니다. (우리나라의 경우 시간 순으로 나열되어 아무리 답변이 많이 오가도 시간이 지나면 뒤로 밀려 관심 밖으로 밀려나는 것과는 좀 차이가 있죠.)

3. bbPress 게시판 수정하기

몇 가지 고려사항

약간 서두가 길어진 것 같네요. 또 한 가지 더 생각해볼 문제가 있습니다. 어떤 식으로 수정하는가입니다. bbpress를 설치하여 포럼을 만들고 토픽을 만들면 다음과 같이 표시됩니다.

bbpress 기본 화면

참 당황스러운 레이아웃이죠. 먼저 최종 수정 레이아웃을 대강 그려보도록 합니다. 그런 다음 하나씩 수정해나가는 방향으로 진행하는 것이 순서인 것 같습니다. 위의 그림에서 참여라는 것은 Voices의 번역으로 참여한 인원수를 의미하고 있습니다. 가령 글(Posts)은 2개인데 Voices는 1이라는 것은 한 사람이 두 개의 글을 작성했다는 것입니다. 게시글이라고 되는 부분은 아마 우리나라 게시판식으로 하면 “제목” 정도가 되겠고, “글” 아래 숫자가 있는 것은 위에서 잠시 언급했지만 질문과 답변을 합한 숫자입니다. 저는 이것을 활용하여 답변수로 수정했습니다.

또, 첫 번째 항목을 살펴보시면 제목 아래에 작성자가 함께 표시되어 있습니다. 이 형식도 나름대로 괜찮은 것 같지만, 저는 제목과 작성자를 분리하여 별도의 항목으로 처리했습니다. 그리고 “최근 게시글” 아래에 가장 최근에 답변을 단 사용자가 표시되는 것도 삭제했습니다.

먼저 삭제할 항목을 선택하고, 추가할 항목을 생각하도록 하십시오. 저는 다음과 같이 계획했습니다:

 ID(혹은 No) | 제목 (답변 개수) | 작성자 | 최종 업데이트 | 글 카운트(사용자 지정)

ID는 topic ID로서 각 topic에 대해 부여되는 고유번호입니다. 쉽게 인터넷을 검색하여 php 코드를 확인할 수 있습니다.

앞에서 언급했듯이 수정할 템플릿 파일은 크게 2개이고, 그것 못지 않게 중요한 것이 CSS로 레이아웃을 수정하는 것입니다. 가령 위의 그림을 보면 우리나라 게시판과는 달리 맨 아래에 토픽을 작성할 수 있는 양식이 나와있습니다. 이것은 CSS를 통해 쉽게 제거가 가능합니다.

설명하다 보니까 너무 길어지네요. 이제 본격적으로 파일을 수정하는 작업을 생각해보겠습니다.

1) loop-topics.php 파일 수정하기

너무 글이 길어진 관계로 최종 수정 파일만 여기에 복사하겠습니다. (업데이트: 소스 파일을 여기에서 다운로드가 가능합니다.)

<?php do_action( 'bbp_template_before_topics_loop' ); ?>

<!-- Modifed by WordCracker (https://www.thewordcracker.com/ ) -->

<!-- 추가됨 --> <!--Added Create a topic icon --><div class="mycustom_bbpress_search"><form role="search" method="get" id="bbp-searchform" action=""> <label for="ts"></label> <input type="text" name="ts" id="ts" value="<?php echo ( isset( $_REQUEST['ts'] ) ) ? $_REQUEST['ts'] : ''; ?>" /> <input type="submit" id="searchsubmit" value="Search" /> </form></div><!-- Added -->

<!-- 메인 테이블 시작 -->  <table width='100%' cellspacing='1' cellpadding='5'>     <thead>         <tr>             <!-- 첫 번째 라인 ID -->             <th width="40" text-align:center;"  class="hide_on_mobile_version"><?php echo "ID"; ?></th>         <!-- 두 번째 라인 제목 -->    <th style="text-align:center;"><?php _e( 'Topic', 'bbpress' ); ?></th>

<!-- <li class="bbp-topic-voice-count"><?php _e( 'Voices', 'bbpress' ); ?></li> -->    <!--- 세 번째 라인 작성자 -->     <th width="80" style="text-align:center;"><?php _e( 'Author', 'bbpress' ); ?></th>        <!--- 네 번째 라인 최종 업데이트 -->      <th width="120" style="text-align:center;" class="hide_on_mobile_version"><?php _e( 'Freshness', 'bbpress' ); ?></th>       <!-- 다섯 번째 라인 - 사용자 지정 항목 -->     <th width="40" border-right:1px solid #eee;text-align:center;" class="hide_on_mobile_version">Custom_Field</th>
</tr>
</thead>
<tbody>

<?php while ( bbp_topics() ) : bbp_the_topic(); ?>

<?php bbp_get_template_part( 'loop', 'single-topic' ); ?>

<?php endwhile; ?>

</tbody> </table> <!-- #bbp-forum-<?php bbp_forum_id(); ?> -->

<?php do_action( 'bbp_template_after_topics_loop' ); ?>

코드를 대충 살펴보시면 어떻게 구성되어 있는지 이해하실 수 있을 것입니다.

2) loop-single-topic.php 파일

이 파일은 http://sexylife.co.kr/ 사이트에 있는 소스와 거의 동일합니다.

<tr>
<!-- 첫 번째 라인 토픽 ID -->
<td class="hide_on_mobile_version"><?php echo bbp_get_topic_id(); ?></td>

<!--- 두 번째 라인 제목 -->
<td style="text-align:left;">
<?php do_action( 'bbp_theme_before_topic_title' ); ?>

<a class="bbp-topic-permalink" href="<?php bbp_topic_permalink(); ?>"><?php bbp_topic_title(); ?></a><!--추가됨 --><span class="mycustom_topic_replies"><?php echo "  ("; ?><?php bbp_show_lead_topic() ? bbp_topic_reply_count() : bbp_topic_post_count(); ?><?php echo ")"; ?></span><!-- 추가됨 끝 -->

<?php do_action( 'bbp_theme_after_topic_title' ); ?>

<?php bbp_topic_pagination(); ?>
</td>
<!-- <li class="bbp-topic-voice-count"><?php bbp_topic_voice_count(); ?></li> -->
<!--- 세 번째 라인 작성자 -->
<td style="text-align:center;">
<?php printf( __( '%1$s', 'bbpress' ), bbp_get_topic_author_link( array( 'size' => '14' ) ) ); ?>
</td>

<!-- 네 번째 라인 -- 최종 업데이트 -->
<td  class="hide_on_mobile_version" style="text-align:center;">
<?php do_action( 'bbp_theme_before_topic_freshness_link' ); ?>

<?php bbp_topic_freshness_link(); ?>

<?php do_action( 'bbp_theme_after_topic_freshness_link' ); ?>

</td>

<!-- 다섯 번째 -- 사용자 지정 항목--->
<td  class="hide_on_mobile_version" style="text-align:center;">
<!-- 사용자 지정 코드 -->
</td>

<!--- -->
<?php if ( bbp_is_user_home() ) : ?>

<?php if ( bbp_is_favorites() ) : ?>

<td>
<?php do_action( 'bbp_theme_before_topic_favorites_action' ); ?>

<?php bbp_topic_favorite_link( array( 'before' => '', 'favorite' => '+', 'favorited' => '&times;' ) ); ?>

<?php do_action( 'bbp_theme_after_topic_favorites_action' ); ?>

</td>

<?php elseif ( bbp_is_subscriptions() ) : ?>

<td>
<?php do_action( 'bbp_theme_before_topic_subscription_action' ); ?>

<?php bbp_topic_subscription_link( array( 'before' => '', 'subscribe' => '+', 'unsubscribe' => '&times;' ) ); ?>

<?php do_action( 'bbp_theme_after_topic_subscription_action' ); ?>

</td>

<?php endif; ?>

<?php endif; ?>

</tr>
<!-- #bbp-topic-<?php bbp_topic_id(); ?> -->

 

추가 고려사항

위의 두 파일을 수정하여 올려보면 대강 테이블 모양으로 나올 것입니다. 하지만 배경색이나 테두리선 등이 제대로 표현되지 않을 것입니다.

1) 테두리선 문제

테두리 선이 잘 바뀌지 않는 문제는 bbpress.css 파일 내에 이미 정의된 border 속성 때문입니다. 일일이 찾아서 문제가 되는 부분의 테두리 속성을 주석 처리하시면 됩니다. 주석 처리하는 방법은 잘 아시겠지만 /* …. */ 구문을 사용하면 됩니다. 그런 다음 CSS를 통해 각 요소의 속성을 지정하는 방식으로 테두리선과 배경을 변경해나가야 합니다.

2) 버튼 등의 요소

이 부분은 별도로 설명하지 않아도 잘 아실 내용이니까 생략하겠습니다. 버튼 요소를 추가할 때 가끔 form과 관련된 php 파일을 수정해야 할 수도 있습니다.

3) 개별 포럼 페이지 아래에 있는 글쓰기 양식 숨기기

bbPress 포럼 첫 페이지 아래 글쓰기 양식
위의 그림에 표시된 부분을 숨기는 방법은 소스를 찾아서 주석처리하거나 CSS를 통해 숨길 수 있습니다.

CSS를 통해 숨기는 방법은 구글 크롬에서 요소 검사를 하여 이 양식의 요소를 찾아서 display:none;을 적용해 주도록 합니다. 그러면 포럼의 모든 글쓰기 양식이 표시되지 않는 난감한 상황이 발생할 수 있습니다. 이를 방지하기 위해 forum을 쇼트코드를 사용하여 개별 포럼 페이지를 만들고 쇼트코드 부분을 별도의 div class로 둘러싸면 됩니다. 설명하려니 조금 어려운 것 같은데요. 가령 “게시판”이라는 제목의 페이지를 만들고 형식으로 쇼트코드를 추가하면 게시판이 연결됩니다(Forum ID를 찾는 방법도 요소 검사를 통해 가능합니다). 그런 다음 페이지 편집 화면에서 비주얼이 아닌 “텍스트”를 선택하고 <div class=”myforum_idnumber”></div>와 비슷한 형식으로 div 코드를 추가하시면 됩니다. 그러면 추가한 div class를 사용하여 포럼 리스트 페이지 아래의 글쓰기 양식을 숨길 수 있습니다.

4) 모바일 버전 고려사항

모바일 버전에서는 테이블의 컬럼(열) 때문에 제대로 표시되지 않을 수 있습니다. 이 경우 미디어 쿼리(media query)를 사용하여 일부 열을 없애거나 열 간격을 조정하는 방법을 통해 조정해야 합니다.

마무리하며

bbPress는 많은 사용자를 확보한 대표적인 포럼 플러그인입니다. 우리나라 환경에 곧바로 적용하기에는 약간 무리가 있지만, 위에서 살펴본 바와 같이 조금 수정하면 우리나라의 기존 게시판과 비슷하게 바꿀 수 있습니다. bbPress는 또한 다양한 플러그인을 지원합니다. 대표적인 것으로 비밀글 기능을 제공하는 bbPress – Private Replies와 파일을 첨부할 수 있도록 하는 GD bbPress Attachments 등이 있습니다.

참고:

 

Appendix

다음은 bbpress 테마를 만드는 방법과 간단한 커스터마이징을 보여주는 유튜브 영상입니다. 영어로 되어 있지만 영상만 보더라도 어느 정도 이해할 수 있을 것입니다.

 

위의 글과 관련하여 의문사항이 있으시면 게시판에서 질문해주시기 바랍니다.

Related Posts

Comments