사용자 지정 BuddyPress 회원 디렉토리를 만드는 방법

게시 됨: 2013-03-06

BuddyPress 커뮤니티가 실패하는 주된 이유 중 하나는 회원이 서로 연결하고 상호 작용하지 않기 때문입니다. 이를 개선하는 한 가지 방법은 회원들의 관심을 유지하는 디자인을 통해서입니다.

BuddyPress 회원 디렉토리 스타일은 기본 목록처럼 보입니다. 기능적이지만 그다지 흥미롭거나 영감을 주지는 않습니다. 오늘 우리는 디렉토리로 재미있는 일을 하고 BuddyPress 테마를 조금 탐구할 것입니다. 이 튜토리얼에서는 사용자가 서로 연결하고 탐색하고 프로필을 클릭하고 새 친구를 사귈 수 있도록 더 많은 시간을 할애할 수 있는 대화형 디렉토리를 만들기 위해 CSS 및 BuddyPress 템플릿 파일을 사용하여 멋진 작업을 수행할 것입니다.

BuddyPress 기본 구성원 디렉토리를 가져와 다음과 같이 변환할 때 아래 단계를 따르십시오.

변경 사항에 대한 간략한 개요는 다음과 같습니다.

사용자 정의 템플릿용 테마에 새 /buddypress/ 디렉토리 추가
구성원 루프에서 불필요한 추가 항목 제거
회원 루프에 새 위치 필드 추가
회원 디렉토리 내에서 아바타 크기 늘리기
회원 아바타를 원형으로 사용자 지정
디렉토리 레이아웃 변경
mousover의 아바타에 회색조 효과 추가
"친구 추가" 및 "친구 제거" 버튼 사용자 지정

이 튜토리얼에서는 곧 출시될 BuddyPress 1.7을 사용할 것입니다. 그러나 기본 아이디어는 템플릿의 위치에 관계없이 여전히 동일합니다.

시작하기 위해 BuddyPress 회원 디렉토리는 기본 스타일을 사용하여 다음과 유사합니다.

이 튜토리얼에서는 기본 Twenty Twelve WordPress 테마로 작업합니다.

1단계: 현재 활성 테마에 /buddypress/ 디렉토리를 추가하고 템플릿 파일을 추가합니다.

BuddyPress에 대한 사용자 정의를 시작하기 위해 현재 활성 테마 내에 /buddypress/ 디렉토리를 만들 것입니다.

코덱스에는 BuddyPress 1.7의 테마 호환성에 대한 짧고 간단한 지침이 있습니다. 여기에서 레거시 템플릿 파일을 찾습니다.

wp-content/plugins/buddypress/bp-templates/bp-legacy/

수정하려는 파일을 복사합니다. 이 경우 /members/ 디렉토리를 가져와서 테마의 새 BuddyPress 디렉토리에 붙여넣을 수도 있습니다.

2단계: Members-loop.php에서 모든 추가 항목을 잘라냅니다.

이 자습서에서는 디렉터리 페이지에 표시되는 정보 중 일부를 잘라내고 다음 두 항목을 제거합니다.

마지막 활성 시간 태그 제거
회원의 최신 활동 업데이트 제거

마지막 활동 시간을 표시하는 것은 나에게 정말 어수선한 것처럼 보이며 평균 BuddyPress 커뮤니티에 너무 많은 가치가 있다고 보지 않습니다. 제거하려면 Members-loop.php 파일에서 다음을 잘라냅니다.

<?php bp_member_last_active(); ?>

최신 활동 업데이트를 제거하는 것도 간단합니다. Members-loop.php 에서 이것을 잘라냅니다.

<?php if ( bp_get_member_latest_update() ) : ?>
<span class="update"> <?php bp_member_latest_update(); ?></span>
<?php endif; ?>

3단계: 구성원 루프에 위치 필드 추가

이제 우리는 멤버 루프에 새로운 것을 추가할 것입니다. 템플릿 파일은 주석에서 이를 수행하는 방법에 대한 실제 힌트를 제공합니다. 설명서에 따르면 루프의 각 멤버에 대한 추가 쿼리가 추가되지만 표시하는 필드 수에 관계없이 하나만 있습니다.

먼저 BuddyPress 프로필에 표시할 필드를 생성했는지 확인해야 합니다. 이 예에서는 위치를 사용합니다. 대시보드 >> 사용자 >> 프로필 필드로 이동합니다. 대시보드에 새 필드를 추가한 다음 루프에 추가할 수 있습니다. 회원 프로필 데이터를 표시하는 방법에 대한 주석 바로 아래에 다음을 Members-loop.php에 붙여넣습니다.

<?php echo bp_member_profile_data('field=Location'); ?>

필드 값은 대소문자를 구분하므로 작동하지 않는지 확인해야 합니다.

4단계: 회원 루프에 표시되는 아바타 크기 늘리기

루프 상단에서 회원 아바타 코드를 찾습니다.

<div class="item-avatar"><a href="<?php bp_member_permalink(); ?>"><?php bp_member_avatar(); ?></a></div>

다음과 일치하도록 해당 행을 변경하십시오.

<div class="item-avatar"><a href="<?php bp_member_permalink(); ?>"><?php bp_member_avatar('type=full&width=180&height=180'); ?></a></div>

여기서 type=full을 지정하려는 이유는 BuddyPress가 최고 품질의 아바타를 사용하고 사용자가 설정한 높이와 너비로 크기를 줄이기 때문입니다. 그렇지 않으면 크기가 커져 아바타가 흐릿해집니다.

5단계: 아바타를 원형으로 만들기

멤버 루프를 사용자 정의한 후 이제 스타일 변경으로 넘어갑니다. 몇 가지 CSS 조정으로 아바타를 원형으로 만들 수 있습니다. 이 효과는 디렉토리에 재미를 더합니다. 이와 같은 몇 가지 빠르고 간단한 변경 사항을 위해 테마의 스타일시트에 변경 사항을 추가할 수 있습니다.

여기서는 회원 디렉토리의 아바타만 대상으로 합니다. 이걸 더해:

#members-dir-list img.avatar {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;
}

6단계: 아바타에 흑백 호버 효과 추가

이것은 사용자가 디렉토리를 조금 더 오래 탐색하도록 하는 데 도움이 될 수 있는 재미있는 작은 효과입니다. 물론 IE에서는 작동하지 않을 수도 있지만 단지 미용 효과일 뿐이므로 큰 문제는 아닙니다.

스타일시트에 다음을 추가하세요.

#members-dir-list a:hover img.avatar {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: -webkit-filter 0.2s ease-in-out;
-moz-transition: -moz-filter 0.2s ease-in-out;
transition: filter 0.2s ease-in-out;
}

7단계: 구성원 디렉토리 레이아웃 사용자 지정

회원 목록이 3행으로 구성된 그리드에 로드되도록 합시다.

#buddypress #members-list li {
overflow: auto;
list-style: none;
float: left;
width: 30%;
margin: 0 20px 28px 0;
border: 0;
}

또한 텍스트 크기와 정렬을 변경하기 위해 약간의 조정을 할 것입니다.

#buddypress #members-dir-list ul.item-list li div.item-title, #buddypress #members-dir-list ul.item-list li h4, #buddypress #members-dir-list ul.item-list li div.item-meta
{
width: 100%;
text-align: center;
}

#buddypress #members-dir-list ul.item-list li div.item-title {
font-size: 110%;
}

#buddypress #members-dir-list ul.item-list li div.item-meta {
text-transform: uppercase;
font-size: 80%;
}

#buddypress #members-dir-list ul.item-list li img.avatar {
margin-bottom: 8px;
}

물론 이러한 조정 중 일부는 활성 테마로 시작하려는 테마에 따라 다릅니다. 이러한 기본 템플릿을 사용하는 경우 CSS는 위와 상당히 유사해야 합니다.

8단계: 친구 추가 및 친구 제거 버튼 사용자 지정

이 버튼을 필터링할 수 있는 방법이 있다면 그것에 대해 잘 모르겠습니다. 버튼 텍스트를 사용자 지정하려면 BuddyPress용 사용자 지정 언어 파일을 만들어야 합니다. PoEdit와 같은 프로그램이 있으면 이 프로세스가 매우 쉽습니다. 코덱스의 지침에 따라 사용자 정의 언어 파일을 만드십시오. 이 튜토리얼에서는 우정 버튼의 언어 문자열을 변경합니다.

친구 추가 >> "+"로 변경
우정 취소 >> "-"로 변경

모든 커뮤니티에 적용되는 것은 아닙니다. 이는 해당 버튼을 사용자 정의하는 방법의 한 예일 뿐입니다. 이 버튼에서 텍스트를 제거하는 데 너무 많은 손실이 있다고 생각되면 절대 변경하지 마십시오. UI 선택은 전적으로 커뮤니티의 인구 통계에 따라 다릅니다. 다음은 예제와 같이 버튼을 사용자 정의하는 방법입니다.

#buddypress #members-dir-list a.friendship-button.add {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
border: 5px solid #89ac48;
font-size: 26px;
font-weight: bold;
background: #a5d156;
color: #ffffff;
line-height: 50px;
}

#buddypress #members-dir-list a.friendship-button.is_friend.remove {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
border: 5px solid #CC0000;
font-size: 26px;
font-weight: bold;
background: #FF5050;
color: #ffffff;
line-height: 50px;

}

ul#members-list.item-list li div.action {
text-align: center;
overflow-y: hidden;
top: 18px;
right: 6px;
}

이러한 변경을 통해 다음과 같은 구성원 디렉토리를 갖게 됩니다.

사용자 정의 구성원 디렉토리 — 맞춤형 BuddyPress 회원 디렉토리

"친구 제거" 버튼이 빨간색으로 너무 눈에 띄면 "디스플레이: 없음"을 추가하여 완전히 숨길 수 있습니다. .is_friend.remove 클래스에. 또는 작업 버튼에 대해 다른 색상이나 텍스트를 선택할 수 있습니다. 이것은 위의 예와 일치하도록 회원 디렉토리를 사용자 정의하는 마지막 단계입니다.

약간의 CSS가 BuddyPress 기본값처럼 보이지 않도록 디렉토리를 완전히 변형할 수 있다는 것은 매우 놀랍습니다. BuddyPress 1.7 테마 호환성은 더 많은 WordPress 개발자에게 플랫폼을 제공합니다. 구성 요소는 테마에 잘 맞지만 눈에 띄게 만드는 것은 사용자의 몫입니다. 1.7 트렁크의 복사본을 잡고 공식 릴리스가 도착하기 전에 실험을 시작하십시오. WordPress 테마 내에서 BuddyPress를 직접 사용자 정의하는 것이 얼마나 쉬운지 즐겁게 놀라게 될 것입니다.