デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

「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 で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

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

CAPTCHA


ページトップボタン