コメント欄にプレビュー表示画面を作りました

現時点では閑古鳥が鳴いている、ブログのコメント欄ですが・・・コメント欄の下にリアルタイムでプレビュー表示画面が出るようにしてみました。まあ、コメント欄に長文を書く方はそういらっしゃらないと思いますが、コメントがどのように表示されるのか、プレビュー画面があれば分かりやすいかなと思ったのです。ですが、これがなかなか大変で一筋縄では行かなかったのです(>_<)最初は簡単に実装できるとタカをくくっていた私。分からないところは調べながらの作業なのですが、意外とコメント欄にプレビュー画面を設置する方は少ないのか、いくら調べても「コレだ!」という情報が得られないのです。プラグイン(拡張機能)をいくつか見つけたのですが、バージョンが古くて動かなかったり、有効化しても反映されなかったりと、これでは使い物にならないのでプラグインの導入は諦めました(ToT)/~~~プラグインが使えない以上、次の手を考えなくてはなりません。色んなサイトを参考にしながら、jQueryというJavaScriptライブラリを導入することにしました。2014年6月に独学でプログラミングの勉強を始めてまだ2年も経っていない私。言い訳がましいのですが、私は人より物覚えが悪いのです(~_~;)その分、一度覚えたことは忘れないのですが、これって良いのか悪いのか(^_^;)話が横道に逸れてしまいましたが、本題に戻ります。jQueryを動かすためには、header.phpに次のコードを書かなければいけません。まず、第1段階として、jQueryを読み込むためのコードを書きます。この上段のコード↓は必ず、

↑この下段のコードの前に記述しなければなりません。そして、第2段階として以下のコードを書いていきます。

これで完成です♡

このコメントプレビュー機能、コメントUPに役立ってくれると良いのですが・・・(^_^;)

参考:How to Add Live Comment Preview to Comment Text area without Plugin

The following two tabs change content below.

めぐみん

「宇治のお茶まる」の広報。ホームページの作成、管理、メンテナンスを担当。