小粋空間  -  a cheap joke and a play on words site

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

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

変更前

変更後

１．テンプレートの修正

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

...前略...
<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 属性値と同じ内容になるようにします。

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

２．タブの初期動作を変更する

ページを表示したときに追加したタブを開きたい場合は、他のタブメニューに設定されている 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>
...後略...