最近文章
如何检查一个网站在不同设备下的适配显示效果？
我们设计制作网站，或者自己在检验请人搭建的网站是否适配各种不同的显示设备是其中很重要的一个点。根据我自己建站的经验，现在阶段移动端用户访问网站的比例已经达到了百分之四十多接近一半了。那些在移动端没有适配，只是把电脑端缩小显示的网站可想而知会损失多少的流量。 访问网站常用的设备有电脑，平板，手机。那么如果你不是同时拥有这些设备的情况下，或者想更快速的查看网站的适配情况，下面的工具是很好的助手，这也是我平时开发当中会使用到的工具。 浏览器右键检查（inspect） 无论你是使用谷歌浏览器，还是火狐，Edge或者其他品牌的浏览器，都有一个右键检查的功能。只需要点击右键，找到检查inspect。你就会进入一个拥有工具栏并且可以选择不同设备的界面，同时还会显示当前的分辨率多少，而且还可以自己填入想要的分辨率。工具完全是免费的，属于浏览器自带的功能。 Chrome插件 Mobile simulator - responsive testing tool 你只需要在你的谷歌应用商店搜索Mobile simulator - responsive testing tool并安装，在扩展列表把这个扩展钉住这样就可以显示在插件栏。 使用方法也很简单，浏览器输入要检测的网站，并点击插件图标，这样你就进去了界面，可以看到这个和浏览器自带的不一样的地方是他给你套了一个当前工具的图片，类似于手机截图套壳。不过你也会发现，一个这个工具免费是是会带有一些广告的，而且有些设备型号需要付费Pro版本才能使用。 Responsively 官网：https://responsively.app/ 这是一个完全免费的第三方工具，支持Mac和Windows系统。你会问，他和浏览器默认的有什么不同呢？最大的不同就是界面，浏览器自带的工具每一次只能显示一个分辨率的界面，而Responsively可以同时显示多个分辨率的显示。如果你滑动网页，你可以看到所有分辨率下的当前内容显示效果。 还有一个特点是他有内置的网页整页截图功能，这个对于需要把整个网页截图下来又不想再去下载一个浏览器插件是比较不错的功能。当然，工具似乎没有中文可以选择。 付费插件polypane 这是一款付费插件，价格也不便宜。我本人并没有使用过，但是看其他博主用过。除了检查适配情况，polypane还可以做其他很多事情，比如检查网站的无障碍设计accessible，不加载CSS等等。 总结 以上就是我平时有接触过和使用的检查网页适配的工具，希望能帮到你。当然话说回来，条件允许还是最好能拿到真实的设备上登录网站并且查看。有的时候这些工具上显示正常的也许到了实际设备行可能还是有些显示的问题。
用WordPress建站我需要准备哪些东西？
这篇文章我从外贸出口建站角度聊聊做一个网站需要准备的东西。 在现在这个阶段，特别是一场疫情打击下，在外贸领域，我知道很多人都明白了一个道理 - 不能完全靠线下展会了。因为线下展会指不定什么时候就被中断，延期了，也许是几个月，也许是几年。有一个专业的独立站是很多人在考虑的，但是因为自己又不懂，不知道要准备什么东西。下面就以我自己作为业务出身，同事亲身实践自己一点点建站以来实操的经验分享给大家。 做一个网站分为自己做和请人做，这篇文章我着重将如果你请人做一个外贸独立站你自己要准备的东西。在后面的文章我也会聊如果是自己学习建站，你需要学习那些技能和知识，同样可以让你少走很多弯路。 域名 划重点，任何时候域名千万要拿在自己手里。有太多的案例，域名在服务商手里，最后不合作导致的一系列问题。 哪里注册域名？ 注册域名有很多个选择，但是我建议你，如果以后还会注册更多的域名，最好是在一家注册，方便管理，续费等等。 阿里云 阿里云的域名注册前身是万网。在阿里云注册的好处是，可以用支付宝支付，中文界面看得懂，管理续费方便。我自己很多域名也是在阿里云注册的。 Namesilo Namesilo，老牌的域名注册商，价格便宜，支付的域名扩展多，同样也可以支付宝支付。不过个人没有使用过，个人觉得界面有点老旧。 Namecheap Namecheap，是另外一个老牌的域名注册商，同样的价格不贵，界面个人觉得会比Namesilo好看一点。 Cloudflare Cloudflare，更多被熟知的是CDN，DNS，域名解析服务。不过其实域名注册也可以在Cloudflare上完成。缺点是他只能用信用卡支付，并且支持的域名扩展比较少，价格也并没有多少优势。好处是如果你的域名全部是在cloudflare上托管的，在这里注册方便统一管理。 托管服务器 有了域名，下一步需要考虑的就是你的网站存放在哪里，网站是一个24小时都在运行的展厅，所以放在你自己点脑里面是不太现实的。这时候就需要用到云服务器，如果你的网站的用户基本是国内，那么优先选择阿里云服务器。如果客户都是国外的那么选择会比较多，但是多了也就意味着选择困难。下面说说我所用过的一些服务器： Siteground 当时入门建站选择的工具，买的是一个三年的套餐。优点在这三年里划算，但是一旦到期续费就是一个很大的涨价服务。口碑只能说前几年还不错，最近几年有下滑的趋势，现在新账号也是一次购买只能买两年了。我的个人评价是还行，后台管理面板美观，可以作为入门建站同时预算有限的选择，对于速度不要有太高的期待，同时到期了不值得续费。 Hostinger 也是适合新手入门的服务器，有点一样的价格便宜，甚至比Siteground更便宜。可以作为入门建站同时预算有限的选择，不要相信套餐里面的可以放几百个网站或者无限网站，那种都是理论上，实际上我测试过放了十几个网站就提示资源不够用了。后台管理界面同样觉得还不错，挺漂亮的。同样的是续费的价格会贵很多。 Cloudways 是有别于上面这种共享服务器，Cloudways是属于自己购买VPS主机并提供管理的面板。如果你对速度有追求，他是一个不错的选择。价格最低在14美金一个月左右，不存在虚拟主机这种优惠到了之后续费猛涨价的情况。之前他们还提供Digital ocean，Linode，Vultr等供选择，但是2023年中左右开始新用户已经不支持Linode和Vultr主机了。 Runcloud + VPS组合 Cloudways国内已经有很多用户了，但是VPS主机加主机管理软件的组合似乎用的并不多。但是我发现这个组合在一定的条件下性价比比Cloudways更高，那就是除了基础套餐之外，其他的套餐这个组合在性价比上高不少，而我就是最终折腾下来选择的这个组合。 我这个组合的费用：Linode 4 GB（2CPU + 4G RAM + 80G）月租24美金，Runcloud 一个月8美金（如果按年付费一个月6美金多）。同样的配置Cloudways需要54么进一个月，这么看性价比确实高不少。 而同时你如果觉得Runcloud还是贵了的话，你还可以选择serveravatar，价格有免费的和付费的6美金组合。甚至你还有完全免费的选择，Cyberpanel。 我最终选择Runcloud的原因是因为他的UI设计符合我的审核（个人对于界面太原始的工具还是没有太大的使用欲望），同时也测试过客服回复也算及时。 Kinsta Kinsta，简单说，又好又贵，不差钱的话选择它不会有错。界面设计我也很喜欢，可惜钱包不允许。 Rocket.net 后起之秀，也是速度的代名词，价格相对Kinsta低点点，同时还有免费的cloudflare enterprise，我认为算是最大的一个杀手锏。用过几个月，还是由于价格无法支持下去。不差钱的话闭着眼选择rocket.net也不会有错。 好了，服务器的选择就说到这里，这些都是我亲身使用过的。总之一句话，有多少钱办多少事，量力而为。 目标和定位 明确你的网站的目标和定位。确定你希望通过网站实现什么，并明确你的目标受众是谁。对外贸网站来说，自然是我们产品的目标客户，并引导客户在网站发送询盘。 网站规划和设计 建站之前，先进行网站规划和设计。这包括确定网站的结构、页面布局、导航方式、颜色和样式等。没有头绪的话可以去参考同行的优秀的网站。 素材 要先准备好建站所需要的素材，这些素材包括：产品的主图，产品效果图，应用案例图片，工厂图片。需要注意网站最终出来的效果和你的这些素材关系很大。好的效果一定要保证图片素材尽量高清，美观。 很多时候你看到的模板很漂亮，但是套用到你的网站出来的效果缺很差，原因就在于你的图片素材不好。往往模板的图片都是精挑细选，配色考究的。 分辨率也很重要，考虑到现在4K显示器已经越来越普及，你的产品主图分辨率我建议是最低最低都要800像素，最好能有1500像素以上。分辨率高了可以随时调低，但是低了再要调高就很麻烦。…
Bricks builder我的使用体验
Bricks builder，是一款很年轻的WordPress生态下的页面构建器（页面生成器），它的1.0版本是2021年3月16号发布的。相比如其他市面上大家耳熟能详的工具Elementor 2016年发布，Divi 2013年发布，Beaver builder，2014年发布，Oxygen builder 2016年发布，Webflow（非WordPress下的产品） 2013年发布。它比其他的工具起码晚了5年的时间出现。 我的建站经历 Avada主题 我的了解和尝试建站是从2017年初开始的，那时候在阿里云注册了两个域名，空间是在淘宝买的那种香港主机，照着网络教程起码是把WordPress程序搭建好了。最开始了解到的建站工具是Avada，Avada是一款主题，功能非常强大的主题，也是当时很多国内WordPress用户推荐和使用的一个主题。当然了，一个正版的主题要60多美金。对于刚开始入门的我来说自然是可望而不可及的，所以我就在网络上找到了破解版本的Avada。最终的结果是我并没有用Avada建出一个完整的网站来，就算最后我熟悉了点使用流程后真的花钱购买了正版的主题软件。关于Avada，后面几年慢慢的也不被大家推荐了，因为一款工具如果做的什么功能都有的话必然也就意味着臃肿和速度的牺牲了。 Divi 印象中似乎Divi当时是比Avada更强大的一个工具，界面很华丽，可视化编辑。不过最终在试了之后一个页面也没有建出来。 Elementor页面构建器 终于到了一款工具让我真正完整的建成了一个网站，这就是elementor。现在回过头来看，有几个因素： 通过elementor，我终于建立好了一个属于我自己的完整网站，而且是比较复杂的Woocommerce网站，带有比较多的custom field，自定义内容。 但是问题随之出现，我发现用elementor建好这样的比较复杂的网站，无论我自己如何优化，电脑端的打开时间也要6秒左右。无奈之下我在Fiverr上找了人来专门优化速度，优化好之后首页能到3秒左右。但是产品页面因为比较复杂，打开速度还是堪忧。 Oxygen builder 在这之后我变了解到了一款叫做Oxygen builder的建站工具，他的特点是建出的网站速度很快。那，这不真是我所需要的吗。看了Oxygen官方的介绍视频对比elementor等工具之后，我便产生了学习使用Oxygen建站的想法。 然后我发现，使用Oxygen和elementor有很多不同之处。不像elementor可以完全不需要会代码就可以拼凑出一个网站，Oxygen的使用上还是需要你懂点CSS, html的基础知识的。 由于国内互联网使用Oxygen建站的不多，教程也少，我就在youtube上各种寻找教程。官方有写教程，Kevin Geary，Design with Crack等博主也有一些教程。慢慢的我开始熟练使用Oxygen了，确实建出来的网站速度也快不少了。很感激Oxygen的学习过程中让我自己也学习了一些基础的网页制作知识，CSS，html等。 没有一款工具是完美的，没有一款产品是完美的，就好比没有一个人是完美的。Oxygen的使用上我主要遇到了以下的一些问题。 Bricks builder 渐渐的大家发现，另一款新出来的工具叫做bricks builder的似乎也不错，虽然功能还不够强大，但是似乎开发者开发的进度很快，而且很细心。作者是一个德国开发者，他有另一款非常有名的软件叫做happy files。慢慢人们发现，bricks的开发者做事很认证，在每次的更新日志都是非常详细的。而且官网有放出roadmap，大家知道有什么功能正在开发，有什么功能下一步会开发。这些功能是大家投票选出来的最需要的功能。也就是开发者会倾听用户的声音。 我是在2022年6月份购买了bricks的基础版本，并很快在不到一个月的使用时间里面就买了最高级的unlimited版本。因为我发现，会用oxygen的我，用bricks来建站可以很快的上手，因为他们的底层逻辑是一样的，是规范的。 Bricks在我使用之初也是有大大小小的问题的，比如文字编辑界面，进入之后打字会很卡。在编辑器使用是短时间之后，页面元素多了之后，编辑器也会变得非常卡。但是这些问题之后被开发者很好的解决了，到目前为止，我认为是体验最好的编辑器之一了。而我现在建的网站，全部都使用bricks builder来建了。 简洁直观的界面 可以看到，bricks builder左边是所有的组件，包括基础的Section, Div, Heading, Text等等。你只需要点击一下这个组件就被应用到页面里面去了。中间就是网页的画布，如果你刚刚用bricks编辑打开一个页面出现的会是一个空白的画布。 右边是放着此页面下所有用到的组件结构，非常直观。这里有一个小技巧，如果你在画布中间选中一个内容右边的组件不会跳转到相应的标签的话，是在bricks设置里面没有选中builder - Expand active element & scroll into view这个设置。 产生的代码干净 这个是我最喜欢Bricks builder的特点了。作为对比，我还是需要拿其他主流的编辑器产生的代码来做对比，那就是Elementor。…
Automatic CSS – 一款为WordPress开发的CSS框架
Automatic CSS在国外WordPress圈子是一款比较火的工具，特别是你如果有用bricks builder, Oxygen builder这样的WordPress页面构建工具，这个工具几乎无法避开讨论的。搜遍了中文互联网，似乎没有找到什么文章来介绍这个工具的。也许是这个软件太小众，也许大家只是默默的在使用没有说而已。写下这篇文章记录一下我从2021年11月份购买这个软件，在开发者Kevin Geary的youtube频道，内部圈子不断的学习教程下，自己WordPress建站的一些心路历程。 什么是CSS framework（CSS框架）？ CSS 框架（framework）是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块,用于简化web前端开发的工作，提高工作效率。通俗的理解，它就像是超市里面卖的那种给你切好，搭配好的肉，菜一样，你买回去就可以直接炒菜了，省去了你自己去处理的过程。 什么是Automatic CSS? Automatic CSS是一款专门为WordPress生态编写的一款CSS framework（CSS框架），能极大的提升建站时的工作效率和网站的统一性。官网：https://automaticcss.com/，目前已经支持的编辑器有Oxygen builder, bricks builder。之后还会支持Wordpress默认的Gutengburg和Zion builder，Cwicly，Generatepress等工具。注意是不支持市面上最流行的Elementor的。 Automatic CSS可以做什么？ 我们知道使用科学的CSS框架， 会减少你的开发时间和提高效率，因为在平时的网站编写设计中总会遇到很多重复使用的代码参数。 Automatic CSS就是一款这样的工具，其预设好的CSS可以帮助你： 自动文字大小 Automatic.css 支持的网站上包含文本的任何内容，无论是标题、段落、列表、表单字段还是其他任何内容，都通过 12 种不同的大小选项遵循完美的数学等级层次结构，在不同的显示分辨率下自动调整字体的大小。平时一般我们设置比如把桌面端分辨率下下字体设置成16px，平板和手机端如果不单独设置都会显示16px大小，如果要在这两段显示不同的字体大小就必须单独在对应的分辨率下去设置。同过Automatic.css的自定义css，如 text-m，实际上你已经得到了一个在不同分辨率下自动调整大小的字体设置。如下图所示，字体会从14px到16px去自动调节，大屏幕字体大，小屏幕字体小。 自动颜色 设你您的品牌颜色，Automatic.css 会自动生成每种颜色的六种色调变体。 你能够使用这些变体为任何元素（包括背景和覆盖）着色，您甚至可以通过 Automatic.css 颜色实用程序变量将它们与自定义类和 ID 一起使用。 Primary color：设置网站的主色调。Secondary color：设置第二颜色，提示颜色。Accent color：强调性颜色，可用来做CTA按钮等。Action color: 行动性颜色，可用来做CTA按钮等。。。。 相对于直接设置颜色代码，通过设置变量的方式可以很好的保持设计的延续性和一致性，也可以避免每次都要输入记住一堆没有意义代码的麻烦。另一个好处是如果你会将这个网站移植到新的站点，可以及其方便的一键更换网站色调。 2023-4-10更新：在使用了这么久时间建了很多站点之后我个人的习惯是会把平时用不上的颜色给关掉，这样就不会在css里面加载那些一直都用不上的代码了。对我而言，基本上action color加上shade的组合大部分时间里面已经足够了。P.S. shade color默认是无法关闭的。 自动边距 与 Automatic.css…
我的工具
下面是我自己建站所会使用到的工具，更多的工具推荐，点击右边所有工具。
为Bricks builder，Oxygen而开发的CSS框架，极大的简化你的工作流。
一款现代，优秀的的WordPress页面构建器，界面友好，产出的代码简洁。目前我心中的No.1，需要具备CSS基础知识。
Frames
付费一款给Bricks Builder设计的网页组件，特点是设计规范和考虑到Accessible，基于Automatic CSS。
Wordpress媒体文件管理最好的工具，没有之一。通过Happyfiles可以非常方便的分类管理媒体素材。
付费的WordPres代码php，CSS管理软件，支持云端储存代码。
Meta box
免费+付费WordPress生态下最好的自定义字段插件之一，界面简洁，功能非常强大。
