ロボット研究開発、ソフトウェア開発、コンテンツ制作配信

「WP-PageNavi」でページナビを追加

WordPressのプラグイン「WP-PageNavi」を使い、サイト内にページナビを追加してみました。
備忘録として残しておきます。

スポンサーリンク

ページナビとは?

ページナビは、投稿した記事をページ毎に分割してそのページのリンクを表示してくれるものです。
PageNavi1
記事数が増えてくると、前後の記事へのリンクだけでは不便なので、
今回、ページナビを追加してみました。

プラグイン「WP-PageNavi」をインストール

スクリーンショット 2016-05-01 19.50.34

WordPress管理画面の[プラグイン]⇒[新規追加]から、「WP-PageNavi」を検索し、インストールし有効化します。

テンプレートの書き換え

次に、ページナビを設定したい箇所に以下のコードを挿入します。

私は、index.phpの「古い記事」「新しい記事」へのリンクをコメントアウトし、上記コードを挿入しました。(以下サンプル)

出力方法のカスタマイズ

WordPressの[設定]⇒[PageNavi]から出力方法をカスタマイズできます。
今回私は、デフォルトの設定から変更しませんでした。
スクリーンショット 2016-05-02 8.49.08

CSSでページナビのスタイルを変更

PageNavi2

WordPressのインストール先⇒[wp-content]⇒[plugins]⇒[wp-pagenavi]フォルダにある[pagenavi-css.css]ファイルを自分のテーマフォルダへコピーします。
そのファイルを変更してページナビのスタイルを変更できます。
以下は今回私が変更したpaagenavi-css.cssです。(以下サンプル)

最後に

以上、プラグイン「WP-PageNavi」でページナビを追加する方法でした。
少しでも参考になれば幸いです。

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で
関連記事(一部広告含む)

コメントを残す

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

CAPTCHA


ページトップボタン