如何创建自定义buddypress成员目录

BuddyPress社区失败的主要原因之一是因为成员不会相互连接和交互.改进的一种方法是通过让成员感兴趣的设计来改进.

Buddypress成员目录样式出来的框中看起来像平面列表.它是功能的，但它并不是非常令人兴奋或鼓舞人心.今天，我们要与目录做一些乐趣，并探索一点点伙伴的主题.在本教程中，我们将使用CSS和BuddyPress模板文件进行一些很酷的东西，以便创建一个更具交互式的目录，这将鼓励用户互相连接，花更多的时间浏览，点击配置文件并结交新朋友.

在下面的步骤中，我们采用BuddyPress默认成员目录并将其转换为如下所示:

自定义buddypress成员目录

这是我们正在制作的更改的快速概述:

1. 为您的主题添加一个新的/buddypress/目录，用于自定义模板
2. 从成员环路中取出不必要的额外信息

3. 为成员循环添加新位置字段
4. 增加成员目录中的化身大小
5. 自定义成员头像为圆形
6. 更改目录

的布局


7. 为Mousover的Avatars添加灰度效应
8. 自定义"添加朋友"和"删除朋友"按钮

我们将在本教程中使用BuddyPress 1.7，因为它很快就会被释放.但是，无论模板所在的原因，基本思想都是一样的.

要启动，BuddyPress成员目录与此类似于默认样式:

默认成员目录

对于本教程，我们将使用默认二十十二个WordPress主题.

步骤1:将a/buddypress/目录添加到当前的活动主题并添加模板文件.

要开始自定义为buddypress，我们将在当前活动主题中创建一个/buddypress/目录.

在活动主题</figeqution中创建一个buddypress目录

Codex在BuddyPress 1.7中有一些简单的主题兼容性说明.在此处找到遗留模板文件:

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

复制要修改的文件.在这种情况下，您可以抓住/成员/目录，并将其粘贴到您的主题的新BuddyPress目录中.

步骤2:将所有额外的东西切出在成员-循环

中

对于本教程，我们将修剪下一个显示在目录页面上的一些信息，然后删除以下两个项目.

• 删除最后一个活动时间标记
• 删除成员的最新活动更新

显示最后一个活跃的时间真的似乎对我来说是混乱，我没有看到平均Buddypress社区拥有太多价值.如果要删除它，请将其从 Members-Loop.php 文件中剪切:

<?php bp_member_last_active(); ?>

删除最新的活动更新同样容易.将此从成员循环中剪切:

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

步骤3:将位置字段添加到成员循环

现在我们将为成员循环添加一些新的东西.模板文件在评论中如何执行此操作的实际提示.文档规定它确实为循环中的每个成员添加了额外的查询，但它只是一个，无论您显示的字段数量如何.

首先，您需要确保在BuddyPress配置文件中创建要显示的字段.我们将在此示例中使用位置.转到:仪表板>>用户>>配置文件字段.在仪表板中添加您的新字段，然后您可以将其添加到循环中.直接在关于如何显示会员配置文件数据的评论下直接粘贴到成员- 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>

要指定类型= full的原因在于它使得buddypress使用最佳质量的头像和尺寸，使其尺寸下降到您设置的高度和宽度.否则，它必须大小，使其使头像模糊.

步骤5:使化身圆形

制作
client avatars

自定义成员循环后，我们现在正在转向样式的变化.您可以使用少数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中工作，但这并不是很大的事情，因为它只是一种美容效果.

greyscale化身在mouseover上

将此添加到您的样式表:

#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这样的程序来帮助您，此过程很容易.按照Codex中的说明创建您自己的自定义语言文件.对于本教程，我们正在更改友情按钮的语言字符串:

• 添加好友>>更改为"+"
• 取消友谊>>更改为"-"

请注意，这不是每个社区.这只是如何自定义这些按钮的示例.如果您觉得您在从这些按钮中删除了这些按钮的文本时，请不要更改它们.您的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个行李箱的副本并在官方发布到达之前开始试验.您会愉快地惊讶地将BuddyPress直接自定义在WordPress主题中是多么容易.