スマホ用ページにカテゴリアーカイブを作成

スマホ用ページでは導入していなかったカテゴリアーカイブページを作成しました( ´ ▽ ` )ﾉ
デフォルトではカテゴリ毎にエントリ一覧などがあった気がするのですが…導入したときに日付ベースのパーマネントリンクで管理するようにごっそり変更していたので(^_^;)

表示イメージはこちら

↑ カテゴリアーカイブを一番下に表示して…

↑ 選択したらメニュー展開的なイメージでカテゴリの一覧＆エントリ数が確認出来る！

手順については、まぁ、余り難しい事はありません( ´ ▽ ` )ﾉ

まずはカテゴリ別のアーカイブテンプレートを作成する

↑ ダッシュボードからデザイン→テンプレートでアーカイブテンプレートの複製を行います。

既存の(おそらくデフォルトである)カテゴリ別ブログ記事リストのアーカイブテンプレートを選択
上部のメニューから、テンプレートの複製を行います。

これで、テンプレートの複製が完了するので、次に複製されたカテゴリ別ブログ記事リストを編集します。

内容についてはさておき、テンプレートの設定を編集します。

↑ 複製後の段階では、アーカイブマッピングが無いので、新しいアーカイブマッピングを作成して上記の様に追加します。
※うちの場合、/i 下にスマホページを置いているので、デフォルトのものの先頭に/iを追加しただけになります。

テンプレートの名称は何でも良いので、わかりやすいように「iPhone用カテゴリ別ブログ記事リスト」としました( ´ ▽ ` )ﾉ
# iPhoneだけって訳ではないんですけどね…

テンプレートの内容は、大して内容があるわけでもないので、うちの奴そのままのせますｗ

<?xml version="1.0" encoding="<MTPublishCharset />"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
<title><$mt:BlogName encode_html="1"$>: <$mt:ArchiveTitle$>アーカイブ</title>
<link rel="stylesheet" href="<$MTBlogURL$>i/iui/iui.css" type="text/css" />
<script type="application/x-javascript" src="<$MTBlogURL$>i/iui/iui.js"></script>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
</head>
<body>

<div class="toolbar">
<h1 id="pageTitle"><$MTBlogName$> - <$mt:ArchiveTitle$>アーカイブ</h1>
<a id="backButton" class="button" href="#"></a>
</div>

<p><a href="/"><img src="<$MTBlogURL$>i/img/totop.png" width="136" height="33" alt="トップページへ" /></a></p>

<h1><$mt:ArchiveTitle$>アーカイブ</h1>

<ul id="home" selected="true">        <li class="group">最新のブログ記事20件</li>
    <MTEntries lastn="20">
        <li><a href="/i/<$MTEntryDate format="%Y/%m" $>/<$MTArchiveFile$>" target="_self"><$MTEntryTitle$>［<$MTEntryDate$>］</a></li>
    </MTEntries>

        <li class="group">カテゴリアーカイブ</li>
    <mt:TopLevelCategories>
        <mt:If tag="CategoryCount">
            <li><a href="<$mt:CategoryArchiveLink$>" target="_self"><$mt:CategoryLabel$> (<$mt:CategoryCount$>)</a>
        <mt:Else>
            <li><$mt:CategoryLabel$>
        </mt:If>
        <$mt:SubCatsRecurse$>
            </li>
    </mt:TopLevelCategories>
</ul>

</body>
</html>

↑　ほとんど「iPhone用トップページ」のテンプレートをそのままという感じですｗ

ここで、一番下の「カテゴリアーカイブ」のリスト部分は、ウィジェットのカテゴリアーカイブから拾ってきた物を弄っています。
実はこれで作成される CategoryArchiveLink は、スマホ用としている i が入ったリンクになっていないのですが…

その辺りの修正するのは手間が掛かるし、そのままでもmod_rewriteが拾って変換してくれるので放置しています(^_^;)

トップページの改造

次に、作成したアーカイブテンプレートで生成されるiPhone用カテゴリページにリンクするように「iPhone用トップページ」のインデックステンプレートを編集します。

既存で「過去記事アーカイブ」のグループを表示している箇所を探して…

        <li class="group">過去記事アーカイブ</li>
        <li><a href="#monthlyArchives">過去6ヶ月の記事を見る</a></li>

        <li class="group">カテゴリアーカイブ</li>
        <li><a href="#archiveList">カテゴリ毎の記事を見る</a></li>

↑ 上2行は既存です。下2行のカテゴリアーカイブのgroup部分を新規に追加しました。

次に、カテゴリアーカイブのグループで表示される部分を作成します。
デフォルトでは『▲月別アーカイブ個別記事ここまで▲』と記載されているところの直下に書くことにしました( ´ ▽ ` )ﾉ

<ul id="archiveList">
    <mt:TopLevelCategories>
        <mt:If tag="CategoryCount">
            <li><a href="<$mt:CategoryArchiveLink$>" target="_self"><$mt:CategoryLabel$> (<$mt:CategoryCount$>)</a>
        <mt:Else>
            <li><$mt:CategoryLabel$>
        </mt:If>
        <$mt:SubCatsRecurse$>
            </li>
    </mt:TopLevelCategories>
</ul>

↑ こんな感じで、個別ページに入れた物とほぼ同じ物になります(^_^;)

当初はもう少し面倒かなぁと思っていたのですが、予想以上に簡単だったので満足していますｗ

- スポンサードリンク -

ksworks.org

スマホ用ページにカテゴリアーカイブを作成

まずはカテゴリ別のアーカイブテンプレートを作成する

トップページの改造

こちらの記事も一緒に読まれてます。

スマホ用ページにカテゴリアーカイブを作成

まずはカテゴリ別のアーカイブテンプレートを作成する

トップページの改造

こちらの記事も一緒に読まれてます。

タグクラウド