avada外贸建站主题WordPress建站Portfolio产品详情页操作流程全攻略（详细图文教程）

作者zarekme
quality,Q 70

avada外贸建站主题产品分类页面和产品(详情)页面怎么建？

产品详情页面用 Page 还是 Portfolio 来创建？

  • 中存在的 portfolioitems或avadaportfolio 怎么修改 products 产品汇总页中点击具体产品页url
  • portfolioitems或avadaportfolio 怎么修改 products 产品汇总页中点击具体产品页url 带着个
  • products 产品汇总页中点击具体产品页url 带着个 portfoliocatsxxxxx 的尾巴怎么去掉
  • 怎么修改 products 产品汇总页中点击具体产品页url 带着个 portfoliocatsxxxxx
  • 具体流程 portfolio 作为产品详情页url 中存在的 portfolioitems或avadaportfolio
  • portfolio 作为产品详情页url 中存在的 portfolioitems或avadaportfolio 怎么修改

其实 Product 这些页面 Avada 的作者认为不管是 B2B 还是 B2C，最好是用 WooCommerce 插件来做。但是，Avada 主题本身就比较复杂了，再去安装 WooCommerce 来做产品系统，感觉太繁琐，所以一般来说，B2B 的外贸网站是不会考虑装 WooCommerce 的，但 B2C 的外贸网站是可以用的，至少 WordPress Avada+WooCommerce 也比 Magento 简单多了。Avada免激活汉化版下载：WordPress 最牛的商务主题之一：Avada主题中文汉化版[更新至v7.6.1]
对于外贸 B2B 网站，通常就用 Portfolio 或者 Page 来建立，两者都可以。用 Page 也可以创建，但是会有点麻烦。因为不是所有的 page 都是产品详情页，比如有些是 about us, contact, resource, FAQ 等等，所以如果通过Avad主题的 theme options 对整体的产品详情页进行布局或功能的设置的话，就没办法单独对产品页类型的 Page 来设定。

因此，我们最好使用 Portfolio 来创建产品详情页面。而且，最新版的 Avada 主题对 Portfolio 的修改使得我们更适合用 Portfolio 来作为产品详情页了。

产品分类页面怎么创建？用 Portfolio Category 还是 Page?

由于 Portfolio Category 页面无法编辑，因此我们在 Portfolio 模块创建了 Portfolio Category 之后，也要通过 Page 来创建一次 Category Page。

总的来说，即：每个产品的分类先用 Portfolio 建立一个 Portfolio Category，同时也在 Page 中建立一个 Porduct Category，在该页中用 Fusion Builder 中的 Element 来调用 Portfolio Category。每个具体的产品用 Portfolio 建，并选择好对应的 Portfolio Category。

如果你以前安装过 Avada：以前的 AVADA 版本是在 Fusion Page Options 中设置 Portfolio 选项，现在新的版本中，Page页的 Fusion Page Options 中不再包含 Portfolio了，这是作者出于优化的目的进行的改动。现在的 Avada，我们直接在 Page中用 Fusion Builder 中的 Container 容器中添加 Element，在 Element 中有 Portfolio，用这种办法来添加并选取要展示的 Portfolio Category，即可。

avada外贸建站具体流程：

Step1: 确定你的产品的结构

avada外贸建站主题

这几乎是最简单的产品结构了，产品分类只有一层。

有些行业分得比较细，产品分类有两级：大分类 – 子分类 – 具体产品

avada外贸建站教程

这里由于本文篇幅太长，我们就按照简单的情况来写吧。

按照我们在二十三节所述，产品分类主要是：Exterior Led Lights 和 Interior Led Lights。

Step 2: 创建 Portfolio Categories

在 WP 左侧菜单【Portfolio】-【Portfolio Categories】中，依次添加这2个类别。

avada外贸建站

1636009965 004e86a8e456d926e53c6f1c2b7f7ac6

Step 3: 为每个具体的产品创建一个 Portfolio 作为产品(详情)页

Step 3.1) 先为所有 Portfolio 产品页设置全局的默认值

我们新建 Portfolio 时，在新建的页面编辑器下方也会有 Fusion Page Options。Fusion Page Options 这个大家应该不陌生了，前面也讲了这个。其中会有 Portfolio 选项。

然后我们一般去在 Fusion Page Options 中去设置一下 Portfolio 的选项。在 Fusion Page Options 的左侧第一个选项就是 Portfolio，

1636009966 0b0cc55df87c07ce75b14fa29ef2c657

仔细看这张截图，对比你的网页，你会发现，我的截图上的 Default 的值跟你的不太一样。为什么呢？

首先我们想想，如果我有100个产品，那么要建立100个 Portfolio，如果每个 Portfolio 创建时还要在下面的 Fusion Page Options 再设置一些细节，那么工作量将会很大。那么有没有针对 Portfolio Single Post 的统一的设置呢？当然有！

在 【Avada】-【Theme Options】-【Portfolio】- Portfolio Singe Post，按照截图进行如下配置：

1636009966 8ab1f7c2f6e17e63c624ac15b3ff8ce2

1636009966 dd9cbc2c4098bdd9568377ded33fa273

保存之后，我们重新来创建新的 Portfolio。此时这些值就已经被记录为 Default 值了，这样无需每建一个 Portfolio 都去配置一下 Fusion Page Options 中的 Portfolio 选项。

Step 3.2) 创建 Portfolio 产品(详情)页，一个个地添加。

我们点击左侧的【Portfolio】- Add New，然后输入产品标题，如：LED Area Wallpack。接着，在右侧的 【Portfolio Categories】中勾选所属的产品类别。

接着，在右下的 【Featured Image (特色图片)】那里，添加产品图片。默认最多可以添加 5 张图片。如果要修改这个，可以在主题的 Theme Options 中修改。
注意，一旦我们添加了多张产品图片后，在产品详情页中，Featured Images 会自动带有 Slider 效果。

接着，在编辑区上方，点击 Use Fusion Builder 按钮，点击 +Container，添加一个 1/1 的 Container，然后在 Container 上点击添加 Element，在 Element 中选择 Tabs。

为什么选 Tabs 呢？我找个例子吧。比如下面这个：

1636009966 9a88cc8d6b90c2f60863eb2bbc7b1b5c

如果你想呈现这种产品详情的效果，那么就只有用 Tabs 来实现了。

1636009966 0ad4fd7048b87a7a037f4fba49cedf15

点击编辑的图标，在 Tab 详情页面中，

  • Tab Title 填入：Description
  • Icon 可用可不用，不用更简洁
  • Tab Content 中填入具体的产品描述文字以及图片等素材

搞定完一个 Tab 后，记得，你还要继续做 1-3个（看你的需要）。

做完所有的 Tab 之后，保存，Tabs 就建好了。

avada主题教程

不过，还有个问题，这个产品页面没有侧边栏，总觉得怪怪的。

这个侧边栏的问题，我们可以去创建一个 Portfolio Sidebar，然后在 Fusion Page Options 的 Sidebars 选型卡中选择我们创建的侧边栏即可。

在【Appearance】-【Widgets】页面，顶部有个 Add New Widget Section 的按钮。点击它，为新的 Widget Section 取名为：Portfolio Sidebar。

1636009967 ab6bf6e6dda5eba8df94422c1181ac88

新建好之后，先随便添加个 widget 进来。比如，Search。我们希望所有的 Portfolio 页面都显示这个 Portfolio Sidebar。

我们来设置：【Avada】-【Theme Options】-【Sidebars】-【Portfolio Posts】

1636009967 c4152c40f42be6888ee515054b698239

保存，OK！我们再来刷新看看我们创建的产品页。

1636009967 880e94c760b8a1e930d13c0d4297efa3

可以看到，已经显示了左边的侧栏 portfolio sidebar。由于我们对这个侧栏制作得也比较简单，所以除了一个搜索框以外还空了大片位置。

先这样吧，后面我们再来丰富产品页侧栏的内容。

Step 4: 创建 Products 展示所有产品页面

在 【Page】- Add New 创建一个新页面，填入页面标题：Products。点击 Use Fusion Builder 按钮，在编辑状态下

1636009967 dc39f3012930399ab5bd984c5ed722ea

1636009967 9074d13810ee0bec3dc36f55554e5ee9

1636009967 b06c11454eda7d65b2e134c59c50b76b

1636009968 d38520c1fbac4b28fac6cc69a1519753

在弹出的 Portfolio 元素配置窗口中，进行设置，每个选项都有英文解释，不难懂。

  • Layout 选择 Grid
  • Picture Size 选择 Auto （如果你能统一产品图片尺寸就选这个，如果不能，就选 Default）
  • Columns 选择 3
  • Column Spacing 设置为 15
  • Posts per Page 设置为 24
  • Portfolio Title Display 选择 Only Title
  • Categories 选择我们之前创建的两个 Portfolio Category
  • Pagination Type: None
  • Excerpt Length: 设为 0
  • CSS Class: 填入 portfolio_products

然后点击保存。

1636009968 e184369c7f61ec7028f3cd23b0ec454f

1636009968 95f1c671be5dd2c4ac645b9a883049b6

OK，Products 页显示所有产品一切正常。并且上面有个Filter，点击产品类别名就显示该类别下的产品。

这个页面也可以加上侧栏。比如，在 Fusion Page Options 的 sidebars 中选择之前添加的 portfolio 的 sidebar，然后保存。刷新。

1636009968 07fd603e42adb27a99881ba2ec94da6f

哎。好累，歇歇！

怎样在侧边栏里加上产品目录结构

上面的左侧 的 Portfolio Sidebar 里，我们只添加了 Search 框。这太空了，对比我们之前的截图，这个侧边栏里有产品目录：

1636009966 9a88cc8d6b90c2f60863eb2bbc7b1b5c

那么怎么能实现左侧栏里我们也放上产品目录呢？

先放一张图：

1636009968 da810cb96900cc4da1e46985659efca2

看懂了没有？利用 Custom Menu。我们在 Appearance – Menu 里新建一个菜单，取名 Sidebar Product Menu。

然后从左侧的 Page 列表里把产品 2 个分类页 Interior Led lights 和 Exterior Led Lights 给添加到菜单中去。保存菜单。

然后到 Widgets 中去，如上图所示：在我们之前创建的 Portfolio Sidebar 中添加 Custom Menu，并且选择我们刚新建的菜单：Sidebar Product Menu。保存。

然后刷新 Products 页面。效果如下：

1636009968 5ac397b9e9736af8133ec78767907c7e

显然是成功了！但是可能你要问了，是不是太简单了点，左侧就这两个分类名称的页面吗？

咳咳，别着急啊。这里就要分情况来说了：

  • 如果你的产品结构分类有两级，比如产品结构是 1级分类 – 2级分类 – 产品。那么这里你还可以在 Sidebar Product Menu 中把 2级的产品类别 Page 添加上并且设置好层级。这样这里的产品 Product Category 就不会这么少的分类，显得太单调了。
  • 如果你的产品分类只有一级，但是类别比较多，那么也是 OK 的。这里显示七八个产品类别名。
  • 如果你的产品比较少，分类只有一级，且类别也少，那就有点麻烦了。但可以通过一种办法折中解决。
针对上面的第三种情况来说说对策：

我们知道，添加到 Menu 中的类别有限，我们之前说过最多只有 5 种类型的可以添加到 Menu，分别是 Pages, Posts, Custom links, Categories, Tags。其中 Posts, Categories, Tags 这些都跟文章有关，跟我们产品无关，不考虑。而 Page 是作为产品分类页，具体的产品页面是用 Portfolio。但 Portfolio 不是可以添加到 Menu 菜单中的类型。那怎么办呢？

既然 Pages 我们只能添加产品类别，那么我们就用 Custom Links 来作为显示产品名称和承载产品portfolio页的载体！我们就把一些这个类别下的重要产品用 Custom links 来添加到菜单里，Link Text 写产品名，Link Url 写产品的 Portfolio 的页面 URL。然后设置好层级位置。效果一样是OK的。哈哈，我真是机智！

这个例子就是这样，谁叫我一开始想讲简单一些的产品结构的呢。。

OK，说干就干。

1636009969 85877bc68f413925efd8b09f40c0c8fb

添加好了。刷新 Products 页面。

1636009969 acfd5d79f09f7e75c21bb372fdb48b46

好了。现在还有个小问题，那就是左侧栏里的 Search 和 Product Category 的文字字体有点小，我们想把它改大一些。

通过审查元素我们知道，侧边栏的每个 widget工具的标题用的是 H4。

1636009969 18493477310fcf2691bc85a49117ea74

我们把样式表中的 font-size:13px 的 13px 改成 15px，感觉字体大了一些，这个大小比较合适。由于 H4 是 Heading 的一种，我们可以用 heading 这个关键词来找设置的地方。

在 Theme Options 的搜索框里输入：heading，我们可以在搜索结构里看到一个 Sidebar Styling，提示我们这一项是在 Sidebar 下的 Sidebar Styling 修改。

1636009969 a4fcee748436c672ecdeac012ef957d6

我们直接改成 15px，保存。

刷新网页，OK，Search 和 Products Category 的那些 H4 的字体成功修改成 15px。

还有个小问题，左侧的产品目录里面每一项都含有一个底边框，有点不和谐：

1636009969 2a44add908ad9af85c901a3648a8bb4c

我们可以用 Custom CSS 来解决。在 Avada – Theme Options – Custom CSS 中添加一行代码：

#menu-sidebar-product-menu li{border-bottom:none}

保存。刷新页面，OK，清爽多了！（如果你不成功，注意检查 sidebar 和 product 有没有写错，之前的菜单名是不是 sidebar product menu。可能你用了复数等等）

1636009969 38e041449dd129590a388c4a3df81d8f

关于 Products 页面的创建就说到这里！

接着我们在创建的类别 Page 里：Interior Led Lights 和 Exterior Led Lights 这两个类别页面里，也在 Fusion Page Options 中添加 Container，然后添加 Portfolio 元素，并且设置一番。

注意：Categories 选择与之相对应的 Portfolio Category 即可。

关于 产品分类页、产品(详情)页、产品归总页的总结说明

产品分类页：要先添加 Portfolio Category，然后再添加一个 Page。即产品分类既涉及 portfolio (category) 也涉及 page。

要展示该分类下的产品，就在产品分类的 Page 里用 avada 的 Fusion Builder 编辑器添加 container。然后添加 portfolio 元素，在里面勾选对应的 portfolio category.

产品(详情)页：只用 Portfolio 来创建就可以了。

注意创建的时候勾选所属的 Portfolio Category。并且添加 Featured Images 的时候，如果有多个图片，尽量都加上，会自动添加 slider 效果。

产品归总页：只用 Page 来创建就可以了。

要展示所有分类下的产品，就在产品分类的 Page 里用 avada 的 Fusion Builder 编辑器添加 container。然后添加 portfolio 元素，在里面勾选所有的分类 portfolio category. （如果同时有一级分类和二级分类，只勾选一级分类即可）

Portfolio 作为产品(详情)页，URL 中存在的 portfolio-items(或avada_portfolio) 怎么修改？

我们在创建 Portfolio 产品页的时候，会发现在标题框内填写完产品标题后，会自动生成该页面的 permalink:

1636009970 3ac7d74cdddd269cf3924bdea0f35458

Permalink: http://www.ledlightsmfg.com/portfolio-items/your-title-name/

新创建的产品，URL 里会自动带有 portfolio-items。这个在访客浏览我们产品页的时候，体验肯定是不好的。我们怎么修改掉呢？

我们到 Avada 主题设置的 【Portfolio】中去改。在 General Portfolio 中，找到 Portfolio Slug，可以看到填写框默认为 portfolio-items。

我们修改成 product 或 product-view 或者 item 都可以。

1636009970 73222857ea5e58160a55642bffc81a7b

此时，我们再点击 WP 左侧的 Portfolio 菜单，来到 Portfolio 列表中，随便选择一个 Portfolio，鼠标移到 view 上去以后，然后看浏览器底部状态栏的链接地址。

1636009970 12410684ab625301819a9154f5818f75

我们可以看到，URL 已经变成了：http://www.ledlightsmfg.com/product/your-title-name/

OK。搞定！

如果你发现这个 URL 打开是 404 页面，打不开，那么记得去 Setting - Permalink 下再次点击 save changes 一次即可。

Products 产品汇总页中点击具体产品页，URL 带着个 portfolioCats=xxxxx 的尾巴，怎么去掉？

这个可以在 Element – Portfolio 的具体设置里设置不显示。具体的步骤：编辑 Products 页面，点击 Portfolio Element 元素，在弹出的配置页面上，找到 Hide URL Parameter 这一项。

1636009970 882b29d261ca8b7138993c0919d7ca20

此时再重新刷新 products 页面。OK 顺利解决！

Portfolio 页面的 Related Projects 修改成 Related Products

注意：如果某个 Portfolio Category 下面只有一个产品，那么访问该产品页面时，就没有 related projects 显示。
Related 的机制是基于：处于同一个 portfolio category 下的产品会显示。

1636009970 7f7296535c54a7b17fcb7829687c1d0c

如果你不需要显示相关的产品，可以让这个 Related Projects 模块不显示。

1636009970 de22328b691b26713d4e71821ffa6480

当然，很多人都希望显示以增加访客访问页面数量，增加停留时间，所以一般情况下我是让它显示的。

接着说 Portfolio 产品页面下方的 Related Projects 怎么改成 Related Products。首先在 AVADA- THEME OPTIONS 我们搜索 Related Projects 的时候，如上图，并没有可以修改这个名称的地方。于是我们想到到主题文件里去找找。我们在本地的 Avada 主题文件根目录下用 notepad++ 随便打开一个文件，然后使用搜索功能。

1636009970 14039065391e54e1f1ef7686781bebea

找到此文件：Avadaincludesavada-functions.php

1636009971 e0c45895d38aa11afd8faa74d67a5891

在上面截图中这一行中，有输出 Related Projects 这个名称。接下来我们说在后台怎么做修改。

点击 Appearance – Editor，在右侧的 Select Theme to Edit 处的下拉菜单中选择 Avada。然后点击 Select。此时下方会出来很多文件名称，ctrl+f 组合件查找“avada-functions.php”，找到 avada-functions.php，点击进行编辑。在打开的 avada-functions.php 文件页面中继续 ctrl+f，查找“related projects”，找到以后，把 Projects 改成 Products。然后点击 update file 按钮。

接着去某个产品页里看看，此时已经显示成 Related Products 了。

1636009971 c747aa5395a96ef435959b906ae9552f

把分类页设置好父级

前面说了，我主要建了两个大分类：

  • Exterior Led Lights
  • Interior Led Lights

那么如果我们不做任何调整，这两个分类的 URL 是这样的：

  • http://www.ledlightsmfg.com/exterior-led-lights/
  • http://www.ledlightsmfg.com/interior-led-lights/

这不太好，因为没有体现 products 作为父级。此时，在 WP 后台的 Page 列表中，也体现不出来这两个分类和 Products 这个汇总有什么关联。

1636009971 d4e08cd37c25d96a5c1cbc63219987bb

此时我们编辑这两个分类的 Page，在右边 Page Attributes【Parent】那里，选择 【Porducts】，更新保存。

1636009971 93398b90949e13c1402cb5e36a1f33e3

OK，此时 Page 列表中则体现了级别关系：

1636009971 484c85c9166f1502d361ddff2e3ad475

这样，分类结构的建立才算完整了。

此时，这两个分类的 URL 是这样的：

  • http://www.ledlightsmfg.com/products/exterior-led-lights/
  • http://www.ledlightsmfg.com/products/interior-led-lights/

在 robots.txt 文件中禁止谷歌收录 portfolio categories 页

之前有个料神米课的学员自己建站时，发现忘了勾选不鼓励搜索引擎索引收录，结果不少页面已经被谷歌收录了。我看了一下，很多被收录的页面她已经建的差不多了没太大问题，但有一类页不应该给谷歌收录，非常影响用户访问体验。

什么页面呢？portfolio category 页面。如果你不知道，你在 Portfolio – Portfolio Categories 中查看你已经建立的分类，然后点击 View 就知道了。

1636009971 6b40253a42a3cb0a43ab9cd4458dbde1

你会发现这个页面的 URL 是：http://www.ledlightsmfg.com/portfolio_category/exterior-led-lights/

而且，这个页面打开，就产品特色图片，而且可能排列还比较乱。

谷歌把 portfolio category 页面给收录了，其实这些页面是不需要展示在网站上的。因为我们建立分类的时候，先是建立了分类的 portfolio category，同时建立了展示这些分类产品的 page。我们希望给访问者展示的是这些 page，而不是 portfolio category。

所以我们需要在蜘蛛协议中禁止搜索引擎抓取这些 portfolio category 页面。你可以通过 SEO 插件 yoast seo 来编辑 robots.txt 文件。

初始状态是这样的：

1636009971 0a4af60badd8283fe4e6be0c2b775b97

可以看到，由于我们选了禁止搜索引擎收录，所以有一条 Disallow: / 的记录。等我们网站建好，我们会在设置里取消勾选禁止搜索引擎收录，那么这一条记录就会删除。

我们在下面一行加两条记录：Disallow: /wp-admin/ 和 Disallow: /portfolio_category/  。即：

User-agent: *
Disallow: /
Disallow: /wp-admin/
Disallow: /portfolio_category/

这样即使后期我们放开搜索引擎抓取，我们也可以保证谷歌不去抓取 portfolio category 页面。

说明：关于 robots.txt 的设置，我们这里先简单提一下，后面建好网站后还需要加不少规则，到那时我们再专门说。

安装图片压缩插件

非常有必要安装一下图片压缩的插件，能大大地给图片文件瘦身，也可以加快页面加载速度。推荐 TinyPNG 出品的这个插件：

WordPress图片压缩插件：Compress JPEG & PNG images

一晃快过年了，工厂都放假了，于是也可以有空多更一些文章了。 我们在英文建站的时候，经常会碰到要设置一些尺寸较大的 banner图片，产品细节 ..

1636009972 ce45f538623b7ea9a3b23c1a8c2369e6

类似文章