« 【MT】 Cronで自動的に記事を公開する(Pleskでの設定例) | メイン | 【MT】ブログ記事でカテゴリごとにデザインを変更する »

【MT】PageButeを使ったページ分割

※2014/07/10 記事の内容が古かったので修正しました

ブログで過去記事を見せる方法として、ページ分割をさせる場合は、スカイアークシステムのPageButeというプラグインを使うと簡単に指定した記事数ごとに分割して記事ページを作成することができます。
設置もとても簡単で、便利!しかも無料!無料!!なのですよw

で、実際はこんなかんじ

kiriwake

ここからプラグインをダウンロードして、解凍して出来たPageButeフォルダーを、/mt/plugins にアップロードします。

テンプレート内の分割させたい場所(<mt:Entries>~</mt:Entries>あたり)に以下のように記述します。

<MTPageContents count="6"> 区切りたい部分(Entriesなど)を囲むタグです。
<mt:Entries lastn="999">

・・・・・

   <$MTPageSeparator$> 分割する位置を指定
</mt:Entries>
</MTPageContents>

 

ページ送り部分ここから
<MTPaginationHeader>
<div class="page-wrap"><ul class="pagenate">
<MTIfPaginationFirst><li><a class="link_before" href="<$MTPaginationFirst$>">&lt;&lt;</a></li></MTIfPaginationFirst>
<MTIfPaginationPrev><li><a class="link_before" href="<$MTPaginationPrev$>">前へ</a></li></MTIfPaginationPrev>
</MTPaginationHeader>
<MTIfPaginationCurrent>
<mt:ignore>現在のページ</mt:ignore>
<li><span><MTPaginationLink element="number"></span></li>
<MTElse>
<mt:ignore>それ以外(遷移用のリンクあり)</mt:ignore>
<li><a href="<$MTPaginationLink$>"><$MTPaginationLink element="number"$></a></li>
</MTIfPaginationCurrent>
<MTPaginationFooter>
<MTIfPaginationNext><li><a class="link_next" href="<$MTPaginationNext$>">次へ</a></li></MTIfPaginationNext>
<MTIfPaginationLast><li><a class="link_next" href="<$MTPaginationLast$>">&gt;&gt;</a></li></MTIfPaginationLast>
</ul></div>
</MTPaginationFooter>
</MTPagination>
ここまで

さらにスタイルシートに以下のように記述することで、かっこよくなります

/* ページ分割した時のページ送り */

.pagenate  {
    margin: 45px 0 15px;
    padding: 10px 10px 5px;
    text-align: center;
    width: 710px;
    background-color: #E1E1E1;
}

.pagenate li  {
    display: inline;
    margin: 0 2px;
    padding: 0;
}
.pagenate li span,
.pagenate li a {
    display: inline-block;
    margin-bottom: 5px;
    padding: 5px 10px;
    background: #fff;
    border: 1px solid #0284dd;
    text-decoration: none;
    vertical-align: middle;
    font-weight: bold;
    color: #888;
}
.pagenate li span {
    font-weight: bold;
    color: #ffffff;
    background: #0284dd;
}
.pagenate li a:hover {
    background: #0284dd;
    color: #fff;
}

 

 

 

こんな感じ

image

工事・障害情報 (1)
パソコン (13)
フレッツ光プレミアム (3)
ホームページ作成 (7)
ウイルス・スパム対策 (6)
EC-CUBE (12)
Movable Type (9)
接続 (4)
機能 (1)
料金 (1)

About

2013年02月15日 11:31に投稿されたエントリーのページです。

ひとつ前の投稿は「【MT】 Cronで自動的に記事を公開する(Pleskでの設定例)」です。

次の投稿は「【MT】ブログ記事でカテゴリごとにデザインを変更する」です。

他にも多くのエントリーがあります。メインページやアーカイブページも見てください。

Powered by
Take-net Service