Как создать произвольный каталог членов сообщества в BuddyPress

Одна из главных причин, почему сообщества BuddyPress разваливаются – их члены никак не взаимодействуют друг с другом. Один из способов, позволяющих развить сообщество – создать такой дизайн, который поможет людям поддерживать контакты.

Каталог членов сообщества BuddyPress отличается стандартной стилизацией, которая является функциональной, однако не слишком привлекательной для пользователей. В данной статье мы изменим стилизацию каталога и коснемся использования тем в BP. С помощью CSS мы создадим более интерактивный каталог, который поможет пользователям устанавливать контакты друг с другом, будет подталкивать к просмотру профилей и поиску новых друзей.

Весь процесс преобразования каталога будет разбит на шаги. Конечный результат, которого мы будем добиваться, представлен на скриншоте:

Нам понадобится выполнить следующие действия:

1. Добавить новый каталог /buddypress/ к своей теме для произвольных шаблонов.
2. Удалить ненужные параметры из цикла членов.
3. Добавить поле New Location Field к циклу членов.
4. Увеличить размер аватара для каталога членов.
5. Сделать аватар членов круглым.
6. Изменить разметку каталога.
7. Добавить Greyscale-эффект к аватарам при наведении мыши.
8. Изменить кнопки «Add Friend» и «Remove Friend».

В данном руководстве мы будем использовать версию BuddyPress 1.7, которая увидит свет уже очень скоро. Однако основная идея будет оставаться все той же, вне зависимости от того, где именно расположены шаблоны.

Каталог членов BuddyPress со стандартными стилями выглядит следующим образом:

Для данного руководства мы воспользуемся темой Twenty Twelve.

Шаг 1. Добавляем каталог /buddypress/ к своей активной теме, после чего добавляем шаблоны.

Чтобы начать вносить изменения в BP, мы должны создать каталог /buddypress/ в папке с активной темой.

В кодексе есть простые и ясные инструкции по поводу совместимости тем в BP 1.7. Найти существующие шаблоны можно здесь:

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

Скопируйте файлы, которые вы хотите изменить. В данном случае вы можете также скопировать каталог /members/ и вставить его в новый BP каталог своей темы.

Шаг 2. Убираем все лишнее из members-loop.php.

Для данного руководства мы уберем некоторую информацию, которая отображается на странице каталога, а также удалим следующие два пункта:

• Время последней активности
• Обновление последней активности членов

Отображение времени последней активности в действительности только мешает, и я не думаю, что эта информация играет такую важную роль в сообществах BP. Если вы хотите удалить ее, уберите следующую строку из файла members-loop.php:

<div class="item-meta"><span class="activity"><?php bp_member_last_active(); ?></span></div>

Удалить обновление последней активности членов можно так же просто. Удалите следующий код из members-loop.php:

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

Шаг 3. Добавляем поле Location к циклу членов.

Теперь мы хотим добавить кое-что новое к циклу членов. Шаблон содержит подсказки в комментариях, указывающие на то, как это сделать. Для начала вы должны удостовериться в том, что создали поле, которое должно будет отображаться в профилях BuddyPress. Мы используем расположение (Location) в данном примере. Переходим в раздел: Dashboard >> Users >> Profile Fields. Добавляем новое поле в консоли, после чего мы можем использовать его в цикле. Разместите следующий код в 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, заключается в том, что этот код заставляет BP использовать аватар наилучшего качества, и подгоняет его к высоте и ширине, которую вы установили. Иначе аватары будут не слишком четкими.

Шаг 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. Изменяем разметку каталога членов.

Давайте сделаем так, чтобы список членов содержал ровно три аватара в каждой строке:

#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. Изменяем кнопки Add Friend и Remove Friend.

Я не знаю, есть ли какой-нибудь способ применения фильтров к данной кнопке. Чтобы настроить текст кнопки, вам понадобится создать произвольный языковой файл для BuddyPress. Этот процесс не составит труда, если у вас есть программа PoEdit. Следуйте инструкциям кодекса, чтобы создать свой языковой файл. Для данного руководства мы изменим языковые строки для кнопок, относящихся к приглашениям в друзья:

• Add Friend >> Заменим на “+”
• Cancel Friendship >> Заменим на “-”

Обратите внимание на то, что данный вариант подойдет далеко не для любого сообщества. Это всего лишь простой пример того, как можно настроить указанные кнопки. Если вы считаете, что удаление текста кнопок пойдет во вред, то не делайте этого. Выбор пользовательского интерфейса целиком и полностью зависит от демографии вашего сообщества. Чтобы настроить кнопки для нашего примера, используйте следующий код:

#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;
}

Благодаря внесенным изменениям, список членов будет иметь следующий вид:

Если вы считаете, что кнопка “Remove Friend” в красном цвете выглядит слишком вызывающе, вы можете скрыть ее при помощи добавления “display: none;” к классу .is_friend.remove. Также вы можете выбрать разные цвета и разный текст для командных кнопок.

Удивителен тот факт, что при помощи небольшой CSS-стилизации можно полностью преобразить вид ваших каталогов. Совместимость тем в BuddyPress 1.7 откроет эту платформу для многих WordPress-разработчиков. Все компоненты будут отвечать стилизации вашей темы; к тому же, вы всегда можете изменить их представление. Скачайте себе копию тестовой версии BP 1.7 и начните экспериментировать с ней, пока основной релиз еще не увидел свет. Вы будете приятно удивлены, как легко можно настроить BuddyPress непосредственно в WP-теме.

Источник: wpmu.org