Buddyboss教程

在本教程中，我将教你如何快速安装BuddyBoss主题(版本3.0 +)。在你开始之前，确保安装和设置WordPress,可选BuddyPress和BBPress.也你总是可以下载最新版本的BuddyBoss通过点击“我的帐户”在您的个人资料图标在该网站的顶部，而登录。

---

通过WordPress仪表板轻松安装

1. 登录你的WordPress仪表盘，然后进入外观>主题．
2. 点击添加新．点击上传．
3. 从你的电脑中找到主题文件“buddyboss-[version].zip”并上传。点击现在安装．
4. 从你的电脑中找到主题文件“buddyboss-child-[version].zip”并上传。点击现在安装．
5. 激活“BuddyBoss孩子主题”作为你的主主题。
6. 您现在可以访问主题设置外观> BuddyBoss和>自定义外观。

---

或者:通过FTP手动安装

1. 解压缩" buddyboss-[版本].zip "和" buddyboss-child-[版本].zip "。
2. 通过FTP上传两个主题文件夹到您的WP-Content /主题/目录中。确保父主题文件夹的标题为“buddyboss”，而不是任何其他变体孩子的主题去工作。
3. 登录您的WordPress仪表板并选择外观>主题．
4. 激活“BuddyBoss孩子主题”作为你的主主题。
5. 您现在可以访问设置外观> BuddyBoss．

---

最小的服务器需求

BuddyBoss应该负责绝大多数的服务器设置。如果你遇到服务器问题，联系你的网络主机，确保你的服务器安装了以下标准技术。

• PHP 5.6 +
  • php5-gd
  • php5-mbstring
  • php5-mysql
  • php5-exif
• MySQL 5.6 +
• mod_rewrite Apache模块

在本教程中，我将教您如何配置基本选项BuddyBoss主题(版本3.0 +)。要查看BuddyBoss的所有选项，只需浏览页面上列出的其他教程。

设置自定义菜单

1. 去外观>菜单．
2. 创建一个新菜单，并将所有的欲望页面添加到该菜单中。
3. 拖放可重新排列页面。点击“保存菜单”。
4. 点击“管理位置”，并设置您的新菜单到所需的位置。

BuddyBoss有四个菜单位置:

• 主菜单-显示在头部
• 页脚菜单-显示在页脚
• 个人资料:额外的链接-显示在所有BuddyPress用户侧边栏
• 组:额外的链接-显示在所有BuddyPress组侧边栏

您可以将菜单拖放到缩进位置以获取“主菜单”位置的下降。

---

将特色图像添加到博客帖子

1. 在WordPress Dashboard，转到的帖子并选择一篇要编辑的文章．
2. 在右侧的“精选图像”下，点击“设置精选图像”。
3. 将您的图片上传至媒体上传器，然后点击“设置特色图片”。
4. 点击“更新”你的博客文章。
5. 现在，当你查看你的博客索引时，你会看到你上传的图片是这篇文章的特色

---

删除个别页面上的评论

默认情况下，所有新页面都有一个评论框。您可能想要改变这种行为。

1. 从前端导航到要编辑的页面。
2. 单击顶部工具栏中的“编辑页面”。
3. 从顶部打开“屏幕选项”，并检查“讨论”选项。
4. 向下滚动页面到讨论部分，取消勾选“允许注释”。

---

允许用户创建帐户

这只有在你使用BuddyPress插件．

1.去设置>一般．选择“任何人都可以注册”会员．

2.去> BuddyPress >设置．确保“为注销用户显示工具栏”设置为“是”。

---

更改默认的用户头像

BuddyBoss带有一个吸引人的自定义头像，可以取代默认的WordPress“神秘人”。

1. 去设置>的讨论在仪表板。
2. 在这页的底部，设置默认的《阿凡达》“BuddyBoss人”。
3. 点击“保存更改”。

---

配置高级成员搜索

这只有在你使用BuddyPress插件．

1. 安装”英国石油公司资料搜索”插件。
2. 去用户>配置文件搜索．
3. “搜索表单头”和“切换表单”是不相关的。无论你把什么放在那里都不会被使用，因为那些选项只用于硬编码选项。BuddyBoss使用插件提供的小部件。
4. 检查你想要搜索的所有配置文件字段。如何设置配置文件字段→
5. 保留“添加到成员目录”未选中。我们将使用小部件代替。
6. 点击“保存更改”。
7. 导航到外观>小部件．
8. 将“BP Profile Search”小部件添加到您想要的小部件区域(通常)成员→目录）.

在本教程中，我将教你如何使用高级主题选项来定制您的网站的外观和感觉(需要BuddyBoss 3.1 +）.

您可以访问所有的主题定制器选项外观>自定义从你的WordPress仪表板。每次你改变一个设置，你会看到你的网站动态更新在现场预览旁边的设置。要预览它在移动设备上的样子，只需在使用定制器时让你的浏览器窗口变小。

如果你想要一个完全独特的设计，询问我们的自定义主题和插件开发．

---

改变网站标题和标语

如果你没有上传一个标志，你的网站标题和标签线将自动显示标志将在哪里。

1. 去外观>自定义．
2. 开放网站标题和标语．
3. 输入您所需的文本。
4. 点击保存和发布．

---

添加一个标志

如果你上传一个标志，它将显示而不是网站标题和标语。

1. 去外观>自定义．
2. 开放标志．
3. 点击“无图像”，它就会打开。
4. 在“Drop a file here or。选择一个文件，单击“选择文件”。从你的电脑中找到你的标志。
5. 点击保存和发布．

你最新上传的logo现在也可以在WordPress登录界面上看到了。

---

改变WordPress工具栏布局

从BuddyBoss 3.1.1，您可以通过定制器设置更改工具栏布局。这两个选项是全屏宽度，类似于默认的WordPress工具栏，或者浮动右边，它将工具栏停靠在屏幕的右侧。

流体宽度

1. 去外观>自定义．
2. 开放WordPress工具栏．
3. 选择“流体宽度”，这应该是默认值。
4. 点击保存和发布．

漂浮吧

1. 去外观>自定义．
2. 开放WordPress工具栏．
3. 选择“浮动右”。
4. 点击保存和发布．

---

定制颜色

您可以轻松更改您网站所有主要元素的颜色。

1. 去外观>自定义．
2. 开放颜色→布局,或颜色→文本．
3. 对于您要调整的每个元素，请使用颜色选择器选择所需的颜色。
4. 点击保存和发布．

---

自定义字体

您可以轻松更改您网站所有主要元素的字体。

1. 去外观>自定义．
2. 开放排版．
3. 对于每个要调整的元素，使用字体下拉列表选择所需的字体。
4. 点击保存和发布．

---

在页脚添加社交媒体链接

您可以轻松地将社交媒体链接（Facebook，Twitter等）进入您的网站的页脚。对于此特定部分，您只能在点击后查看预览更新保存和发布．

1. 去外观>自定义．
2. 开放社交媒体链接．
3. 为您想要显示的每个图标输入您的社交媒体链接。
4. 点击保存和发布．

---

Pro提示：取消激活颜色和字体样式

颜色和字体选项会自动以内联样式输出到网站的HTML中。如果你检查HTML，你会看到他们在。即使您没有使用定制器，它仍然会将默认颜色输出到HTML中，这通常会覆盖子主题中为相同CSS属性设置的样式。

如果您正在进行大量的自定义CSS编辑，您可能希望完全禁用自定义器的CSS输出。这很容易做到。只需将此函数添加到子主题中函数.php.文件：

//删除定制化CSS输出add_action('after_setup_theme'， 'remove_buddyboss_customizer_ .css的);函数remove_buddyboss_customizer_Css () {remove_action('wp_head'， 'buddyboss_customizer_css');｝

在本教程中，我将教你如何在你的主页上设置可选的特色滑块(需要)BuddyBoss 3.1 +）.

安装BuddyBoss 3.1+后，你会在你的WordPress仪表板上看到一个新的菜单部分，标题为幻灯片．如果你添加了幻灯片，它们会在你的主页上以幻灯片的形式自动显示。

添加幻灯片

要使幻灯片正常工作，至少需要添加两张幻灯片。

1. 去幻灯片>新增。
2. 添加主幻灯片文本作为文章标题。
3. 将辅助幻灯片文本添加到二级文本部分．
4. 如果想在幻灯片上添加按钮，请将按钮的文本和URL目的地添加到“了解更多”按钮部分。

接下来，你需要上传一张幻灯片的图片。图像的宽度必须至少为1040px，高度必须为400px，否则当你缩放它时，幻灯片会失真。

1. 找到有特色的图片节，默认情况下在编辑器的右列中。
2. 点击“设置特色图片”，上传你的图片，尺寸为1040px * 400px。
3. 看到图片上传成功后，点击“设置特色图片”。
4. 你现在可以“发布”你的幻灯片了。

你的新幻灯片现在应该可以在主页上看到了。请记住，您至少需要两张幻灯片才能使幻灯片正常运行。

---

将幻灯片放到不同的页面

想要将您的幻灯片添加到除首页之外的其他页面?您将不得不编辑一些代码，但这是一个相对简单的编辑。

在子主题中，创建计划用于包含幻灯片的页面的页面模板。在页面模板中，在标题调用下面添加以下代码片段以显示滑块。

<？PHP get_template_part('content'， 'slides');?＞

用户贴墙要求你有BuddyBoss墙插件安装。该功能允许你的成员以一种类似于Facebook的直观方式相互互动，包括交互式的“墙”、新闻源和“喜欢”。

激活用户留言墙

1. 去> BuddyPress > Components．
2. 确保“好友连接”和“活动流”都是启用的。
3. 去> BuddyBoss墙菜单。
4. 为您的站点配置所需的选项。

现在你应该可以访问任何用户的个人资料，并在他或她的涂鸦墙上写字了。

用户照片上传要求您有BuddyBoss媒体插件安装,单独出售。该功能允许你的会员上传照片到他们的个人资料，如果你有，也可以上传照片到其他用户的资料用户墙贴启用。

激活用户照片上传

1. 去设置> BuddyBoss媒体菜单。
2. 为您的站点配置所需的选项。

您应该在个人资料中看到一个新的“照片”选项卡。您可以从照片选项卡或主配置文件活动页面上传照片。照片也可以组织成专辑。

小部件解释

网站上的每个页面都可以有一个侧边栏，你可以在其中放置“小部件”。通过进入来添加小部件外观>小部件并将您想要使用的小部件拖放到适当的侧边栏中。当你打开任何边栏时，它会解释在哪里以及如何使用特定的边栏。

Buddyboss配有16个小部件区域。他们是：

WordPress页面和帖子

• 页面→右侧栏
• 页面→左侧工具栏

主页

• 首页→右侧栏
• 首页→左侧栏

BuddyPress的页面

• 成员→目录
• 会员→单一简介
• 组→目录
• 组→单组
• 活动→目录
• 论坛→目录和单一
• 博客→目录(多站点)

页脚

• 页脚# 1
• 页脚# 2
• 页脚＃3
• 页脚# 4
• 页脚# 5

---

BuddyBoss登录窗口小部件

BuddyBoss附带了一个配置文件登录小部件(需要BuddyPress插件）.BuddyPress 1.9+现在也带有一个登录小部件，所以你可能更喜欢使用他们的版本。

1. 去外观>小部件．
2. 将“(BuddyBoss) Profile Login Widget”添加到您想要的Widget区域。您可以将它添加到任意多的小部件区域。
3. 给小部件一个您选择的标题。标题将只显示注销用户;登录的用户可以看到他们的个人信息。

虽然BuddyBoss默认以美式英语显示，但该主题具有可用于任何语言的内置功能。主题中的每个语言实例都绑定到一个翻译文件，该文件可用于将主题翻译成您选择的语言。

有两种方法可以将主题或插件翻译成另一种语言。你可以用WordPress翻译插件，或者你可以直接编辑语言文件使用桌面软件。我将在本教程中浏览两种方法。

---

介绍

打包的语言文件可以在你的主题中找到/ buddyboss /语言/．在那里，你会看到en_US.po和en_US.mo．这些是语言文件，默认翻译设置为美式英语。

语言文件的解释

语言文件有些令人困惑，所以我将在这里尽力帮助您。文件名的第一部分显示命名结构，以标识要转换成的特定语言。en_US代表英语、美国。你可以看到所有不同的国家代码在这个资源．

文件名的第二部分告诉计算机使用哪个文件。的.po分机告诉你它是可移植对象文件类型，这意味着它是语言文件的人类可读版本。的mo分机告诉你它是Machine对象文件类型，意味着它是软件实际使用的语言文件的机器优化版本。一般来说，您在Po文件中进行翻译，然后保存PO文件时会自动更新Mo文件。

---

选项1:使用WordPress插件进行翻译

有两个流行的语言翻译插件Codestyling本地化和WPML插件．在本教程中，我将使用codestyles本地化插件，因为它是免费的。在本教程中，我们将假装您正在将BuddyBoss翻译成德语。

1.安装并激活Codestyling本地化插件。
2.去工具>本地化．
3.找到“BuddyBoss[版本]”，点击“添加新语言”。

4.选择您所在国家的单选按钮，然后点击“创建po-file”。此时，PO文件应该已经在/ buddyboss /语言/文件夹中。

5.对于你的国家，点击“重新扫描”，然后“立即扫描”。

6.对于你的国家，点击“编辑”。这将为您带来另一个页面，列出可供翻译的语言实例。
7.点击“编辑”在行动列对应您想要翻译的每个语言实例。
8.为每个语言实例键入您的翻译，然后单击每个语言实例的单击“保存”。

9.点击“生成mo-file”。在这一点上，您应该看到在/ buddyboss /语言/文件夹中。

10.假设您的服务器设置为德语，您现在应该可以在实时网站上看到您的德语翻译。如果你还没有看到它的工作，你可能需要改变你的国家指定wp-config.php反映翻译。默认为定义(‘WPLANG’,”);．在本例中，您可以将其更改为定义(“WPLANG”、“de_DE”);．

---

选项2:直接编辑语言文件

您将需要专门的软件来直接编辑您的PO/MO文件。我个人使用的软件是Poedit虽然不是很吸引人，但很管用。你也可以考虑Pootle（基于网络）或GNU Gettext（命令shell）。本教程的其余部分将假设您正在使用Poedit．

一旦你安装了必要的软件，你应该继续从主题找到PO/MO文件，位于/ buddyboss /语言/．将这些文件复制到您的子主题中，并将它们放入/ buddyboss-child /语言/．

请确保您在函数.php.在你的子主题文件:Load_theme_textdomain ('buddyboss'， get_stylesheet_directory()。' /语言');．这一行告诉WordPress加载子主题的语言文件，而不是父主题的语言文件。如果你看到文本域写成“buddyboss_child”，对于此方法，您将希望将其更改为read为“buddyboss”．

让我们假设你正在把你的《BuddyBoss》翻译成德语。复制en_US.po和en_US.mo并将它们重命名为de_DE.po和de_DE.mo，德国(Deutschland)国家代码如指定在这个资源．现在在Poedit中打开PO文件。该软件应该显示一串你可以翻译的文本行。选择任意一行文本，进行翻译，当你点击“保存”，你的MO文件将在你的机器上自动更新。

完成每一行文本的翻译后，确认您的更改文件(MO和PO)都在子主题的语言文件夹中，位于/ buddyboss-child /语言/然后把修改的内容上传到你的服务器上。

假设您的服务器设置为德语，此时您应该可以在实时网站上看到您的德语翻译。如果你还没有看到它的工作，你可能需要改变你的国家指定wp-config.php反映翻译。默认为定义(‘WPLANG’,”);．在本例中，您可以将其更改为定义(“WPLANG”、“de_DE”);．

在本教程中，我将教你如何在BuddyBoss子主题中编辑CSS。我们先简单介绍一下孩子的主题，然后我将使用一个示例CSS编辑来教你如何实现它。本教程假设您已经具备以下方面的工作知识如何编写CSS．

儿童主题介绍

子主题是修改BuddyBoss主题的最安全、最简单的方法，无论您想要做一些微小的更改还是广泛的更改。在WordPress中，“子主题”是继承另一个主题功能的主题，称为“父主题”。它允许您修改或添加父主题的功能。在我们的案例中BuddyBoss是父主题，它预先打包了一个起始子主题。我们强烈建议您将子主题激活为主主题，并使CSS在子主题文件中编辑。本教程的其余部分假定您正在使用子主题为CSS编辑。

为什么要使用打包的子主题?

我们经常发布主题更新如果你只修改了你的子主题，你可以安全地升级BuddyBoss，而不会丢失任何编辑。子主题继承了父主题的所有模板和功能，但允许您更改父主题的外观，而不需要编辑其任何代码，因为子主题中的代码会覆盖父主题中的代码。更多信息可在我们的详细资料中找到儿童主题介绍．

---

教程CSS编辑

在本教程的剩余部分，我将实现一个虚拟的CSS编辑，这样你就可以遵循我将采取的确切步骤，然后将这些相同的步骤应用到几乎任何其他CSS编辑，你可能想要实现。在本教程中，我们将把桌面主导航的背景颜色从默认的蓝色改为红色。你可以改变这个颜色而不需要修改任何代码编辑器，但出于本教程的目的，我们将手动执行。

这是一个很好的例子，因为它很容易测试，只适用于大屏幕尺寸(需要媒体查询)，而且还覆盖编辑器设置。这个例子涵盖了大多数用例场景。

以下是我们的最终目标:

1.找到要编辑的风格

修改父主题中发现的样式的第一步是概括正在生成样式的方式和位置。为此，我们将使用网络督察这是伴随着谷歌浏览器web浏览器。对于任何网页开发者来说，它都是一个非常有价值的工具，它可以让你特别容易地找出你访问的任何网站的CSS样式是在哪里定义的。

当在谷歌Chrome浏览器中查看您的网站时，右键单击您想要编辑的元素(导航)，并单击“检查元素”。

您现在将在您的浏览器中显示一个面板，向您展示所选元素的所有样式。如果您不小心点击了错误的元素，则可以浏览页面的HTML，直到抓住正确的元素，并且您将看到页面上的Inspector突出显示元素，以便您知道要选择的内容。

在左列中，您可以看到HTML，右列中可以看到所选HTML元素的相应CSS。您实际上可以单击在检查器的右栏中以播放CSS，并在浏览器中立即查看更改的实时预览。这通常是我如何尝试潜在的CSS变化。对于本教程，我们将调整所定义的CSS选择器.main-navigation, .main-navigation ul.nav-menu具有…的属性background - color: # be3b2f，它将背景颜色定义为Red十六进制颜色值．只需单击右边的列，并更改背景颜色为# be3b2f您应该可以在浏览器中看到更改。不需要保存或刷新。

请记住，这些编辑只发生在您的浏览器。如果您刷新页面，它们将丢失。下一步是将它们添加到子主题的样式表中，使它们永久存在。

2.将CSS编辑添加到子主题中

我们建议您将所有的CSS编辑添加到您的子主题/主题/ buddyboss-child / css / custom.css．添加到此样式表中的任何样式都将覆盖父主题中设置的样式/ css /文件夹中。

在文本编辑器中打开样式表

打开Custom.css.在您最喜爱的文本编辑器。我个人最喜欢的是崇高文本2．它可以自由尝试，强大，轻巧，在Mac和Windows上提供。一些流行的替代品是CodaMac(价格昂贵但可靠)和Windows自带的老式记事本应用程序。如果你喜欢在WordPress中直接编辑CSS(不是一个理想的方法)，我建议你安装WP编辑器插件。除此之外，它还允许你浏览主题的文件夹结构，并给你语法高亮显示。

将编辑添加到正确的“媒体查询”中

向前!下一步是将CSS编辑添加到Custom.css.．当您第一次打开文件时，您会注意到它被分解为基于媒体查询，允许主题对移动设备“响应”。媒体查询允许CSS根据不同的屏幕大小加载。我们从为所有屏幕尺寸加载的全局样式开始。然后我们缩小到低于或高于特定宽度的尺寸(以近似您使用的设备)，使用特定的CSS瞄准每个宽度。在BuddyBoss中，我们通常将其分为手机、平板电脑、笔记本电脑和台式电脑三种主要屏幕尺寸。

回去找你的探长谈谈。你会注意到，我们应用到导航的颜色实际上位于一个媒体查询中!这个特殊的媒体查询指定样式只适用于屏幕为721px或更宽的情况。您将希望将您的CSS编辑添加到相同的媒体查询Custom.css.．

在Chrome检查器中，你可以把光标放到检查器中，复制整个代码片段。然后回到Custom.css.，将您从检查器复制到相应的媒体查询中的CSS粘贴到相应的CSS。它应该看起来像这样：

/*-------------------------------------------------------------- 2.3 -最小宽度为721像素(平板电脑 +) --------------------------------------------------------------*/ @ 媒体屏幕和(min-width: 721 px) {.main-navigation .main-navigation ul。导航菜单{background-color: #be3b2f;}}/*不要删除这个右括号*/

通常这将是最后一步。然而，您可能不会在浏览器中看到任何更改。原因是这种特殊的样式碰巧是在编辑器，它直接将样式注入HTML，从而用管理选项中的所有自定义颜色选择覆盖样式表。内联定制器样式正在接管。你可以告诉这一点，回到Chrome检查器。您将看到这个特定的样式不是来自样式表，而是来自(index)，这意味着它来自HTML文件。

覆盖编辑器

对于这个特定的CSS编辑，我们需要覆盖Customizer的优先级。这其实很简单。我们只需要加一个！重要的声明我们的样式属性。像这样:

/*-------------------------------------------------------------- 2.3 -最小宽度为721像素(平板电脑 +) --------------------------------------------------------------*/ @ 媒体屏幕和(min-width: 721 px) {.main-navigation .main-navigation ul。导航菜单的背景颜色:#be3b2f！重要的；}}/*不要删除这个右括号*/

如果您正确地完成了所有操作，您现在应该可以在站点上看到Red导航。您可以按照以下步骤进行任何CSS编辑。并且始终确保将CSS添加到适当的媒体查询中，或者添加到无媒体查询中(开始的Global部分)，这取决于您需要的屏幕大小。

---

额外提示:移动CSS

编辑移动CSS与编辑桌面CSS没有什么不同。当使用Chrome检查器时，让你的浏览器窗口足够小，布局折叠到移动模式。在这种情况下，通过点击小方块图标，将检查器停靠在屏幕右侧有助于腾出空间来查看所有内容。然后只需要遵循相同的步骤，并将你的编辑添加到适当的“小屏幕”媒体查询。

如果你想看什么真的凉爽的，看看这个．你可以把你的Android设备插入你的电脑，并检查/编辑CSS从你的Android设备在你的桌面上的Chrome浏览器加载。这是我在Android上进行原生测试的方法，这节省了大量时间。一定要下载Chrome Beta.在您的Android设备上为此工作（截至2014年2月13日）。