wordpress优化之结合prism.js为编辑器自定义按钮转化代码

原文链接 http://ymblog.net/2016/07/24/wordpress-prism/

继昨天花了一天一夜的时间匆匆写了主题Jiameil3.0之后，心中一直在想着优化加速，体验更好，插件更少，到目前为止，博客插件有多说，Crayon Syntax Highlighter代码高亮插件，super cache缓存插件，百度sitemap。在没有缓存的情况下，首页dom初识加载完成（不是document加载完成）的时间为5-6s左右，有缓存的情况下大概为2s左右，觉得慢了，查看源码，发现在首页代码高亮插件的代码也会加载，还有jquery的引入，因为自己已经额外引用了百度jquery的CDN，所以觉得完全没必要，想着怎么换掉。

查了下资料，牛逼的人们总是啥都会整出来，看到Prism.js，处理一下只需要引用50KB不到的js，而且不依赖jquery，非常nice，使用prism.js的具体过程请看这篇文章：wordpress无插件实现sublime代码高亮显示

用过的同学就会发现，尼玛即使那样做了，在后台编辑文章时的体验特差啊啊啊，心灰意冷！因为要在文本模式下插入指定的代码，再切换回可视化，而这样切换，光标及可编辑的位置就变得模糊而不可调整，简直了，而且添加的代码还要将标签转义才能够正常显示。巨坑！

后来动动脑子想到，自己手动写个转化工具网页不也是可以？于是就开始着手了。

实现的目的只想把代码拷进去，点一下按钮，再点一下复制就可以去粘贴代码到编辑器 了

于是结构看起来是这样的：

<div class="box">
  <div class="h">
    选择语言：<select id="lang"></select>
    <a href="javascript:;" id="copy">复制代码</a>
    <a href="javascript:;" id="render">转化</a>
  </div>

  <textarea id="code" placeholder="粘贴源代码"></textarea>
  <textarea id="box" placeholder="复制生成后的代码"></textarea>
</div>

　　

关于语言选择当然不能写死，万一以后要增加呢，所以我们定义数组动态添加：

var la = ["html", "js", "css", "php", "java", "jsx", "git", "nginx", "yaml", "scss", "sass", "c", "c++", "CoffeeScript", "go", "jade", "sql", "json", "less", "python"];

for (var i =0; i < la.length; i++) {
  str = document.createElement("option");
  str.value = la[i]
  str.innerHTML = la[i];
  lang.appendChild(str);
}

　　

当点击转化时，转义html标签为实体后，首位添加上prism插件必须的pre标签和行号：

render.addEventListener("click", function () {
  var content = code.value;
  content = content.replace(/</g, "<").replace(/>/g, ">");

  str = '<pre class="line-numbers"><code class="language-'+ lang.value +'">\n';
  str += content;
  str += "\n</code></pre>";

  box.value = str;
}, false);

　　

然后是点击复制就将目标代码复制到剪切板：

copy.addEventListener("click", function () {
  box.select();
  document.execCommand("Copy");
});;

　　

就这样完成，但是还是有个小坑，我在写的时候发现了，要粘贴代码的时候需要手动切换到文本模式，粘贴完代码后还得切换到可视化，就这个巨坑，而且代码样式不能预览，不过比之前好多了，为了不用那么冗余的插件，为此也算是值了。完工后的界面是这样子的。请戳链接：demo，转载请注明连接。

那么问题又来了，我不可能每次手动输入这个地址吧，多麻烦？我想要在后台写文章的时候添加一个按钮跳转到我自定义的这个页面，万能的网友总是一如既往的牛逼，有2中解决办法：

1. 在后台左侧界面添加自定义菜单
2. 在编辑器界面添加按钮跳转

很显然，我会先择后者 ，它们看起来分别是这样的：

两者的实现方式分别为：

// my_add_pages() 为 'admin_menu' 钩子的回调函数
function my_add_pages() {
    // 第一个参数'Help page'为菜单名称，第二个参数'使用帮助'为菜单标题
    // 'manage_options' 参数为用户权限
    // 'my_toplevel_page' 参数用于调用my_toplevel_page()函数，来显示菜单内容
    add_menu_page('Help page', '使用帮助', 'manage_options', __FILE__, 'my_toplevel_page');
}

// my_toplevel_page() 用于显示菜单的内容，填写菜单页面的HTML代码即可
function my_toplevel_page() {
    echo '
    这里填菜单页面的HTML代码
    ';

    // 如以下示例代码。 wrap 类是WordPress构建好的css类，可以在你的HTML代码中使用
    /*
    echo '
    <div class="wrap">
    <h2>使用帮助</h2>
    <p>这里是使用帮助，通过阅读本文你将了解本程序的使用！有事请<a href="#">与我联系</a></p>
    </div>
    ';
    */
}

// 通过add_action来自动调用my_add_pages函数
add_action('admin_menu', 'my_add_pages');

　　

这段代码的参考文章是：WordPress后台添加侧边栏菜单。后者的实现方式是：

add_action('media_buttons', 'add_my_media_button');

function add_my_media_button() {
    echo '<a href="#" id="insert-my-media" class="button">Add my media</a>';
}

这段代码参考的是：如何给wordpress的编辑器添加一个自定义按钮，并且实现插入功能。

这样点击添加代码块，就会跳转到自定义的转化代码的html页面。

原文链接 http://ymblog.net/2016/07/24/wordpress-prism/