少しのコードでWordPressのプラグインを
使わずにリアルタイムコメントプレビュー
機能を加える方法です。殆ど使わない、と
思いますが、他でも応用できるコードなの
で個人的にメモしておきたい。実装には
jQueryを使用します。
コメント欄にコメントを書いていて、長くなってくると確認するのが結構面倒だったりします。長いコメントが入るコンテンツならコメントのプレビュー機能があると親切かもしれません。
コード
こんなの↑
コメントを書いてるとプレビューにも反映される、という仕組みです。
<script type="text/javascript">jQuery(document).ready(function(){ //プレビュー欄をコメント欄下部に追加。 jQuery("").add("<h3 id='preview-title'>コメントプレビュー欄</h3><div id='comment-preview'></div>").appendTo(document.body); jQuery("#comment-preview, #preview-title").insertAfter("#comment"); //テキストボックスで叩かれた文字を表示する var $comment = ''; jQuery('#comment').keyup(function() { $comment = jQuery(this).val(); $comment = $comment.replace(/\n\n+/g, '<br /><br />').replace(/\n/g, "<br />"); jQuery('#comment-preview').html( $comment ); });});</script> |
jQuery本体は読み込まれてるの前提で。こんな感じのコードを書くだけ。セレクタとかHTMLは必要に応じて便宜変更してください。
プレビュー欄は手動でマークアップしてもいいかもですね・・・keyup()でキーボード操作によるイベントを発生させ、replace()で打たれた文字を先に追加してあったdiv内に表示させます。replace()と正規表現に関してはwebopixelさんの解説が凄く分かりやすかったです。
あとはちょろっとcss
#comment-preview { border: 1px solid #ccc; padding: 5px 15px 15px 15px; }h3#preview-title { margin-bottom: 5px } |
コメント欄として書きましたけど、コードそのものは工夫次第で地味にいろいろなシーンで応用できるんじゃ無いかなと思います。
以下を参考にしました。デモもあるのでぜひ触ってみてください。
How to Add Live Comment Preview to Comment Textarea without Plugin
