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/