MTのコメント欄で絵文字を使えるようにする[改]

以前のエントリーでコメントに絵文字を使えるカスタマイズは実施済です。
(caramel*vanilla : MTのコメント欄で絵文字を使えるようにする)
文字だけの味気ないコメント欄が一気に楽しくなってもしかしたら1番のお気に入りカスタマイズかもしれません。
でもずっと気になってたのがコメント入力時にIMGタグが丸見えって事。
ズラズラ長くなるし何の絵文字なのか投稿するまでわかりにくいって欠点がありました。

少し前JUGEM用カスタマイズのblogでとっても気になるスクリプトが紹介されてました。

stroll::blog | コメントにカスタマイズ絵文字入力機能

JUGEM以外でも設置可能との事でしたが何回頑張ってみても設置できなかったんです。
諦めて何事もなかったようにウロウロしてたらtokitama::weblogさんのコメント投稿部分でMT用の絵文字入力機能を発見しました！

MTMacroプラグインとJavascriptを併用するやり方です。
デフォルトのままでもたくさんのスマイリー画像がセットされてるのでいろんな意味でお手軽簡単です。
もちろん自分で用意した画像も使えます。
元ネタは苦手な海外サイトだったのですが検索して解説blogを見つけました。
今回参考にさせていただいたのはこちら↓

Blog@BaySTYLE: Smileアイコンをブログ内で使う方法

1)ファイルをサーバーにUP
MT Hacks MT Smileysから必要ファイル(MTMacroとMTsmiley)
をいただきます。
(上記サイトにはスマイリー画像配布先へのリンクがあります。)
MTMacroを解凍して出てきたファイルを以下のディレクトリにFTPでUP
・macros.pl →pluginsディレクトリ
・macros.pm →extlib内に新しくbradchoateディレクトリを作成
・postproc.pm→同上
MTsmileyを解凍して出てきたimagesフォルダごとUP
(mt.cgiと同じ階層のimagesディレクトリ)

2)モジュールを作成
「新しいテンプレート・モジュールを作る」でMTsmileyを解凍して出てきたファイルの中身をコピペ
以下「テンプレートの名前」→「モジュールの中身」
・smiley javascript→smiley-javascript.txt
・smiley macros→smiley-macros.txt
・smileys→smileys.txt

3)テンプレート修正
絵文字を表示させたいテンプレート(ワタシの場合は個別エントリーアーカイブのみ)
*1行目
以下を追加

<$MTInclude module="smiley macros"$>

*head部分
以下を追加

<$MTInclude module="smiley javascript"$>

*コメントフォーム内
以下を追加(ここに絵文字一覧が表示されます)

<$MTInclude module="smileys"$>

*<$MTEntryBody$>タグ
以下に変更

<MTMacroApply><$MTEntryBody$></MTMacroApply>

*<$MTCommentBody$>タグ
以下に変更

<MTMacroApply><$MTCommentBody$></MTMacroApply>

4)リビルドして完了♪
必要に応じて以下のテンプレートも修正してください。
・コメント・リストのテンプレート
・コメント・プレビューのテンプレート

ですが！
せっかくですもの自分で用意したアイコンを使いましょう♪

---

カスタマイズ絵文字編
5)用意した画像はimagesディレクトリにUP

6)モジュールを修正
(2)で作った3つのモジュールの内smiley macrosとsmileysモジュールをいじります。
*smiley macros
用意した画像分以下の記述を繰り返します。

<MTMacroDefine name="適当な定義名" string=":テキストエリアに表示される名前:" no_html="1"> <img src="<MTBlogURL>images/ファイル名" alt="代替テキスト" width="幅" height="高さ" border="0" /> </MTMacroDefine>

*smileys
用意した画像分以下の記述を繰り返します。
(必要に応じて先頭部分のスタイルも変更)
適当な位置で改行タグ入れ直してください。

<a href="javascript:emoticon(':テキストエリアに表示される名前:')"><img src="<MTBlogURL>images/ファイル名" alt="代替テキスト" width="幅" height="高さ" border="0" class="smiley"></a>

7)リビルドして今度こそ完了♪

使いたい画像が多いほどとんでもなく根気がいる作業になってしまいますが頑張った分満足できるカスタマイズでした！！

この方法の応用としてedit_entry.tmplをいじればエントリーの編集画面にも絵文字が利用できるようになるんじゃないかとなんとなく思ったんですけど無理かなぁ…
今度試してみます！

---

Now Playing...
Rage Against The Machine - 「Freedom」 (Rage Against The Machine)