如何在 WordPress 上创建图库模板
已发表: 2022-10-23(WordPress 图库教程)您想将图片库添加到您的 WordPress 网站吗? 画廊确实可以帮助您的页面和帖子栩栩如生,并使它们在视觉上对您的访问者更具吸引力。 在本教程中,我们将向您展示如何在 WordPress 上轻松创建图库模板。 我们还将介绍如何将图像添加到您的画廊,以及如何自定义画廊以匹配您网站的风格。 创建图库模板是以时尚和有条理的方式展示您的图像的好方法。 使用图库模板,您可以轻松添加和删除图像,并根据需要重新排列它们。 将图像添加到您的画廊很简单,可以从 WordPress 媒体库中完成。 要添加图像,请单击“添加媒体”按钮,然后选择“上传文件”选项卡。 从这里,您可以从计算机上传图像,也可以从媒体库中选择它们。 选择图像后,您可以通过单击“添加到图库”按钮将它们添加到您的图库中。 然后,您可以通过将图像拖放到您想要的顺序来重新排列图像。 当您对图库感到满意时,单击“发布”按钮以保存您的更改。 既然您知道如何在 WordPress 上创建图库模板,您就可以开始以更有吸引力和更有条理的方式显示您的图像了。
根据一项研究,如果网站的布局没有吸引力,38% 的网络访问者会离开网站。 一行或一列可用于排列 WordPress 画廊中的照片。 因此,您的访问者将通过页面上的更少空间获得更愉快的浏览体验。 在本教程中,我们将向您展示如何在 WordPress 中创建图库。 使用块编辑器,您可以轻松地将 WordPress 画廊添加到您的博客。 这种方法有很多缺陷,但下一种方法将帮助您获得更专业的外观。 两个最受欢迎的 WordPress 画廊插件是 Envira Gallery 和 Modula。
一旦您知道自己需要做什么,就无需担心在 WordPress 中创建画廊。 任何人都可以通过三个简单的步骤开始。 如果您想更上一层楼,插件和小部件是您的最佳选择。 哪种方法最适合您? 通过在下面发表评论告诉我们您的想法。
如何在 WordPress 中创建画廊

向您的 WordPress 网站添加图库是展示图像和视频的好方法。 添加画廊有几种不同的方法,但我们将向您展示使用内置 WordPress 画廊功能添加画廊的最简单方法。 要添加画廊,首先创建一个新帖子或页面。 然后,单击“添加媒体”按钮。 在“添加媒体”页面上,单击“创建图库”选项卡。 然后,选择要添加到图库的图像。 如果需要,您还可以添加视频。 选择图像后,单击“创建图库”按钮。 在下一页上,您可以选择图库中的列数,以及您希望如何链接图像。 对设置感到满意后,单击“插入图库”按钮。 就是这样! 您的画廊现在将出现在您的帖子或页面中。
使用 WordPress,您可以轻松地将图像添加到您的博客文章或页面。 当一个接一个地上传图像时,您可以将它们堆叠在一起,也可以将它们分成不同间距的均匀行。 可以使用数千个插件自定义和优化 WordPress 画廊。 使用 Envira Gallery 插件,您可以创建可在所有平台(如移动设备、平板电脑和台式机)上运行的完全响应式画廊。 使用 YouTube、Vimeo 和 Wistia,您可以将 Instagram 和 Dropbox 中的视频和照片上传到高质量的多媒体画廊中。 Angie Makes 的 Source Galleries Galleries 是一个简单的插件,可扩展 WordPress 画廊的功能。 NextGen Gallery 插件是一个强大的 WordPress 插件,允许您上传、编辑、预览和发布您的照片。 有多种显示样式可供选择,包括三列、五列和六列马赛克、砖石、滑块和旋转木马。 每个选项都包含许多控件,可帮助您控制大小、样式、时间、过渡、控件和灯箱效果。
WordPress 创建图库插件

有许多不同的 WordPress 创建图库插件可供用户选择。 每个插件都提供不同的功能,但它们都允许用户在其 WordPress 网站中轻松创建图像库。 一些最受欢迎的插件包括 NextGEN Gallery、 Photo Gallery和 WP Easy Gallery。
在本教程中,我们将介绍如何为 WordPress 创建图片库插件。 Instant Gallery 是一个简单、有吸引力的画廊,带有缩略图导航,您可以在将图像上传到帖子或页面时自动创建它。 您不需要任何特殊软件,无需配置任何设置,也无需跳过任何障碍即可开始使用。 在 WordPress 中,Instant Gallery 旨在成为通过将图像上传到帖子或页面来创建图像库的最方便、快捷和简单的方法。 为了实现我们的目标,我们将使用 HTML、CSS、PHP 和少量 JavaScript。 为了根据需要生成尽可能多的缩略图,下一节将使用 PHP。 当我们在上面的代码片段中使用 WordPress get_posts 函数时,我们使用我们标准中定义的 $args 检索符合我们标准的图像。
因为我们将结果存储在一个名为 $attachments 的变量中,所以我们以后可以很容易地看到它们。 由于此代码,第一个大图像被添加到画廊,其中包括画廊的结构组件。 以下步骤将为函数 WP_get_attachment_image 定义一组参数。 使用此函数,我们可以访问当前附件(我们当前的图像)并返回图像的完整大小。 除了图像中的属性外,此方法还使用与 $default_attr 数组中的参数对应的属性。 在步骤 2.5 中,导航被简化。 我们在此代码块的顶部添加了一个新的 #ig-thumbs 按钮,以帮助您入门。

在第 2 步中,我们将从当前 WordPress 帖子或页面中检索图像附件列表,并根据我们的标记生成一个图库。 填写简码后,我们将能够将图库添加到我们的 WordPress 帖子和页面。 除了大量关于简码的文章外,Wptuts 还提供了大量有用的信息。 Instagram 的即时图库具有令人难以置信的图像,这些图像是由它的魔力实现的。 jQuery 实现将允许您进行尽可能简单的简单交互。 我们将使用 WordPress 的 WP_enqueue_script 函数来运行脚本。 您可以避免冲突并确保在 WordPress 执行脚本时在正确的时间和位置加载脚本。
当我们点击缩略图时,我们希望看到一些事情发生。 我们的 jQuery 函数通过将缩略图替换为大图像,将缩略图替换为与单击的缩略图相对应的图像。 使用 WordPress 文件命名方案,可以完成图像交换。 例如,WordPress 将为名为 my-image.jpg 的图像生成各种不同大小的图像。 如果我们想将缩略图的尺寸更改为图像的不同尺寸,我们必须首先确定它的尺寸,然后我们可以轻松地切换这些尺寸。 如果我们想将图像大小从 150 x 150 更改为 600 x 300,我们只需使用 .jQuery 代码来交换图像。 接下来,使用 $('#ig-thumbs li img') 行来编写 'ig-thumbs li img'。
在此步骤中,我们只需删除从所有缩略图中选择的 CSS 类。 通过拖动下面的线,您可以添加所选类别的类别。 Instant Gallery 的 CSS 现在包含在第 4 步中。我们现在可以更改我们的设计,使其看起来更像一个图片库。 我们的 CSS 易于理解且易于使用。 创建画廊必须遵循的基本选择器和样式。 以下步骤将引导您完成在 WordPress 中加载 CSS 的 Enqueue Style 方法。
现在图像库功能齐全,我们可以用更多的数字表达自己。 由于 Instant Gallery 的代码太长,无法在此处完整显示,您可以下载并使用源文件进行播放。 为了使这个图库成为从上传到 WordPress 帖子的图像自动生成图库的最简单、最快和最方便的方法,我们做到了。
WordPress画廊简码
WordPress图库短代码是在您的网站上显示图像的好方法。 您可以使用短代码在帖子或页面中显示图像库,也可以使用它来显示单个图像。 要使用图库短代码,只需将短代码添加到您的帖子或页面。 您可以将短代码添加到内容编辑器,也可以将其添加到自定义字段。 图库短代码有许多参数可用于自定义图库的显示。 例如,您可以使用 columns 参数来指定图库中的列数。 您还可以使用链接参数来指定图像链接到的位置。 默认情况下,图像链接到全尺寸图像。 但是,您可以使用 link 参数链接到附件页面,也可以使用它链接到自定义 URL。 图库短代码是在您的网站上显示图像的好方法。
您可以使用简单的简码将图片库添加到您的帖子和页面。 您在短代码中指定的 ID 将允许您包含在帖子 URL 中不一定可见的图像。 对于没有明确 ID 的画廊,默认的预期行为是让其中的所有帖子显示为帖子父级。
如何在您的网站上嵌入画廊
将下面的代码复制并粘贴到您网站文档的正文中,以向其中添加图库。
img src=”gallery.jpg” alt=”画廊”/
如何在 WordPress 中制作滚动画廊
使用 Jetpack Tiled Galleries 之类的插件可以轻松创建 WordPress 中的滚动画廊。 安装并激活插件后,您可以通过添加媒体 > 创建图库来创建新图库。 选择要包含在图库中的图像,然后从类型下拉菜单中选择平铺马赛克选项。 然后,您可以调整图库的设置,包括列数和图像大小。 对设置感到满意后,单击“插入图库”按钮将图库添加到您的帖子或页面。
本文教您如何在 WordPress 中创建可滚动的图片库块。 本教程将引导您完成创建古腾堡可滚动画廊块的整个过程。 如果您刚刚开始为 WordPress 创建自定义 Gutenberg 块,您应该做的第一件事是阅读如何为 WordPress 创建自定义 Gutenberg 块 - 初学者指南。 借助道具,可以自定义媒体占位符。 同时,我们的块将仅显示来自媒体库的一些图像作为输入。 我们媒体占位符中的 onSelect 道具是一个有用的图像选择工具。 用户现在可以通过添加工具栏控件来编辑图库。
用户应尽快选择这些图像,使用已存储在块中的一些图像。 在前端视图中,我们为我们的块生成一个静态标记。 另外,在主图形标签中添加了一个 data-direction=right 属性,它本质上告诉了动画方向(目前很难从左到右区分)。 配置选项将分为三个部分。 为了完成这个特定的配置,我们将使用一个内置的 WordPress toggleControl 组件。 此外,我们将为将显示在页面顶部的常规控件创建一个新面板。 默认情况下,应在前端使用此特定属性创建动态类。
如何在 WordPress 中创建可滚动菜单?
导航到屏幕顶部,然后单击“屏幕选项”按钮。 如果您在标有“类”的框中,请确保选择“CSS 类”。 然后您可以打开您的菜单,导航到每个子菜单名称,然后在 CSS 类(可选)字段中输入 SubMenu1 以使第一个菜单具有滚动功能,并输入 SubMenu2 使第二个菜单具有滚动功能。