使用WordPress免费搭建一个简单的外贸网站全过程图示教程(置顶)

使用WordPress免费搭建一个简单的外贸网站全过程图示教程(置顶)

作者:DIYzhan.com |  浏览:58927 |  8 条评论
Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.

WordPress是个开源博客软件,主要用来建博客网站,但是通过WordPress各种主题和插件,我们可以做企业站,内容发布CMS网站,B2C商城网站等等;当然我们也可以用WordPress建外贸网站,本文就将讲述使用WordPress搭建一个简单的外贸网站全过程。

为什么使用WordPress做外贸网站?

做外贸网站,都是为了更好地营销产品,网站外观,页面做得再好,如果没人访问都是白费力气。
WordPress做的网站符合搜索引擎优化的标准,用它可以最大限度的优化推广你的网站; 另外WordPress还有超多的优化插件,如 All in One SEO Pack(可以对网站站内内容进行优化)、Google XML Sitemaps(自动生成sitemap.xml 并提交给Google,Yahoo,Bing等国外主流搜索引擎);这样你每更新一个产品,一篇文章都可以自动通知Google,Yahoo等,这些都对你网站的优化起到很大的作用,给你网站带来流量,带来订单。WordPress丰富的主题和插件也可以让我们做出多样的,美观大方的网站。

使用WordPress做一个简单外贸网站的实例教程

第一步:使用WordPress在网站空间或者本地电脑安装一个WordPress网站

如果你是在同一个空间商那里购买虚拟主机和域名,如SiteGround主机和域名,那么你可以根据文章《如何使用网站空间的建站功能建WordPress,Zen Cart网站》,使用空间的建站功能1小时快速建站;如果你虚拟主机和域名是分开购买的,那么可以参考文章《快速简单地使用WordPress建一个网站》按步骤在空间建站。

第二步:为安装好的WordPress网站安装做外贸网站所需的主题和插件

使用WordPress做外贸网站,主要有2个方法:方法一: 就是安装一个外贸网站主题(带产品列表功能),目前国内的外贸网站主题不是很多,而且有些收费也不便宜,国外适合用来做外贸网站的主题可以使用一些Business主题,但是他们的产品列表估计不适合产品比较多的外贸网站,而且这类主题也比较难找,这个方法做外贸站可以看文章《一个简洁易用的WordPress企业网站主题1天建外贸网站教程(置顶)》;方法二:就是借助一些支持WooCommerce的主题,然后加上WooCommerce 及相关电子商务插件来做外贸网站(有同学说这个方法是不是只能做在线B2C网店?其实不是,只要我们在输入产品资料的时候不输入产品价格,那么也就是单纯的展示商品的网站),这个方法相对简单点,主题和插件也好找,而且免费,适合要节约预算的外贸新手,这个方法还有一个好处就是有很多功能插件是基于Woocommerce来做的,这样我们可以给予网站更多强大的功能;如果主题和插件运用得当,也可以做出不错的效果来,本文就是根据这个方法来做外贸网站。在本例,我使用的主题与插件如下:

  1. 主题:Vantage,免费主题,百度云盘下载地址(也可在WordPress网站后台可以搜索安装);  如何安装主题可以参照文章《WordPress的主题与插件的安装使用》;
  2. 插件:WooCommerce, Page Builder by SiteOrigin,Contact Form 7 , Meta Slider ,Product Enquiry for WooCommerce ,YITH Woocommerce Compare,WooCommerce Products Per Page;如何安装插件请参考文章《WordPress的主题与插件的安装使用》;

第三步:为外贸网站添加About Us, Contact Us, FAQs, Products ,Blog等页面

如何WordPress建外贸网站增加页面,文章,产品及类别,请看文章《WordPress添加页面,写文章,增加文章类别,增加产品和产品类别

  1. 通过Pages->Add New 添加About Us 页面 ,并为About Us添加预先准备好的企业介绍资料;add_page_about_us
  2. 通过Pages->Add New ,建一个Products页面,不用填写内容,然后使该Products页面与WooCommerce 的Products列表功能关联起来。关联的方法是:通过左侧菜单中WooCommerce->Setting->Products标签下,Product Archive / Shop Page选择Products页面;关联后再点击Products页面则会显示全部产品列表;(WooCommerce改版后,指定产品页面需要在WooCommerce->Setting->Products->Display标签下了);add_page_products
  3. 通过Pages->Add New 增加Contact Us页面: 插件Contact Form 7安装后,在该插件设置页面(在左侧功能菜单有个Contact链接)新建一个Contact Form(联系表单),填写该Contact Form的邮箱等信息,保存,然后复制其代码(shortcode);然后在新建的Contact Us 页面填写公司联系信息,并粘贴刚在插件Contact Form 7中建立的联系表单的代码(shortcode),如下图:(注:Contact Form 7 涉及到邮件发送,所以要求你的主机空间支持 mail() 函数,或者配合SMTP插件来使用。)add_plugins_8
  4. 通过Pages->Add New 增加FAQs页面,填写FAQs的各个问题与回答;
  5. 通过Pages->Add New 增加一个Blog页面,并选择这个页面的模板(Template)为Blog Template,内容留空白;这是为网站留一个博客栏目;(有些别的主题不一定有blog template这个模板,则可以忽视这个页面,而采取另一种方法添加博客栏目,请看文章《如何给WordPress,Zen Cart外贸企业网站增加一个博客栏目》;add_blog_12
  6. 安装WordPress和WooCommerce插件后,都会自动生成了些页面,如果不需要可以删除掉它们;在做你自己的网站的时候,你也可以根据自己需要增加其他页面;

第四步:为外贸网站通过WooCommerce 的Product功能增加产品类别和产品;

要先添加商品类别(add category),然后才添加商品(add product),不然你添加商品的时候就没办法选择产品分类了;添加商品(add product)时,编辑商品,在商品编辑页面右侧可以选择商品类别,商品图片是在添加featured product,添加多个图片是gallry;

  1. 增加产品类别:安装WooCommerce 插件并启用后,在左侧菜单列表中有Products一项,点击该项下面的Categories选项进入添加产品类别页面:add_product_category
  2. 添加各类商品:还是左侧功能菜单Products一项,点击该项下面的Add Product进入增加商品页面,填写商品信息,选择产品类别,上传产品图片等,如图:add_product_3
  3. 产品在网站上的显示是通过自定义顶部导航,侧边栏,把产品类别放在顶部导航,侧边栏上,点击相应的分类则显示相应的产品,见下面的设置;

第五步:为网站调整,自定义顶部导航,底部导航,还有右侧边栏的内容

如何调整,自定义顶部导航,底部导航和侧边栏,请看文章《调整,自定义WordPress网站顶部导航,底部导航和侧边栏》;

  1. 顶部导航:通过左侧功能菜单 外观(Appearance)->菜单(Menu)创建一个顶部导航菜单(命名为Top Menu),把About Us,Products,FAQs,Blog等页面添加到该菜单,并把产品类别(product categories)下面的各个产品category添到菜单,然后拖动到Product页面下做为二级菜单;另外添加个自定义链接(Links)到菜单(点击该自定义链接Custom后面那个箭头打开编辑这个Link的Title为Home,链接URL是到网站域名);然后拖动各菜单调整显示顺序保存并指定位置Primary Menu,一定要指定位置,不然不生效,不在导航显示;如果在Appearance->Menus中没有Products Categories这些可以添加到菜单的,请在Menus页面中点击右上角的Screen Options,勾选上Products Categories;另外,右边要View All来浏览所有的页面,或者产品类别;
    add_top_menu_2
  2. 底部小工具菜单:我的主题Vantage支持底部多个竖栏,一般在外观(Appearance)->小工具(Widgets)那里,把小工具(Widget)加到Footer边栏即可;方法一:通过添加几个Text小工具,然后修改Text的标题为Product, Company,Support等等,并在Text文本框内添加链接代码 (支持Html代码,链接代码写法为:<a href=”页面网址”>链接的瞄文本(页面标题)</a> ),链接到网站其他页面;方法二:先在外观(Appearance)->菜单(Menus)那里创建几个菜单,分别为Company,Products,Support,添加页面,产品分类等到这几个菜单,保存,不用指定位置;然后在外观(Appearance)->小工具(Widgets)那里,添加三个自定义菜单Custom Menu)小工具到Footer边栏,每个自定义菜单(Custom Menu)小工具分别命名为Product, Company,Support,并分别选择前面创建的Company,Products,Support三个菜单,这样就不用像方法一那样写代码了。add_footer_widgets_1add_footer_widgets_3
  3. 右侧侧边栏:在外观(Appearance)->小工具(Widgets)那里,把WooCommerce Product Search, WooCommerce Product Categories, WooCommerce Recently Viewed , WooCommerce Top Rated Product和Text等小工具(Widget)分别添加到右侧侧边栏(Sidebar),各个小工具都可以重新命名标题,分别命名为:Search Prouct, Product Categories, Recently Viewed, Top Rated Product和Contact Us, Text小工具命名为Contact Us后,在文本框里添加公司联系信息(支持Html代码);Text小工具常用到的html代码请看《一些常用的Html代码(WordPress侧边栏Text小工具常用到)》。add_sidebar

第六步:为网站做个特色的首页

由于我的主题Vantage本身有个已经做好的首页模板(Home Page),而我也觉得不错,我就在它原来的首页模板上稍做调整修改,增加内容就可以了(Appearance->Home Page那里设置为ON)。如果你不想使用自带的Home Page,没关系,我们可以自己建一个,在Pages->Add New新建个页面,命名为Home PageTemplate选择为Page Builder Home,然后在后台Settings->Reading->Front page displays->A static page->Front Page选择创建的Home Page 设为首页wordpress_site_more_8

(只要安装了 Page Builder by SiteOrigin,我们都可以自己制作一个个性的静态页面(page,比如:Home),然后将其设置为首页(在后台Settings->Reading->Front page displays->A static page->Front Page选择创建的那个静态页面Home) ,请看《自定义一个WordPress外贸网站首页》);

  1. 使用插件Meta Slider为首页插入Slider;在插件Meta Slider设置页面创建New Slider,设置参数,按照设置的Slider图片的尺寸(宽度1020不改动,高度可以修改为300),使用产品图片做出4幅幻灯片图片,并分别添加这4幅图片到Slider,填写这4个幻灯片分别链接到的页面的URL(目标URL), 保存;制作幻灯片图片见文章《如何使用Photoshop制作Banner,Slider幻灯片图片》;然后在Apprance->Theme Settings->Home(如果改版了,请看customize选项里面)标签下的Home Page Slider选择刚才创建的Slider名称,保存后即可在首页显示你的幻灯片了;build_homepage_08build_homepage_09add_sidebar_3
  2. 修改外观Apprance)->Home Page(这个是该主题特有的),Home Page里面有几框,每个框里面有个小工具(widget) 编辑页面Home Page,添加一个Row,1 Column,然后往这个Row添加Vantage Headline小工具 ,添加后,点击选中该小工具,你可以看到可以对该小工具进行Edit,Duplicate,Delete等操作;如:Vantage Headline 也是一个小工具,我点击它,然后Edit它为自己想要的内容;vantage_headline
  3. 修改Apprance->Home Page(这个是该主题特有的)下面的Post Loop (PB) 再在页面Home Page添加一个ROW,1 Column,然后往这个Column添加Post Loop(PB)小工具,这个是循环展示你的帖子,产品的模块,我把它标题修改为Our Products,显示方式Template选为:Grid,然后在Build Post Query里面选择Post Type为Products,即展示的是商品,每页显示商品 为8(4的倍数);2016110311221320161103112501
  4. 修改Apprance->Home Page(这个是该主题特有的)下面的Circle Icon 再在Home Page添加1个Row,3个Column,然后三个Column分别添加1个Circle Icon, 点击Edit修改Circle Icon的标题和内容,我分别改为:Kitchen Project, Service Center, Catalogue Download,并分别添加简介,和Learn More链接到其他页面;也可以通过编辑框左上角上继续添加Widgets多添加几个Circle Icon.
  5. 还可以参考《使用WordPress免费搭建一个简单外贸网站全过程图示教程的补充》中,给首页添加个产品类别展示;

第七步:上传网站logo修改网站标题,修改网站底部版权信息等等;

  1. 修改logo: 这个可以在Apprance->Theme Settings->logo(如果改版了,请看customize选项里面)标签上修改;一般logo使用.png格式为好,请看文章《如何自己做个简单的网站logo》如何制作一个网站logo.
  2. 修改网站标题:在网站后台左侧导航菜单:Setting->General 里面修改;
  3. 修改网站底部版权信息:在网站后台左侧导航菜单中:Appearance->Editor进入主题代码修改功能,在右边Templates列表(网站主题文件)下选择Footer(parter/footer.php) , 找到原来主题的版权信息的代码,把对应的内容修改为自己的; 本主题Vantage也可以在Appearance->Themes Setting->General标签下修改; Vantage版本升级后,直接修改版权信息代码会出错,那么我们可以把版权信息的代码 Disable 它,操作如图所示。add_copyrightadd_copyright_2

以上就是使用WordPress做个简单的外贸网站的全过程,这只是比较简单的网站,还有些要完善的地方,如果你需要别的外观,你可以通过安装其他的主题来实现;同时,做好网站后,大家可能还需要Live Chat,需要SEO优化功能,需要添加社交网络分享按钮,这些都可以通过安装插件来实现,在《用WordPress建外贸网站可能会用到的一些企业主题与插件》一文中,我列了些大家在做外贸网站可能需要要用到的主题和插件,并在以后发现有好的主题和插件时也会在该文分享,所以该文也会保持更新。还有些功能需要通过在网站的主题模块里面添加代码来实现,可以看文章《如何给网站添加代码以及修改CSS来改变字体大小等》。另外,针对要修改首页产品显示图片不完整,重新自定一个首页产品分类,我在《使用WordPress免费搭建一个简单外贸网站全过程图示教程的补充》中做了些补充。

另外,如果是使用XAMPP建的网站,那么你就需要购买网站空间,购买空间请看《如何购买虚拟主机,购买虚拟主机流程,外贸主机推荐》一文,然后把建好的本地电脑WordPress网站迁移到网站空间,如何迁移网站请查看《网站搬家:如何把本地电脑WordPress网站迁移到虚拟主机》一文。

最后网站做好效果如下(www.kitch.cn):

shot-20140319-10161-14083z5-0

 

原创文章,转载请注明: 转载自DIYzhan.com-从零开始自己做外贸网站和海外网络营销
本文链接地址:https://www.diyzhan.com/2014/02/wordpress-building-trading-site-sample/

相关推荐
更多

  1. Edison 2014-5-6 16:37 #1

    感谢博主的无私分享,太受用了!

  2. 我是一条鱼 2014-5-7 00:29 #2

    博主是大好人,膜拜博主啊

  3. chris 2014-8-28 18:50 #3

    多谢博主的无私分享,照博主步骤建了个站,只是首页slider图片这里,发现插件老是会截取或隐藏图片的上下一部分。后台meta slider设置为1080*400,banner图片的尺寸也是1080*400,可是前台显示,banner图片的有一部分不能显示(上下部分都有),是不是图片被放大了,然后超出的部分被隐藏了。

    • 主题设置那里,layout的设置,选择把full width换为boxed

长按扫我微信
需要帮助?
点击这里给我发消息