修改quicktag增加文字效果

 :idea: update:
以下方法適用於wordpress 2.0以前的版本,2.1以後,系統已經有內建好用的編輯器,不過原則上,只用quicktag來發文,這方法一樣適用

最近這兩天,我是卯起來寫簡易教學了,希望發功完畢可以幫助世人,太難的我不會,我只會這種簡單的把戲

大學同學Sophie最近也在架起自己的Blog,在使用wordpress的過程中,它發現了一件事,所以問我的作法是什麼?
她說:

我在文章後台的所見即所得編輯器找不到調整字體的功能(只有粗斜體),也改變不了字體的顏色,看你的的 Blog除了有這些差別外,文字甚至還有底線、還有畫圈,請問這個要怎麼完成啊?

Sophie所說得問題我可以了解,也曾經在前幾篇文章裡面討論過類似的作法,像我這樣對Html苦手的人,對wordpress提供的所見即所得編輯器大大的不滿意,更新到2.0.5版後,好像所見即所得並沒有差別:P,而找的到wordpress類似編輯後台的插件,又常常不符需求而且開啟又花時間,所以我用的是笨方法,也就是修改wp-includes/js/quicktag.js這個檔案,直接把我要的功能加進去,這樣一來,文章的編輯後台就會多了一個小按鈕,要改字體顏色、大小或是加什麼底線之類的,都可以採取這個作法。

以不同字體大小顏色為例:

在quicktag.js裡面加進這一句

edButtons[edButtons.length] =
new edButton('ed_font'
,'f'
,''
,'
'
,'f'
);

功效就是文章後台裡點選『f』這個按鈕,跟其他tag功能一樣,就可以直接把這段碼加進你要的文字裡面,再用你記得的顏色替換預設的”red”,大小替換”+1″就可以啦,當然你也可以視情況自行修改你要的預設值,

而至於把文字加入底線或是加上小紅圈的作法也很簡單

先透過這篇分享來把你的圖片以及css加到你到網站裡面,接著

edButtons[edButtons.length] =
new edButton('ed_line'
,'line'
,''
,'
'
,'line'
);

cyc以及hl依你的CSS而定,因為我把這底線圖跟圓點圖在css設定成cyc跟hl,在發表文章時特定文字選擇「line」標籤來加上底線,就是這樣

圖片來源與CSS作法請參照Royboy所寫的教學,直接補充於下方

圖片格式:

.cyc {
line-height:22px;
padding:4px 2px 2px 0;
letter-spacing:6px;
background:white url(圖檔路徑) repeat-x bottom
}

圖片格式:

.hl{
line-height:22px; padding:4px 2px 2px 0px;
letter-spacing:2px;
background:url(圖檔路徑) repeat-x bottom
}

將這兩段CSS加進你原本的css,而cyc,hl為自訂的class名稱,如有需要請自行修改。

update:
追加超連結自己開啟新視窗的方式
找到
edButtons[i].tagStart = ‘’;
改成
edButtons[i].tagStart = ‘
’;

Facebook comments:

View Comments to “修改quicktag增加文字效果”

  1. appleseed 說道:

    唔~好棒的教學!
    一定要筆記起來,不然我放blog的養樂多好像快撐不住了 囧

  2. Robbin 說道:

    快來吧,快來吧…(招手召喚中 :worship: )

  3. Robbin 說道:

    測試一下

  4. 小螞蟻 說道:

    這個文字加底線的效果,實在是可愛又實用啊~
    好像在編輯器中預覽不會出現,一直以為是沒設定好..

  5. Robbin 說道:

    我都是用所見即所得編輯器耶

Trackbacks/Pingbacks

  1. 小窩部落格 說道:

    【實驗成功】新增quicktag按鈕…

    受到Robbin兄這篇文章的啟發
    我開始了修改quicktag的工程
    不過不知道是怎麼著
    照著Robbin兄上面的寫法 沒辦法出現預期中的效果
    (我猜是引號使用上的差別 還有可能有些東西沒有正常顯示)
    另外….


Leave a Reply

注意: 此文章已發表 3 年之久 您可能需要確認一下站內是否有更新資訊跟你所要發表的評論有關

blog comments powered by Disqus
    I am Robbin Huang
    我不是甚麼部落客
    我就是
    鐵道員、BBer
    我的PIN :217ACE9F
    更多About me

  • 武汉房地产网: 贵站管理员 ,你好武房网 申请文字友情链接(首页 ,内页)武汉房地产...


  • Robbin: 恭喜你了這篇文章可能現在的實用性不高不管 如何祝你好運—...


  • Lisa: 謝謝分享! 小妹剛開始經營blog, 第一篇就找到你的。很有用!到小妹的blo g...


  • Robbin: 你可以試試看用fitness band的關鍵字在youtube找...


  • Caroltangtang: 我也只是找有關彈力繩的相關教學,不...

  1. Today

    1. Shared [台湾趴趴走]十日谈--方方面面品台湾-天津人自由行(轉帖)(贴图)_畅游台湾_天涯社区.

      7h ago via Delicious

    2. Shared 如何练习中长跑.

      9h ago via Delicious

    3. Shared 關於跑馬拉松的十大事實.

      9h ago via Delicious

    4. Shared 關於訓練長跑所需訓練計畫.

      9h ago via Delicious

  2. September 1st

    1. Shared 金庸版本的奇妙世界 @YLib Blog.

      6:22am via Delicious

  3. August 31st

    1. Xbox arcade上面的一款好遊戲,toy soldiers [robbin]

      6:52am via Twitter

    Upstream

金錢不是唯一,你還有萬事達跟VISA卡

MOBO ME

My Flickr


åè»é²ç«
è·³èçè·³
èå½±
éµè»ä¸2
æ¿GRDçlu
Big Nose

站內分類

歷史紀錄

本站授權

Creative Commons License
本站創用 CC 授權.

同時也在

wordpress歡樂正體中文交流所
PHVsPjxsaT48c3Ryb25nPndvb19hZHNfcm90YXRlPC9zdHJvbmc+IC0gdHJ1ZTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzE8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vYWRzLzEyNXgxMjVhLmpwZzwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzI8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vYWRzLzEyNXgxMjViLmpwZzwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzM8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vYWRzLzEyNXgxMjVjLmpwZzwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzQ8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vYWRzLzEyNXgxMjVkLmpwZzwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX21wdV9hZHNlbnNlPC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29fYWRfbXB1X2Rpc2FibGU8L3N0cm9uZz4gLSB0cnVlPC9saT48bGk+PHN0cm9uZz53b29fYWRfbXB1X2ltYWdlPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tL2Fkcy8zMDB4MjUwYS5qcGc8L2xpPjxsaT48c3Ryb25nPndvb19hZF9tcHVfdXJsPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tPC9saT48bGk+PHN0cm9uZz53b29fYWRfcGFnZTwvc3Ryb25nPiAtIFNlbGVjdCBhIHBhZ2U6PC9saT48bGk+PHN0cm9uZz53b29fYWRfdG9wX2Fkc2Vuc2U8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19hZF90b3BfZGlzYWJsZTwvc3Ryb25nPiAtIHRydWU8L2xpPjxsaT48c3Ryb25nPndvb19hZF90b3BfaW1hZ2U8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vYWRzLzQ2OHg2MGEuanBnPC9saT48bGk+PHN0cm9uZz53b29fYWRfdG9wX3VybDwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX3VybF8xPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tPC9saT48bGk+PHN0cm9uZz53b29fYWRfdXJsXzI8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb208L2xpPjxsaT48c3Ryb25nPndvb19hZF91cmxfMzwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX3VybF80PC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tPC9saT48bGk+PHN0cm9uZz53b29fYWx0X3N0eWxlc2hlZXQ8L3N0cm9uZz4gLSBkYXJrYmx1ZS5jc3M8L2xpPjxsaT48c3Ryb25nPndvb19hcmNoaXZlczwvc3Ryb25nPiAtIGFyY2hpdmVzPC9saT48bGk+PHN0cm9uZz53b29fYXNpZGVzX2NhdGVnb3J5PC9zdHJvbmc+IC0gU2VsZWN0IGEgY2F0ZWdvcnk6PC9saT48bGk+PHN0cm9uZz53b29fYXNpZGVzX2VudHJpZXM8L3N0cm9uZz4gLSBTZWxlY3QgYSBudW1iZXI6PC9saT48bGk+PHN0cm9uZz53b29fYXV0aG9yPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19hdXRvX2ltZzwvc3Ryb25nPiAtIHRydWU8L2xpPjxsaT48c3Ryb25nPndvb19iZ3I8L3N0cm9uZz4gLSBibGFjay5jc3M8L2xpPjxsaT48c3Ryb25nPndvb19jdXN0b21fY3NzPC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29fY3VzdG9tX2Zhdmljb248L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19mZWF0dXJlZF9jYXRlZ29yeTwvc3Ryb25nPiAtICZhZWxpZzuUnSZhcmluZzsmZnJhYzEyOyZwbHVzbW47JmVhY3V0ZTuaJnVtbDsmYWVsaWc7i408L2xpPjxsaT48c3Ryb25nPndvb19mZWF0dXJlZF9lbnRyaWVzPC9zdHJvbmc+IC0gNDwvbGk+PGxpPjxzdHJvbmc+d29vX2ZlYXRfZW50cmllczwvc3Ryb25nPiAtIDU8L2xpPjxsaT48c3Ryb25nPndvb19mZWVkYnVybmVyX2lkPC9zdHJvbmc+IC0gcm9iYmluPC9saT48bGk+PHN0cm9uZz53b29fZmVlZGJ1cm5lcl91cmw8L3N0cm9uZz4gLSBodHRwOi8vZmVlZHMuZmVlZGJ1cm5lci5jb20vcm9iYmluPC9saT48bGk+PHN0cm9uZz53b29fZmxpY2tyX2VudHJpZXM8L3N0cm9uZz4gLSBTZWxlY3QgYSBudW1iZXI6PC9saT48bGk+PHN0cm9uZz53b29fZmxpY2tyX2lkPC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29fZ29vZ2xlX2FuYWx5dGljczwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2hvbWU8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2hvbWVfdGh1bWJfaGVpZ2h0PC9zdHJvbmc+IC0gNTc8L2xpPjxsaT48c3Ryb25nPndvb19ob21lX3RodW1iX3dpZHRoPC9zdHJvbmc+IC0gMTAwPC9saT48bGk+PHN0cm9uZz53b29faW1hZ2Vfc2luZ2xlPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19sYXlvdXQ8L3N0cm9uZz4gLSBkZWZhdWx0LnBocDwvbGk+PGxpPjxzdHJvbmc+d29vX2xvZ288L3N0cm9uZz4gLSBodHRwOi8vcm9iYmluLmNjL3dwLWNvbnRlbnQvd29vX3VwbG9hZHMvMy1yYWlsYmFiZS5qcGc8L2xpPjxsaT48c3Ryb25nPndvb19tYW51YWw8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vc3VwcG9ydC90aGVtZS1kb2N1bWVudGF0aW9uL2dhemV0dGUtZWRpdGlvbi88L2xpPjxsaT48c3Ryb25nPndvb19vdGhlcl9lbnRyaWVzPC9zdHJvbmc+IC0gNDwvbGk+PGxpPjxzdHJvbmc+d29vX290aGVyX2hlYWRsaW5lczwvc3Ryb25nPiAtIDQ8L2xpPjxsaT48c3Ryb25nPndvb19yZXNpemU8L3N0cm9uZz4gLSB0cnVlPC9saT48bGk+PHN0cm9uZz53b29fc2hvcnRuYW1lPC9zdHJvbmc+IC0gd29vPC9saT48bGk+PHN0cm9uZz53b29fc2hvd19jYXJvdXNlbDwvc3Ryb25nPiAtIHRydWU8L2xpPjxsaT48c3Ryb25nPndvb19zaG93X2ZlYXR1cmVkPC9zdHJvbmc+IC0gdHJ1ZTwvbGk+PGxpPjxzdHJvbmc+d29vX3Nob3dfdmlkZW88L3N0cm9uZz4gLSB0cnVlPC9saT48bGk+PHN0cm9uZz53b29fc2luZ2xlX2hlaWdodDwvc3Ryb25nPiAtIDE4MDwvbGk+PGxpPjxzdHJvbmc+d29vX3NpbmdsZV93aWR0aDwvc3Ryb25nPiAtIDI1MDwvbGk+PGxpPjxzdHJvbmc+d29vX3RhYnM8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX3RoZW1lbmFtZTwvc3Ryb25nPiAtIEdhemV0dGU8L2xpPjxsaT48c3Ryb25nPndvb191cGxvYWRzPC9zdHJvbmc+IC0gaHR0cDovL3JvYmJpbi5jYy93cC1jb250ZW50L3dvb191cGxvYWRzLzMtcmFpbGJhYmUuanBnPC9saT48bGk+PHN0cm9uZz53b29fdmlkZW9fY2F0ZWdvcnk8L3N0cm9uZz4gLSAmYXJpbmc7JmZyYWMxMjsmcGx1c21uOyZjY2VkaWw7iYcmYXJpbmc7iIYmYXVtbDsmb3JkbTsmbGFxdW87PC9saT48L3VsPg==