2010.03.13.

WordPlessでページナビゲーションを表示する

WordPlessのプラグイン「WP-PageNavi(バージョン 2.61 )」を入れてみました。例によって自分のブログに合わせてデザインを変更してみます。

まずインストールしたらページナビを表示したい場所に

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

を記入。これだけ。

サイトを表示してみると、こんな感じでナビが出てきていると思います。これはページの数が少ないと「« First」が出ないなど、ページ数によって表示のされ方が変わってきます。

さて、今度はまたWordPlessのダッシュボードに戻って、左サイドの下にある設定をクリック。さらにその中に「PageNavi」の設定があるはずです。それを開くと Page Navigation Options が出てきます。

Text For Number Of Pages はページナビの「Page 5 of 14」部分。私はジャマくさいので削除しました。
Text For First Page は「« First」。Text For Last Page は「Last »」。
Text For Next Page とText For Previous Page はそれぞれ「»」「«」です。ここは自由に書き替えられます。
例えば「« First」」を「最初のページへ」などと変えることが出来ます。
私は Text For Number Of Pages のところを削ってしまいましたが、やっぱり全体のページ数はどこかに表示したいと思ったので、Text For First Page に「« First ( P 1 )」、Text For Last Page に「Last ( P %TOTAL_PAGES% ) »」を入れてみました。
「%TOTAL_PAGES%」は全体のページ数を表示するので「Last ( P 14 ) »」などと表示してくれるはずです。Firstの ( P 1 ) は無くてもいいんですが、Lastと一緒に表示されたときにバランスが悪いので入れました。
設定が終わったら下の方にある「Save Changes」を押して設定完了です。
あまり長くなりすぎると途中で折り返されてしまって、表示が崩れることもあります。Page Navigation Options ではさらに、ページ番号をいくつまであらわすかなど細かく設定できるので、表示範囲の横幅寸法に合わせて調整するとよいでしょう。

最後にまたダッシュボード、左サイドバーの「プラグイン」の中の「編集」を開きます。右側に出てくる「編集するプラグイン」で「WP-Pagenavi」を選んで「選択」ボタンをクリック。さらにその下にある「wp-pagenavi/pagenavi-css.css」をクリックするとcssの編集画面になります。cssを変更する前にいつでも元に戻せるように、必ずコピーしてバックアップしておきましょう。後はここで好みに合わせてcssを編集すれば、オリジナルページナビの完成です。
あるいは、- wp-content/plugins/wp-pagenavi/pagenavi-css.css の pagenavi-css.css ファイルを差し替えてしまってもいいです。

私が編集したcssはこんな感じ。ezorisu-webのHomeからずずーっと下の方にスクロールしていくと実物が見えます。

元のcssをそのまま上書きすれば同じように表示されます。そのまま使いたいという方は、どうぞご自由にお使いください。

.wp-pagenavi {
	text-align: center;
	font-size: 95%;
}

.wp-pagenavi a, .wp-pagenavi a:link {
	padding: 3px 4px;
	margin-right: 1px;
	text-decoration: none;
	color: #fff;
	background-color: #999; /* IE 用 */
	background: -moz-linear-gradient(top, #999, #666); /* Firefox 用 */
	background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#666)); /* Safari,Google Chrome用 */
}
.wp-pagenavi a:visited {
	color: #b3b3b3;
}
.wp-pagenavi a:hover {
	background-color: #666; /* IE 用 */
	background: -moz-linear-gradient(top, #777, #444); /* Firefox 用 */
	background: -webkit-gradient(linear, left top, left bottom, from(#777), to(#444)); /* Safari,Google Chrome用 */
}
.wp-pagenavi a:active {
	color: #ff8000;
	background-color: #e6e6e6;
}
.wp-pagenavi span.current {
	padding: 3px 4px;
	margin-right: 1px;
	color: #555;
	background-color: #e6e6e6;
}
.wp-pagenavi span.extend {
	margin-right: 1px;
	color: #333;
}
.wp-pagenavi a.previouspostslink {
	color: #fff;
}
.wp-pagenavi a.nextpostslink {
	color: #fff;
}
.wp-pagenavi a.first {
	padding: 3px 8px 3px 12px;
	color: #fff;
	-webkit-border-top-left-radius: 50px; /* Safari,Google Chrome用 */
	-webkit-border-bottom-left-radius: 50px; /* Safari,Google Chrome用 */
	-moz-border-radius-topleft: 50px; /* Firefox 用 */
	-moz-border-radius-bottomleft: 50px; /* Firefox 用 */
}
.wp-pagenavi a.last {
	padding: 3px 12px 3px 8px;
	color: #fff;
	-webkit-border-top-right-radius: 50px; /* Safari,Google Chrome用 */
	-webkit-border-bottom-right-radius: 50px; /* Safari,Google Chrome用 */
	-moz-border-radius-topright: 50px; /* Firefox 用 */
	-moz-border-radius-bottomright: 50px; /* Firefox 用 */
}

今回は位置的に区切り線の役割も持たせたかったので、地味めの色を付けてみました。
「First」と「Last」は進行方向に丸みを持たせ、バックカラーには少しグラデーションをかけてあります。これは最近話題のCSS3による新しい機能です。
Firefox、Safari、Chrome の最新バージョンで表示されるはずです。IEは対象外ですが、単純な四角いマス目に表示されるだけで機能的には支障ありません。特に画像ファイルを用意しなくても簡単にそれなりの見せ方が出来るのはいいですね。

CSS3はなかなか素敵な機能が他にもあって、楽しそうですがこの話はまた別の機会に。

【 訂正 】
上記css内で

CSS.wp-pagenavi a:hover {
	background-color: #6898af;
}

部分を

CSS.wp-pagenavi a:hover {
	background: -moz-linear-gradient(top, #777, #444); /* Firefox 用 */
	background: -webkit-gradient(linear, left top, left bottom, from(#777), to(#444)); /* Safari,Google Chrome用 */
}

に訂正しました。(すでに訂正済み) 2010年3月13日 20時35分
a:linkにグラデーションをかけたらa:hoverもグラデーションにしないと変わらないようです。

【 再訂正 】

申し訳ない、再訂正(上記cssは訂正済み) 2010年3月13日 23時00分。
.wp-pagenavi a, .wp-pagenavi a:link { } に「background-color: #999; /* IE 用 */」追加。
.wp-pagenavi a:hover { } に「background-color: #666; /* IE 用 */」追加。

IEは機能的には支障ありませんと書いてしまいましたが、CSS3でグラデーションを使う場合、background部分の表示が消えてました。IE用には何も指定してないことになるから当然ですね。IE用にbackground-colorを指定しておかなくちゃ。
ボックスの角丸の方は、丸くならず四角く表示されますが一応見られる状態にはなっています。

CSS3は試しながら使っているので、まだまだお試し期間というところです。

2009.08.10.

SyntaxHighlighter Evolved を使ってみる

WordPressに便利機能を追加してくれるのがプラグインです。
ちょっと前から使っているのが、ソースコードを見やすくしてくれて行番号もふってくれる「SyntaxHighlighter Evolved」です。
ウェブ上でソースコードを表示するときって、どうやって書くのが正解なのか正直言ってよくわかりません。preタグの中でさらにcode要素としてソースを書くのが一般的なようなので、このサイトでもそれに習っていました。ただソースコード部分は、そのままだとうまく表示されないので、実体参照変換してから貼り付けるとかいろいろと面倒。
そういうのを非常に楽ちんにしてくれるのが、「SyntaxHighlighter Evolved」なわけです。

こんなふうに表示してくれます。

SyntaxHighlighter Evolved のスクリーンショット

SyntaxHighlighter Evolved のスクリーンショット

ステキだ。記入時に実態参照変換も必要ありません。
使い方も簡単。ソースの内容を例えばcssならば、[ css ] cssソース [ /css ] というふうにソース内容に合わせて囲ってあげるだけ。

で、例によってウェブサイトデザインに合わせて外観イメージを少しいじってみます。こんな感じで

<div id="menu">
	<ul>
		<li>Home</li>
		<li>Themes</li>
		<li>About</li>
	</ul>
</div>

「SyntaxHighlighter Evolved」を組み込むと、pluginsフォルダの中のsyntaxhighlighterの中にさらにsyntaxhighlighterがあってその中にstylesフォルダががあります。中には、cssファイルがいろいろはいっています。
今回は、shThemeDefault.cssを元にして改変します。「SyntaxHighlighter Evolved」でDefault設定を使う場合参照しているのは、shCore.cssとshThemeDefault.cssのふたつなので、shThemeDefault.cssの後ろの方にshCore.cssの変更分も合わせて下記のcssを書き加えました。

/*shThemeDefault.css改変部分*/

.syntaxhighlighter
{
	background-color: #e7e5dc !important; /*行番号部分の色*/
}

/* Highlighed line number */
.syntaxhighlighter .line.highlighted .number
{
	background-color: #ffdc40 !important; /*ハイライトしたときの行番号色*/
	color: black !important; /*ハイライトしたときの行番号文字色*/
}

/* Highlighed line */
.syntaxhighlighter .line.highlighted.alt1 .content,
.syntaxhighlighter .line.highlighted.alt2 .content
{
	background-color: #ffdc40 !important; /*ハイライトしたときのコード行色*/
}


/* Add border to the lines */
.syntaxhighlighter .line .content
{
	border-left: 3px solid #fff !important; /*行番号とコードの境界*/
}

/* Second line */
.syntaxhighlighter .line.alt2 .content
{
	background-color: #f6f6f6 !important; /*偶数行の色*/
	border-right: 3px solid #fff !important; /*偶数行の右端にボーダー追加*/
}

.syntaxhighlighter .line .content .block
{
	background: url(wrapping.png) 0 1.5em no-repeat !important; /*改行アイコン 行間調整*/
}

.syntaxhighlighter .toolbar /*ツールバーのバックカラー消去*/
{
	background-color: transparent !important;
	border: none !important;
}

.syntaxhighlighter /*追加項目*/
{
	width: 90% !important;
	overflow: auto !important;
	margin: 18px auto 36px !important;
	border: 1px dotted #959aa1 !important;	
}

.syntaxhighlighter:before /*タイトル部分追加*/
{
	display: block !important;
	content: "Source Code";
	color: #6f6e69 !important;
	background-color: #e7e5dc !important;
	height: 20px !important;
	width: auto !important;
	padding-left: 5px !important;
	border-bottom: 3px solid #fff !important;
}

/*shCore.css改変部分*/

.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span
{
	line-height: 1.5em !important; /*行間調整*/
}

.syntaxhighlighter
{
	padding: 0px !important; /* 外周のpaddingは無し */
}

.syntaxhighlighter .toolbar
{
	padding: 2px 8px 2px 0 !important; /* ツールバー表示調整 */
}

お気に召したら、使ってみてください。

本当は、WordPressサイト管理画面の「SyntaxHighlighter Evolved」設定にある「Additional CSS Class(es)」という項目で、自分で作ったcssを読み込めるのかなと思ったんですが、使い方がよくわかりませんでした。英語のページもあさってみましたが、なにしろ英語は苦手なもんでチンプンカンプン。誰かこの設定の使い方わかった人がいたら、教えてください。
そんなわけで、ここでは単純にshThemeDefault.cssの後ろに書き足したというわけです。

わからないついでに、もうひとつ。
頭のところで「Source Code」と表示するようにしてありますが、できれば「CSS」とか「HTML」とかソースに合わせて表示したいところです。
前のバージョンでは、class名が”html”などとなっていたので、書き分けられましたが「Evolved」ではclass名が”brush: xml;”などとなっています。これってcssであつかうときは、どうしたらいいんだろう?よくわかりません。
「教えて、えらい人!」

詳しい導入方法、使い方などは、下記サイトをご覧になるとわかりやすいと思います。