如何在 WordPress 中嵌入 Trello 板和卡片？

已发表: 2020-07-14

您是否有大型的基于团队的项目需要管理，并且您想充分发挥 Trello 的潜力？ 您是否打算将 Trello 看板直接集成到您的网站？ 如果是这样，那么您来对地方了！ 在本指南中，我们将向您展示在 WordPress 中嵌入 Trello 看板和卡片的 3 种不同方法。

为什么要在 WordPress 中嵌入 Trello 看板和卡片？

Trello 是目前最流行的可视化项目管理工具之一。 几乎每个协作项目或项目团队都喜欢 Trello，因为它的设计和轻松设置短期和日常任务的能力。 只需构建您的板，添加您的卡片，并设置您计划的任务列表。 此外，您还可以在设置任务板时享受其他功能，例如基于规则的任务触发器、日历命令、自定义卡片、板按钮等等。 当然，您也可以在您的网站上嵌入 Trello 看板。

那么在 WordPress 中嵌入 Trello 有什么优势呢？ 虽然 Trello 的移动应用程序和 Web 浏览器查看器已经足够，但将 Trello 与您的网站集成有几个优点。 一方面，有生产力。 随着您的团队能够快速访问您的 Trello 看板，他们可以更好地工作。 您可以为多个团队提供对特定公共板的访问权限，而不必担心它们会混淆不同的板或寻找它们的麻烦。 把它们贴在与它们相关的卡片和板上，你会让他们的生活更轻松。

此外，您可以在页面和帖子上显示卡片，以向其他站点管理员或其他客户提供信息。 管理在您的网站上运行的大型项目？ 只需嵌入您的 Trello 看板和卡片，让您的团队更有效地相互合作，而无需直接邀请多个用户加入您的 Trello 看板。

如何在 WordPress 中嵌入 Trello 板和卡片？

在本指南中，我们将向您展示在 WordPress 中嵌入 Trello 板和卡片的 3 种方法：

  1. 使用嵌入脚本
  2. 使用 iFrame
  3. 带插件

让我们仔细看看它们中的每一个。

1. 使用嵌入脚本连接 Trello 和 WordPress

Trello 允许您使用 javascript 代码嵌入您的板和卡片的小快照。 但是，此 javascript 代码有其局限性。 一方面，它没有显示很多信息，也不是很容易定制。 此外，无法与嵌入进行交互，单击嵌入可将您直接带到板。

尽管如此，与其他方法相比，使用此脚本仍有许多优势。 首先，您可以嵌入您的私人版块并提供指向它们的直接链接，只需很少的信息即可识别它们。 此外，小快照特别适用于卡片。

A) 获取您的 Trello Board/Cards 链接

将其嵌入您的网站的一种方法是将代码添加到您的页面/帖子中。 首先，您必须获取您的 Trello Board/Card URL。 要获取您的 Trello 板 URL，请将其打开，然后在右侧边栏中，您将能够在右上角的 3 个点旁边看到一个“更多”按钮。 单击它，转到此板的链接，您将获得 Trello 板的链接/URL。

在 wordpress 中嵌入 trello 板和卡片 - trello 链接

或者，如果您想获取个人 Trello 卡的链接，只需先打开该卡即可。 然后，单击卡片底部的共享，您将在链接到此卡片部分下看到链接。

要将代码添加到您的 WordPress 页面和帖子，您可以使用嵌入代码免费插件。 该工具本质上允许您将脚本添加到页面/帖子的页脚或页眉。 这是在您的 WordPress 网站中嵌入 Trello 板和卡片的最简单方法之一，但您也不完全限于此。 您还可以使用增强文本小部件等插件，并将脚本直接放置在自定义小部件中。

所以现在，让我们继续安装嵌入代码插件。 为此，请打开仪表板侧边栏，单击插件 > 添加新的。 然后，使用最右侧的搜索栏搜索Embed Code 。 单击安装，一旦按钮变为激活，再按一次。 现在，插件已激活并准备就绪。

B) 使用嵌入脚本嵌入卡片

现在，您所要做的就是将以下脚本粘贴到您的页面/帖子上。

 <blockquote class="trello-card">
<a href="{url to card}">Trello Card</a>
</blockquote>
<script src="https://p.trellocdn.com/embed.min.js"></script>

只需将{url to card}更改为您的 Trello 卡片链接。 为此，只需按照上述步骤操作即可。 例如，要嵌入我们的 Trello 卡片，我们的脚本是：

 <blockquote class="trello-card">
<a href="https://trello.com/c/z****LZj/8-166-2020-07-02">Trello 卡</a>
</blockquote>
<script src="https://p.trellocdn.com/embed.min.js"></script>

要嵌入您的 Trello 卡片和板，您可以使用嵌入代码插件。 安装插件后，在帖子/页面编辑器下，您将看到标有“嵌入代码”的元编辑器部分。 您将看到Head 代码和Footer 代码框。 因此，您可以将脚本放入两个字段中的任何一个。 对于我们的演示，我们将使用页脚代码框。

只需粘贴自定义脚本，一旦您保存/发布您的页面或发布，Trello 卡将被嵌入。

C) 使用 Embed 脚本嵌入板

将板嵌入到您的 WordPress 页面/帖子的过程与卡片的过程相同。 您只需要为 Boards 使用不同的代码：

 <blockquote class="trello-board-compact">
<a href="{url to board}">Trello Board</a>
</blockquote>
<script src="https://p.trellocdn.com/embed.min.js"></script>

只需将 Trello Board 的链接粘贴到{url to board} 。 这应该看起来像这样：

 <blockquote class="trello-board-compact">
<a href="https://trello.com/b/g***h3Ec">Trello 板</a>
</blockquote>
<script src="https://p.trellocdn.com/embed.min.js"></script>

然后，转到要将 Trello 板添加到的页面或帖子，并将代码粘贴到页眉或页脚代码部分。 保存更改，就是这样！ 您已在您的网站上嵌入了 Trello 看板。

专家提示

使用脚本嵌入 Trello 板和卡对某些人来说是一个不错的选择，但它缺少一些您可能需要的功能。 一方面，它不是交互式嵌入，你所看到的只是一个基本的 Trello 板/卡，细节很少。 单击嵌入会将您带到实际的 Trello 看板，因此只需将即时链接添加到您的 Trello 看板/卡片，并显示最少的细节。

2) 使用 iFrame 将 Trello 与 WordPress 集成

考虑到嵌入脚本方法的局限性，使用iFrame可能是更好的选择。 特别是当您想在您的网站上显示 Trello 板/卡时。

只要您的看板是公开的，您就可以使用 iFrame 链接嵌入 Trello 看板/卡片。 您可以使用顶部工具栏中板标题旁边的可见性设置来更改板的可见性。 只需将其从 Private 或 Team 更改为 Public，一旦您同意提示，您的董事会应该准备好与 iFrame 链接。

现在，要找到 Trello 板的链接，请转到右侧边栏，然后单击 3 个点旁边的更多按钮。 然后，转到链接到该板，您将获得该板的 URL。

在 wordpress 中嵌入 trello 板和卡片 - trello 链接

或者，要获取单个卡片的链接，请打开卡片，单击共享，您将看到链接到此卡片下的链接。

将 iFrame 与 Trello 链接一起使用

获得链接后，将.HTML添加到链接末尾并保存。 例如，对于我们的板链接，我们将在末尾添加.HTML ：

 https://trello.com/b/g****Ec.html

然后，您需要做的就是在 WordPress 的 HTML 块中使用以下 iFrame 链接。

 <iframe src="https://trello.com/b/g******c.html">

只需将src属性内的链接更改为最后带有.HTML的 Trello 板/卡的链接，保存帖子/页面后，嵌入内容应显示在您的网站上。

为此，您需要使用可视化编辑器使用 HTML 块，然后粘贴您的 iFrame 链接。 为了更清晰的 Trello iFrame 窗口，我们将向链接添加更多属性。

完成后，您的嵌入应如下所示。

在 wordpress 中嵌入 trello 板和卡片 - iframe 预览

专家提示

使用 iFrame 嵌入 Trello 板和卡是一个不错的选择。 它是用户友好的，它是一种交互式嵌入，可以显示卡片或板信息，而无需将您重定向到实际的 Trello 板。

3) 使用插件在 WordPress 中嵌入 Trello Boards and Cards

在 wordpress 中嵌入 trello 板和卡片 - 插件标题

在您的 WordPress 网站上嵌入 Trello 板和卡片的最简单且对初学者友好的选项之一是使用WooTrello 。 这不是一个显示选项，而是一个可以与 Trello 集成的WooCommerce Checkout 挂钩。 此插件可让您将 WooCommerce 感谢页面与您的 Trello 板集成。 这样，您可以在客户每次下新订单时自动创建一个 Trello 看板。 因此，您可以使用自动创建的订单任务简化您的任务和详细信息，包括账单详细信息、日期和其他附加订单详细信息。

当然，该插件具有一些优点，例如清晰的界面和使用 WooCommerce 和结帐挂钩的轻松集成。 此外，您还可以为您的 Trello 视图启用一键式身份验证。 WooTrello 旨在支持 WooCommerce 并帮助您顺利运营商店。 因此，如果您正在经营一家企业，您可以允许插件在每次新订单或订单更新后创建一个新的 Trello 任务。

安装 WooTrello 插件

要从我们将 Trello 板与 WordPress 集成的第三种方法开始，您需要安装插件。 为此，请打开您的WordPress 管理仪表板，然后转到Plugins > Add New 。 然后，使用最右侧的搜索栏搜索WooTrello 。 接下来，单击安装，然后激活它。

在 wordpress 中嵌入 trello 板和卡 - 插件安装

使用 WooTrello 插件

安装并激活插件后，它会自动将您带到其设置屏幕。 或者，您可以通过单击管理侧边栏上的WooTrello打开插件。

然后，该插件可能会询问您是否允许向您提供功能更新通知并选择使用他们的诊断跟踪服务。 如果您想共享您的非敏感使用数据，请单击允许并继续。 或者，您可以按跳过。

获取您的 Trello 访问令牌

对于集成，您需要使用Trello API 将您的 Trello 板与您的 WordPress 安装同步。 单击Trello 访问代码字段上方最右侧的Trello 访问代码链接。

您将登录到您的 Trello 帐户，WooTrello 会询问您是否允许访问您的帐户信息。

在 wordpress 中嵌入 trello 板和卡片 - 插件允许

单击Allow表示同意，您将看到一个用于 Trello 访问的令牌。

复制此代码并打开打开插件页面的窗口/选项卡。 然后，将此令牌粘贴到在此处发布 Trello 访问代码字段并单击保存访问代码。

使用 WooTrello 集成您的 Trello 看板和结帐页面

要启用您的 Trello 板集成，请勾选启用/禁用框。 然后，使用下拉 Trello 板选项选择您的 Trello 板之一，然后使用 Select Trello 列表选择其中之一。

接下来，为您在 Trello 卡上显示的所有订单详细信息添加一个勾号。 执行此操作后，单击保存新结帐页面顺序设置。

然后，WooTrello 和 WooCommerce 页面结帐集成应该完成。 现在，每次客户在您的在线商店完成订单时，该插件都会根据您保存的设置自动创建一个 Trello 任务。

在 wordpress 中嵌入 trello 板和卡片 - 插件演示

奖励：通过 HTML 嵌入 Trello 看板

您还可以使用一些 HTML 在您的网站上显示您的 Trello 看板。 这不是最好的方法，因为它是非交互式的，但很容易实现。

要将 Trello 看板添加到您的 WordPress 网站，只需将以下 HTML 代码复制并粘贴到您的网站：

<blockquote class="trello-board-compact">
<a href="{url to board}">Trello Board</a>
</blockquote>
<script src="https://p.trellocdn.com/embed.min.js"></script>

现在，每次您插入代码的页面加载时，脚本都会找到卡片并将其替换为嵌入式版本。 有关这方面的更多信息，您可以查看此页面。

如何在 WordPress 中充分利用 Trello 看板和卡片？

将您的 Trello 看板嵌入 WordPress 只是第一步。 现在，是时候使用该工具来组织您的任务并提高工作效率了。

Trello 是最受欢迎的管理工具之一，但仅仅将它们添加到您的网站是不够的。 这里有一些技巧可以帮助您更好地组织卡片和白板，并将团队的生产力提升到一个新的水平。

  • 对任务进行分类：与其拥有一个充满任务的庞大列表，不如将它们组织起来。 第一步是对任务进行分类。 这取决于您的业务以及谁在使用该板。 例如，如果您正在为一组开发人员组织任务，您可以将任务分组为 Backlog、Selected、In Progress、Testing、Done (Live)。
  • 添加标签：标签是组织任务的最简单方法之一。 除了对任务进行优先级排序或将任务分配给不同团队非常有用之外，您还可以自定义标签并为其添加颜色。 这样，您的团队可以快速获得有关任务的清晰信息。
  • 使用电源：电源为您的 Trello 板添加额外的功能。 您可以将您的任务连接到 Google Drive、Calendar、Slack、Maps 和许多其他工具，以便将所有相关信息集中在一个地方。
  • 使板保持最新：卡片和板只有在它们是最新的时才有用。 因此，我们建议您指定一个人来确保团队更新卡片并正确使用标签。
  • 分配团队成员和截止日期：这似乎很明显，但非常重要。 每项任务都应至少有一个负责人和截止日期。

这些只是帮助您入门的基础知识，但您还可以做很多其他事情来充分利用它。

Trello 计划

尽管 Trello 免费提供了许多很棒的功能，但它也有两个高级版本，每位用户每月 12.5 美元起。 除了更高级的功能和更多选项外，我们最喜欢的功能之一是高级清单。 这允许您为每个清单项目分配团队成员和截止日期，这对于复杂的项目非常有用。 有关 Trello 不同计划的更多信息，您可以查看他们的定价页面。

结论

总而言之，Trello 是一款出色的工具，可以将您的项目和任务组织成板和卡。 因此，如果您想帮助您的团队提高工作效率，您应该在 WordPress 中嵌入 Trello 看板和卡片。

在本教程中，我们向您展示了在您的网站上嵌入 Trello 看板和卡片的 3 种方法。 它们都对初学者友好，并且各有利弊。 考虑到它提供的灵活性以及设置的容易程度，我们建议使用 iFrame 方法。 它将允许您添加交互式板或卡嵌入。

我们的指南非常庞大，并且有一些 WordPress 初学者可能会感到困惑的编码位。 因此，如果您有任何问题，请继续在下面的评论部分告诉我们。

最后，有关如何在您的网站上嵌入不同类型内容的更多信息，请查看我们的指南，了解如何在 WordPress 中嵌入 Google 表格。