Movable Typeの画像付きアクセスランキング

当ブログのサイドバーに表示している記事画像付きのアクセスランキングを表示する方法を記載しています。

方法と手順は以下の通りです。

• プラグイン「Accesse Counter」を導入
• ブログ記事テンプレートにてmeta imgを指定
• ウィジットでアクセスランキングを作成
• カテゴリーや記事ページでの表示分岐

尚プラグインの導入方法などの詳細は省きます。

「Accesse Counter」の導入とmeta imgの指定

プラグインは以下サイトからダウンロードできます。設定についてはもう1つ下のリンクを参考にして下さい。

■ ホームページメーカー: Access Counter
■ サイトの人気記事をサイドバーに表示：Access Counter

「Accesse Counter」の導入が済みましたら、次に記事テンプレートにてメタ画像を指定します。

<MTSetVarBlock name="og_image">
<mt:entrybody regex_replace='/[\S\s]*?src="(https?:\/\/.+?)(\.jpe?g|\.gif|\.png)"[\S\s]*/i',"$1$2"></MTSetVarBlock>
<meta property="og:image" content="<$MTGetVar name="og_image"$>" />

上記を記事テンプレートヘッダーに記述します。

上記を解説すると「MTSetVarBlock name="og_image"」でog_imageという名前を指定すると宣言。

それは、「mt:entrybody regex_replace='/[\S\s]*?src="(https?:\/\/.+?)(\.jpe?g|\.gif|\.png)"[\S\s]*/i',"$1$2"」とあるように記事内の画像データ（jpg / gif /png）とする。

「/MTSetVarBlock」以上宣言終わり。

そして「meta property="og:image" content="<$MTGetVar name="og_image"$>" /」で出力。このメタプロパティを「og:image」とし、上記の宣言部分を出力すると書いてあります。

注意）意訳です。

ウィジットでアクセスランキングを作成

プラグインを導入するとmtメニューのウィジットでアクセスランキングを制作できるようになります。

<MTIf tag="BlogEntryCount">
<MTEntries sort_by="accessed_count" sort_order="descend" limit="10">
<MTSetVarBlock name="og_image"><mt:entrybody regex_replace='/[\S\s]*?src="(https?:\/\/.+?)(\.jpe?g|\.gif|\.png)"[\S\s]*/i',"$1$2">
</MTSetVarBlock>
<mt:If name="og_image" like="^(https?:\/\/.+?)(\.jpe?g|\.gif|\.png)$">
<li>
<a href="<mt:EntryPermalink />">
<span class="relatedli">
<meta property="og:image" content="<$MTGetVar name="og_image"$>" />
<div class="Ri">
<MTElse>
<img src="<$MTGetVar name="og_image"$>" title="<$MTEntryTitle$>" alt="<$MTEntryTitle$>" /></MTElse>
<img src="<$MTGetVar name="og_image"$>" title="<$MTEntryTitle$>" alt="<$MTEntryTitle$>" class="ri-img" />
</div>
<mt:EntryTitle />
</span>
</a>
</li>
</MTIf>
</MTEntries>
</MTIf>

アクセスランキングテンプレート内の記述は上記の通りです。「span class="relatedli"」「div class="Ri"」は私が付けた名称なので変えても問題ありません。（自分のCSS記述にあわせる。）

ここではCSSによる整形の記述は省きます。また、以下解説ではこの記述を「アクセスランキングの記述」とします。

カテゴリーや記事ページでの表示条件分岐

ここまでで「Accesse Counter」を導入した場合、全記事・全期間の最多アクセスランキングが表示されます。尚カテゴリーページではカテゴリー内の全記事・全期間の最多アクセスランキング表示に切り替わります。（月間ページでは月間内の記事で絞り込まれる）

これでも充分ではありますが、記事ページでは全記事・全期間のランキングが表示されてしまいます。

そこで、アクセスランキングページにて以下の記述を追加しています。これをすると、エントリーの所属カテゴリーランキングに変更が可能です。

<MTIfArchiveType archive_type="Individual">
<mt:EntryCategories type="primary">
<!-- ここに上記の「アクセスランキングの記述」-->
<!-- 他に表示したい内容など -->
</MTEntryCategories>
</MTIfArchiveType>

「MTIfArchiveType archive_type="Individual"」は記事テンプレート表示の際限定で表示するという内容です。

「mt:EntryCategories type="primary"」はそのエントリーが所属するメインカテゴリーに限定するという内容です。

この記述を足すと、記事ページでは2つのアクセスランキングが表示される状態になってしまいます。そこで、MTIFタグを使い条件分岐することになります。

しかし、私はMTIFタグの分岐が良く分からず･･････。とりあえず現状では「メインページ」と「カテゴリーページ」「月間ページ」を以下のように個別にして記述しています。

【メインページ】

<MTIf name="main_index">
<!-- ここに上記の「アクセスランキングの記述」-->
<!-- 他に表示したい内容など -->
</MTIf>

【カテゴリーページ】

<MTIfArchiveType archive_type="Category">
<MTIfCategory>
<!-- ここに上記の「アクセスランキングの記述」-->
<!-- 他に表示したい内容など -->
</MTIfCategory>
</MTIfArchiveType>

【月間ページ】

<MTIfArchiveType archive_type="Monthly">
<!-- 月間アーカイブの表示 -->
</MTIfArchiveType>

サイドバーにウィジットタグで挿入

ここまでできたら後は「Accesse Counter」の挿入タグを任意の場所に記述すれば完了です。

2014年2月27日現在、当ブログでの表示は以上の記述で表示していますので、サイト内を閲覧して頂くと表示が切り替わっていることが分かるかと思います。

絶版後記

私も見よう見まね、付け焼刃でやっていますので保障はしかねます。

とりあえず当ブログでは表示できていますので、参考になるかと思いエントリーにしておきます。