TopMovable Typeコミュニティ > 2009年2月
2009年2月20日

Movable Typeでコミュニティ機能のプロフィールページにタブを追加する方法

February 20,2009 1:55 AM
Tag:[, , ]
Permalink

Movable Type コミュニティソリューションのプロフィールページに、任意のタブを追加する方法です。

変更前

変更前

変更後

変更後

1.テンプレートの修正

グローバルテンプレートの「プロフィール」に下記の青色部分を追加します。

...前略...
<ul id="tabs"> 
    <li><a href="#profile-recent-actions" class="active" onclick="switchTabs('tabs',this)">最近のアクション</a></li> 
    <li><a href="#profile-comment-threads" class="" onclick="switchTabs('tabs',this)">コメントスレッド</a></li> 
    <li><a href="#profile-hoge" class="" onclick="switchTabs('tabs',this)">ほげほげ</a></li>
</ul>
 
<div id="profile-recent-actions" class="tab_content"> 
    <h3 class="tab_content_label">最近のアクション</h3>
...中略...
</div>
 
<div id="profile-hoge" class="tab_content hidden"> 
    <h3 class="tab_content_label">コメントスレッド</h3>
    <p class="note">追加したタブメニューです。</p> 
</div>
 
<mt:SetVarBlock name="profile_widgets">
...後略...

赤字の部分は他のタブメニューと異なる名称を設定して、a 要素の href 属性で設定したフラグメントが、div 要素のid 属性値と同じ内容になるようにします。

この規則を守れば、さらに複数のタブを追加することができます。

2.タブの初期動作を変更する

ページを表示したときに追加したタブを開きたい場合は、他のタブメニューに設定されている class 属性値 active(赤色)を削除し、追加したタブメニューの class 属性にactive(青色)を設定します。

さらに、他のタブコンテンツの div 要素の class 属性に hidden(青色)を追加し、追加したタブに対応するコンテンツの div 要素の class 属性には tab_content(青色)だけを設定します(前述のサブテンプレートでは追加したタブのコンテンツに hidden を設定しています)。

...前略...
<ul id="tabs"> 
    <li><a href="#profile-recent-actions" class="active" onclick="switchTabs('tabs',this)">最近のアクション</a></li> 
    <li><a href="#profile-comment-threads" class="" onclick="switchTabs('tabs',this)">コメントスレッド</a></li> 
    <li><a href="#profile-hoge" class="active" onclick="switchTabs('tabs',this)">ほげほげ</a></li>
</ul>
 
<div id="profile-recent-actions" class="tab_content hidden"> 
    <h3 class="tab_content_label">最近のアクション</h3>
...中略...
</div>
 
<div id="profile-comment-threads" class="tab_content hidden"> 
    <h3 class="tab_content_label">コメントスレッド</h3>
...中略...
</div>
 
<div id="profile-hoge" class="tab_content"> 
    <h3 class="tab_content_label">コメントスレッド</h3>
    <p class="note">追加したタブメニューです。</p> 
</div>
...後略...
Comments [0] | Trackbacks [0]
2009年2月19日

コミュニティソリューションのプロフィールページに関する Tips

February 19,2009 1:55 AM
Tag:[, , ]
Permalink

Movable Type 4.2(コミュニティソリューション)のプロフィールページに関する Tips です。

プロフィールページ

プロフィールページはコミュニティソリューションで欠かせないページで、サインアップユーザーの「最近のアクション」や「注目」「被注目」などの情報をダイナミックに表示してくれます。全く同じ機能ではありませんが、mixi にログインしたときに表示されるご自身のページを想像してもらえれば分かりやすいと思います。

プロフィールページはグローバルテンプレートの「プロフィール」が該当します。

グローバルテンプレートの「プロフィール」

1.プロフィールページの判定方法

プロフィールページと、それ以外のページを振り分けるには、次の If タグでくくります。変数 page_title には、「プロフィール」テンプレートで「ユーザーのプロフィール」が設定されているので、これを利用します。

<mt:if name="page_title" eq="ユーザーのプロフィール">
...略...
</mt:if>

2.プロフィールページの body 要素の class 属性値

body 要素の class 属性値には「mt-profile-view」が設定されます。これは、「プロフィール」テンプレートで次の処理があるためです。

<$mt:Include module="ヘッダー" body_class="mt-profile-view"$>

プロフィールページのスタイルを変更したい場合は、この class 属性値を利用すると良いでしょう。

3.利用中のヘッダーに追加する内容1

ヘッダーの先頭に下記のSetVarBlock タグを追加します。

<mt:SetVarBlock name="html_head" prepend="1">
  <mt:SetVarBlock name="blog_id"><$mt:BlogID$></mt:SetVarBlock>
  <mt:SetVarBlock name="profile_view_url"><$mt:CGIPath$><$mt:CommunityScript$>?__mode=view&amp;blog_id=<$mt:BlogID$>&amp;id=</mt:SetVarBlock>
</mt:SetVarBlock>

変数 html_head はhead 要素に各種データを追加するためのものでです。

変数 blog_id は、プロフィールページの title 要素にブログ名を表示するための判定用に使います。

変数 profile_view_url は、ユーザーのプロフィールページへのリンクになります。次のように、他のユーザーのリンクにジャンプするときの a 要素の href 属性にこの変数とユーザーIDを設定します。

<a href="<mt:GetVar name="profile_view_url" encode_html="1" /><mt:AuthorID />"><mt:AuthorDisplayName /></a>

以上です。
タブの追加方法は別エントリーします。

Comments [4] | Trackbacks [0]
2009年2月 5日

ユーザー一覧に最新のブログ記事を表示する

February 5,2009 1:55 AM
Tag:[, , ]
Permalink

ユーザー一覧に最新のブログ記事を表示するカスタマイズです。コミュニティ・ソリューションの利用を想定して、ユーザー名をクリックすれば、ユーザーのプロフィールページにジャンプするようにしています。

ユーザー一覧に最新のブログ記事を表示

MTAuthorsタグでMTEntriesタグを使っても該当のユーザーコンテキストにならないようなので、

<mt:AuthorName setvar="author_name" />
  <mt:Entries author="$author_name" lastn="1">
  :

と、MTEntriesタグにauthorモディファイアを与え、ユーザー名を設定しているのがこのサブテンプレートのキモです。

当サイトで配布しているテンプレート用のサブテンプレートは、次のようになります。これをウィジェットやテンプレートモジュールに設定すれば、冒頭のキャプチャ画像のような表示になります。

<mt:Authors>
  <mt:If name="__first__">
<dt class="sidetitle">ユーザー一覧</dt>
<dd class="side">
  </mt:If>
  <ul>
  <mt:If tag="AuthorDisplayName">
    <li><a href="<mt:CGIPath />mt-cp.cgi?__mode=view&amp;blog_id=<mt:BlogID />&amp;id=<mt:AuthorID />"><$mt:AuthorDisplayName$></a>
  </mt:If>
  <mt:AuthorName setvar="author_name" />
  <mt:Entries author="$author_name" lastn="1">
    <mt:EntriesHeader>
      <ul>
    </mt:EntriesHeader>
        <li><a href="<mt:EntryPermalink>"><mt:EntryTitle /></a></li>
    <mt:EntriesFooter>
      </ul>
    </mt:EntriesFooter>
  </mt:Entries>
    </li>
  </ul>
  <mt:If name="__last__">
</dd>
  </mt:If>
</mt:Authors>

MTEntriesタグのlastnモディファイアの値を変更すれば表示するブログ記事数を変更できます。

ユーザーへのプロフィールページへのリンクを外したい場合は、

<li><a href="<$mt:Var name="profile_view_url" encode_html="1"$><$mt:AuthorID$>"><$mt:AuthorDisplayName$></a>

<li><$mt:AuthorDisplayName$>

に変更してください。

なお、テンプレートセットでコミュニティブログやコミュニティ掲示板を使用している場合は、

<li><a href="<$mt:Var name="profile_view_url" encode_html="1"$><$mt:AuthorID$>"><$mt:AuthorDisplayName$></a>

の部分は、

<li><a href="<$mt:Var name="profile_view_url" encode_html="1"$><$mt:AuthorID$>"><$mt:AuthorDisplayName$></a>

でOKで、変数profile_view_urlにプロフィールページへのURLが設定されています。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3