这是一篇 Astra Pro主题（高级版）的 WP Portfolio 作品集功能教程。 如需视频教程可参考 Astra 主题入门。
Astra 是一款优质轻量级且多功能的 WordPress 主题，不论是新手或是有一定程度的 WordPress 玩家，使用它都是很棒的选择。
文章中，我会介绍 WP Portfolio 的多种类型用法，包括可定制化的展示页面，满足各类型的展示需求，像是文章 / 作品 / 服务案例等 ..
帮助你制作美观的展示页面，WP Portfolio 教程章节如下：
- 1. 开始前需准备？
- 2. WP Portfolio 是什么？
- 3. WP Portfolio 安装启用&凭证激活
- 4. WP Portfolio 一般设定
- 5. 建立作品集页面
- 6. Website 网站展示类型
- 7. Image 照片展示类型
- 8. Video 视频展示类型
- 9. Single Page 单一页面展示类型
- Astra 进阶版方案，更多教程？
- WordPress 学习资源
准备好了吗？ 我们开始吧：）
1. 开始前需准备？
Astra 是轻量多功能的热销主题，进阶版功能更加释放它的能力，可客制化程度更高。
本篇文章介绍的内容，是 Astra 的 Mini Agency Bundle 迷你代理商方案，才有的功能。
我们会建议使用Mini Agency Bundle方案就好。
开始前需完成购买安装 &凭证激活，详细操作流程可参考 Astra 进阶教程，内有手把手教程。
如果你正好奇，使用 Astra 这款轻量快速的多功能主题，能做出一些什么网站？
我在建立Blog、搭建形象网站、搭建购物网站，有做不同类型的网站示范，共通点就是都用Astra主题，应该会有效地帮助到你。
如果你有兴趣且购买了 Astra 进阶版方案，那将会得到更多定制网页的能力。
2. WP Portfolio 是什么？
WP Portfolio 是 Astra 开发专门制作作品集、展示页面、服务案例等 .. ，相关页面内容的插件。
它有多种作品型态可选择，像是 Website 网站展示、Image 照片 / 图片展示、Video 视频展示，或者是更万能的 Single Page 定制页面形式。
WP Portfolio 本身极为轻量，完全不会影响到网站速度，这跟 Astra 本身轻量快速的优点一样。
同时提供物品搜索功能、双层分类条件、滚动加载作品、Demo 演示作品导入、瀑布流展示等 .. 多种特色。
当然，WP Portfolio 同样支持主流的页面编辑器，像是 Elementor、Beaver Builder、Visual Composer .. 。
这代表能自由客制化网站页面，并当成展示页面的一部分，达成你的真正需求：）
3. WP Portfolio 安装启用&凭证激活
接下来我简单分 3 步骤，完成 WP Portfolio 安装启用&凭证激活。
Step1：下载 WP Portfolio 插件
前往并输入购买注册的账号&密码，然后登入。
然后，会看到 Astra 的相关下载文档都在这，我们找到 WP Portfolio 点击下载。
Step2：安装&启用 WP Portfolio 插件
前往 WordPress 后台 > 插件 > 安装插件，点击 上传插件，把刚下载的 WP Portfolio 上传安装。
安装完成后，记得点 启用 才算真正有激活（图略过）。 也可参考 如何安装 WordPress 插件。
Step3：输入 WP Portfolio 凭证激活
前往 Brainstorm Force 官网 > Account，点击 Licenses 凭证页面。
备注：这跟刚下载 WP Portfolio 文档，是同一个网站。
找到Mini Agency Bundle项目，会有WP Portfolio的启动凭证，我们把它复制下来等下会用到。
备注：这里的凭证页面都是重要资料，请妥善保存唷：）
回到 WordPress 后台 > 插件 > 已安装插件，点击 WP Portfolio 的 Activate License。
然后把刚复制的 WP Portfolio 凭证贴上并启用，就正式激活此插件啰。
凭证启用后，就会看到侧边栏有 WP Portfolio 作品集功能了，太棒了！
接下来的文章，我会带大家上手这款 Astra 开发的好用插件，准备好了就开始吧：）
4. WP Portfolio 一般设定
在开始使用 WP Portfolio 前，我们可先进行 Settings 一般设定，帮助接下来更好操作。
前往 WP Portfolio > Settings > General，可先参考下图的配置操作，完成后储存。
- Page Builder &Import Starter Templates：这是一起的功能，可用来导入指定的页面编辑器模板，方便用户快速看到 Demo。 （这边先不使用，因为导入模板太多，之后还要删掉会比较麻烦，跟着本文教程自行新增即可）
- Shortcode：制作 WP Portfolio 页面的短代码，等下会教如何用。
- Enable sorting by categories：开启分类排序功能。
- Enable sorting by other categories：开启双层分类排序功能（需同时满足情况，才会出现项目，这边先不勾选方便下面教程）。
- Display sites search box：显示搜寻框。
- Display responsive buttons：显示不同装置的切换按钮。
再来，切换到 Style 标签，可调整作品集显示方式。
像是可用滚动 or 点击加载更多作品、鼠标放置作品上方呈现的效果等 .. ，可参考下图设定。
- Show Portfolio On：更多作品显示方式，有 Scroll 滚动、Click 点击可选。
- Thumbnail Hover Style：鼠标放置作品上方呈现的效果，有 Default 默认、Image Scroll 图片滚动可选。
- Preview Bar：预览功能 Bar，可放置 Top 上方、Bottom 下方。
- Call to Action：作品加载完后，会出现的文字。
设定 WP Portfolio 布局部分，一行几列、每页几个等 ..，完成后储存。
最后来更改一下 WP Portfolio 页面的 Slug 路径，可以把 Astra 字拿掉会比较像自己的网站。
以上就是 WP Portfolio 相关的调整啰，接下来开始新增作品集页面：）
5. 建立作品集页面
这章节，我们需建立一个作品集页面，并放入 WordPress 菜单，这样前台访客才看得到。 我们分成简单 3 步骤完成。
Step1：复制 WP Portfolio 短代码
前往 WP Portfolio > Settings > General，先复制 Shortcode 短代码。
Step2：新增作品集页面
前往 WordPress 页面 > 新增页面，点左上角新增短代码区块，并贴上刚复制的那组。
接着可做一些页面设定，像是页面路径、封面图片、Astra 版面设定等 .. ，也可参考 WordPress 页面新增、Astra 入门教程。
可以顺便把Sidebar页面侧边栏隐藏（No Sidebar），这是针对单一页面设定的，不然怕等等版面太小，如下图。
完成后点发布（或更新），让这个页面上线。
备注：如果已经在 Astra 自定义 > Sidebar 有针对全网站设定过了，就不用再设定一次。
Step3：放入网站菜单中&结果预览
接着，需要把该作品集页面，放入到网站菜单中，这样前台访客才会看到。
前往 WordPress 外观 > 菜单，将页面放入菜单里，也可拖曳排序，完成后记得储存。 可参考 WordPress 菜单 也有示范。
最后看一下成果，会发现作品集页面，已经顺利出现在网站菜单中啰。
但点击进入是没有作品的状态，我们来看看如何新增作品：）
6. Website 网站展示类型
WP Portfolio 可新增不同类型作品，像是 Website 网站、Image 照片 / 图片、Video 影片、Single Page 单一页面。
这章节，先从 Website 网站类型作品开始示范。
前往 WP Portfolio > All Portfolio Items，點 Add New。
帮此作品命名，类型选 Website，然后点按钮新增。
输入网站作品标题、作品图片、网站链接等 .. 相关内容，下图有范例。
- Open in New Tab：是否另开窗口。 除非有特别需求不然不建议开启，因为享用不到 Astra 设计的设备切换浏览功能。
- Add Call-to-action：作品行动标语。 可以输入作品描述 or 填上公司联系方式，提升访客联络机会。
再来设定作品集分类，如果没分类可点 Add New Categories 新增，或是前往 WP Portfolio > Categories 也能新增（如下图）。
完成后点发布 or 更新，将作品上传。
注释 ：
1. WP Portfolio 有双重分类搜寻条件（Other Categories），如果 Settings > Enable sorting by other categories 有勾选（前面章节有提到），这功能才有用。
2. WP Portfolio 分类和一般的 WordPress 文章分类是不同的设定地方唷，别搞错了唷：）
最后，前往 WordPress 前台的作品集页面，就会出现刚新增的网站作品啰。
点击看一下作品，会发现还有 Astra 制作的设备切换浏览功能，真的非常的方便！
如果个人、公司提供的服务，需要有网站接口来展示，可以使用这功能：）
7. Image 照片展示类型
这章节示范新增Image照片/图片类型，如有相关的作品需展示，就可以使用这个类型。
前往 WP Portfolio > Add New，这次选择 Image 照片类型。
设定作品标题、 Thumbnail Image 作品展示缩图、Portfolio Image 作品图等内容。
设定作品集分类&其他相关设定，完成后点发布 / 更新，上传此作品。
前往 WordPress 网站前台看一下成果，会发现刚新增的 Image 照片 / 图片作品，已经顺利出现啰：）
8. Video 视频展示类型
这章节示范新增 Video 影片类型，如有相关的作品需展示，就可以使用这个类型。
前往 WP Portfolio > Add New，这次选择 Video 影片类型。
输入作品标题、作品缩略图、视频链接等 .. 。
设定作品集分类&其他相关设定，完成后点发布 / 更新，上传此作品。
前往 WordPress 网站前台看一下成果，会发现刚新增的 Video 影片作品，已经顺利出现啰：）
点击也会看到展示视频播放唷！
9. Single Page 单一页面展示类型
这章节示范新增Single Page单一页面类型，基本上就等于是多功能类型。
你可自行设计页面，就像平常制作 WordPress 页面一样，达到客制化网页设计需求。
当然，也能用 Elementor 之类的 热门页面编辑器，做到更多的作品展示设计。
前往 WP Portfolio > Add New，这次选择 Single Page 类型。
开始制作网站页面，可自行编写文字、上传图片 / 影片 .. ，这边我就先随意制作。
用 WordPress 一般编辑器 or Elementor 页面编辑器制作都可以。
额外提醒：如果想使用 Elementor 制作，请记得到 Elementor > 设定，把相关的内容类型打勾，才能套用 Elementor 功能唷（参考下图）。
回到刚刚的 WP Portfolio 页面，往下滑会看到 Single Page 细节设定，可设定 Thumbnail Image 展示缩图、Open Portfolio Item in 显示方式 .. 。
备注：显示方式有 Same Tab 同页签、New Tab 新页签、iFrame 新窗口。
然后进行 WordPress 页面的其他设置，像是页面网址、作品分类、封面图片、Astra 版型设计等 .. ，也可参考 WordPress 页面新增、Astra 入门教程。
如果想要全版画面，可把Sidebar设为No Sidebar即可。
完成后点击发布 / 更新。
前往网站前台看一下成果。
Good！ 就跟 WordPress 平常设计页面一样，可自由的定制展示页面了：）
以上就是 WP Portfolio 作品集功能的完整教程啰，不知道大家有没有学会呢！
如果有作品集页面的制作需求，或是有需求要使用类似的效果，都可以考虑使用这款 Astra 的 WP Portfolio 插件，很实用的。
原文链接：https://www.itaoda.cn/blog/10909.html，转载请注明出处。
评论0