用 Google 搜尋:

無聊人的無聊故事

WordPress plugin - Ajaxified Comment Preview

— by C.H.Weng @ 4:01 下午

Ajaxified Comment Preview

Introducing

Uses AJAX technique to preview comment contents before submitting without reloading an entire page.

Features

  • Completely XHTML 1.0 Strict compliant.
  • Easy to install.
  • Work with most themes.
  • Doesn’t write any option values into your database.

Demo

Fill the comment form at the bottom of this page, and then press the “預覽” button.

Download

Latest Version:0.1 beta 1

http://www.chweng.idv.tw/downloads/acp01beta1.zip

Install

  1. Unzip acp.zip
  2. copy ajaxified-comment-preview.php into your plugin folder (Default is wp-content/plugins)
  3. Activate it in the control panel

Available Parameters

  1. $pluginLocate - Due to the cross-domain restriction of the XMLHTTPRequest object, if the domain name of your blog doesn’t match your WordPress setting, this plugin won’t work properly. You might try to set this parameter on your own. Please put its exact path (ex. http://yourdomain/wordpress/wp-content/plugins/ajaxified-comment-preview.php) in the single quotes and remove the comment symbol to enable this setting.

If you don’t know what it is, just leave the default settings alone and it works properly in most cases.

Setup your preview form

  1. Open related theme file, such as comments.php.
  2. Add following codes as your desire:
    • position to display preview button - <?php if (function_exists('ajax_comment_preview')) ajax_comment_preview('previewbutton'); ?>
    • position to display preview area - <?php if (function_exists('ajax_comment_preview')) ajax_comment_preview('previewarea'); ?>
  3. Save and all done.

Version History

  • 0.1:
    1. Initial Release

Known Issues

  1. Temporary none.

中文說明

功能介紹

利用 AJAX 技術,在不用重新整理網頁的狀態下,讓使用者預覽迴響的顯示結果。

特色

  • 語法完全相容於 XHTML 1.0 Strict。
  • 安裝容易,只需在 comments.php 增加兩段程式碼即可。
  • 幾乎適用於所有佈景主題。
  • 不會在資料庫中留下任何設定資料

功能展示

在下方發表迴響的區域輸入內容,再按下預覽,即可看到效果。

檔案下載

最新版本:0.1 beta 1

http://www.chweng.idv.tw/downloads/acp01beta1.zip

安裝

  1. 解壓縮 acp.zip
  2. 將 ajaxified-comment-preview.php 複製到 plugin 資料夾中(預設為 wp-content/plugins)
  3. 在後台啟用這個 plugin

參數設定

以下是一些可供設定的自訂參數:

  1. $pluginLocate - 在極少數的情況下,WordPress 自動取得的網址,與實際使用的網址並不一樣。由於安全性的考量,此時必須手動設定 plugin 的路徑,否則 XMLHTTPRequest 無法正常工作。若需要設定此參數,請輸入本 plugin 的確實位址,例如 http://yourdomain/wordpress/wp-content/plugins/ajaxified-comment-preview.php,其中 yourdomain 表示你的網域名稱,必須要與實際使用的網域名稱完全符合,並且移除相關的註解符號,否則設定無效。

如果不會修改這些設定,使用預設值通常都可以正常工作。

修改佈景檔案

  1. 開啟目前使用佈景主題的相關檔案,通常是 comments.php。
  2. 在適當位置加入以下兩段代碼:
    • 顯示預覽按鈕 - <?php if (function_exists('ajax_comment_preview')) ajax_comment_preview('previewbutton'); ?>
    • 顯示預覽區域 - <?php if (function_exists('ajax_comment_preview')) ajax_comment_preview('previewarea'); ?>
  3. 存檔完成!

更新歷程

  • 0.1:
    1. 初次釋出

已知問題

  1. 暫時沒有……

共有 110 條評論

  1. 我安裝了可以使用一切正常。

  2. 请问Comment Preview边框的颜色可以更改嘛?还有怎么让他默认空出一行啊?
    如果Comment Preview字样是在框内,当点击Preview后Comment Preview字样消失,出现Preview内容我想这样可能美观些。

  3. 關鍵在程式的第 28 行,只要在 fieldset 標籤中加上你自己需要的樣式就可以了。
    例如 style="border: 1px green solid;" 為寬度 1px、綠色的實線。
    詳細的樣式用法,請自行參考相關的教學。

    如果要在預覽框中事先放進文字,
    只要將內容放在 <div id="comment_preview"></div> 裡面就可以了,
    要默認空一行也一樣,置入一個 <br /> 標籤即可。

    如果不要預覽框左上的 Comment Preview 字樣,則將 legend 標籤的內容清空即可,
    但不可拿掉此標籤,否則可能會出現預期外的錯誤。

    其實這個預覽框本身有個預覽字串,在產生預覽的過程中會顯示出來,
    不過很可惜在 IE 下無法工作,而 Firefox 和 Opera 都是沒問題的。
    真的要改到讓 IE 也能正常工作也不是沒辦法,
    只是目前有點懶得動了,加上對 Javascript 實在沒輒,所以就先將就一下吧!

  4. Great Plugin - thnx. Hope to make it work on my site. Ajax seems to be the future.

    Cheers!

  5. Good job!

    何不把 previewbutton 和 previewarea 分開兩個函式,加上選擇性參數指定按鈕文字、tabindex、預覽框標題?

  6. 這建議好像不錯XD

    我也忘了當初為什麼要硬把這些函式擠在一起,大概是因為不想把函式名稱拉得太長吧,也方便修改佈景的時候,比較容易搜尋到 function 的名稱。

    至於設定的部分,可以在 plugin 檔案的開頭做設定,在函式內用選擇性參數應該會更好,怎麼當初就沒想到哩orz

    tabindex 這個屬性我比較不傾向加入,因為大部分的人都不懂這是什麼東西,加上各個佈景之間都有差異,也隨著按鈕擺放位置不同而有不同,很難取一個比較中肯的預設值,弄不好的話反而容易搞砸,所以……有需要的話就自己改一下 code 吧:p

    最後、也是最重要的一點,目前 plugin 的架構大致底定,因此除非將來還有機會改版,不然恐怕比較不方便針對這些小問題另外出一個新版,免得造成要使用者重新修改適應的困擾orz

    所以,這些建議大概只能拿來做將來寫其他 plugin 的一個經驗了,果然事前規劃差,弄出來的東西感覺就是有那麼一點奇怪……

  7. tabindex 用選擇性參數,放最後一個的話,不懂的人也沒差不是嗎?預設值 -1,然後 -1 就不輸出 tabindex 的話如何?

    至於現有使用者,其實也有辦法:保留現有的函式就好了呀。想改用新函式的就改用新函式(例如像我,或是新發現的人),不想改用新函式的照舊使用就好了。等到有機會大改版不得不改舊函式時,再把舊函式給淘汰就好了。

    題外話一:你的留言驗證碼我之前留言總共試了三次才過,三次都肯定有輸入正確驗證碼。 :(
    題外話二:留言反序顯示,結果我邊寫邊想回頭看你寫的留言有點麻煩。 :(

  8. 改好了,不過還沒有空更新說明檔,所以就先放在這吧!
    http://www.chweng.idv.tw/downloads/acp02beta1.zip

    大概講一下使用方法,這個版本有兩個函式,
    apc_previewarea('Comment Preview') 放在要顯示預覽框的地方,其中的“Comment Preview”是預覽框標題,可視需要自行更改。
    apc_previewbutton('Preview','-1') 放在要顯示預覽按鈕的地方,“Preview”是按鈕的文字、“-1”是 tabindex,如果不知道這是什麼的,就維持預設值的 -1 就好了。

    至於產生預覽時顯示的“Rendering Comment Preview...”字串,因為不需要引用函數就會自動加入相關的 script,所以只能直接修改 code 來更動這個字串。不過我已經把設定值提到程式最前面了,應該不會太難找才對。

    如果還有什麼建議歡迎再提出^^

    回題外話一:因為有 Bad Behavior 和 SK2 這兩個 plugin 在把關,所以也許有一些看似異常的行為容易被誤判,例如不送出 User-Agent、驗證數字過期、剛讀完網頁馬上就貼上留言內容並送出,都容易造成誤判。
    不過奇怪的是,我在 log 檔中並沒有發現你的訊息,所以實際原因待查……
    我自己留言是都沒有異常,目前暫時也想不出是哪邊出錯。anyway, 我會再留意一下你說的狀況。

    回題外話二:看來滿多人不適應這樣的顯示方法,我先取消掉好了……

  9. I wrote:
    Hi there! I am trying your WP plugin for my blog. Is there any way to
    change the style of the preview (no box, different font size, etc)? I
    would appreciate any help.

    C.H.Weng replied:
    If you know CSS, you may define your layout style on your own.
    Just edit the style.css of your current theme, and add the following value:
    #acp_box is for the preview box;
    #acp_result is for the preview result.

    Like this
    #acp_box { border: 0; }
    #acp_result { font-size: 18px; }

    Thanks! That explains it perfectly. I am posting here in English in case someone else is looking for the same information. Thank you for the plugin and for the explanation.

  10. With the helpful comments you provided, I fixed up the CSS to my liking. The plugin looks like it's working perfectly. Thanks again.

    http://bessasandackerman.com/blog

  11. 带验证码的AJAX留言?不错!good!

  12. 驗證碼是另外一個 plugin,可參考這邊:
    WordPress plugin - WP-ImgCode mod

  13. Hi,

    I have installed your plugin. I must say, this is what I was looking for. However I have one query or problem. when I click "Preview button" on my comment form, it display a Text message "Rendearing preview" and doest not display "LOADING IMAGE" like in your "preview section", when the preview button is clicked it displays "loading image" and next to is text.

    Can you please advice, what is the cause of it 'not shwoing me loading image?" As I want enable loading image, which look nice.

    Rok...

  14. Hi,

    just edit your ajaxified-comment-preview.php,
    and replace the string Rendering Comment Preview... with <img alt="" src="throbber.gif" />Rendering Comment Preview...

    throbber.gif means the file name of your throbber icon with its full path.

    You may save my currently use at http://www.chweng.idv.tw/icons/loading.gif or google it on the internet.

  15. 不知道WP MU下能不能使用。谢谢站长。

  16. 我自己沒用過 MU 版的,
    不過大部分的 plugin 好像都可以通用,所以你不妨也試試看吧。

  17. test

  18. wgfsadfasdf

  19. I have just installed your plugin on my blog at USAblogg and is great. Lots of thanx for a great plugin!

  20. wp新手,试一下,谢谢站长!
    为什么在这里打出来的是繁体?

  21. 你打的是簡體呀,有問題嗎@@?

  22. Test ah

  23. Cool plugin thanks

  24. BKsb qksb qsk ksq k kqs kq kq ksx kx qk xq ks q skq sn qnxqx ql xq;s x;lqs x

  25. test

  26. testtest

  27. ksdjfghdkghdfkjg

  28. Probando el plugin

  29. probando coemetnarios en ajax

  30. I'd like to include a copy of the plugin with a theme I have developed, Gemini-Plus. I've changed the code of the plugin slightly to fit the look of the theme. I hope that's OK. If you have any problem with that please let me know.

    You can see the theme here: http://wordyblog.com/2006/08/25/gemini-plus/

  31. This plugin is distributed under CC License.

    So, of course you can modify and distribute this plugin in your theme by following the three principles showing in the above link:)

  32. Testing the coolness of this plugin.

  33. test !

  34. gjgfjgfjgfjdf

  35. Trying this out

  36. I tried your plugin but it's throwing me errors randomly. Working fine otherwise, but just so you know:

    Oct 12 09:53:28 debian apache: PHP Warning: main(../../wp-blog-header.php) [function.main]: failed to open stream: No such file or directory in /var/www/mydomain.com-UbujetLo/htdocs/wp-content/plugins/ajaxified-comment-preview.php on line 14
    Oct 12 09:53:28 debian apache: PHP Fatal error: main() [function.require]: Failed opening required '../../wp-blog-header.php' (include_path='.:/usr/share/php') in /var/www/mydomain.com-UbujetLo/htdocs/wp-content/plugins/ajaxified-comment-preview.php on line 14

  37. dfg

  38. I haven't used an Unix-like OS such Debian etc..so I'm not sure how to solve this problem.

    Maybe you can change line 14 in ajaxified-comment-preview.php(require('../../wp-blog-header.php');) into an absolute path name, such as require('/var/www/mydomain.com-UbujetLo/htdocs/wp-blog-header.php');.
    Or just check if you have an full control permission of these related files?

  39. yo

  40. 这个插件在和AJAX Comments一起用的时候,点击预览没有任何作用;但是在单独的页面里是可以浏览的,是不是还需要加什么额外的参数?

  41. 不是很確定你說的 AJAX Comments 究竟是哪一個?

    不過應該是程式相衝,所以也許是無解的……

  42. teste

  43. sgfsd

  44. Thank you

  45. LET'S SEE WHAT DOES IT DO :)

  46. Let's test it. ^^

    Can't understand one single word from this page, including the buttons down this form. Let's try the luck out?

  47. test preview box

  48. this is a test

  49. testtesttesttest

  50. fgergfer

  51. test

  52. dsfsd

  53. efefefg

  54. testing this

  55. wonderful!

  56. testing, yo.

  57. tgeste

  58. 來試試看,到底是怎樣的plugin

  59. testing

  60. Hi, Tried to install in on WPMU site.
    it doesn't really work.
    do you ahve any idea why ?

  61. 不可以 使用 HTML 標籤;你 可以 使用 BBCode 標籤。
    目前支援的標籤:
    目前支援的標籤:

    目前支援的標籤:

  62. This plugin was not designed for WPMU, thus it might not work properly and might not be supported in the near feature.

  63. Yep, kinda figured that.
    Just thought you might know the reason.

    Thanks anyway

  64. Testing the comments, looking for ajax!

  65. test

  66. testing this script.

  67. sdfsdfsdf

  68. totototo

  69. just a test

  70. test comment

  71. test

  72. nanikayoyokorakaljdliajfoklknfaolf

  73. test

  74. sifh aif aihf aifh aisdv

  75. [...] 本文轉載自Ajaxified Comment Preview [...]

  76. asdadsa

  77. test

  78. pop goes the weazel

  79. dfgdfgdfg dfgdfg

  80. dsdfdfgg

  81. testttt

  82. [...] comment preview” function was slowing down their browsers, so I’ve replaced it with an Ajax-based comments preview. This has the advantage of live preview in that you don’t have to reload the page to preview [...]

  83. I too was getting the 'PHP Warning: main(../../wp-blog-header.php) [function.main]: failed to open stream: No such file or directory etc... - not in comments but in another page.
    The problem is easy to fix. It is because you have used a post variable name of 'message' and so have some other authors. When their post variable is available, your code executes when it shouldn't.
    I resolved this by changing the 3 references to 'message' to a more unique name, unlikely to be used by anyone elses pklugin.

  84. Thanks for the excellent solution :D

  85. 00

  86. This is show a screen of the all weblog on bottom of comment... It's normal? :o It's ugly! Help me pleaseee! :(

  87. Super plugin. THX

  88. testing this script

  89. sdsdsdsdsdsdsdsssssssssssssssssss

  90. [...] Visit [...]

  91. [...] Blog 上启用了评论预览功能,一直觉得这个功能意义不大,以前知道一个叫 Ajaxified Comment Preview 的插件,它需要点击预览按钮才能看到效果,而 Textile Live Preview [...]

  92. juste un test de ce plugin wordpress

  93. Testing it out... :)

  94. intitle:Preview comment

  95. Testing

  96. Hi Weng,

    It has been quite long time, I'm using your fantastic plugin. I've two query's for which I need your help:

    1. The throber doestn't display while rendering preview. I've tried all means of image path thru WordPress function, but to no avail.

    2. Recently, I've come across wp-ajax-edit-comments plugin. This require insertion of its init function inside other Ajax plugins to make this plugin compatible with other. But I couldn't find the place to enter the init function.

    Can you help me in sorting the above two issues?

    Thanks,
    DG...
    http://www.ditii.com

  97. I'm giving under the URL of wp-ajax-edit-comments function, as it couldn't displayed in my previous post, as I had entered the url through href:

    http://www.raproject.com/wordpress/wp-ajax-edit-comments/

  98. Thanks For The Plug-In

  99. http://www.xmodx.com/

    just a test

  100. view

  101. Testing....

  102. Testing...

  103. test

  104. It works like a charm :)

  105. ok

  106. test

  107. [...] gesucht und gefunden und für tauglich befunden: das WordPress Plugin ajaxified comment preview. Ihr könnt es hier live in den Kommentaren ausprobieren. Wer des koreanischen mächtig ist, kann [...]

  108. Test

  109. Thank you

發表評論

(必須輸入。)
(必須輸入,但不會公開。)
(選擇性輸入、公開資訊。)

不可以 使用 HTML 標籤;你 可以 使用 BBCode 標籤。
目前支援的標籤: b color email i img size strong u url。

Comment Preview
↑Meta↑
↑Authors↑
↓Search↓
↑Categories↑
↑Recent Posts↑
↓Most Popular Posts↓
↑Recent Comments↑
↓Recent Trackbacks↓
↓Archives↓
↓Themes↓
Powered by WordPress™
Valid RSS & Atom Feed