[ WordPress ] WP-PageNavi &#8211; ページ番号付きのページネートリンクを生成するプラグイン

[ WordPress ] WP-PageNavi – ページ番号付きのページネートリンクを生成するプラグイン

ページ番号付きのページネートリンクを生成する WordPress のプラグイン WP-PageNavi をインストールしてみました。

wp-pagenavi の表示例

↑ こんな感じでページ送りを表示できるので、記事数の多いカテゴリーページでも、ワンクリックで最終ページまでジャンプできます。

WP-PageNavi をインストールした環境

WordPress 2.6.2 + wp.Vicuna と言うテーマ
WP-PageNavi 2.31

WP-PageNavi のインストール方法

WP-PageNavi 2.31 をダウンロード＆解凍する。
プラグインフォルダに [ wp-pagenavi ] フォルダごとアップロードして WordPress の管理画面で有効化する。

WP-PageNavi の設置方法 ( テーマファイルの編集 )

次の PHP コードをテーマファイルの中の WP-PageNavi を表示させたい箇所に追加します。

<?php if(function_exists('wp_pagenavi')) {
wp_pagenavi();
} else {
vicuna_paging_link('next_label=Newer Entries&prev_label=Older Entries&indent=2');
} ?>

上のような PHP コードにしておくと、WP-PageNavi プラグインを停止した時、Vicuna 標準のページネートリンクが表示されます。

とりあえず、私が編集したテーマファイルは以下のファイルです。

category.php

WP-PageNavi の見た目をカスタマイズする ( スタイルシートの編集 )

アップロードした [ wp-pagenavi ] フォルダの中にある [ pagenavi-css.css ] と言うファイルを編集することで、WP-PageNavi の見た目をカスタマイズできます。

[ 参考 ] WP-PageNavi が生成する HTML コード

<div class="wp-pagenavi">
<span class="pages">Page 1 of 6</span>
<span class="current">1</span>
<a href="http://www.example.com/page/2">2</a>
<a href="http://www.example.com/page/3">3</a>
<a href="http://www.example.com/page/4">4</a>
<a href="http://www.example.com/page/5">5</a>
<a href="http://www.example.com/page/2">&#xBB;</a>
<span class="extend">...</span>
<a href="http://www.example.com/page/6">Last &#xBB;</a>
</div>

※ わかりやすくするために属性を省略したり、改行を入れたりしています。

私が編集した CSS コード

上の HTML コードを参考にして、私が編集した CSS コードは以下の通りです。

div.wp-pagenavi {
    margin: 1.5em 30px;
    color: #555;
    font-size: 85%;
    text-align: center;
}
.wp-pagenavi a, .wp-pagenavi a:link {
    padding: 0.5em 1em;
    margin: 0.25em;
    text-decoration: none;
    border: 1px solid #0198ca;
    color: #0198ca;
}
.wp-pagenavi a:visited {
    border: 1px solid #8f9da6;
    color: #8f9da6;
}
.wp-pagenavi a:hover {
    text-decoration: underline;
    border: 1px solid #00b8fd;
    color: #00b8fd;
}
.wp-pagenavi a:active {
    border: 1px solid #00b8fd;
    color: #00b8fd;
}
.wp-pagenavi span.pages, .wp-pagenavi span.current, .wp-pagenavi span.extend {
    padding: 0.5em 1em;
    margin: 0.25em;
    border: 1px solid #ddd;
}
.wp-pagenavi span.current {
    font-weight: bold;
}

WP-PageNavi の設定画面

WP-PageNavi の設定は管理画面でいろいろ変更できます。

設定項目の説明は面倒なのと、英語がわからないので割愛。

調べてみる事 ( ToDo )

検索結果でも正常に動くか試してみる。

参考にさせてもらったページ

ありがとうございます。

投稿日付: 2007/9/7 金曜日 22:35:09
カテゴリー: WordPress
タグ: WordPress

13つもコメントがあります

屋根裏物置 - テンプレート改造メモ(Wp-PageNavi導入） | 2008.10.26 13:55
花風Milk-Tea* - WPサイトを始めました | 2009.01.06 23:27

[...] 使用中プラグイン * Nice Trailingslashit　（URL文末を/で終わらせる素敵プラグイン） * Top Level Categories　（http://example.com/category/hoge等のcategoryを省略してくれる） * Top Level Categories Fix　（上記プラグインの不具合改良版） * AddQuicktag （） * Add-Meta-Tags　（description や keywords を記事ごとに記述出来るプラグイン。） * WP-PageNavi　（ナビゲーションリンクを視覚的に判りやすくしてくれるプラグイン。また現在位置迄解る優れもの） * Litebox plugin for WordPress　（本家よりも軽くて表示もスムーズなり：一時停止中ナウ） * WP-GreyBox　（Liteboxの仲間；ポップアップブロッカーに邪魔されず画像を表示する） * Kill WPTexturize　（クォーテーションなどを変換してしまう WP の校正機能を無効にする） * Ktai Style (携帯対応プラグイン) * JSeries Notifier　：主に海外では作られない日本側特有のプラグイン配布先の更新通知」 * Favicon Head　（ファビコン表示） * brBrbr　(改行プラグイン) * Akismet (標準搭載されているスパム対策プラグイン) * Breadcrumb Navigation XT　（ぱんくずリスト用） * WP Multibyte Patch　（WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行う） * Vicuna Adaptor　（wp.Vicuna Ext専用の拡張プラグイン：はてなユーザーさんには持って来いなプラグイン） * Contact Form 7(簡単なメルフォ) * Lighter Menus　（管理画面をツリー状プルダウン表示してくれる） * Smart Youtube　（YouTubeの動画を簡単に記事へ挿入することができる） * Gravatar 　（コメント用のアバター表示） * WP YouTube 　（ヨウツベのエフェクト） * WPlite 　（管理画面上から使わないメニューを抹殺できる） * WP-Cache 　（ページをキャッシュし表示速度を高速化する） * Twitter Tools 　（Twitter用プラグインだが微妙・・・） [...]
花風Milk-tea* - WPサイトを始めました | 2009.01.07 12:08

[...] 使用中プラグイン * Nice Trailingslashit　（URL文末を/で終わらせる素敵プラグイン） * Top Level Categories　（http://example.com/category/hoge等の/category/部分を省略してくれる） * Top Level Categories Fix　（上記プラグインの不具合改良版） * AddQuicktag （WordPress の投稿画面にタグや定型文を挿入できるボタンを追加） * Add-Meta-Tags　（description や keywords を記事ごとに記述） * WP-PageNavi　（ナビゲーションリンクを視覚的に判りやすくし、また現在位置迄解る優れもの） * WP-GreyBox　（Liteboxの仲間；画像をポップアップブロッカーに邪魔されず表示） * Kill WPTexturize　（クォーテーションなどを変換してしまう WP の校正機能を無効） * Ktai Style (携帯対応プラグイン) * JSeries Notifier　（日本側特有のプラグイン配布先の更新通知用プラグイン） * Favicon Head　（ファビコン表示） * Akismet (標準搭載されているスパム対策用) * WP Multibyte Patch　（WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行う） * Contact Form 7(簡単なメルフォ) * Lighter Menus　（管理画面をツリー状プルダウン表示してくれる） * Smart Youtube　（YouTubeの動画を簡単に記事へ挿入） * Gravatar 　（コメント用のアバター表示：Notプラグイン） * WPlite 　（管理画面上から使わないメニューを抹殺できる） * WP-Cache 　（ページをキャッシュし表示速度を高速化する） * WP-SimpleGmaps　（記事にGoogleMapを簡単挿入できる） * SEO Title Tag　（タイトルのカスタマイズ専用） * Search Everything　（投稿した記事の本文しか検索されないサイト内検索を対象とするコンテンツを追加する。） * Auto External Link　（リンク部分に新しいウインドウで開くアイコンを追加） * wp-hatena　（最近よく見かけるソーシャルブックマークへの追加ボタン） [...]
花風Milk-tea* - ＷＰ奮闘記 | 2009.01.11 10:15

[...] 使用中プラグイン * Nice Trailingslashit　（URL文末を/で終わらせる素敵プラグイン） * Top Level Categories　（http://example.com/category/hoge等の/category/部分を省略してくれる） * Top Level Categories Fix　（上記プラグインの不具合改良版） * AddQuicktag （WordPress の投稿画面にタグや定型文を挿入できるボタンを追加） * Add-Meta-Tags　（description や keywords を記事ごとに記述） * WP-PageNavi　（ナビゲーションリンクを視覚的に判りやすくし、また現在位置迄解る優れもの） * WP-GreyBox　（Liteboxの仲間；画像をポップアップブロッカーに邪魔されず表示） * Kill WPTexturize　（クォーテーションなどを変換してしまう WP の校正機能を無効） * Ktai Style (携帯対応プラグイン) * Favicon Head　（ファビコン表示） * Akismet (標準搭載されているスパム対策用) * WP Multibyte Patch　（WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行う） * Contact Form 7(簡単なメルフォ) * Smart Youtube　（YouTubeの動画を簡単に記事へ挿入）　* WordPress Gravatar Plugin (コメント用のアバター表示：) 　　　　　→ Gravatar 　（メールにてアバター画像を登録するサービス） * WPlite 　（管理画面上から使わないメニューを抹殺できる） * WP-Cache 　（ページをキャッシュし表示速度を高速化する） * WP-SimpleGmaps　（記事にGoogleMapを簡単挿入できる） * SEO Title Tag　（タイトルのカスタマイズ専用） * Search Everything　（検索を対象を広く深く追求できる用にしたプラグイン。） * wp-hatena　（最近よく見かけるソーシャルブックマークへの追加ボタン） * WP-Footnotes　（記事の下に文章や単語の注釈を表示） * Disable Revisions and Autosave（リビジョンと自動保存を無効にする）　* WP-PostRatings (WEB拍手化ぽくカスタマイズ) [...]
wordpress:ページに数字のナビゲーションを付ける | デザイナー佐脇の気ままな日記 | 2009.03.04 6:20

[...] 使用方法はこちら関連するかもしれない投稿 [...]
ツール | www.junpapa-family.com | 2009.04.20 12:47

[...] http://wordpress.bowz.info/37 [...]
Hinemosu | 2009.06.12 16:49

WordPress: WP-PageNavi導入

WordPressのページ表示画面で、前後のページ番号を含んだリンクナビゲーションを実現してくれるプラグイン「WP-PageNavi」を導入したよ。導入にあたり「[ WordPress ] WP-PageNavi – ページ番号…
Ai Dream – Web System Japan » [WordPress] プラグイン | 2009.07.29 19:42

[...] ページ番号のナビゲーションカテゴリー: 未分類タグ: 閲覧回数 7　回コメント (0) トラックバック (0) コメントをどうぞトラックバックURL [...]
links for 2009-11-08 | ウェブル | 2009.11.09 5:02

[...] [ WordPress ] WP-PageNavi – ページ番号付きのページネートリンクを生成するプラグイン – WordPress 研究室 (tags: WordPress) [...]
PageNavi | ﾄﾞﾛｯﾌﾟｼｯﾊﾟｰのWordpress | 2010.05.15 10:01

[...] 参考サイト[ WordPress ] WP-PageNavi – ページ番号付きのページネートリンクを生成するプラグイン | Bowz::Notebook [...]
ページナビゲーションをカッコ良くする | brightear | 2010.07.03 19:03

[...] http://bowz.info/1823 [...]
報告２ | BLOG | 2010.11.23 16:54

[...] http://bowz.info/1823 カテゴリー: 未分類パーマリンク [...]
708 DESIGN DEVELOPMENT : WP-PageNaviの使い方 | 2012.03.06 11:59

[...] Bowz::Notebook [ WordPress ] WP-PageNavi – ページ番号付きのページネートリンクを生成するプラグイン [...]

Bowz::Notebook