2012年06月27日 category : WordPress tags :

CSSの知識なしでWP-PageNaviをあなた色にカスタマイズする方法

このエントリーをはてなブックマークに追加

pagenavi

WordPressのプラグイン「WP-PageNavi」と「Wp Pagenavi Style」の組み合わせで簡単カスタマイズ。

投稿記事も増えてきたのでページナビを追加しました。サイトの下によくあるページ移動ができるナビゲーションです。ページ送りはWordPressのプラグイン「WP-PageNavi」を使用しました。これにもうひとつプラグインを追加するとCSSの調整なしでいい感じになります:)

設置も簡単ですのでページナビを追加して過去記事にもアクセスしやすい環境を構築しましょう。追加するプラグインは「Wp Pagenavi Style」というプラグインです。

ではそれぞれのプラグインのインストールから紹介します。

01 . 「WP-PageNavi」のインストール

管理画面から「WP-PageNavi」を検索し「いますぐインストール」をクリックします。インストールが完了したら「プラグインを有効化」をクリックしてWP-PageNaviを有効にします。

WordPress管理画面の左側メニューの「設定」→「PageNavi」をクリックしPageNavi設定画面を開きます。日本語にも対応していますので必要に応じて設定を変更します。そのままでも問題ないと思います。こんな感じです。

wp-pagenavi

02 . ページナビゲーションの表示

表示したい箇所に以下のコードを追加してください。

<?php wp_pagenavi(); ?>

03 . 「Wp Pagenavi Style」のインストール

管理画面から「WP PageNavi Style」を検索し「いますぐインストール」をクリックします。インストールが完了したらプラグインを有効化をクリックしてWP PageNavi Styleを有効にします。

WordPress管理画面の左側のメニューに「PageNavi Style」が追加されますので設定画面を開きます。細かくカスタムすることも可能ですが、予めスタイルがたくさん用意されていますのでその中からブログにあったナビゲーションが探せると思います。

style-setting

スタイルの一部です。





WP-PagenaviはCSSに対応していますので独自に装飾してもいいのですが、「WP PageNavi Style」を使うことによってCSSの知識なしでページナビゲーションをブログにあったスタイルに変更することができます。

それにしてもプラグイン便利ですね。昔ページ総数の取得やらページ遷移やらCSSにとコツコツと実装していたのを思い出しました。WordPressたのし:)

HOME >>  WordPress > CSSの知識なしでWP-PageNaviをあなた色にカスタマイズする方法