Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

PageBute プラグインをカスタマイズ

Feb242008
Vote:
http://bizcaz.com/archives/2008/02/24-223144.php
Categories: Customize
Tags: 4.1, Customize, PageBute, Plugins
Social Bookmark

Prev Page: テンプレートセットの作り方
Next Page: PageBute プラグインをカスタマイズ２

こんばんわ^^

抜き打ちでまた姪っ子たちが遊びに来た（；￣－￣）
いつものことなんだけど･･･何で抜き打ち!?

さて、そんな話はおいといて、前々から使いづらかった（マークアップしづらかった）PageBute プラグインをチョビッとわたし向けにカスタマイズしちゃいました (●＞∀＜●) てへぇ

カスタマイズ

あまり詳しくは書きませんので、とりあえずわたしが修正した内容を以下に記します。

248 行目修正
PageBute.pl 248 行目
1. # return "<a href=\"${url}\">$name</a>";
2. return "<li><a href=\"${url}\">$name</a></li>";
170 行目修正
PageBute.pl 170 行目
1. # $page_lists .= $i == $lists->{min_page} ? '' : $delim;
2. # $page_lists .= $i == $page_count ? $page_count : &_create_link($i, $site_url . $filename, $file_ext, $i);
3. $page_lists .= $i == $page_count ? '<li>'.$page_count.'</li>' : &_create_link($i, $site_url . $filename, $file_ext, $i);
4. $page_lists .= "\n";

それぞれ赤い字の部分をコメントにして、青い字の部分を追加しました。
上記によりテンプレートを以下のようにマークアップ!!

<ul class="page_nav">
<MTIfPageBefore><$MTPageBefore delim="前の5件"$></MTIfPageBefore>
<$MTPageLists$>
<MTIfPageNext><$MTPageNext delim="次の5件"$></MTIfPageNext>
</ul>

再構築すると以下のような出力になります。

<ul class="page_nav">
<li><a href="http://bizcaz.com/index.php">Prev</a></li>
<li><a href="http://bizcaz.com/index.php">1</a></li>
<li>2</li>
<li><a href="http://bizcaz.com/index_3.php">3</a></li>
<li><a href="http://bizcaz.com/index_4.php">4</a></li>
<li><a href="http://bizcaz.com/index_5.php">5</a></li>
<li><a href="http://bizcaz.com/index_3.php">Next</a></li>
</ul>

そして、以下のように CSS でスタイルしてあげると、わたしのサイトのトップページで使ってるようなページナビゲーションになります。

ul.page_nav {
margin-left: auto;
margin-right: 0;
padding: 1em 0;
list-style: none;
text-align: right;
}
ul.page_nav li {
margin-right: .3em;
display: inline;
}
ul.page_nav li span,
ul.page_nav li a {
padding: .3em 1em;
color: #303;
border: 1px solid #e8ecef;
}
ul.page_nav li span,
ul.page_nav li a:hover {
color: #303;
background-color: #f8f4e6;
text-decoration: none;
border: 1px solid #eae5e3;
}

以上です。
人様のプラグインをカスタマイズしちゃってるので詳しくは説明しませんが、カンタンにいうとリスト形式にして出力してもらってます。

ホントは参考にしたサイトさんがあったのですが、URL わからなくなっちゃったので後ほど追記します。

しばらく使ってなくって、久しぶりに使おうと思ったときに BlurBlue-Note さんでご紹介されてたので、わたしもやってみましたの。

PageButeプラグインのページャーをちゃんとマークアップする

以上、ご参考までに。

Edit
Permalink
12 Comments
2 TrackBacks

Trackback Pings(2)

TrackBack URL for this entry:

from ただてとてとと歩きだす: PageButeプラグインの初期の状態では、マークアップが適切に行われておらず、CSSによるスタイルづけもしっかりと行えないのです。というわけで今回はpa...
Tracked on September 8, 2008

from リンク集「ヒトコト」: ウェブページに、前後のウェブページへのリンクを入れてみたら、MTPageNext...
Tracked on September 16, 2008

Comments(12)

#1: Posted by oscar @ February 25, 2008 [REPLY]: えーと、ここかな？
http://www.dynamicdrive.com/style/csslibrary/item/css_pagination_links/

#2: Posted by bzbell @ February 25, 2008 [REPLY]

>>1 oscar さん

こんにちわ^^

> えーと、ここかな？

あぁ～違うんです
でも、上記ページで紹介してるのもいいですね、PageBute って必ず 10 ページ分しか表示しないなので、以降のページが隠れちゃう。
だから「･･･」表示はいいかも、ですね
試しにやってみよっかな。

#3: Posted by takuya @ July 30, 2008 [REPLY]: はじめまして。
先週からMTを使ってブログを作っているのですが、わからないことだらけです。
さっそくご質問ですが、PageButeのカスタマイズがうまくいきません。
再構築時に「MTPageContentsは不明なタグです」とエラーがでます。
デフォルトのままでは、マークアップがありえないので・・・
返信お願いします！

#4: Posted by bzbellからtakuyaへの返信 @ July 31, 2008 [REPLY]

>>3 takuya さん

こんばんわ^^

> 再構築時に「MTPageContentsは不明なタグです」とエラーがでます。

まず、PageBute プラグインは正しくアップロードされてるか確認してください。
プラグインの確認は「システムメニュー」＞「プラグイン」を選択して頂くと、今インストールされてるすべてのプラグインの一覧が表示されるはずです。
考えられる要因を以下に記します。

その中に PageBute プラグインがありますか!?
ない場合には、mt/plugins/ フォルダの中に再度アップロードします。
PageBute プラグインがエラーしてませんか!?
エラーしてる場合、PageBute のテキストがグレーアウトされます。

また、わたしのサイトで実際に使ってるコードを以下に記しますので参考にしてください。

<!-- ▼分割するページ数を設定▼ -->
<mt:SetVar name="page_bute_cnt" value="5">
<!-- ▲分割するページ数を設定▲ -->
<!-- ▼1 ページに表示するエントリ数とページ分割する総エントリ数を取得▼ -->
<$MTEntriesCount setvar="entcnt"$>
<mt:SetVarBlock name="entall"><$mt:GetVar name="entcnt" value="$page_bute_cnt" op="*"$></mt:SetVarBlock>
<!-- ▲1 ページに表示するエントリ数とページ分割する総エントリ数を取得▲ -->
<!-- ▼分割するページ数分ループ▼ -->
<MTPageButeContents count="$entcnt">
<!-- ▼ページ分割する総エントリ数分ループ▼ -->
<MTEntries limit="$entall">
<!-- ▼エントリの概要用のテンプレートモジュール読込み▼ -->
<$mt:Include module="ブログ記事の概要"$><$MTPageButeSeparator$>
<!-- ▲エントリの概要用のテンプレートモジュール読込み▲ -->
</MTEntries>
<!-- ▲ページ分割する総エントリ数分ループ▲ -->
</MTPageButeContents>
<!-- ▲分割するページ数分ループ▲ -->
<!-- ▼ナビゲーションバー▼ -->
<ul class="bute_navi">
<mt:IfPageButeBefore><$MTPageButeBefore delim="Prev"$></mt:IfPageButeBefore>
<$MTPageButeLists$>
<mt:IfPageButeNext><$MTPageButeNext delim="Next"$></mt:IfPageButeNext>
</ul>
<!-- ▲ナビゲーションバー▲ -->

分からないことがあればご連絡ください
そのままコピペしちゃダメですよ。
あくまでもサンプルということで。

#5: Posted by takuya @ August 2, 2008 [REPLY]

返信ありがとうございます！！
原因を探ってみたら、コピペミスでした！！
お恥ずかしい・・・

エントリー本文からコピーしたところ、コードが消えかけていたみたいです。。
IEのバグですかね？
FireFoxで見たところちゃんと表示されていました。
実はサイト全体がセンターよせだったんですね

貴重なお時間をいただいてしまい、本当に申し訳ありませんでした。
また何かご質問するかもしれませんが、
その時はよろしくお願いします！！

#6: Posted by bzbellからtakuyaへの返信 @ August 2, 2008 [REPLY]

>>5 takuya さん

こんばんわ^^

よかったですね。解決できて
わたしで分かることでしたらいつでもどうぞ。

今後ともどうぞよしなに

#7: Posted by glass @ August 5, 2008 [REPLY]: いつもお世話になっています。
MTPaginateのプラグインから新しいpagebuteに変更しました。
ホームぺージの項目「NEW」ではびっくりするぐらい簡単に上手くできました。
http://glass-house.ne.jp/
しかし、Archivesでは、一覧表示と、ブログ記事が混在してしまいます。
一覧で表示するようにつくりたいのですか、どのようにしたら良いでしょうか。
記述がおかしいと思いますが、ご教授よろしくお願いできますか。
いつもすいません、よろしくお願いします。

#8: Posted by bzbellからglassへの返信 @ August 5, 2008 [REPLY]

>>7 glass さん

こんばんわ^^

うわぁ～カックいいのができましたねぇ

> しかし、Archivesでは、一覧表示と、ブログ記事が混在してしまいます。
> 一覧で表示するようにつくりたいのですか、どのようにしたら良いでしょうか。

はい。
glass さんとこのアーカイブだと普通に時系列で一覧表示させたい…ということでよいですね
テンプレートの構成をよく知らないので想像で言います
アーカイブインデックスのテンプレートの中で、「ヘッドライン」とかいうテンプレートモジュールの後に「エントリの概要」とかいうテンプレートモジュールを MTInclude してませんか!?

恐らく「ヘッドライン」ってのがブログ記事の一覧表示( 目的の一覧表示 )して、「エントリの概要」ってのが通常の記事概要にあたるテンプレートモジュールかと思われます。
ですので、単純に「エントリの概要」を MTInclude してる行をバッサリと削除しちゃえば OK かと
心配でしたらアーカイブインデックスのテンプレートを見せて頂ければ的確にお答えすることができますよ

まずはテキストファイルなどにバックアップ( コピー & ペースト )してからさ削除してみるといいですよ

#9: Posted by noriko @ March 7, 2009 [REPLY]

mt_memo-4.23-pandora3.18 で
bzbellさんは
index_main.mtml　で
◆page_bute_cnt :ページ分割数
<mt:SetVar name="page_bute_cnt" value="5">
サンプル　index_main.mtml
<ul class="bute_navi">
<mt:For var="page_ctr" from="1" to="$page_bute_cnt">
以下略　・・・
</mt:If>
結果　下記の様になりますね。
<ul class="bute_navi">
1
<li><a href="javascript:void(0);" onkeypress="javascript:void(0)" onclick="$('#alpha').LoadPage('http://bizcaz.com/index_2.php', '');">2</a></li>
以下略　・・・
</ul>
サンプルの様に書き換えて
クリックしても、上にスクロールしましたが、ローダー画像が回りっぱなしになります。
index_1.php ～ index_5.php は作成されているのに。

ノーマルでは、スクロールしないで表示されますね。
上にスクロールして、index_1.php ～ index_5.phpを表示したいのです。
<a href="javascript:void(0);" onkeypress="javascript:void(0)" onclick="$('#alpha').LoadPage(　以下略　・・・

以上、宜しく御願い致します。

#10: Posted by bzbellからnorikoへの返信 @ March 7, 2009 [REPLY]

>>9 noriko さん

こんにちわ^^

ちょとよく分からないので確認しますが、noriko さんはウチのサイトのようにページ移動なしに、Ajax を使って index1～index5 を表示させたいということでしょうか。
もしそうだとしたら、以下のお約束を守って頂けるのでしたらウチのサイトで使ってるテンプレートをお渡しすることはできます。

Ajax を使ったページ表示を設置してからの、何らかのトラブルに見舞われてもサポートできません。というのも、noriko さんがやろうとしてることはそれなりにテクを要する内容だからです。
最初の設置に関してはわたしが責任持ちます。ですが、以降のメンテナンスに関しては noriko さんで行ってください。
Ajax を使って表示したいページ内( index1 ～ index5 )に JavaScript を組み込まないでください。
各サイトでいろんな JavaScript のコードが配布されてますが、それらを無闇に組み込んでしまうとトラブルに見舞われます。
具体的には、表示したいページ内に JavaScript が含まれていると画面が真っ白になります。

これは、JavaScript 内に document.write( or document.writein )が含まれていた場合 jQuery が自動的に実行してくれるのですが、この時の表示先が特定の場所ではなく、ページ全体に表示してしまう為です。

回避策としては iframe、LazyDocWrite を使うなどがあります。

以上です。
noriko さんがトラブルが発生してもご自身で回避することが可能でしたら問題ないと思います
でも、ちょとムズかしいようでしたらあまりオススメしません

#11: Posted by norikoからbzbellへの返信 @ March 8, 2009 [REPLY]

>>10 bzbell さん
>ウチのサイトのようにページ移動なしに、Ajax を使って index1～index5 を表示させたいということでしょうか。
>もしそうだとしたら、以下のお約束を守って頂けるのでしたらウチのサイトで使ってるテンプレートをお渡しする
>ことはできます。

ページ移動なしに、Ajax を使って index1～index5 を表示させたいのです。
私の自己責任にて、お約束は守ります。私しか使用致しません。
bzbell さんはAjaxを使って色々テンプレートに組み込んで有りますね。
他のサイトのテンプレートセット等は、自分で組み込まなければならないのが
殆んどみたいな気が致します、
bzbell さんのテンプレートセットに非常に興味が有り、勉強にも成ります。

以上の件、宜しく御願い致します。

#12: Posted by bzbellからnorikoへの返信 @ March 8, 2009 [REPLY]

>>11 noriko さん

こんにちわ^^

お勉強目的なんですね。それでしたら問題ないと思います
ちょとお待ちくださいね。組み込んだテンプレートセットを作成してメルにてお送りします

- 追記 -

先ほど noriko さん宅にテンプレートセットをお送りしましたのでご確認ください。