パラメータでカスタマイズしやすいページナビもプラグインにしてみた

パラメータでカスタマイズしやすいWordPressのパンくずナビをプラグインにしたので、パラメータでカスタマイズしやすいWordPressのページナビもプラグインにしてみました。

こちらは、@Nattodaisuki1さんに試していただいたフィードバックを取り込んで、パラメータで制御出来るよう、アップデートがされています。

こっちも国際化などはこれからってとこです。

Download
Prime Strategy Page Navi 1.0.0

もし、キレイなCSSなどを作られた方がいらっしゃいましたら、コメントでお寄せいただけるとうれしいです。

使い方

  1. 上記のダウンロードリンクより、プラグインのアーカイブファイルをダウンロードし、解凍後、プラグインディレクトリにアップロードしてください。
  2. プラグイン管理画面より、Prime Strategy Page Naviを有効化してください。
  3. テンプレートファイルのページナビを表示したい箇所に、ページナビのテンプレートタグを追加してください。ページナビの表示は、テンプレートタグのパラメータで色々と変更ができます。パラメータについては、指定可能なパラメータを参照してください。

テンプレートタグ

<?php if ( function_exists( 'page_navi' ) ) { page_navi(); } ?>

<ul class="page_navi">
	<li class="first"><a href="https://www.warna.info/">&laquo;</a></li>
	<li class="previous"><a href="https://www.warna.info/">&lt;</a></li>
	<li class="current"><span>1</span></li>
	<li class="after delta-1"><a href="https://www.warna.info/page/2/">2</a></li>
	<li class="after delta-2"><a href="https://www.warna.info/page/3/">3</a></li>
	<li class="after delta-3"><a href="https://www.warna.info/page/4/">4</a></li>
	<li class="after delta-4"><a href="https://www.warna.info/page/5/">5</a></li>
	<li class="after delta-5"><a href="https://www.warna.info/page/6/">6</a></li>
	<li class="after delta-6 tail"><a href="https://www.warna.info/page/7/">7</a></li>
	<li class="next"><a href="https://www.warna.info/page/2/">&gt;</a></li>
	<li class="last"><a href="https://www.warna.info/page/7/">&raquo;</a></li>
</ul>

指定可能なパラメータ

items
表示する前後ナビゲーションの数。現状表示しているページを含むため、前後の表示数を揃えたい場合は奇数を指定してください。デフォルトは１１
edge_type
１ページ目および最終ページでの前後ページへのリンク、最初と最後のページへのリンクの表示方法。noneで表示しない。spanでリンクなしで表示。linkはリンク付きで表示。デフォルトはnone
show_adjacent
前後ページへのリンクを表示するかどうか。デフォルトはtrue（表示）
prev_label
前ページリンクのリンクテキスト。デフォルトは、&lt;（<）
next_label
次ページリンクのリンクテキスト。デフォルトは、&gt;（>）
show_boundary
最初と最後のページへのリンクを表示するかどうか。デフォルトはtrue（表示）
first_label
最初のページへのリンクテキスト。デフォルトは&laquo;（«）
last_label
最後のページへのリンクテキスト。デフォルトは&raquo;（»）
show_num
現ページナンバーと全ページ数の表示をするかどうか。デフォルトはfalse（非表示）
num_position
現ページナンバーと全ページ数の表示位置。デフォルトはbefore（前）。後に表示したい場合はafterを指定
num_format
現ページナンバーと全ページ数の表示フォーマット。デフォルトは、<span>%d/%d</span>（nn/mm）
navi_element
ページナビのラッパー要素。divかnavを指定可能。デフォルトは空（ラッパー要素なし）
elm_class
ラッパー要素、ラッパー要素がない場合は ulのclass属性。デフォルトはpage_navi
elm_id
ラッパー要素、ラッパー要素がない場合は ulのid属性。デフォルトは空（id要素なし）
li_class
ページナビの全liに付くclass属性。デフォルトは空（classなし）
current_class
現ページのliに指定されるクラス名。デフォルトは current
current_format
現ページの表示フォーマット。デフォルトは <span>%d</span>
class_prefix
classの接頭辞。ページナビで出力されるclass全てに追加される。デフォルトは空。（接頭辞なし）
indent
タブインデント数。デフォルトは０
echo
ページナビの出力を行うかどうか。デフォルトは true（出力する）。false または 0 を指定するとPHPの値として returnする

更新履歴

2011.08.08 ver. 1.0.0
公式ディレクトリにて公開
2011.07.12 ver. 0.8.1
テンプレートタグでパラメータの指定が無かった場合にNoticeエラーが出ていた問題を修正
2011.06.30 ver. 0.8.0
プラグイン化、edge_typeパラメータを追加

「パラメータでカスタマイズしやすいページナビもプラグインにしてみた」への9件のフィードバック

  1. たいへん素晴らしいプラグインをありがとうございます。
    一つ改善をお願いしたい点があります。
    出力された ul から /ul までを、
    改行およびインデントを無くし1行にしていただけないでしょうか。
    現状出力されたHTMLは、改行とインデントでとても見やすくなっているのですが、
    余分な半角スペースが挿入されCSSのマージンと合わなくなってしまいます。
    よろしくお願いいたします。
    http://dreki26.digi2.jp/pagenavi/pagenavi.gif

  2. dreki26さん、ありがとうございます。

    現状のソース出力を変更する予定はありませんが、プラグイン独自のフックを備えていますので、その時点でインデント・改行を削除することが可能となっています。
    下記のコードをテーマのfunctions.phpに追記して試してみてください。

    function remove_tab_and_breaks( $page_navi ) {
	$page_navi = str_replace( array( "\t", "\n" ), '', $page_navi );
	return $page_navi . "\n";
}
add_filter( 'page_navi', 'remove_tab_and_breaks' );

  3. jim912さん
    ご指示のコードをfunctions.phpに追加し無事解決する事ができました。
    ご対応ありがとうございました。

  4. ネットワーク機能で、複数のブログユーザーの記事を出力し、それをページング処理する方法はありませんか？

  5. Kosaka Xさん、こんにちは。

    マルチサイトの複数ブログからの記事出力のページングですが、記事出力の実装方法に依存するため、当該プラグインが利用できるとは限りません。

    あしからずご了承下さい。

  6. ピンバック: WordPressのページ送りプラグイン「prime-strategy-page-navi」 | HIRO DESIGN ヒロデザイン制作

  7. なかなか良いページ送りナビゲーションがなく、探していたところこちらのページに出会いました。

    一点、currentクラスの付いたli要素でhead, tailクラスが付かなかいのですが、こちらは仕様でしょうか？下記修正して対応いたしました。

    綺麗なHTMLを柔軟に出力できる素晴らしいプラグインをありがとうございます。

    prime-strategy-page-navi.php: 150目〜
    if ( $i == $start ) {
    $page_navi .= ' ' . $args['class_prefix'] . 'head';
    } elseif ( $i == $end ) {
    $page_navi .= ' ' . $args['class_prefix'] . 'tail';
    }
    if ( $args['li_class'] ) {
    $page_navi .= ' ' . $args['li_class'];
    }

  8. ピンバック: ページャープラグイン「Prime Strategy Page Navi」のカスタマイズ | ふーたらのページ　WordPressやFireworks、Android、ネットとかのお話しをしましょ。

  9. Hi Jim / Hitoshi.

    I have installed your Prime Strategy Page Navi plugin, which is really great and was reasonably easy to install even though I am very new to WP and am still setting up my blog. There is just one thing that I can’t work out. Although the new page navigation displays perfectly when I view the page on my PC, when I view the very same page on my mobile phone it displays the new page navigation AND the old page navigation, notwithstanding that I removed the old code from the page.

    I would really appreciate it if you could let me know if there is a solution to this problem.

    Thanks and kind regards
    Randall

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です