サイト統一サイドメニュー

| コメント(0) | トラックバック(0)

サイト全体で統一のサイドナビにカスタマイズしてみようと思います。

参考

うちの場合のサイドバーテンプレートは各ウィジェットをウィジェットセットで

<$mt:WidgetSet name="2カラムのサイドバー"$>

みたいな感じで読み込んでいます。「2カラムのサイドバー」ウィジェットセットには「最近のブログ記事」「 検索,」「最近のコメント」「カテゴリアーカイブ」「月別アーカイブ」「OpenID対応」「Powered By」をインストールしています。

簡単なのは、参考の3つ目のプラグインを使うことです。

プラグインをインストールしウィジェットセットを読み込んでる部分を

<MTIndexContext>
<MTWidgetManager name="2カラムのサイドバー">
</MTIndexContext>

のように「MTIndexContext」コンテナ・タグで括ればアーカイブページでもメインページと同じ表示内容になってくれます。


ですが、今回最終的な目標は、サイト全体統一のサイドメニューにし、メインページ以外で現在位置表示。今このページにいますよ~的な表現をサイドメニューに施そうと思ってます。

参考

小粋空間: 選択されたアーカイブリンクを強調表示する(モジュール化対応版)

上記ページを参考に、各アーカイブのウィジェットをカスタムするわけですが
方法としては、アーカイブテンプレートに設定された予約変数を判定して分岐させ、
JavaScriptで「a」タグにclass属性を付与していきます。

この際、(参考3つ目)idxctxプラグインを使用してると、サイドバー部分は一時的にメインページと同じ振る舞いをしてるのでアーカイブテンプレートの予約変数を判定してくれません。

ということで、idxctxの利用は今回さけて、サイドバーの各ウィジェットを弄ってこう。
月別アーカイブ、カテゴリアーカイブに関しては、それぞれ1番外側を括ってる「MTIf」タグを外していく

カテゴリアーカイブ:
<MTIf name="module_category_archives">

<
/MTIf>

別アーカイブ:
<
MTIf name="module_monthly_archives">

<
/MTIf>

↑これを削除すれば、それぞれのアーカイブページでもメインページと同じ表示内容になります。

問題は、最近のブログ記事

最近のブログ記事リストをメインページと同じにするには、何度も言うように、
1番手っ取り早いのはidxctxプラグインです。

ですが、前述のような理由から今回使えないので、他の方法を模索します。

方法としては、最近のブログ記事のアーカイブテンプレートを作成し、PHP や SSI もしくは
MTInclude タグを使って include する方法です。

今回は、MTIncludeでアーカイブファイルを include する方法をとってみます。

テンプレートは参考サイトを参照しつつ下記のようにしました。

ただ、今度、記事エントリー時に再構築しないと最新の状態にならない部分
さらにリサーチが必要だな~。

「テンプレート」>「インデックステンプレートを作成」
ファイル名を「最近のエントリー」
出力ファイル名「recentEntries.html」

<mt:If tag="BlogEntryCount">
    <mt:Entries lastn="8">
        <mt:EntriesHeader>
<div class="widget-recent-entries widget-archives widget">
    <h3 class="widget-header">Recent Post</h3>
    <div class="widget-content">
        <ul id="recentpostlist">
        </mt:EntriesHeader>
            <li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
        <mt:EntriesFooter>
        </ul>
    </div>
</div>
        </mt:EntriesFooter>
    </mt:Entries>
</mt:If>

サイドバーのアーカイブファイル読み込み部分は

<$MTInclude file="recentEntries.html"$>

として、現在位置表示のためのJavaScript

<MTIf name="entry_template">
<script type="text/javascript">
<!--
var data = "<$mt:EntryTitle$>";
var nodes = document.getElementById('recentpostlist').getElementsByTagName("a");
for (i = 0; i < nodes.length; i++) {
if(nodes[i].innerHTML == data){
nodes[i].setAttribute("class","selectedlink");
nodes[i].setAttribute("className","selectedlink"); // for IE
}
}
//-->
</script>
</MTIf>
とMTIncludeの下に記述しました。

こんな感じで、理想の表示は実現できたけど、毎回の再構築が難点。。
ダイナミックパブリッシングに関してリサーチを続けていこう・・・。

トラックバック(0)

トラックバックURL: http://kahoyan.com/mt/mt-tb.cgi/38

コメントする

カレンダー

sunday monday tuesday wednesday thursday friday saturday
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
Powered by Movable Type 4.25

page top