訪問者さんのプロフィール編集を可能にする

• Aug182008
• Vote:
  http://bizcaz.com/archives/2008/08/18-230645.php
• Categories: Customize
• Tags: 4.2, Customize, User Profile
• Social Bookmark

• Prev Page: Templets プラグイン
• Next Page: Movable Type で RSS リーダー作ってみる

こんばんわ^^

Templets プラグインが機能追加されましたので更新した方が便利ですよぉ (●´∀｀●)

• Templets プラグイン

さて、今回はコメント投稿時にこのサイトにユーザ登録して頂いた訪問者さんのプロフィール画像を登録できるようわたしのサイトに設置してみました。気づいてくれた人いるかなぁ (;￣∇￣A

プロフィールの編集は通常でも可能ですが、プロフィール画像を登録することができませんね。
でも、実は Movable Type 4.2 Pro のフォーラム、またはコミュニティブログを設置した人はご存知かもしれませんが、フォーラム、またはコミュニティブログに限りユーザ登録した人のプロフィール画像は変更可能になります。

今回はそれを流用するカスタマイズです。

また、せっかく Templets プラグインという便利なものがあるから、後日テンプレットとしてご紹介するつもりでいます。( できるかなぁ )
とりあえず、ここでは一時的にプロフィールを変更可能にするカスタマイズをご紹介しますね。

ユーザプロフィールの編集について

このカスタマイズは Movable Type Pro 4.2( コミュニティパック同梱版 )をお使いの人のみとなりますのでお間違えのないように。

先ほど言いましたように、通常のブログではプロフィール編集はできてもプロフィール画像の登録はできません。
どうせならすべてにおいてできるようにして欲しいところですが、まぁしょうがないですね。

ブログのプロフィール編集画面をプロフィール画像を登録可とするには、以下のテンプレートを修正する必要があります。

• mt.js
• プロフィールの編集フォーム( グローバルテンプレート )

ブログ記事ページを表示すると JavaScript でサインインするかなどのリンクを表示してます。このリンク先を変更します。
そして、そのリンクで表示されるものはグローバルテンプレートの「プロフィールの編集フォーム」になります。
このテンプレートは元々はフォーラム、コミュニティブログ用のものなので、そのままでは使用できません。ですので、チョビッと通常のブログから変更できるようカスタマイズしちゃいます。

カスタマイズ

まず mt.js をカスタマイズしちゃいましょ (＞∀＜　)

1. 変更箇所識別用のフラグ追加

   どこを変更したかを識別するためのフラグを追加します。

   mt.js / 24 行目

   24. <mt:setvar name="mt_memo" value="1">

   24 行目あたりに上記を追加してください。青字の部分はお好みで変更してください。

2. プロフィール編集画面のリンク先変更

   次にプロフィール画面表示用のリンク先を変更します。

   mt.js / 592 行目

   592. <mt:If name="mt_memo">
   593.     user_link = u.name + '(<a href="<$mt:CGIPath$><$mt:CommunityScript$>?__mode=edit&blog_id=<$mt:BlogID$>&return_to=' + encodeURIComponent( location.href );
   594.     user_link += '">プロフィール</a>)';
   595. <mt:Else>
   596.     user_link = '<a href="<$mt:CGIPath$><$mt:CommentScript$>?__mode=edit_profile&return_url=' + encodeURIComponent( location.href );
   597.     user_link += '">' + u.name + '</a>';
   598. </mt:If>

   上記はサインインリンク先を表示するためのコードになります。
   デフォルトでは MTCommentScript( mt-comment.cgi )になります。これだとご存知のようにプロフィール画像の登録ができません。
   それを MTCommunityScript( mt-cp.cgi )に変更してます。
   青字の部分は適宜変更してください。

以上で mt.js の変更は完了です。
一通り完了したら mt.js を再構築さいてください。

次に、「プロフィールの編集フォーム」グローバルテンプレートを変更します。
グローバルテンプレートは MT の管理画面から「システムメニュー」＞「グローバルテンプレート」を選択することで、グローバルテンプレート一覧が表示されます。
その中に「プロフィールの編集フォーム」があります。

1. 変更箇所識別用のフラグ追加

   先ほどと同様に変更箇所識別用のフラグを 1 行目あたりに追加します。

   プロフィールの編集フォーム / 1 行目

   1. <mt:setvar name="mt_memo" value="1">

   青字は適宜変更してください。

2. インクルードヘッダ／フッター差し替え

   次に「シンプルフッター」グローバルテンプレートをインクルードしてる箇所があります。 そちらを通常の mt/tmpl/cms/include/chromeless_footer.tmpl に変更します。以下のように変更してください。

   インクルードフッター差し替え / 108 行目あたり

   108. <mt:If name="mt_memo">
   109. <p><a href="<$mt:Var name="return_to"$>">元のページに戻る</a></p>
   110.  
   111. <mt:include name="include/chromeless_footer.tmpl">
   112. <mt:Else>
   113. <p><a href="<$mt:Var name="return_to"$>">元のページに戻る</a> / <a href="<$mt:CGIPath$><$mt:CommunityScript$>?__mode=view<mt:If name="blog_id">&blog_id=<$mt:Var name="blog_id"$></mt:If>">プロフィールを表示する</a></p>
   114.  
   115. <$mt:Include module="シンプルフッター"$>
   116. </mt:If>

   同じく、22 行目辺りにシンプルヘッダーをインクルードしてますので、こちらも chromeless_header.tmpl と差し替えます。

   インクルードヘッダ差し替え / 22 行目あたり

   22. <mt:If name="mt_memo">
   23. <mt:include name="include/chromeless_header.tmpl">
   24. <mt:Else>
   25. <$mt:Include module="シンプルヘッダー"$>
   26. </mt:If>

3. プロフィールを表示するリンクを削除

   最後に「プロフィールを表示する」リンクを削除します。
   このリンクは、フォーラム、コミュニティブログ用のリンクなので、通常のブログでは不要です。

   プロフィールを表示するリンクを削除 / 10 行目

   10. <mt:If name="mt_memo">
   11.     ユーザー情報を更新しました。 <a href="<$mt:Var name="return_to"$>">元のページに戻る</a>
   12. <mt:Else>
   13.     ユーザー情報を更新しました。 <a href="<$mt:Var name="return_to"$>">元のページに戻る</a> / <a href="<$mt:CGIPath$><$mt:CommunityScript$>?__mode=view<mt:If name="blog_id">&blog_id=<$mt:Var name="blog_id"$></mt:If>">プロフィールを表示する</a>
   14. </mt:If>

以上で「プロフィールの編集フォーム」グローバルテンプレートの変更は完了です。
一通り変更したら保存してください。そしてブログ記事ページを表示して、登録ユーザでサインすると「プロフィール」というリンクが表示されるのを確認してください。 リンクをクリックするとプロフィール編集画面が表示されて、プロフィール画像が表示されると思います。

以上です。
後日( 平日は無理ですが、週末にでも )テンプレットを作成してみようと思います。

また、先日ご紹介したコメント欄にアバター表示と併用すれば、登録したプロフィール画像が表示されるようになります。ご参考までに (●＞∀＜●)／

• Related Entries
• 08/10/24コメント投稿時のサインイン後、フォームを表示
• 08/08/17コメント欄にアバター表示
• 08/06/15TypePad AntiSpam を使ってみる
• 10/01/09エントリとコメント欄に個別の絵文字を使い分ける
• 09/01/27MT-I18N プラグイン
• 09/01/27TagSupplementals プラグイン
• 09/01/15ブログ記事別コメントフィード作成
• 08/12/07キャッシュを使ってカテゴリ内の最近のエントリ一覧表示
• 08/12/04過去の記事を今どきの MT 向けに書換え
• 08/10/20Minifier プラグイン

• Edit
• Permalink
• 9 Comments
• 1 TrackBack