[WP外掛] AddQuicktag在後台編輯區增加常用語法按鈕

對於喜歡用純文字編輯介面寫文章的人,這實在是個不可多得的好工具,只要在後台設定幾個常用的語法前後綴,寫文章的時候就可以輕輕鬆鬆用反白點選的方式完成加入語法。

舉例來說,有時候寫文章時需要在文中插入標題,然後標題文字的顏色和字型大小要跟本文文字有所區隔,所以我必須在編輯的時候(非「所見即所得」編輯器)輸入:

●<font color="#99cc00"><u><b><span style="font-size: 16px">我的標題文字</span></b></u></font>

文字前後加的那一大串如果數量一多真的是很麻煩,但是有了這個AddQuicktag外掛,我只要把前面那一串:

●<font color="#99cc00"><u><b><span style="font-size: 16px">

和後面那一串:

</span></b></u></font>

加入到AddQuicktag設定中,那麼我的編輯畫面就會出現一個新的按鈕「標題」(可自行設定名稱),以後凡是遇到標題文字,我只要反白,然後按一下「標題」按鈕,前後那一大串語法就會自動幫你寫好,真的是非常方便。

WordPress_1207726482601.png
↑AddQuicktag後台設定畫面

WordPress_1207729810115.png
↑在AddQuicktag設定好後,編輯介面就會多出如紅框處的按鈕

AddQuicktag預設可填寫語法的空格剛開始只有三格,但是只要你一填寫到最後一格,它會自動再增加一組空格給你,所以不用擔心設定按鈕的空格不夠用。這些設定好的按鈕,後台也有選項可以讓你以.wpaq的格式備份儲存,一旦系統出狀況,就可以用匯入的方式復原。

下載AddQuicktag外掛(官方包已內含我翻譯的正體中文語系檔)

這個外掛後台很簡單,所以我也順便做了中文化,需要的人請自行下載:

下載:AddQuicktag 1.6.3 正體中文語系檔 AddQuicktag 1.6.3 正體中文語系檔 
 (4.3 KiB, 已被下載 1,401 次)

注意:
1. 本外掛只適用於純文字編輯介面。
2. 中文化檔案下載解壓縮後,請將mo檔放置於/wp-content/plugins,才能順利中文化。

24 thoughts on “[WP外掛] AddQuicktag在後台編輯區增加常用語法按鈕

  1. @水漾,網頁裡提到的WP-AddQuicktag,是另外一個沒錯,而我說的AddQuicktag,其實是另外一位作者接續WP-AddQuicktag發展的後續版本,而且目前這個1.5版支援WP 2.5,所以建議你直接用我提到的這個版本即可。

    至於加上黃色蠟筆圖示的方法,花水木的網頁裡都說的非常清楚了,照著做就對了! :mrgreen:

  2. 花水木說明意思是否是
    到/www/wp-admin/css/底下新增一個文件檔改成.entry-content.css

    然後把她給的語法放到文件檔裡是嗎?

    我有照做,但是做到最後我的內文
    無法顯示‧‧

    而且我也不知道花水木哪種外掛圖片應該放置在哪裡

    還有想再請問的是我用它的方式就不能用你這種外掛?
    你提供的外掛,我有安裝完成
    但是她只能顯示粗體及顏色、大小耶
    看不出與花水木哪樣般特別

  3. @水漾,我幫花水木說明一下好了:

    首先找在/wp-content/themes/你的佈景名稱/下面的style.css這個檔案,然後把這一串:

    .entry-content .yhl{
    text-decoration: none;
    background: url(underline_yhl.gif) repeat-x 120% 100%;
    padding:0 3px;
    padding-bottom: 3px;
    }
     
    .entry-content .cyc{
    text-decoration: none;
    white-space: nowrap;
    line-height:22px;
    padding:4px 2px 2px 2px;
    letter-spacing:0px;
    background:white url(underline_cyc.gif) repeat-x bottom;
    }

    加到這個檔案最後面,存檔。再把那兩個圖片(圈圈和黃線)放到跟style.css同一個資料夾裡。

    然後打開wp後台「設定」→「Add Quicktags」,按鈕名稱自訂,開始標籤填入:

    <span class="cyc">

    <span class="yhl">

    結束標籤填入:

    </span>

    這樣在你的編輯畫面就會多出「cyc」和「yhl」這兩個按鈕了。

    還有請特別注意,這種外掛(不論是wp-addquicktag,還是addquicktag)都只能用在純文字編輯介面,不能用在所見即所得編輯介面。(純文字介面不會有顏色和大小的按鈕)

    wp-addquicktag的版號較舊,而且即使是最新的版本也是2005年就出來的,所以我不確定它跟wp 2.3.3或2.5是否相容,但是addquicktag我確定是相容的,因為我正在使用XD

    如果你比較喜歡花水木推薦的wp-addquicktag版本,那就裝上去吧,除了相容問題外,其實這兩個外掛的功能和介面都是大同小異的。 :smile:

  4. 嗯‧‧
    我看了看,她上面確實沒有你說的這些,可見是我自已知淺了
    很謝謝你幫助我了解這些

    不過當然我也很想使用最新版的,也就是你這款
    而你這款是否也能夠使用她網誌上提供的哪兩種圖示呢?

    也是安裝的部分完全沒有增減嗎?
    一樣是需要你幫助花水木解釋給我聽的哪段?

  5. 最後還是發現
    已經照你的話做完
    但是還是沒有任何效果
    style.css也是用純文字本修改
    啟動外掛、選項裡的add Quicktags也都有增加語法
    內文也都有

  6. @水漾,其實我只是把花水木的圖片用文字再說一遍而已,可能你不熟悉css的用法,所以一直試不出來。

    要做到那樣的效果,最重要的就是在style.css加入的那段語法,至於外掛只是幫助你快速輸入語法標籤而已,所以跟用什麼圖是沒有關係的。

    如果你不介意的話,請告知你的網站,或許我能幫你查查到底為什麼沒有效果。當然,花水木那邊你也可以問問看唷!

  7. 現在我用的是花水木那版
    我確實不熟悉css
    現在我照上面的方法都有安置上去
    編輯器的地方也都有顯示按鈕
    可以起來
    可是儲存後還是沒有任何反應
    網頁也沒有異常亂碼或變動

  8. @水漾,請你把加到style.css的那段語法改成:

    .entry .yhl{
    text-decoration: none;
    background: url(underline_yhl.gif) repeat-x 120% 100%;
    padding:0 3px;
    padding-bottom: 3px;
    }
     
    .entry .cyc{
    text-decoration: none;
    white-space: nowrap;
    line-height:22px;
    padding:4px 2px 2px 2px;
    letter-spacing:0px;
    background:white url(underline_cyc.gif) repeat-x bottom;
    }

    再試試看吧!應該可以了~ :mrgreen:

  9. 有了‧‧‧‧
    我好感動喔
    剛剛又試了兩三次,差點就放棄了
    不知為何前面幾次也都是同樣的複製這次你給的語法,都沒效果耶
    最後一次也只是修改再上傳,就成功了

    YA~~YA~~YA~~YA~~

    謝謝你哪麼熱心拉!

  10. @水漾,改css後最好清一下瀏覽器的cache,這樣效果才會立刻出來,你可能因為這樣試了兩三遍才成功,不過,總算是成功了…

    那些語法不是花水木寫錯,而是她的佈景跟你的不同,所以selector也不同(花水木有特別提到),改成適合你的,就ok啦!

    如果你指的是那兩張圖檔去哪裡下載的,去問花水木可能比較快,不過我知道這個網站可以找到一些可愛的圖片。

  11. 大大你好
    最近剛開始接觸 wordpress
    也使用這篇文章的特效
    但是效果沒有出來
    我是使用 vSlider3 的佈景
    應該是selector不同
    可否請大大指教一下
    那段語法應該要如何改
    謝謝啦

  12. Pingback: Wordprss推薦外掛 | GiKuZONE Knowledge Guide 技術文件網誌

發表迴響

您的電子郵件位址並不會被公開。 必要欄位標記為 *

*


*

您可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">