基于 React JS 以文字为主的单页面 SPA WordPress 主题 Foxhound

基于 React JS 以文字为主的单页面 SPA WordPress 主题 Foxhound

基于 React JS 以文字为主的单页面 SPA WordPress 主题 Foxhound

今天要为大家介绍的是一款基于 React JS,以文字为主的 WordPress SPA 主题 —— Foxhound,该主题使用 React JS 为前端框架,通过 WordPress Restful API 调用 WordPress 文章数据并展示在前端,主题没有太多花哨的功能,仅支持文章、页面、评论图片等 WordPress 内容的正常显示,主题内所有的链接都已经转换成了 React Router 链接,所以这是一个 WordPress 单页面应用主题,适合以文字为主的博客使用。

Foxhound React 主题功能及设置

因为这是一个实验性的主题,在让主题工作之前,我们需要做一些设置,们组一些条件,首先,我们需要内置 REST API 的 WordPress 4.7 以上的版本,因为 WordPressREST API 没有为菜单提供端点,我们需要安装 WP-API Menus 插件;WordPress 站点的固定链接格式必须为,/%year%/%monthnum%/%postname%/,否则文章/页面将不能工作,相应的,分类目录和标签前缀应该设置为 category 和 tag。Foxhound 主题比较适合注重文本的网站,在文章列表页面只显示文字,在文章和页面正文页面,显示一张特色图像。

Foxhound React 主题的一些限制

因为是基于 React JS 开发的主题,Foxhound 主题在功能上会有一下限制,不会像其他基于 PHP 的 WordPress 主题那样工作。 如果浏览器禁用了 JavaScript,主题不会显示任何内容。

对于 Google 来说,使用 Foxhound 主题不会对 SEO 造成不好的影响,因为 Google 已经何以抓取 JS 生成的内容了。也不会影响网站的可访问性(2012年99%的屏幕阅读器用户启用了JavaScript),百度能不能抓去 JS 生成的内容目前还没有一个官方的说法。

WordPress Restful API 不能被一些安全插件屏蔽,一些插件可能会屏蔽用户端点,而显示作者存档的时候需要此端点,如果一定要屏蔽用户端点,作者存档页面就无法显示了。

如果禁用了主题,站点的固定链接结构会被改变,我们需要一些重定向插件来做好 301 重定向。

该主题支持嵌套分类目录存档,是有父级主题可以显示为存档方式,以后的版本中可以会修复这个问题。

如果插件添加了内容到站点前端,插件可能不会正常工作,大多数 Jetpack 功能可以正常工作。

如果我们登录了站点,管理工具条不会根据不同的页面更新, “编辑 X” 链接将保留为最初打开那个页面的链接,强制刷新当前页面后,编辑链接才会变为当前页面的链接。

主题开发

我们也可以从主题的 Git 仓库中安装主题,然后自己构建,下载主题到 /themes 目录,然后运行npm 安装并构建,  JavaScript 和 CSS 文件. 流程如下:

git clone https://github.com/ryelle/Foxhound foxhound
cd foxhound
npm install
npm run build

运行上面的命令之后,我们可以在主题目录中找到 build/app.js 文件, 然后,在仪表盘,切换主题为 Foxhound 主题即可。

除了上面的命令,我们还可以使用以下几个命令进行一些操作。

  • npm run dev:运行 webpack, 此命令编译的代码包含代码源地图,方便前端调试。
  • npm run watch:运行 webpack –watch, 会运行前面的所有命令,同时也会监控源文件的变化,当源文件改变时会自动重新编译,开发时可以使用这个命令及时查看修改后的效果。
  • npm run lint:检查所有 JavaScript 文件. Webpack 在编译之前也会检查, 但是只会显示错误信息,此命令会同时显示警告信息。

在PHP端,Foxhound 主题修改了一些自定义路由链接以方便 React JS 访问数据。

由于主题功能比较简单,使用范围可能有限,但是这是 Github 可以找到的位数不多的 WordPress React 主题,有比较大的学习借鉴意义,感兴趣的朋友可以阅读一下源码,试着改造一下,看是否能二次开发为自己需要的样式。

本站提供 WordPress 主题定制开发服务

本站长期承接 WordPress 主题、插件、基于 WooCommerce 的商店商城开发业务。 我们有 8 年 WordPress 开发经验,如果你想 用 WordPress 开发网站, 请联系 QQ: 470266798,或邮箱: 4626395@gmail.com 咨询。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*