使用WordPress免费搭建一个简单外贸网站全过程图示教程的补充

在《使用WordPress免费搭建一个简单的外贸网站全过程图示教程(置顶)》一文中，我讲述了如何使用WordPress建外贸网站的步骤与过程，在文章最后还贴出了网站的效果。但有些细节方面的东西我还没写在那个文章里，后面我也陆续补充了几篇文章，分别是：

• 给该外贸网站添加一个社交网站分享按钮，见文章《如何给WordPress外贸网站增加社交网络分享按钮》；
• 给外贸网站添加一个在线聊天工具，见文章《给你的外贸网站增加个在线聊天工具》；
• 给外贸网站添加一个多语言按钮，见文章《比较好用的外贸网站WordPress多语言插件》；
• 给外贸网站添加统计代码，见文章《如何给网站添加代码以及修改CSS来改变字体大小等》；

大家可以根据这些文章继续完成外贸网站的一些细节问题。

添加首页产品类别：

另外，还有部分网友说首页的那个产品展示模块能不能展示产品类别的图片，然后点击该图片到达某一大类产品的列表？我看了下主题自带的小工具，发现都没有这种功能的模块，但我想了个办法，大概可以实现网友所需要的这个功能。下面是具体步骤：

1. 由Appearance->Home Page进入主题自带的首页编辑功能；
2. 给首页添加一个Row,然后填写1 Column;
3. 在添加的Row中添加Vantage Headline小工具，标题填写为：OUR PRODUCT CATEGORIES;
4. 再添加一个Row（放在第2步添加的Row之后），然后填写4 Columns,得到一个一行四列的4个框框；
5. 在每个框框中分别添加2个Text小工具;
6. 编辑每个Text小工具，标题为某产品分类的名称；Text内容添加以下代码：
   

   <a href=”#”><img src=”#” alt=”” /></a>

   其中第一个”#”替换为该产品分类的URL,第二个”#”替换为该产品分类的缩略图的具体URL,比如：http://www.kitch.cn/wp-content/uploads/2014/03/MQ-201-300×300.jpg（建议300*300的尺寸），alt后面的引号内可以添加产品分类的一些属性，也可以为空；对应图片的URL，可以进入媒体库（media），Edit图片，在图片右侧可以看的file URL，复制它；

7. 最后保存做了修改后的Home Page; 下面是给Home Page添加的2个Rows和8个小工具后的网页布局：
8. 网站前端这部分的显示效果如下：

产品列表页面，产品页面缩略图模糊解决办法：

有部分网友说Vantage主题的产品列表页面，产品页面的缩略图有点模糊，那么我们可以在后台：WooCommerce->Setting->Products->Product Image Sizes，设置Catalog Images 尺寸为 250*250(或170*170)；Single Product Image 尺寸设置为 500*500(或370*370) ；  然后安装插件Regenerate Thumbnails 这个插件，安装好后，在后台Tools->Rege.Thumbnails那里重新把所有缩略图生成一遍；

首页产品展示模块（POST LOOP)图片显示完整：

很多同学发现使用Vantage主题，有时候在产品列表，产品页面，产品图片显示不完整，这个是在后台：WooCommerce->Setting->Products->Display->Product Image Sizes 那里勾选了Hard Crop?， 去掉勾选，然后重新上传图片就可以显示完整了，不过这要求你全部图片是统一尺寸，最好是统一为正方形（600*600）这样了，不然出来的效果是产品图片高低不一。 另外，在首页中还有个模块是随机显示一些产品图片的，这个地方也很容易出现产品图片显示不完整，如果你的产品图片是统一尺寸，比如600*600，那么请按照下面的方法设置一下。   打开主题的Editor,在后台Appearance->Editor，打开Vantage主题的Function.php, 然后Ctrl+F键，搜索找到以下代码：

add_image_size('vantage-grid-loop', 436, 272, true);

把里面的尺寸修改为，436,436， 再重新上传图片即可。

产品列表页面不显示Read More按钮的方法

我们需要添加CSS规则，使得按钮不再显示，具体操作方法如下：

1. 在后台打开Appearance->Editor，打开Vantage主题的style.css,要修改CSS规则；
2. 往CSS规则里面添加如下规则：

   .woocommerce #page-wrapper .button{display: none !important;}

3. 保存所做的修改即可；

原创文章，转载请注明： 转载自DIYzhan.com-从零开始自己做外贸网站和海外网络营销
本文链接地址:https://www.diyzhan.com/2018/01/wp-building-site-sample-3/