将您的社区个性化以匹配您的品牌至关重要。FluentCommunity 提供了强大而灵活的方式，可添加自定义 CSS（用于设计和样式）和 JavaScript（用于增强功能）。
本指南将向您介绍添加自定义代码的两种主要方法，助您选择最适合自身需求的方式。
- 使用内置编辑器（简单且推荐）：非常适合在 FluentCommunity 设置中直接进行快速、简单的修改。
- 使用代码片段插件（高级控制）：非常适合组织较大的代码区块，或为需要更多灵活性的开发者提供便利。
方法 1：内置编辑器
对于超过 90% 的定制需求，这是最安全、最直接的方法。它无需任何额外插件，且您的修改易于管理。
步骤：
- 导航至您的WordPress仪表板 → FluentCommunity → 门户设置.
- 单击自定义选项卡。
- 向下滚动，直到找到“自定义代码段”部分。
添加自定义 CSS
直接将您的样式规则粘贴到自定义 CSS 框中。
重要提示：
请勿在此处包含 <style> 或 </style> 标签。只需提供原始 CSS 代码。
示例 — 在自定义 CSS 框中添加 CSS：
/* Make the main header blue with white text */
.fc-portal-header {
background: #1e73be;
color: white;
}
添加自定义 JavaScript
直接将您的脚本粘贴到自定义 JavaScript 框中。
<b>注意：与 CSS 方框不同，对于 JavaScript，您应包含完整的 <script>和</script> 标签。</b>
示例 — 在自定义 JS 方框中添加 JS：
<script>
console.log("FluentCommunity portal is ready!");
</script>
最后，单击“保存自定义 CSS 和 JS”按钮以应用您的更改。
方法2：使用代码片段插件
此方法适用于希望代码更整洁或需要实现更复杂逻辑的用户。它涉及使用 FluentCommunity 的开发者“钩子”（add_action）。
摘要的最重要规则
当你使用 FluentCommunity 钩子（例如 add_action(…）时，你实际上是在使用 PHP 代码。因此，你必须始终创建一个PHP 代码片段, 即使你的目标是在其中添加 CSS 或 JS。这一点是最常见的困惑之处。
使用代码片段插件添加自定义 CSS
- 在您选择的插件中创建一个新的代码片段（例如：FluentSnippets)。
- 将代码片段类型设置为 PHP。
- 粘贴以下 PHP 代码结构。您的 CSS 规则应放在 style 标签内。
示例 — 用于添加 CSS 的 PHP 代码片段：
add_action('fluent_community/portal_head', function() { ?>
<style>
/* Add all your custom CSS rules here */
.fc-portal-header {
background: #1e73be;
color: #fff;
}
</style>
<?php });
使用代码片段插件添加自定义 JavaScript
同样，您将使用PHP 代码片段将您的 JavaScript 钩入页面页脚，以获得最佳性能。
- 创建一个新的 PHP 代码片段.
- 粘贴以下代码结构。您的 JS 代码应放在 <script> 标签内。
示例 — 用于添加 JavaScript 的 PHP 代码片段：
add_action('fluent_community/portal_footer', function() { ?>
<script>
// Add your custom JavaScript here
console.log("Custom JS loaded for FluentCommunity!");
</script>
<?php });
您应该使用哪种方法？
- 如果：您是初学者，或需要快速进行简单样式更改，建议使用内置编辑器。
- 如果：您是开发者或高级用户，需要整理大量代码、链接外部文件或添加条件逻辑，请使用代码片段插件。
故障排除
- CSS/JS 无法正常工作？→ 首先，务必清除浏览器缓存以及您网站上的所有缓存插件。
- 添加代码片段后，网站显示已损坏？→ 请停用您最后添加的代码片段。问题很可能出在您的代码中存在一个小错误。
- 代码片段中的代码无法运行？→ 请仔细检查您是否创建了PHP 代码片段，以及您的自定义代码是否正确放置在 <style> 或 <script> 标签内。
