자신이 운영하는 서비스가 커뮤니티에 속하고 회원들이 가입했을 때 마이페이지 화면 구성을 고려한다면 버디 프레스 Buddypress 나 Ultimate Member 같은 플러그인이 큰 도움이 됩니다.
한편 테마를 구매할 때 버디프레스가 지원되는지, 버디프레스로 구현한 UI 가 어떻게 나오는지 확인 한 다음 구매하는 것이 중요하고요.
버디프레스를 지원하지 않는 테마인 경우에, 버디프래스와 통합한 테마로 구성하려면 버디프레스의 파일을 테마 디렉토리에 복사해 놓고 디자인 UI 를 모두 구성해야 합니다.
이 작업은 사실 추천드리지 않습니다.
버디프레스의 기본 UI 는 좋은 편이 되지 못해서 그럴듯한 비쥬얼을 뽑아낼려면 작업량이 굉장히 많고, 특히 프론트 엔드의 css 와 반응형 쪽을 맞추는데 시간을 많이 투자해야 합니다.
따라서 버디프레스를 지원하는 테마 중에서 UI UX 가 잘 나온 테마를 선택하는 것이 중요한 셈이지요.
버디 프레스를 지원하는 테마
버디 프레스를 지원하는 테마의 예로 KLEO 테마를 한번 보여드리겠습니다.
KLEO 테마처럼 buddypress 를 지원하는 경우에는
버디프레스 기본 파일들이 테마 디렉토리의 하위 폴더에 들어 있습니다.
좋은 UI UX 는 시선의 동선이 많이 튀지 않고 한 방향으로 따라가는 테마를 선택하는 것이 좋은 것 같습니다.
또 추천 테마로 Besocial 을 보여드릴꼐요.
이 테마를 실제 적용해서 개발한 사이트인데, UI UX 도 좋은 편이고 버디프레스의 번역도 황c님이 해주셔서 제가 부족한 부분 조금 매워서 만들었습니다.
분명 버디프레스 기본에는 핸드폰 인증이라는 탭이 없는데 저건 어떻게 만들었을까 궁금하실 분이 있을꺼 같은데요.
이 부분은 add_action 으로 추가해주면 됩니다.
add_action 과 add_filter 가 어떻게 다른지 항상 해깔리는 부분이지만, add_action 은 시점을 이동할 떄 필요해요.
예를 들어 functions.php 에 add_action 을 타지 않고 그냥 코딩을 하면 해당 코드가 load 되지 않은 상태에서 코드가 나오면 전역변수 라던지 미리 선언된 함수 같은 것들은 없기 때문에 무의미 해지는 것이죠.
buddypress 를 구성하는 오브젝트들이 load 된 이후에 set_custom_menu_tabs 라는 항목을 호출해야 작동하겠죠.
add_action( ‘bp_setup_nav’, ‘set_custom_menu_tabs’, 15 );
bp_setup_nav 라는 hook event 가 지나간 다음에 add_action 으로 그 위치에 코드를 넣는다고 생각하시면 됩니다.
물론 bp_setup_nav 는 do_action(‘bp_setup_nav’) 라고 되어 있고, 개발자는 functions.php 에서 add_action 을 통해 코드를 inject 한다고 생각하시고 코딩하면 됩니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
if( bp_is_active( 'xprofile' ) ){ if ( bp_is_user() ) { bp_core_new_subnav_item( array( 'name' => __( 'SMS Authorization', 'besocial' ), 'slug' => 'sms-auth', 'parent_url' => $bp->loggedin_user->domain . 'profile/', 'parent_slug' => 'profile', 'screen_function' => 'sms_auth_screen_function', 'position' => 15, ) ); } } |
위 코드는 버디프레스에서 세부메뉴를 추가하는 부분이고요.
bp_core_new_subnav_item 를 사용하면 되겠죠.
처음부터 대메뉴를 추가하겠다 라면..
|
1 2 3 4 5 6 7 8 |
bp_core_new_nav_item( array( 'name' => '설문조사', 'slug' => 'survey', 'parent_url' => $bp->displayed_user->domain, 'default_subnav_slug' => 'current', 'screen_function' => 'current_survey', 'position' => 10 ) ); |
이런 식으로 가능합니다.
있던 메뉴를 날릴 수도 있고요.
|
1 2 3 |
if( !is_super_admin() && !bp_is_my_profile() ) { bp_core_remove_nav_item( 'profile' ); } |
위의 코드는 전체 관리자가 아니고 내 프로필이 아닐 때는 프로필 이라는 대메뉴 자체가 아에 사라지게 해달라 는 그런 코드입니다.
세부 항목만 날리고 싶다면.
bp_core_remove_subnav_item( ‘profile’, ‘change-cover-image’ );
커버이미지 변경이라는 메뉴 자체가 필요가 없어서 날릴려면 저렇게 하면 됩니다.
워드프레스 개발은 이해를 기반으로 하기 때문에, 구조적인 이해없이 코딩하려면 자꾸 막히고 벽에 부딪혀서 막연히 어렵게 느껴지지만, 구조적인 이해만 확실하다면 생산성은 매우 뛰어난 편입니다.
다만, 구조적인 그림에서 크게 어긋난 기획이나 UI 가 있다면, 워드프레스 구조에 맞춰서 재편성 해야 겠지만요.
Buddypress 의 메뉴 트리 구성을 이해한 다음에 워드프레스 회원 기능들을 기획해야 되니깐요.
Buddypress vs Ultimate Member
Ultimate Member 플러그인이 UI 나 기본 디자인이 상당히 잘 나온 편이지만, 제 경험으로 말씀드리자면, 버디프레스에서는 무료로 또 기본으로 쓸 수 있는 것들을 모두 유료로 빼두고, 유료로 결제하는 과정에서 환불 같은 것을 제대로 해주지 않아서 상당히 불편한 경험을 가지고 있습니다.
워드프레스로 회원 기반의 서비스를 기획한다면 가능한 한 버디프레스 테마로 구현하는 것이 좋으며, Ultimate Member 는 Customizing 이 상당히 어렵고 support forum 에서 충분한 피드백을 지원하기 어려운 부분이 있습니다.
무엇보다 버디프레스의 유연한 설계와 잘 짜여진 추상화 덕택에 가용성은 굉장히 높고, 테마만 버디프레스를 받쳐준다면 신뢰도 높은 사이트를 제작하는데에 사용해도 전혀 부족함이 없다고 생각합니다.