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/