CommentUserPic プラグイン

• Aug232008
• Vote:
  http://bizcaz.com/archives/2008/08/23-234857.php
• Categories: Customize
• Tags: 4.2, CommentUserPic, Plugins
• Social Bookmark

• Prev Page: mixiComment プラグイン
• Next Page: このサイトで使ってるプラグイン on Movable Type 4.2

こんばんわ^^

今日は( 昨日の夜も )寒いですね。とても夏とは思えないくらいの寒さです （；￣－￣）

さて、先日訪問者さんのプロフィール編集を可能にするでご紹介した、ユーザ登録してくれた訪問者さんのプロフィール画像を編集可能にするテンプレット作成ですが、以下の理由からやめました。

1. コミュニティ・パックが同梱された Movable Type Pro でしか適用できないから。
2. 元々コミュニティ・フォーラム／ブログ用のものを無理やり使えるようにしてるので、スマートじゃないから。

で、どのバージョンの Movable Type でも使えるようにするには･･･というのを今週ずっといろいろ考えてたのですが、結局プラグインに頼るしかないことに行き着きました。
プラグイン使用するなら、以前からUser Profiles プラグインというのがありました。 でも、こちらは独自のフォームを作成するタイプのもので、できればデフォルトのテンプレート( ログイン画面などのテンプレート )で使用したかったのでせっせと作ることにしたのですが、トラックバックいただいたWeeeblog.net::okayama websiteさんとこで CommentUserPic プラグインというものが作られてたので使わせてもらうことにしました。
だって、なかなか上手く作れなかったんだもん (;￣∇￣A 相変わらずコールバックがよく分からない bzbell です（つω-`｡）とほほ

• Movable Type Open Source でもコメント投稿者がプロフィール画像をアップロードできるようにする CommentUserPic プラグイン

使い方

使い方はカンタンです。

1. プラグインのアップロード

   上記ページから CommentUserPic プラグインの圧縮ファイルをダウンロードしていただいて、CommentUserPic/ フォルダをそのまま mt/plugins/ フォルダにアップロードします。

2. コメント欄の修正

   次にプロフィール画像を表示できるようにコメント欄の修正を行います。

   わたしのとこのテンプレートをお使いの人は既に組み込まれてますのでここでの作業を不要です。

   プロフィール画像は、先日コメント欄にアバター表示でご紹介したように、MTCommenterUserpicURL ファンクションタグで表示することができます。
   Movable Type のデフォルトテンプレートだと、「コメント」テンプレートモジュールを以下のように修正します。

   「コメント」テンプレートモジュールの修正

   11. <mt:SetVar name="userpic_size" value="50">
   12. <mt:Comments>
   13.     <mt:CommentsHeader>
   14. <h2 class="comments-header"><$mt:EntryCommentCount singular="<__trans phrase="1 Comment">" plural="<__trans phrase="# Comments">" none="<__trans phrase="No Comments">"$></h2>
   15. <div class="comments-content">
   16.     </mt:CommentsHeader>
   17.     <div id="comment-<$mt:CommentID$>" class="comment<mt:IfCommentParent> comment-reply</mt:IfCommentParent>">
   18.         <div class="inner">
   19.             <div class="comment-header">
   20.                 <div class="asset-meta">
   21.                     <span class="byline">
   22.                         <$mt:CommentAuthorIdentity$>
   23.     <mt:IfCommentParent>
   24.                         <__trans phrase="[_1] replied to <a href="[_2]">comment from [_3]</a>" params="<span class="vcard author"><$mt:CommentAuthorLink$></span>%%<mt:CommentParent><$mt:CommentLink$></mt:CommentParent>%%<mt:CommentParent><$mt:CommentAuthor$></mt:CommentParent>">
   25.     <mt:Else>
   26.                         <span class="vcard author"><$mt:CommentAuthorLink$></span>
   27.     </mt:IfCommentParent>
   28.                         | <a href="<$mt:CommentLink$>"><abbr class="published" title="<$mt:CommentDate format_name="iso8601"$>"><$mt:CommentDate$></abbr></a>
   29.     <mt:IfCommentsAccepted>
   30.                         | <$mt:CommentReplyToLink$>
   31.     </mt:IfCommentsAccepted>
   32.                     </span>
   33.                 </div>
   34.             </div>
   35.             <div class="comment-content">
   36.                 <div class="user-pic"><img src="<mt:If tag="CommenterUserpic"><$mt:CommenterUserpicURL$><mt:Else><$mt:StaticWebPath$>images/default-userpic-90.jpg</mt:If>" width="<$mt:Var name="userpic_size"$>" height="<$mt:Var name="userpic_size"$>" alt="user-pic" /></div>
   37.                 <$mt:CommentBody$>
   38.             </div>
   39.         </div>
   40.     </div>
   41.     <mt:CommentsFooter>
   42. </div>
   43.     </mt:CommentsFooter>
   44. </mt:Comments>

   11 行目辺りに青字の部分を追加します。これはプロフィール画像サイズを指定してますので、お好みでサイズを変更してください。上記例では縦横 50px となってます。
   35 行目辺りに赤字の部分を追加します。これはプロフィール画像が登録されたユーザさんの場合にはその画像を使用して、未登録の場合には mt/mt-static/images/default-userpic-90.jpg を使用するようにしてます。

3. プログ記事アーカイブの再構築

   一通り修正したら保存して、ブログ記事アーカイブのみ再構築してください。

4. 表示確認

   再構築が終わったら、ブログ記事ページにデフォルトの画像( mt/mt-static/images/default-userpic-90.jpg )が表示されてることを確認します。
   次にサインインすると、「●●●としてサインインしています。(サインアウト)」と表示されますので、●●●のとこのリンクをクリックしてユーザプロフィールの編集画面が表示されることを確認します。

   そこからプロフィール画像を登録して適当にコメント投稿してみてください。
   正しく表示できれば OK です。

以上です。
プロフィール画像は <div class="user-pic"><img … /></div> というようにマークアップされますので、CSS 使ってお好みでデザインしちゃってください。
でも、できれば Movable Type のデフォルトでプロフィール画像登録を可能にして欲しいですね。

• Related Entries
• 08/10/20Minifier プラグイン
• 08/09/13LastYearEntries プラグイン
• 08/09/10RebuildIndexFilter プラグイン
• 08/09/07FeedburnerWidget プラグイン
• 08/09/06FeedEx プラグイン
• 08/08/24このサイトで使ってるプラグイン on Movable Type 4.2
• 08/08/17Templets プラグイン
• 08/08/06ModTextFilter プラグインのカスタマイズ失敗
• 08/08/06ModTextFilter プラグイン
• 10/02/27Konjak プラグイン

• Edit
• Permalink
• 4 Comments
• 1 TrackBack