WordPress 精品插件大全页面的开发小记

昨天发布了一个Page页面：WordPress 精品插件大全。有些朋友比较感兴趣是如何做的，本篇简单写一下整个开发过程，作一个小结，也顺便整理一下代码，本地开发环境里写的比较脏乱差。

自从上次一个突发奇想的Idea 用Python爬取WordPress官网所有插件 之后，针对这些爬取下来的结果，已经写了好几篇文章了：

• 用Python分析WordPress官网所有插件的开发者信息
• 用Python分析WordPress官网所有插件的开发者信息（续以及人物介绍）
• 用Python分析5万+个WordPress插件
• WordPress免费插件的选择指南

在这个过程中把很多东西都能串起来，也乐此不疲，仿佛进入了一个小小的游乐园。就像之前说过的，爬虫得到的结果可以用作数据分析，也可以用来做内容（这一般也是最主要的用途），一鸭三吃。数据分析并不是每个人都感兴趣的，图表虽然可以做的华丽，但毕竟能展示的信息量还是有限，用户无法对信息进行操作，这些数据的用处也不大。所以就想，不如把结果做成一个数据表格的形式，能提供更好的用户体验。一个良好的数据表会允许用户浏览、分析、比较、过滤、排序和操作信息，通过这些来获取对自己有用的信息。

思路

要把大象放冰箱需要几步？第一步：打开冰箱们；第二步：把大象放进去；第三步；把冰箱门带上。

同理，要把一个数据表格放进WordPress需要进步？第一步：新建一个WordPress页面；第二步：把表格放进去；第三步：把WordPress关上。

玩笑了，其实意思差不多，这中间有很多细节问题，其中大部分的也都在本博客上写过了，后面会详说。

最主要的部分就是制作这个数据表格，如果不用框架，自己搞定这些东西不现实。像这类以数据驱动为主的前端表格，用MVVM会很舒服。如果前端页面是需要侧重设计，表现力强，动画效果棒的，原生JS，jQuery,Bootstrarp这类就会更适合。

MVVM 模式，顾名思义即 Model-View-ViewModel 模式，是指双向数据流，即 View-Model 之间的双向通信，由 ViewModel 作桥接。如下图所示：

利用MVVM，很多非常复杂的前端页面编写起来就非常容易了。可以把注意力放在Model的结构上，而不怎么关心DOM的操作。许多前端框架都内置了 Mvvm 功能，比如 Knockout、Angular、Ember、Avalon、Vue、San 等等。本次是选择使用Bootstrap + Vue。

在本地开发好这个数据表格之后，就要解决怎么将它和WordPress融合起来的问题，这是一个已经解决的问题，在本博客开站的第一篇文章里就已经详细的讲解过了：使用Vue.js在WordPress中创建单页面应用SPA，建议提前阅读一下这篇文章。

第一步：新建一个WordPress页面

页面(Page)和文章(Post)都是WordPress的信息发布形式。官网给出的关于页面的解释：

你可以在WordPress中撰写日志（文章）或是页面。当你撰写一般的博客文章时，就是撰写日志（文章）。这些日志（文章）会按逆时间顺序排列在博客首页上。而页面则是如”关于博主”， “联系博主”这样的内容，它们是不受时间规则影响的，其内容一般很少改变。你可以使用页面来组织和管理任意数量的内容。 codex.wordpress.org

一般来说，页面的内容较少受到时间影响，更新少，主要用于分享；页面可以使用包含模板文件、模板标签以及其他PHP代码的各类页面模板。所以，毋庸置疑，本次的需求肯定要使用一个页面。

在WordPress的后台按部就班创建一个页面，改一下页面的固定连接，就叫做 best-wordpress-plugins。为了能针对这个页面做一些特殊设置，还需要在主题文件夹下创建一个自定义页面模板文件：wp-content/themes/genesis-sample/page-best-wordpress-plugins.php（代码在下面），然后把这个页面的自定义模板选定为这个Template Name: bestwordpressplugins

为了达到我想要的页面效果，在这个文件里，我做了几件事：

• 更改默认的页面布局：
  • 使用全页面宽度
  • 去掉页面的标题部分，只显示页面的主体内容部分。
  • 去掉面包屑导航条
  • 去掉网站的页脚部分
  • 增加一些自定义CSS样式，用来让页面的内容部分更紧凑
• 在页面内容之后的区域（genesis_after_content）挂载数据表格，见下图。 这样就可以把文章内容和数据表格作为两个单独的部分区分开

genesis_after_content

这部分主要是涉及到Genesis主题的一些操作，具体都可以在Genesis主题系列教程里找到。代码共享在这里

第二步：表格的数据源

数据源的形式

前端数据表的数据源有很多种形式：主要有HTML (DOM)数据源，Ajax数据源，JavaScript数据源以及服务器端数据源。

本次使用的是json文件，只要把这个文件上传到WordPress的upload文件夹或者theme文件夹里，就可以通过http请求来获取到结果，并可以用来作为一个数据源。如果你感兴趣，可以直接看下这个文件里的原始内容： https://bestscreenshot.com/wp-content/themes/genesis-sample/plugin-tables/dist/result.json

插件的基础信息

本次主要想展示的是一些精品插件，最原始的是来资源之前爬取的WordPress官网所有插件时存在本地的一个jsonline文件，这个文件比较大，有300多兆，内含所有插件的完整信息，如果直接使用的话那是不能接受的。所以，使用一些过滤条件把精品插件过滤出来，单独存为一个json文件来作为最终的数据源，这样是比较轻量的。过滤条件就是上一篇文章里说过的几点：

• 上次更新时间：放宽到1年之内
• 测试到哪个版本：不低于WordPress 4.0吧
• 安装量：这个数据就用下载量替代吧，下载量不低于1000
• 评分和打分人数：评分不低于4.0，打分人数不低于100
• 技术支持帖子：帖子数和解决数都不低于0

过滤的方法仍然是使用Python结合pandas，代码如下：

插件的描述信息

这样基本上就能得到了所有需要用来呈现的数据。不过这里还有一个问题，原始数据里的‘sections’这个字段太长了。。。。不适合用来放在表格了，本来打算不要这个描述算了，只把插件的名字和链接显示出来就完事了，后来发现，一个插件在WordPress的后台里显示的描述是比较简短明了的，和WordPress.org上是不一样的。可以看一下两者的区别：

研究了一下才知道，WordPress后台程序里是通过插件文件的Header Fields 来获取插件信息的，类似如下：

A valid PHP file with a header comment might look like this

后来就用了一个比较脏的办法，把所有过滤出来的这些插件的php文件头都搞出来。。。然后合并回刚才存好的json文件里，作为插件的描述，这样显示出来的就比较清晰简单了。其实还可以进一步再用自动翻译之类的的工具把这些短描述翻译成中文，以便更清楚的展示。这个等以后有时间再搞搞吧。

插件的图标信息

另外一个问题就是关于插件图标。本来也没打算放图标，因为原始数据源里也是没有图标的地址，需要自己处理一下。后来觉得还是放上去显得更好看一点吧，研究了一下WordPress官网上对插件的静态资源设置标准 How Your Plugin Assets Work可以发现，一个插件的图标可以有如下几种形式：

• Normal: icon-128x128.(png|jpg)
• High-DPI (Retina): icon-256x256.(png|jpg)
• SVG: icon.svg

这是可以由开发者自由设置的，如果插件作者上传了图标文件，那么最终的图标url形式为：https://ps.w.org/plugin-slug-here/assets/icon-128x128.jpg。

如果作者比较懒，没有上传自己的图标文件，那么WordPress.org会为它自动生成一个图标，url类似这种：https://s.w.org/plugins/geopattern-icon/plugin-slug-here.svg

但具体到实际是用了哪一个，这个也不一定。其实有了slug也是比较好办的，大不了在前端表格里需要显示图标的地方把每个可能的url都试一下，如果文件不存在的话，那就使用默认生成的图标，办法就是在vue里使用img标签的onerror属性，具体方法可以参看这里：vue项目里添加默认图片。但是这样会比较慢，也会多出很多请求。所以，还是用比较脏的办法，用Python把所有这300多个插件的图标文件都循环一遍，根据http的返回码判断实际用了哪个就把图标的url写死到结果文件里，如下：

到此为止，所有需要的数据都已经存入了一个json里了，文件大小200多k，还是能接受的。下一步就是上传到WordPress即可，然后在数据表里就可以使用这个json文件了。

第三步：动态数据表格的开发

本质上这个数据表也可以看做是一个单页面应用，详细的Vue项目的开发步骤在之前的文章里有介绍：使用Vue.js在WordPress中创建单页面应用SPA，如果不熟悉Vue开发流程的童鞋可以再看一下。唯一的不同就是这里并没有使用到WordPress的REST API，是直接请求一个上传到WordPress里的json文件（上文提到的数据源文件），这样反而还会更简单，把数据一次性加载出来放到界面，没有什么太多和后台服务的交互。

还有一点不同之处，这个数据表是主要是使用了BootstrapVue的 table component，封装了一套完善的数据表格组件，把从后台请求的数据很容易就展示出来了，可以做各种针对表格的过滤、排序、分页等等。

这部分细节比较多，主要就是处理数据表的样式，其实也并没有太多的技术含量，就是按照BootstrapVue官方文档一步步就可以堆出来了，文档还是非常清晰的。废话不多说了，直接上代码吧：

WordPress精品插件大全页面

Github源码地址

ToDos：

• 自动更新数据源文件
• 插件详细页面的modal box
• 本博客在用的插件列表自动更新
• 插件描述的中文翻译
• 逐个了解试用一下这些插件，手动推荐其中更好更有用的

​