week16：使用商业解决方案快速建站

所需资源都在课程微云（不再提供Themify系列工具）。

• 首先注意影响网站打开速度的大多数可能的原因：

  • 对于Google Fonts，很多国产插件都能处理，例如wp-china-yes、wpjam basic等等，注意安装后要在相应的插件设置中打开相应选项，如果还是搞不定的话：
    • 一开始就不要使用各种高级甚至商业化主题，目前的WP默认并不会引入
    • 试试看How to Remove Google Fonts from your WordPress Theme
    • 如果坚持要用，请看How to host Google Fonts local through CSS -Tutorial
  • 对于部分主题和插件调用jQuery官方库但用户无法访问导致页面错乱等问题，可以考虑尽量将这些静态资源本地化，参考如何正确替换WordPress的jQuery库
  • 最影响速度但容易被忽略的Gravatar头像服务访问缓慢导致的卡顿，用wp-china-yes就可以解决
  • 其他因为使用了第三方插件和主题导致的站外资源访问超时导致的卡顿，可以用Query Monitor这个插件来分析

• 其次，对于几种商业解决方案（这里没有提到相对来说最流行的Elementor家族是因为……太贵了没有买）：

  • 如果你的站点相对简单，只是希望构建数个自定义页面，那么请使用某种“Page Builder”方案：

    • 例如Divi或Themify的Builder插件，或DiVi主题或Themify出品的大量商业主题（均内置其各自的Builder），请查看使用成熟的商业主题和插件快速打造基于WordPress的酷炫网站的P1和P2、以及Themify Builder V4。
    • 或者尝试基于基于WP新版所推行的Gutenberg Blocks的新一代方案如Qubely Pro等，请查看使用成熟的商业主题和插件快速打造基于WordPress的酷炫网站的P3

  • 如果你的站点含有大量的custom post types并会持续更新内容，希望能够自定义主题（中的不同类型内容的列表页和单项页），请使用某种“Theme Builder”方案

    • Divi主题或Divi Builder插件内置的Divi Theme Builder：请查看使用成熟的商业主题和插件快速打造基于WordPress的酷炫网站的P1
    • Themify的Builder Pro插件：需要配合Themify出品的大量商业主题或其Builder插件使用，请先看Themify Builder V4，再看Themify’s Builder Pro，注意都是多P视频。其中Themify’s Builder Pro的最后1P是一个通过集成Pods打造一个房产网站的实例

• 最后，提醒大家注意一些容易被忽视的细节：

  • 一定要找到并处理拖慢网站呈现速度的罪魁祸首，例如上文提到的那些

  • 虽然套模板很愉快，但不要忘了删去无用的页面、小工具和菜单项

  • 如果你的站点首页是一个Landing Page并且通过菜单项指向页内锚点实现页内滚动，别忘了在站点的其他地方调用另一个指向全站其他内容的菜单

  • 关于字体的基本处理：

    • 如果是英文站点但目标读者在国内，妥善处理Google Fonts，尽量如上所述将之本地化而非粗暴干掉
    • 如果是中文站点，记得自定义并初始化一套字体CSS，尽量兼顾各种用户可能使用的平台的默认字体，可以参考如何优雅的选择字体(font-family)，此文末也提供了两个项目：
      • Fonts.css — 跨平台中文字体解决方案
      • typo.css — 中文网页重设与排版：一致化浏览器排版效果

  • 或者，说大一点关于网页排版：

    • 超赞！最佳WEB字体排版实践的简明指导手册，原文在这里：Typography Handbook
    • W3C的中文排版需求，背后的故事在这里：值得纪念的日子，中文互联网终于有排版规范

  • 其他UI/UX细节，例如站外链接的“target”尽量使用“_blank”在新窗口中打开，站内图片尽量考虑使用Lightbox等

上述内容涉及到的必要知识：

• Web开发通用：

  • 基础的HTML和CSS知识
  • @font face：搜索一下大体了解之后看看：真正了解CSS3背景下的@font face规则
  • JavaScript及成熟框架如jQeury的基本使用

• WordPress相关：

  • Custom Post Type，及相关插件，如Custom Post Type UI、Pods
  • Custom Fields，及相关插件，如Advanced Custom Fields、Pods
  • Child Theme

• WordPress Visual Builder相关：

  • Page Builder

  • Theme Builder，注意和上述插件的兼容性