从hexo迁移回wordpress,并进行wordpress优化、编辑器等

技术 kingmo888 6009℃ 0评论

最初为何选择Hexo?

当初也是机缘巧合才得知有hexo这款程序,它的优势在于可以生成纯静态文件,执行效率有保障,更何况可以把静态文件放到N多支持静态文件的地方——github、coding、阿里云oss等地方。更重要的,有逼格~

为何从Hexo迁移回WordPress?

博主最初将程序放到了github,通过git上传,后来为了提高访问速度迁回国内阿里云虚拟主机。速度很快,但是本地环境nodejs里的ftp上传插件老有问题,无法通过hexo g -d如此有简洁有逼格的方式使用了,痛苦的使用ftp工具将生成的静态文件完整上传 – -!

而且,因为博主经常换电脑,Hexo的环境又不能老跟着跑,没有在线编辑那么方便,因此——

忍无可忍,无须再忍!

在高逼格与适用性之间,博主选择了后者。

迁移过程注意事项

  1. 保持文章、标签、分类地址的一致性。
  2. 文类、标签的别名保持一致,尤其是原来在hexo中使用中文描述英文标签时,切换到wp后要注意别名的一致性。
  3. 文章的迁移。可以考虑使用wp自带的rss导入工具,不过博主的文章很少,花了大几十分钟人工板砖完成。
  4. 评论的迁移。使用hexo时博主用的多说插件。wordpress下,多说有几个参数在hexo和wp这两个框架之下有些不一样,thread_key参数,需要调成和之前框架下一致的(有了大php,博主整完之后最终再次放弃了多说插件,下面会讲到wordpress如何彻底卸载多说插件)。

迁移wordpress以及wordpress的优化过程

1、首先安装wp的程序,这一步不说了。

2、wordpress提速优化之一:安装wordpress程序后马上要做的就是屏蔽google的字体、头像,安装WP Acceleration for China插件>>启用。  之后,设置>>WP加速>>选择加速节点。

3、经过步骤2,网站速度有了质的提升,当然还有优化空间,更多的需要主机的支持,话不多说。安装之前看中的wp主题。

wordpress安装CKEditor编辑器并启用代码高量

使用hexo时,博主最喜欢的功能就是自带的代码高量模块了,贴上代码之后的效果跟在本地IDE编辑器中几乎无差,在wordpress原生编辑器的优先功能里真是没法用。后台搜索插件安装:CKEditor for WordPress

当然,博主整理好了带高亮功能的CKEditor插件,下载后解压上传到WP的插件目录即可。点此下载>>ckeditor-for-wordpress

如果你想自己折腾一把,那继续往下看:

博主当前的环境及版本如下:

  • PHP版本:>=5.3
  • CKEditor版本:4.5.3.3
  • wordpress版本:>=4.4

在最新版的CKEditor中,已经不用考虑代码转移的问题了。启用CKEditor插件后,编辑器功能已经非常漂亮啦,看看:

ckeditor编辑器截图

当前博主的编辑器已经增加了插入代码高亮功能了 – -!

如何启用代码高亮功能呢?

CKEditor自带了高亮插件,我们需要安装它——codesnippet。进入页面后点击Download下载,同时会弹出浮动窗口,里面会有Add-on Dependencies 提示,也就是说使用这个插件所需要的依赖插件,我们来看看总共需要下载多少:

  1. codesnippet   <- WidgetDialog
  2. Widget      <- Line UtilitiesClipboard
  3. Dialog      <- Dialog User Interface

合计ck插件6个,下载后解压放到wp插件路径中ckeditor插件下的plugins目录下,然后对ckeditor插件目录下的ckeditor.config.js文件进行编辑,增加一行:

config.extraPlugins = 'clipboard,lineutils,widget,dialog,codesnippet';

启用highlight.js库

启用方法即在主题中加载js、css来启用highlight.js库。方法如下:

  1. 在<head></head>标签区域内,插入<link href="//cdn.bootcss.com/highlight.js/9.2.0/styles/kimbie.dark.min.css" rel="stylesheet">,这里使用了bootcss的镜像,速度嗖嗖的。
  2. 在页面底部区域添加JS调用:<script src="//cdn.bootcss.com/highlight.js/9.1.0/highlight.min.js"></script>,同样使用了bootcss的镜像。
  3. 最终在步骤2代码的下方添加一行<script>hljs.initHighlightingOnLoad();</script>,启用高亮显示。

高亮大功告成!!! 不要被我选择的效果丑哭,哈哈,你可以通过调整引入的CSS文件来调节其风格,完全不用自己写哦。如下图:

code_highlight_demo

如果你常用的语言并不是很多,可以编辑ckeditor.config.js文件,增加语言限制和调整语言顺序:

    // 设置插入代码时的编程语言可选项。
    config.codeSnippet_languages = {
        python: 'Python',
        apache: 'Apache',
        bash: 'Bash',
        coffeescript: 'CoffeeScript',
        cpp: 'C++',
        cs: 'C#',
        css: 'CSS',
        diff: 'Diff',
        html: 'HTML',
        http: 'HTTP',
        ini: 'INI',
        java: 'Java',
        javascript: 'JavaScript',
        json: 'JSON',
        makefile: 'Makefile',

安装阿里云OSS支持

通过把图片等静态资源放到OSS上可以达到降低资源使用率提升速度的作用。

 

卸载多说插件

前文中提到了,WP下安装了多说插件,反正感觉各种不爽,原因不再多提,反正我大PHP下可以使用WP自带的评论模块。用多说技术支持的话说,反正你的留言数目又不多,直接删了呗。好吧。

直接停止多说插件,删除插件并删除所有文件。

执行数据库操作:

DELETE FROM `wp_commentmeta` WHERE `meta_key` like 'duoshuo%'

DELETE FROM `wp_options`  WHERE `option_name`  like 'duoshuo%'

多说插件彻底清理干净喽!

其他加速

1、wordpress>=4.2及以上版本中新增了emoji表情支持,因此会在网站上加载一些wp-emoji-release.min.js之类的js、css调用,如果对此无感,直接屏蔽掉即可,方法:

在主题的functions.php中加入以下代码


/**
 * Disable the emoji's
 */
 function disable_emojis() {
 remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
 remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
 remove_action( 'wp_print_styles', 'print_emoji_styles' );
 remove_action( 'admin_print_styles', 'print_emoji_styles' );
 remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
 remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
 remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
 add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
 }
 add_action( 'init', 'disable_emojis' );
/**
 * Filter function used to remove the tinymce emoji plugin.
 */
 function disable_emojis_tinymce( $plugins ) {
 if ( is_array( $plugins ) ) {
 return array_diff( $plugins, array( 'wpemoji' ) );
 } else {
 return array();
 }
 }

2、禁用REST API以及移除WP-json连接

新版的wp中,网站会提供feed给访客以供订阅,这会拖慢网站的加载速度,可以禁用,依然是functions.php中增加:

/* 
禁用REST API
移除wp-json链接
*/
remove_action( 'template_redirect', 'rest_output_link_header', 11, 0 );
remove_action( 'wp_head','rest_output_link_wp_head' );
remove_action( 'wp_head', 'wp_oembed_add_discovery_links' );

remove_action( 'wp_head', 'feed_links_extra', 3 );//去除评论feed
remove_action( 'wp_head', 'feed_links', 2 );//去除文章的feed

 

最后看一下成果:

webkakascan

ce_360

转载请注明:Python量化投资 » 从hexo迁移回wordpress,并进行wordpress优化、编辑器等

喜欢 (1)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(9)个小伙伴在吐槽
  1. 我用了好几年wordpress,最近也在考虑要不要转hexo。百度搜wordpress和hexo相关的信息,发现只有你一人是hexo转wordpress,哈哈,别人都是反过来的!想了下还是不折腾了~
    静水流深2016-11-26 10:20 回复
    • 如果你是技术咔,强烈建议你转hexo。我是没精力,技术又渣渣
      kingmo8882016-11-27 09:53 回复
  2. 我也想赚回wordpress hexo 有点折腾。把写作的快感都搞没了。
    阿修2017-06-04 03:06 回复
    • 那就用wp好了,更加方便。
      kingmo8882017-06-05 00:56 回复
  3. 发现只有你一个人逆向迁移,谢谢你的文章
    haha2017-07-09 06:51 回复
    • 我也是搜索了N次,发现大家都赶时髦。从wp转hexo, 但实际上像我这样非IT人士,用起来很累的。浪费了大把时间,最终考虑,算了,时间太贵,还是用wp。 祝朋友顺利。
      kingmo8882017-07-09 13:02 回复
  4. 请问博主现在用的是什么主题, 看了很多主题都不太合意, 感觉博主的主题不错, 可以分享一下么.
    行川2018-06-19 20:33 回复
    • 你搜索一下沐风博客主题。
      kingmo8882018-06-20 09:13 回复
  5. 你的两个问题,都不是问题 我昨天搭建的 hexo,用了 hexo-admin 插件,可以在线编辑 hexo g 没问题;不需在本地部署 hexo 环境,也就无所谓换本子问题了
    温柔魔君2018-12-28 18:57 回复