通过三个简单的步骤创建 WordPress 图库主题
已发表: 2022-10-22WordPress 图库主题是在线展示照片和图像的好方法。 创建画廊主题有多种不同的方法，但最流行的方法是使用像 NextGEN Gallery 这样的插件。 创建 WordPress 画廊主题是一个相当简单的过程，但是您需要记住一些事项。 首先，您需要选择一个可以帮助您创建图库的插件。 接下来，您需要选择一个可以正确显示您的画廊的主题。 最后，您需要上传图片并配置图库设置。
根据研究，如果网站对他们没有吸引力，38% 的访问者会离开网站。 在 WordPress 主题上，您可以按行和列排列照片。 访问者在使用此页面时将体验到更好的浏览体验，因为它比其他浏览器更简洁。 我们在本教程中的目标是向您展示如何在 WordPress 中创建画廊。 可以使用 Gutenberg 块编辑器将 WordPress 画廊添加到博客中。 尽管这种方法缺乏许多功能，但如果您愿意，可以使用它来获得更专业的外观。 WordPress 画廊插件如 Envira Gallery 和 Modula 是最受欢迎的。
一旦您对方法有了很好的了解，创建 WordPress 画廊并不难。 任何人都可以按照本指南中的步骤进行操作。 如果您想将您的网站提升到一个新的水平，插件和小部件是必不可少的。 哪种方法适合您？ 在下面的评论部分，请让我们知道您的想法。
如何在 WordPress 中创建动态图片库
设置数据源后，您可以使用 FooGallery PRO（Expert 或 Commerce）创建新的动态图库。 为此，请转到“添加图库”菜单。 您可以通过单击添加媒体链接从其他来源添加媒体。 现在将确定您将用于创建图库的数据源。
您网站上的动态元素是增加读者与您的内容互动的可能性的绝佳方式。 您的网站可以配备各种动态元素。 在这篇文章中，我们将讨论什么是动态画廊以及它的含义。 您还可以在我们的讨论中了解如何设置自己的动态画廊。 动态图库是一种添加到您的网站并使其脱颖而出的简单方法。 如果您想在您的 WordPress 网站上合并动态图库，您将需要必要的工具。 FooGallery PRO Commerce 允许您从 WooCommerce 产品创建产品画廊。
FooGallery PRO（专家或商务）只需单击几下鼠标即可轻松创建动态画廊。 这将取决于您希望画廊从中提取图像的来源。 例如，一个动态的 WooCommerce 画廊可以有多种选项，例如排序顺序，以及作为价格的描述。 如果您正在使用照片库并想要包含动态元素，那么这对您来说是一个很好的选择。 如果您想使用 WooCommerce 产品创建动态产品库，您只需更新您的 WooCommerce 产品以反映更改。 您可以使用多个数据源之一轻松对媒体进行排序和分类，然后使用媒体选择器显示它。
如何在 WordPress 中制作滚动画廊
您可以通过几种不同的方式在 WordPress 中创建滚动画廊。 一种方法是使用像 Jetpack 或 NextGEN Gallery 这样的插件。 这些插件将允许您创建可以滚动浏览的图像库。
创建滚动图库的另一种方法是使用内置此功能的 WordPress 主题。某些主题将允许您创建图像库并将它们显示在网站的可滚动区域中。
如果你想在不使用插件或主题的情况下创建一个滚动画廊，你可以使用一些代码来创建一个。 有几种不同的方法可以做到这一点，但一种方法是使用 jQuery Cycle 插件。 该插件将允许您创建可以滚动浏览的图像库。
安装插件后，您可以使用短代码 [cycle] 将图库插入您的 WordPress 帖子或页面。
在接下来的步骤中，我们将为 WordPress Gutenberg Hub 创建一个可滚动的图片库块。 本教程的目标是引导您完成创建古腾堡可滚动画廊块的整个过程。 使用此初学者指南了解如何为 WordPress 创建自定义 Gutenberg 块。 道具可用于使媒体占位符更灵活。 因为用户从媒体库输入图像，所以我们的块此时不会按预期运行。 我们的媒体占位符包括 onSelect 道具，可用于选择图像。 允许用户修改图库的工具栏控件 用户完成选择块中的图像后，他或她就可以使用该块呈现它们。
换句话说，我们在前端视图中为我们的块生成一个静态标记。 我们还在主要图形标签中添加了一个 data-direction=”right” 属性，它本质上保存了当前动画方向（目前无法更正方向）。 这样，我将每个配置选项分为三个部分。 我们将为此配置选项使用 WordPress-builtToggleControl 组件。 除了新面板之外，我们还将创建一个新面板来容纳我们的常规控件。 让我们在前端使用这个特定属性创建一个动态类。
幻灯片提示
通过单击预览，您可以看到正在运行的幻灯片。 通过单击右下角的图标，您可以更改速度、音量等。 如果要将幻灯片转换为全屏视频，请单击左下角的全屏按钮。
WordPress 创建图库插件
有许多不同的方法可以为 WordPress 创建图库插件。 一种流行的方法是使用 NextGEN Gallery 插件。 此插件允许您在 WordPress 网站中创建图片库。 另一个流行的插件是 WP-SimpleViewer 插件。 此插件允许您在 WordPress 网站中创建一个简单的图像库。
在本教程中，我们将引导您了解如何为 WordPress 构建图片库插件。 这是一个简单、吸引人的画廊，带有缩略图导航，每当您将图像上传到帖子或页面时，它都会自动生成。 它可以正常工作，无需任何特殊设置、配置选项或跳线。 Instant Gallery的主要目标是尽可能简单地将图像上传到 WordPress 帖子或页面，以便创建图像库。 我们将使用 HTML、CSS、PHP 和一点点 JavaScript 来实现我们的目标。 下一节将使用 PHP 来生成尽可能多的缩略图。 Get_posts 在上面的代码片段中用于根据 $args 检索符合我们标准的图像。
结果可以存储在名为 $attachments 的变量中。 此代码显示画廊主图像部分中的第一张大图像，它代表画廊的主要结构元素。 以下步骤将引导您完成为函数 WP_get_attachment_image 定义参数数组的过程。 它通过抓取当前附件（我们当前的图像）返回图像的整个大小。 此外，将应用与 $default_attr 数组中指定的参数相对应的属性。 在步骤 2 中，显示导航菜单。 我们在此块顶部包含的#ig-thumbs 列表包含许多指针，可帮助您了解如何浏览代码。
我们已经将上面的代码编写为 Step 2.4 包的一部分，它将从以前的 WordPress 帖子或页面中检索图像附件列表，并根据我们使用的标记生成一个图库。 下一步是向我们的 WordPress 帖子或页面添加简码。 在 Wptuts，我们有许多关于短代码的优秀深入文章，包括一些优秀的文章。 Instagram 的 Instant Gallery 建立在魔术的基础上。 要达到 jQuery 所需的基本交互级别，函数应该是基于 jQuery 的。 因此，我们将使用 WordPress 的 WordPress WP_enqueue_script 函数将脚本插入 WordPress。 在正确的位置和正确的时间存在脚本可确保 WordPress 不会遇到任何冲突。
当我们单击缩略图时，我们希望发生一些事情。 在我们的 jQuery 函数中，我们将缩略图替换为与单击的缩略图相对应的大图像。 WordPress 文件命名方案允许您执行图像交换。 上传时，WordPress 将为名为 my-image.jpg 的图像生成多种不同尺寸。 在更改缩略图的尺寸之前，我们需要知道图像其他尺寸的尺寸。 例如，如果我们想将 my-image-150×150.jpg 替换为 600×300 的中型图像，我们将使用 .jQuery 函数。 以下行是 $('#ig-thumbs li img') 并将首先开始。
所有缩略图图像都简单地从已选择的 CSS 类中删除。 结果，点击图像的类别被添加到此。 即时画廊的 CSS 可以在第 4 步中找到。最后，我们将为我们的作品设置样式，使其看起来更像一个图像画廊。 CSS 不需要太多时间来掌握。 画廊应该只有基本的选择器和样式。 以下步骤将引导您了解如何在 WordPress 中使用 enqueue 样式加载 CSS。
最后，我们的图片库尽其所能。 Instant Gallery 的代码足够长，可以在此处完整显示； 您可以下载源文件并自行使用它们。 这个图库的目的是成为从上传到 WordPress 帖子的图像自动生成图库的最简单、最快捷的方法。