MT Customizeの最近のブログ記事

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

参考

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

<$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>

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

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

Zen Cart に関してのメモもエントリーしてくことにしたので、descriptionも変更しフィードもカテゴリ毎につくっとこーと思います。以下試した手順。

1. ルートのatom.xmlを生成している、インデックステンプレートの「最新記事のフィード」のソースコードをコピーしといて。

2. アーカイブテンプレート、アーカイブテンプレートの作成 +ブログ記事リスト。

3. タイトルを「カテゴリ別のフィード」とし、コピーしたコードをペースト。



かみさんに

「産休のあいだ、kahoyanの成長記録みたいなブログやらない?」

とさそい、kahoyanテンプレートのモニターやってもらおうと思いました。


そこで、サブドメインで新規のブログ作成を試す。

アーカイブページがデフォルトでは、月別アーカイブとカテゴリーアーカイブだけになってるので
最初のうちは、エントリー全部表示しておくことにします。(日付タイトルだけ。)

月別アーカイブ、カテゴリーアーカイブの前に次のコードを追加しました。

<div class="all-entry">
<div class="archive-content">
<h2 class="archive-header">All Entries</h2>
<ul>
<MTEntries lastn="0">
<li><span class="date"><$MTEntryDate format="%Y-%m-%d"$></span>&nbsp;:&nbsp;<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</div>
</div>

MTEntries タグの lastn アトリビュートを0と設定すると全エントリーを取得します。
こちら何調べてても辿り着く「小粋空間」さんの記事を参考にしました。


ソースコードを表示するケースが多いと思うので pre、code、blockquote、あたりのスタイルを指定しました。

capture003.jpg

キレイに色分けされ行番号など付加してくれるプラグインやJSライブラリがあるようですが
今回は、CSSで指定したのみ。

MTOSには「汎用ウェブサイトのテンプレートセット」は入ってないってことで・・・

やりたかったのは、ウェブページ機能を使って作成した個別ページをヘッダーにグローバルナビゲーションとして横並びに表示することでした。

んじゃ、自力でなんとかやってみる。

meta タグで keywords と descriptionを追加してみる。

ブログ記事ごとに変える方法もあるみたいだけど、このサイトはMTカスタマイズ情報に絞ってるので(今んとこ)サイト全体で統一にしようと思います。

テンプレートモジュールの「HTMLヘッダー」テンプレートを編集。

keywordsはMT関連のキーワードをカンマ(,)区切りで羅列。

descriptionは最初に <$mt:BlogDescription$> でブログの説明文

Movable Type 4  Customize memo

を挿入し、ちょっとさびしいので日本語での説明文を後に続けました。

やっぱり2カラムに変更。
デザイン/スタイル/スタイルを選択→レイアウト(プルダウンメニューから)2カラム、大・小
デザインを適用。

んで、右カラムの幅なども変更してみる。

/MTをインストールしたフォルダ(ここの場合mt)/mt-static/themes-base/blog.css

browser styling のResetや大枠のレイアウトなどを指定している上記の【blog.css】はバックアップとして取っておいて、同ディレクトリに【blog02.css】でコピーする。

スタイルシートテンプレートのimportファイルを【blog02.css】に修正

@import url(mt/mt-static/themes-base/blog02.css);

【blog02.css】の /* Wide-Thin */ ってとこ探して #alpha と #beta

の幅を変更。

PICT0344.jpg

画像まわりのスタイルを設定したので、違うサイズでもうまくいくかテスト




まだ、2個しかエントリーしてないけど、Analyticsの設定をしちゃおう。

まずはGoogle Analyticsで新規プロファイルを作成しkahoyan.com用のトラッキングコードを作成します。

何処に貼るのがいいんだろう?ってことですが、bodyの終了タグの前に・・とあるので
テンプレートモジュール バナーフッターに貼り付けることにします。

各ページでバナーフッターをIncludeしてるので、これで全ページに設定されることになります。

貼り付け方法ですが、今回は
新規でテンプレートモジュールを作成しそれをバナーフッターにIncludeすることにします。

テンプレートモジュールを作成+マークから「Analyticsトラッキングコード」と名前をつけて
作成したトラッキングコードをコピペします。

そんで、バナーフッターテンプレートの最後に

<$mt:Include module="Analyticsトラッキングコード"$>

と追加します。

ソースは

<body>
<div id="container">

<script>トラッキングコード</script>
</div>
</body>

って感じで厳密に</body>の前になってないんですが、問題ないようです。
解析してくれてます。

Powered by Movable Type 4.25

page top