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

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

Posted at February 20,2009 1:55 AM
Tag:[Community, MovableType, Profile]

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>
...後略...
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)