こっそり始める Blog

iPhoneとiPad中心のブログです

こっそり始める Blog header image 2

WordPressプラグイン WP-Pagenaviでページ番号付きのリンクを作ったった

2012年08月16日 · コメント(0) · WordPress



こんにちは。

こっそりブロガーしている @tar0073 です。
気にしない人は全く気にならない、けど気になってた部分を今回はカスタマイズしてみました。

SPONSORED LINK

過去のエントリーへのリンク

気になっていた部分はブログ内の他のページへのリンクです。

スクリーンショット 2012 08 16 14 11 32

トップページの下の方にあるこれです。
前のページと次のページの2つしかリンクがありません。
これでは遥か過去に戻る時に不便ですよね。

そんなに見ねえよ!って話はこの際無視しますw

まあどもかく他のブログを見てもページ番号付きのリンクになってますよね。
それがしたいんです!それだけです!

どうすれば出来るの?

そもそもがそんなことどうすれば出来るのかわかりません
そういうテーマを使えばいいのか?
そんな時ふと見た以下のサイトに情報がありました。

WordPressで最初にインストールしたプラグイン12個 | たぁぼぉ録

なるほど。これもプラグインで出来るんですね。
ってことでやってみましょう。

WP-Pagenavi

それでは必要なプラグインを早速以下のサイトからダウンロードします。

WordPress › WP-PageNavi « WordPress Plugins

さてダウンロードしてプラグインの設定をしてみるものの変化はありません。
なにかまだ必要なのか?
調べてみましょう。

WP-PageNaviをインストールしてページナビゲーションを拡張しましょう。 | WordPressを使った更新方法, 実行 | ALL FINE ホームページ専門ガイド

なるほど。
コードを埋め込む必要があるんですね。
どこに入れるかがよくわかりませんでしたが、とりあえずindex.phpに入れてみました。

<?php include (TEMPLATEPATH . '/navigation.php'); ?>

となっているところを以下のように変更。

<?php wp_pagenavi(); ?>			

しかしなんだかイメージと違いました。
表示そのものをいじれないものかと調べました。

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

プラグインのwp-pagenaviフォルダにあるpagenavi-css.cssをいじればいいようです。
ここは一応バックアップを取ってからチャレンジです。
あまり良くわかりませんのでいじっては更新して確認しつつの作業です。

.wp-pagenavi {
	color: #555;
    font-size: 140%;
    text-align: center;
}

.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none;
	border: 1px solid #BFBFBF;
	padding: 4px 6px;
	margin: 1px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: #000;
}

.wp-pagenavi span.current {
	font-weight: bold;
}

で、編集したCSSです。
そしてこれで表示されたのがこちらです。

スクリーンショット 2012 08 16 13 51 18

簡単ではありますが、ページ番号付きのリンクの完成です。
なんとなくブログっぽくなっていってますよね!

SPONSORED LINK



タグ : ···

コメント(0)

コメントはまだありません。

コメントする

CAPTCHA


Get Adobe Flash playerPlugin by wpburn.com wordpress themes