如何在 WordPress 中创建前端媒体库

由心敲暮色的鼓

正在寻找一种方法来为您的 WordPress 网站创建一个访问者可以浏览的前端媒体库？ 你来对地方了！

图像的前端媒体库示例

虽然核心 WordPress 媒体库在组织文件方面做得很好 仪表板，有时您可能希望网站访问者也可以访问这些文件。

前端媒体库可以方便地显示：

  • 大量文件（尤其是图像）例如，您可能需要显示比画廊可以处理的更多的图像。 在这种情况下，带有搜索、过滤和排序选项的前端媒体库将更加用户友好。
  • 非图像文件如果您需要显示 PDF 或音频文件等文件，前端媒体库提供了一种使这些文件可访问的简单方法。 您甚至可以使用它来创建文档库。

在本文中，我们将向您展示如何 在 WordPress 中创建前端媒体库 使用 Document Library Pro 插件。 完成后，您将能够创建具有专业外观的库，并具有分页、AJAX 搜索、延迟加载和排序/过滤等可选功能。

虽然上面的示例使用了图像，但您可以将这些相同的原则用于其他媒体类型，如 PDF、音频文件等。

让我们潜入吧！

为什么 Document Library Pro 是最好的 WordPress 前端媒体库插件

带有文件夹的文档库

简而言之，Document Library Pro 创建了一个“文档”帖子类型，您可以在其中存储有关要显示的每个文件的信息。 文档帖子链接到 WordPress 媒体库中的文件，以便您可以在前端显示它们。 客户可以单击链接、按钮或文件类型图标来立即查看或下载媒体文件。

继续阅读以了解如何从 WordPress 媒体库中获取文件并将它们显示在您网站上的可搜索表格或网格布局中。 除了显示 WordPress 存储在媒体库中的基本信息外，我还将向您展示如何添加和显示有关每个文件的额外数据。 很快您就会知道创建自己的前端 WordPress 媒体库所需的一切。

如何在前端显示来自 WordPress 媒体库的文件

WordPress 文档库网格

接下来，我将告诉您如何使用 Document Library Pro 插件在网站前端直接显示来自 WordPress 媒体库的文件。

您将学习如何创建一个表格，在前端列出以下任何（或全部）信息：

  • 文件名 – 带有或不带有在单独页面上查看文件的链接。
  • 标题 – 文件名。
  • 图片 – 代表媒体文件的特色图像。
  • 标题 – 这是显示每个文件的描述或摘要的有用方式。
  • 文件大小和文件类型 – 这些都是自动生成的。
  • 日期 – 例如媒体文件添加到库的日期，以及上次修改的日期。
  • 任何其他类别、自定义字段或分类法 您选择添加。 您可以使用它们来存储文件大小、文件类型等信息，添加任何额外的描述性文本，甚至添加额外的链接、图像、图标或下载按钮。
  • 下载链接 – 用于下载媒体文件或在浏览器中打开的链接、按钮或文件类型图标。

您还将学习如何以更简单的网格布局列出媒体库文件，每个文件都显示在自己的磁贴中。

第 1 步 – 添加媒体库文件

首先，我将告诉您如何将媒体库文件转换为“文档”，以便您可以在前端显示它们。 不要担心“文件”这个词——你可以用任何类型的文件来做到这一点！ 这可能是图像（例如 jpg 或 png）、电子表格（例如 csv 或 xls），甚至是音频或视频（例如 mp3 或 mp4）！

您可以通过选择 WordPress 媒体库中已有的文件来完成此操作。 您还可以将新文件拖放到 WordPress 管理员中。

在开始之前，请安装 Document Library Pro 插件并按照屏幕上的说明激活您的许可证密钥。 然后，您可以开始将媒体文件添加到前端媒体库。

添加现有媒体文件

将媒体库文件添加到文档库

  1. 前往 媒体 WordPress 管理员的部分。
  2. 确保您在列表视图而不是网格视图上。 （您可以使用 WordPress 媒体库左上角的蓝色图标切换两个视图。）
  3. 勾选所有要在前端显示的媒体库文件。
  4. 单击“批量操作”下拉菜单并选择“添加到文档库”。
  5. 接下来，前往 文件 WordPress 管理员的部分。 您会看到每个媒体库文件都已添加为“文档”。 根据需要进行任何更改。 例如，如果您打算在前端 WordPress 媒体库中显示文件名，那么您可能需要编辑每个文档的标题以使其更具可读性。

拖放新文件

将文件批量上传到文档库

  1. 前往 文件 → 导入 WordPress 管理员的部分。
  2. 将文件直接拖放到页面上，或单击以浏览并选择它们。
  3. 这会将文件添加到媒体库，并将每个文件添加为您可以在前端显示的文档 – 完成下载文件的链接。 同样，对您计划显示的关于每个数据的数据进行任何更改。

第 2 步 – 在前端列出媒体库文件

首先，我将介绍如何创建一个前端 WordPress 媒体库，该库使用 WordPress 本身存储的有关每个文件的信息。 之后，我将告诉您如何存储有关文件的额外信息并将其显示在媒体库中。

  1. 在 WordPress 管理员中，转到插件设置页面 文件 → 设置.
  2. 浏览设置并选择您希望前端媒体库的外观和行为方式。 有很多设置，这里总结了对在前端列出媒体文件最重要的设置：
    1. 列 – 选择要显示的有关媒体文件的列。 确保包含“链接”列，以便人们可以下载媒体文件。 如果您为每个媒体文件添加了特色图片，则也包括“图片”列。 您还可以包含文件大小和文件类型等列。
    2. 文件夹 – 如果您想根据类别将媒体文件构建到文件夹中，请启用此选项。 这有助于人们按类别查找文件。
    3. 链接选项 – 有几个选项可以选择下载链接在前端 WordPress 媒体库中的工作方式。 如果您要显示不同的文件类型，那么最好启用“图标”选项。 这会显示文件类型图标，以便人们知道他们将要下载的文件类型。 您还可以选择是否在新选项卡中打开指向媒体库文件的链接。
    4. 过滤器 – 如果您添加了媒体库类别和标签（在 文档 → 类别 和 文件 → 标签）， 然后加 doc_categories,doc_tags. 这将在前端媒体库上方添加类别和标签过滤器下拉列表。
    5. 延迟加载 – 如果您要显示的媒体文件超过几十个，请启用此选项。

查看该页面，您将看到一个前端 WordPress 媒体库，如下所示：

前端 WordPress 媒体库过滤器

此屏幕截图包含一个显示特色图像的图像列，我们已将其重命名为“内容”。 如果您只显示图像并且不想为每个文档添加特色图像，那么您可能更喜欢使用这种使用 Posts Table Pro 插件的方法。

您还可以显示非图像文件（例如 PDF、XLS 或 DOCX），例如：

更改列标题

对您的前端 WordPress 媒体库进行分类

WordPress 文档库插件

Document Library Pro 插件可让您对媒体库文件（即文档）进行分类并添加标签。 这些使您可以在后端保持井井有条，同时允许访问者按媒体类别和标签进行过滤。

要设置您的媒体库类别和标签，请访问 文档 → 类别 和 文件 → 标签. 根据需要添加类别和标签，然后根据需要将它们应用于每个文档。 如果您正在使用批量导入功能，那么您还可以包含一个类别和标签列来自动执行此操作。

查看  Barn2 插件适合我吗？ 先试后买

向您的 WordPress 媒体库添加额外字段并在前端显示它们

您还可以添加额外的字段以显示在前端 WordPress 媒体库中。 有两种类型的字段可用：

  • 自定义字段使用这些列出有关每个文件的唯一信息。 例如，如果您想为每个文件添加额外的摘要或描述性文本，或者存储参考号，那么您需要一个自定义字段。
  • 自定义分类法将这些用于您希望能够过滤并用于对文件进行分组的信息。 例如，如果您想存储每个文件的年份并在前端媒体库上方添加年份过滤器下拉列表，那么您需要为此进行分类。

如何添加自定义字段

  1. 安装 豆荚 在您的 WordPress 网站上。
  2. 您将在 WordPress 管理员的左侧看到一个新的“Pods 管理员”链接。 单击此按钮并转到“编辑 Pod”。
  3. 下一个屏幕列出了您网站上的所有帖子类型。 单击“文档”帖子类型。
  4. 接下来，您将看到一个页面，您可以在其中管理 WordPress 媒体库的自定义字段。 单击“添加字段”并为您要创建的每个自定义字段添加标签和名称。 在下面的示例中，我创建了一个名为“文件大小”的自定义字段，标签为“大小”。 （记下标签 – 您将需要它来显示 WordPress 前端媒体库中的自定义字段。我们将在一分钟内完成）
将自定义字段添加到 WordPress 媒体库
  1. 单击“保存 Pod”。
  2. 现在编辑 WordPress 管理员的“文档”部分中的每个项目。 您将在页面底部看到这些自定义字段。 使用它们来存储有关每个文件的额外信息。

如何将自定义分类法添加到 WordPress 媒体库

  1. 去 Pods 管理员 → 添加新的 并点击 创建新的：
创建新的自定义帖子类型
  1. 从“内容类型”下拉列表中选择“分类”。 将其命名为“前端媒体库项目”，然后单击下一步：
自定义帖子类型名称
  1. 在下一个屏幕上，转到“高级选项”选项卡并向下滚动到“关联的帖子类型”部分。
  2. 勾选“文档”框。 这告诉 Pods 在文档库中提供新的分类。
  3. 单击“保存 Pod”。

现在，当您在 WP 管理员的“文档”部分编辑文件时，您将看到右侧的分类。 它就像类别一样工作，因此您可以添加任意数量的术语以以不同方式标记文件。

显示自定义字段和分类

好的，现在您知道如何使用自定义字段和分类法来存储有关 WordPress 媒体库中每个项目的额外信息。 但是如何在前端显示呢？

我们接下来会这样做。

  1. 返回 Document Library Pro 插件设置页面（文件 → 设置）。
  2. 再次找到“列”选项。 现在您需要扩展之前添加的列列表：
    • 要添加自定义字段列，请添加 cf: 后跟自定义字段名称（例如 cf:reference)
    • 要添加自定义分类列，请添加 tax: 紧随其后的是自定义分类蛞蝓（例如 tax:document_year)

例如，您的列列表可能是： title:Name,excerpt,cf:reference,tax:document_year

WordPress 前端媒体库示例

在 WordPress 中创建前端媒体库的简单方法

WordPress 文档库

WordPress 媒体库很棒，可惜它通常只在后端可用。

通过使用 Document Library Pro 插件，您可以获取现有的媒体库文件并将它们显示在您网站的前端，供所有人查看。 使用本教程中的建议和技巧，您会发现在控制前端媒体库的功能方面具有极大的灵活性。

还有其他关于使用 Document Library Pro 在 WordPress 中创建前端媒体库的问题吗？ 发表评论，我们会尽力提供帮助！

类似文章