GeneratePress,轻快而又强大的WordPress主题

使用Bluehost空间和WordPress建站有好多年了,实践的过程中学到了很多,帮助自己和朋友解决了不少问题。因为WordPress社区的蓬勃发展,即使用了很多年,还是能时常学到新东西。

购买Bluehost空间和安装WordPress都很简单,因为WordPress的流行度不断增加,新购买的Bluehost空间会自动安装WordPress,并设置好Coming Soon Page,用户在完成网站建设之后,可以一键发布网站,比早年更方便,对用户更友好。

买好空间,安装好WordPress,接下来比较费事的就是选择WordPress主题了。主题决定了网站的外观和功能,对于不懂编程的用户来说,选择什么样的主题,决定了你能做出什么样的网站。

这几年我用过很多主题,关注Neil说博客的朋友也能看到网站的一些变化。实际上这个博客也是作实验的地方,学到什么东西,先在这个博客上试试,毕竟B2B网站不适合拿来折腾,最好能保持一定的稳定性,不要太频繁地更换主题。

我选择主题一般看这几点:1. 外观:配色,字体,字号,布局,边距…… 2. 功能:特殊类型的页面,比如产品页,方便地插入视频,音频,地图等,自定义css,可定制化程度高,无需代码基础调整外观……当然,也可以通过插件的方式增加功能,不过不宜使用太多插件 3. 安全性:作者要持续维护,不断打磨主题,使主题能够跟上WordPress升级,修复漏洞,增加安全性 4. 速度:网站速度对SEO和用户体验至关重要,进而对实现网站的目的也至关重要。主题的设计也是影响速度的一个重要因素。

以上4点,很难兼得(要是那么容易找到,我也不用折腾这么多主题了)。做B2B网站,我用得比较多的是Avada主题。Avada算是满足了前3点,速度就差强人意了。我曾经很仔细地把Avada提供的每一个选项都试了一遍,把一些不需要的功能都关掉,也只能说勉强达到要求。主题市场Themeforest上很多主题也是这样,功能虽强,却很臃肿,安装包动辄几MB,功能设置项令人眼花缭乱,如果设置不当,网站几乎打不开(不是开玩笑,以前的the7主题,有好些网站一直在加载中,延迟达到两分钟以上)。一个打不开,或者打开很慢的网站,任你外观再精美,内容再好,都是白费力。

直到找到GeneratePress主题,我终于能在一个主题上得到以上4点满足。

外观

大家可以看一下GeneratePress的官网,就是用这个主题做的。它还为用户提供了一个Site Library,收录了几十个使用该主题创建的演示站点,付费用户可以免费导入,快速创建一个跟演示站一样的网站。

功能

GeneratePress功能很强大,几乎你能想到的,需要的功能,它都提供了设置选项或者扩展。

扩展:付费用户可以使用全部14个高级扩展

  • SITE LIBRARY:可以导入几十个演示站,快速建站
  • COLORS:可以调整几乎所有元素的配色
  • TYPOGRAPHY:关于文字排版的选项:字体,字号,字体粗细……
  • ELEMENTS:如果有代码基础,可以使用这个功能在主题的多个区域加入自定义内容,比如给页面添加banner
  • WOOCOMMERCE:可以对woocommerce店铺进行非常细致的调整
  • MENU PLUS:可以设置固顶导航菜单,设置手机等移动设备上显示不同的菜单等
  • SPACING:可以控制元素的尺寸,间距,边距
  • BLOG:可以设置文章页的展示效果,如特色图片,文章列表页布局,对齐方式等
  • SECONDARY NAV:在主菜单之外,可以添加设置次菜单
  • BACKGROUNDS:可以在多个区域添加和设置背景图片
  • SECTIONS:可以把页面分成不同的区块,分别设计内容。这个功能特别适合用来设计网站首页和着陆页,比如着陆页可以分成下面这几个区块:产品亮点三栏图文,目标客户区分列表,行动号召,产品视频,认证证书,客户证言,知名客户展示,行动号召
  • DISABLE ELEMENTS:在特定页面上禁用特定元素,比如着陆页可以禁用banner和页面标题等
  • COPYRIGHT:可以在页面底部自定义版权信息
  • IMPORT/EXPORT:可以把自定义的主题设置出,然后方便地导入其他网站,这个功能对于迁移网站或者快速建立新网站非常有用

另外值得一提的是,GeneratePress和WordPress Customizer(就是登录WordPress之后回到前台,顶端工具栏里那个毛笔图标,中文版叫自定义,英文版叫Customize)深度融合。以上提到的高级扩展,几乎都是在WordPress Customizer里面操作。

在WordPress Customizer里面操作有什么好处呢?可以实时看到效果。我相信这对很多初学者来说非常有用。让你到后台去鼓捣一番,然后回前台看效果,效率差不说,也不直观。如果能够在修改之后几乎实时看到效果呢?还有就是Customizer提供了手机等移动设备预览功能,可以让你在设计网站的时候始终考虑到小屏幕上的用户体验。

安全性

GeneratePress下载量已经达到180几万,活跃用户超过10万,超过700条五星好评(以我们购物的经验,用了觉得好不评价的人更多),付费用户超过4万。我相信通过口碑相传,这些数字在未来还会持续增长。

这些数据也保证了作者能够持续维护,不断打磨主题,及时修复漏洞。在使用过程中,我遇到的问题几乎都在社区里搜到了相应的解决方案,这也说明了开发团队是很积极,很严肃地在做事。

Tips:使用GeneratePress主题遇到问题时,请Google“GeneratePress+问题描述”,比如我想加banner,我搜的是“generatepress banner below header”,能搜到大量社区的结果。

同时推荐大家使用一款安全插件wordfence,增强网站的安全性。

速度

据官网的描述,GeneratePress主题聚焦的重心就是性能,包括轻量,安全,稳定,高速,搜索引擎友好。

关于速度,口说无凭,我觉得大家安装上之后自己感受吧。

这里推荐一个测速网站供大家参考:

https://tools.pingdom.com/

点击下面的图片购买这款主题,49.95美金,用过之后,你会发现这绝对是你建站过程中回报最高的投入

WordPress外贸建站:精选插件

WordPress-Plugins

插件是Wordpress的一大特色,通过使用插件,没有代码基础的我们也可以实现很多复杂的功能。本期将为大家介绍一些WordPress插件,这些插件都是我使用过,而且是在多个站点上一直使用的,可以说得上是精选插件。

TinyMCE Advanced:WordPress内置的编辑器功能比较少,这个插件可以增强编辑器的功能。安装启用之后可以在配置页面通过拖拽的方式把自己需要的功能添加到编辑器的工具栏。

EWWW Image Optimizer:网站上的图片会影响网页的加载速度,Google的Page Speed Test也有对图片优化的建议。这个插件可以对图片进行有损和无损压缩,并且可以生成WebP图片,对网站的性能可以有很大的提升。

Wordfence Security:网站安全一直是非常重要的,如果你的网站不幸被植入了恶意代码,那搜索引擎排名,客户体验会变得非常糟糕。如果不能有效防护和及时清理,整个网站的商业价值将荡然无存。Wordfence是专业的WordPress安全方案提供商,插件有免费版和付费版。免费版的功能非常强大,推荐大家使用。另外,如果不想被邮件频繁打扰,记得合理设置提醒邮件的频率。

Contact Form 7: 非常有名的联系表单插件,支持short code。很多外贸网站上用来接收客户询盘的表单就是用这个插件创建的。建议配合下面的Postman SMTP使用。

Post SMTP Mailer/Email Log:如果主机的mail函数未启用,那WordPress是没办法发送邮件的,这就意味着你在网站上放置的联系表单无法把客户的询盘信息发送到指定的邮箱里,网站的找回密码功能也无法使用。之前有WP SMTP等方案,但是使用mail函数发送邮件稳定性一般,容易出现发送失败的情况,还有就是之前的插件会明文保存你设置的邮箱和密码,安全性不佳。Post SMTP Mailer/Email Log可以使用Gmail的API发送邮件,稳定性很好,且每封邮件发送之后都会留下log,及时没有发送成功也能查看到邮件内容。对于外贸网站而言,我们一切的优化和投入都是为了收到客户的询盘,进而转化为订单,那么确保联系表单正常运行是重中之重,这个插件五星推荐。设置略有一点复杂,请按提示操作。如有问题,可使用付费答疑服务。

Yoast SEO:非常有名的SEO插件,可以对网站的方方面面进行优化。推荐大家使用。All in One SEO Pack也是不错的SEO插件,大家可以根据习惯选择。Yoast SEO里有一个设置项,可以把WordPress分类网址里的category部分去掉,让URL变得更加简洁。假设你建立了一个LED Bulb的分类,默认情况下,这个分类的URL是这样的:www.yourdomain.com/category/led-bulb 使用这个插件之后这个分类的URL会变成这样:www.yourdomain.com/led-bulb 是不是简洁美观了很多?

WP SpamShield:WordPress默认的反垃圾插件是Akismet,使用需要申请一个API,虽然也有免费的,但是稍显繁琐。Akismet拦截垃圾的几率尚可,如果它不能判断的,会放到队列里由你亲自判断。这款插件几乎可以100%拦截垃圾评论,垃圾联系表单信息。我之前在外贸网站上加了Contact Form 7之后,短时间内收到几十封垃圾邮件,都是通过联系表单发送的,后来找到了这款插件,可以和Contact Form 7完美整合,目前已经拦截数千封垃圾邮件,推荐大家使用,比验证码方案更加友好。

WP Fastest Cache: 网站加载速度对用户体验和SEO至关重要,开启缓存是网站加速的常用方法之一。WordPress最有名的缓存插件应该是WP Super Cache和W3 Total Cache,前者稳定,兼容性好,但是加速效果不是很理想,配置难度适中。后者功能非常强大,配置得当的话效果让人惊艳,但是配置难度极高且容易出现兼容性问题。WP Fastest Cache配置简单,加速效果理想,大家可以尝试一下。之前我还用过Comet Cache(这个插件改过几次名),一键配置,可以说配置简单得不能再简单,需要的朋友也可以考虑。如果愿意付费,可以使用WP Rocket,口碑很好。

注:所有插件,在后台搜索安装并启用即可。部分插件有设置项,请详细查看插件的详细指引设置。因使用环境不同,安装使用任何插件都可能会引起问题。出现问题之后建议大家先到插件页面的Support页面搜索是否有过相关反馈,如果没有,可以发信息询问。我的几个网站使用Bluehost空间Avada主题及其他一些保持更新的主题,均未出现任何兼容性问题。如果使用插件遇到任何问题,责任自负。

WordPress插件还有很多,先介绍这些。如果大家需要某些功能,可以留言,我会推荐相应的插件。

WordPress外贸建站:Page Builder by SiteOrigin

siteorigin-drag-and-drop

上一篇文章WordPress外贸建站:Avada主题/模板提到了Avada的一个非常方便强大的功能Fusion Builder,可以制作出非常吸引人的页面。如果想使用这么方便强大的编辑器,又不想换现在的主题(如果现在主题还不错,而且已经用了相当长的一段时间,确实最好不要更换)怎么办?今天我们介绍一款强大的page builder插件:Page Builder by SiteOrigin

Page Builder by SiteOrigin适用于几乎所有主题/模板,可以在安装插件页面搜索关键词快速安装。安装并启用之后,你在编辑器的右侧就能看到它的标签了,点击切换到Page Builder。

siteorigin-page-builder

切换之后会看到下面几个按钮,我们常用到的是添加小工具,添加行和实时编辑器(这个实时编辑器会打开前台页面,编辑器在左边,你修改的时候右侧的前台内容会实时变化,以便帮助你实现自己想要的效果)。

siteorigin-options

添加行的自定义程度非常高,可以用罕见来形容。可以定义一行分成多少栏,每一栏的宽度所占的比例,百分比精确到小数位,拖动中间的竖线即可调整。

siteorigin-row

siteorigin-row-width设置好布局之后,我们就要往这些栏里面添加小工具(widget)了,这里可以用wordpress标准小工具(就是我们的侧边栏sidebar用到的那些小工具),其他插件生成的小工具,还有一些第三方为Siteorigin Builder开发的小工具包(widget bundle),这里推荐Siteorigin官方开发的小工具包:SiteOrigin Widgets Bundle 这里面包含了很多常用的小工具,如标题,按钮,图标,客户证言…… 安装插件并启用之后,到插件-Siteorigin Widgets菜单下激活你需要的小工具,一定要先在这里激活,你使用Page Builder的时候才能选择这些小工具。

siteorigin-widgets-bundle

siteorigin-add-widgets

每个小工具都有它自己的设置选项,而且你可以很方便地复制,删除,拖放小工具和行。

siteorigin-widgets-options

siteorigin-call-to-action

使用行设置页面布局,使用小工具为页面添加自己想要的功能,这样就可以做出几乎任何自己想要的页面。

Siteorigin Page Builder可以免费使用,用户数量庞大,开发者也在不断添加新功能及增强现有功能,用户社区非常活跃,大家可以去他们的官方网站看一下:https://siteorigin.com/

插件是Wordpress的一大特色,通过使用插件,没有代码基础的我们也可以实现很多复杂的功能,下一章N10将为大家推荐一些外贸建站必备Wordpress插件,可以实现各种不同的目的,敬请期待!

WordPress外贸建站:Avada主题/模板

avada-themeforest

如果你已经购买Bluehost,在Bluehost后台一键安装了WordPress,那么接下来要做的第一件事应该是找一款适合自己的主题或者说模板。建一个企业站,当然不能用普通的博客主题,比如Neil说现在用的这一款。企业站需要更多定制化的功能:比如联系表单,地图,客户证言,产品展示……今天给大家推荐一款Themeforest上销量最高的一款多用途(multi-purpose)主题:Avada(备注:Themeforest注册的时候会用到Google的验证系统,所以需要你懂的工具才能顺利注册,关注微信公众号neilshuo在后台发送“见面礼”即可获得工具。注册成功之后就不需要使用工具了。)主题一旦选定,不要轻易更换,Neil说博客就是一个反面教材,汗。

Avada主题的功能可以用两个字加一个标点符号来形容:强悍!几乎你能想得到的样式,都有办法用Avada来实现,而且Avada主题的自适应做得非常好,Google测试移动端用户体验100/100。如果你已经有一款主题,你很喜欢它的样式,但是移动端自适应太差,可以考虑用Avada重构网站,几乎能够还原现有网站的样式。Avada的安装方式很简单:可以通过Wordpress后台上传安装,也可以用FTP上传到服务器之后解压,推荐后面一种,因为Avada的安装包有点大,40MB左右。下面介绍一下我认为Avada强悍的地方:

1. 可调整(fine tune)的选项非常丰富,几乎包含了所有细节(改颜色,改字体,字号,鼠标悬停效果,间距……),如果是没有集成到theme options的设置,Avada也提供了custom css的选项。选项太多,新版本贴心地加入了搜索功能,不用再一个选项一个选项看了(推荐初次使用的时候仔细把所有选项都看一遍,你会发现很多你想改的地方,这里已经有选项了)。

theme-options

theme-options-details

2. 和一些常用的插件兼容,并且专门为这些插件设计了跟主题搭配的样式,如layerslider,contact form 7(这样可以兼顾功能和美观,不会修改css的朋友可以直接使用,生产的幻灯片轮播和联系表单样式和主题本身非常协调)。备注:记得一定要激活Fusion Core这个插件,这样才能使用很多核心功能。

theme-plugins

fusion-core

3. 强大的Fusion Builder,模块化编辑器。大家平时会看到一些网站首页或者Landing Page做得很漂亮,其实用Wordpress也可以做出这样的效果,而且不需要编写一行代码。Avada就提供了这样的功能(备注:Fusion Builder是默认关闭的,所以很多朋友在编辑器那里找不到Fusion Builder的按钮。如需使用,请先前往Avada-Theme Options-Advanced-Theme Features-Fusion Builder选项设置为ON),这里可以很方便地加入分栏,在每一个分栏中中插入不同的元素(elements)。Fusion Builder提供了很多预定义的元素,如客户证言,幻灯片轮播,列表,Youtube视频,图标,倒计时…… 如果想使用这么方便强大的编辑器,又不想换现在的主题(如果现在主题还不错,而且已经用了相当长的一段时间,确实最好不好更换)怎么办?这是N10下一篇文章要讲的内容,敬请期待!

column-options

builder-elements

4. 用户数量庞大。AvadaThemeforest上销量第一的主题,这意味着开发团队有足够的经济利益保证持续开发新功能和优化现有功能。用户数量庞大并且有建立用户社区,意味着很多问题其他用户都已经遇到过,当你需要解决问题的时候,往往能够找到已经证明有效的解决方案。你也不想自己用的主题太小众,三年五载不更新,发个客服邮件都没人回,遇到问题也没其他用户可以交流吧?

使用过程中发现的插件兼容问题:如果你安装了Wordpress Download Manager,请在Settings里disable Bootstrap JS,否则使用Modal和Button元素制作的弹出式联系表单会出现一闪而逝的问题。另外,如果你在同一个页面里使用了两个Button制作弹出式联系表单,可以只使用一个Modal元素,如果一定要使用两个Modal元素,记得把Modal Anchor Name改成不一样,不然会出现点一下按钮,弹出两个联系表单的问题。

点击下面的图片购买这款主题,良心价59美金,绝对秒杀国内大部分商业主题。

avada-themeforest

备注:注册Themeforest需要使用你懂的工具,因为使用了Google的验证系统。关注微信公众号neilshuo在后台发送“见面礼”即可获得工具。

WordPress基础

wordpress

越来越多的朋友用WordPress建立独立博客,企业网站甚至是在线购物网站。有些朋友打算使用WordPress,但是又担心操作困难。今天跟大家分享一些WordPress基础。

1. WordPress是什么?

具体介绍大家可以查看官网网站或者Wikipedia。简单地说WordPress是一款开源内容管理系统,我们可以用它来搭建网站。最初WordPress是作为博客系统来使用的,但是随着越来越多的用户和开发者使用和贡献代码,现在WordPress的功能已经非常强大。千千万万的国内外网站都用WordPress搭建,说不定你客户的网站就是用WordPress搭建的。

2.怎么安装WordPress?

如果是要搭建一个网站而不是在本地环境测试学习,那我们首先需要购买一个主机空间,WordPress官方推荐Bluehost,Neil说也是使用的Bluehost,已稳定运行三年。点击查看购买教程

接下来就是安装WordPress,大致有两种方法:一是五分钟安装法,动手能力强的朋友可以自行搜索;另外一种是我推荐的做法,Bluehost的控制面板有一键安装WordPress的选项,大概两分钟就可以进行无痛安装。

安装完成之后,保留好初始账号和密码,在浏览器输入http://yourdomain.com/wp-login.php ,输入账号和密码。建议先修改帐号和密码,在左侧的菜单栏有一个用户选项,这里可以管理用户,给予不同的权限。更复杂的权限管理可以使用相关插件。建议不要给太多用户管理员权限。加入同一个公司有多个人共同打理这个网站,可以给操作人员设定编辑权限,管理员权限由一个熟悉WordPress功能的人掌握,以免因误操作造成损失。

3.安装WordPress之后要进行哪些设置?

a.主题Theme,又称模板

WordPress安装完成之后,默认应用的一个官方主题themes,又称模板。大家对模板最直观的认识就是前台的布局和样式,当然,其实后台也有模板,只是用得相对少一些。一些高级模板还集成了大量的功能,省去安装过多插件的麻烦。

默认的主题往往不能满足大家的需要,所以需要寻找适合自己的主题。网上有大量的免费主题和付费主题。免费主题建议从WordPress官方库里面寻找或者只使用可信来源发布的主题,避免主题被植入恶意代码。

付费主题推荐大家去Themeforest看一下,价格公道功能强,服务也很赞。上面有很多国外的开发者,相对来说开发出来的主题更符合国外客户的审美。点击注册 (注:因使用Google验证系统,注册需使用工具,关注微信公众号neilshuo在后台发送“见面礼”即可获得工具。)

每一个主题都有不同的功能,大家可以查阅主题的帮助文档,最好的办法就是亲自动手尝试。建议主题设置好之前,暂时先屏蔽搜索引擎的索引,WordPress里有这个设置。等到调整完毕之后再开放给搜索引擎,千万别忘了这一步,不然后果很严重。主题确定之后就不要再频繁地更换,以免影响优化。

b.插件Plugin

WordPress为人称道又为人诟病的是它强大的插件系统。基本上只要你想得到的功能,就能找到相应的插件实现。如果找不到,恭喜你,你可以开发这样一款插件来卖。

插件也有免费和付费的,免费插件建议从WordPress官方库寻找或者只使用可信来源发布的插件,以免造成冲突,影响性能。

插件可以实现的功能很多,Neil说安装的插件有防垃圾评论的,安全插件,生成网站地图的,生成订阅表格的,优化数据库的,文字编辑增强的……如果大家有需要,可以留言写出你的需求,我可以帮你推荐相应的插件。

最后,不要安装过多插件,否则会影响网站的性能。如果网站打开速度过慢,大量的访客会流失。许多有洁癖的站长选择主题写入代码的方式取代安装插件,但是代码加太多一样会影响网站性能,所以需要大家有所取舍,不要盲目追求花里胡哨的功能,用心做好内容才是王道。

c.小工具Widget

如果大家有留意,可以看到Neil说的侧边栏有很多内容,这些内容是通过Widget实现的。Widget的位置由主题开发者事先设置好,一般放在侧边和底部。WordPress预设了一些Widget类型,比如日历,热门文章,文字……还有一些是主题自带或者插件自带的Widget类型,可以用来实现不同的功能。

文字类型的Widget支持HTML代码,大家可以加入一些自定义内容,比如Neil说右侧的广告,还可以加入微博秀之类的小工具。首先在工具网站上获取相应的代码,比如新浪微博的微博秀,然后新建一个Widget,填入代码,保存,回前台看效果。

d.菜单Menu

这里是统一管理菜单的地方。我们平时看到的网站导航条,底部相关链接大都是在这里设置。可以建立多个菜单,然后在不同的地方使用不同的菜单项。

这里先说一下主导航。菜单可以加入不同的项目:页面,分类目录,自定义链接。自定义链接也可以加入站外链接。比如我们的网站可以链接到其他网站,而不仅限于本站内的内容。

4.一些基础概念

a.文章Post

顾名思义,就是之前的博文,每篇文章都要从属于一个分类category.新闻,产品一般是发Post类型。

b.页面Page

固定的内容一般用Page,比如联系页面,当然也有用Post的。

c.一些自定义的类型

很多高级主题有自定义类型,比如客户证言Testimonials。

d.固定链接Permalink

我们留意一下WordPress的链接结构,就会发现默认的链接是比较ugly的,?P=数字的结构,这种结构不利于优化,所以我们需要设置不同的固定链接。为了简单,Neil说使用的是PostID.html的结构,大家看一下这篇文章的链接就明白了。一般会设置成PostName.html,把关键词加到链接里面。比如这篇文章就可以写成what-you-should-know-about-wordpress.html 注意,有时候链接里会出现stop words,大家可以自己注意或者用相应的插件去掉stop words。Stop words是什么?请搜索。

固定链接一旦确定就不要再修改,否则会产生大量404错误。

WordPress基础就写这些,有疑问的朋友可以留言讨论。

css.php