http://10plate.blog44.fc2.com/blog-entry-233.html

ページ送りナビゲーション

Googleの検索結果ページ末尾には
前へ 1 2 3 4 5 6 7 8 9 10 次へ
というようなページ送りナビゲーションがあります。

空があんなに高いのどんぱんさんが公開されている共有プラグイン「ページナビ」が、この機能を実現してくれています。

このコードを用いてページ送りナビゲーションをテンプレートの任意の箇所に表示させる方法を紹介します。

【参考記事】
空があんなに高い: ページ移動スクリプト
FC2変数を利用しているスクリプトの外部ファイル化 - hatena chips

HTMLの<head>～</head>内に以下を加えてください。
~~または外部ファイル化する場合は、赤い箇所以外を外部ファイルに加えてください。~~
【2009/07/12 追記】
申しわけありません、外部ファイル化はできません。
（スクリプト内でFC2変数を利用しているため）

【2009/09/10 追記】hatena chipsを運営するhatenaさんが、このjavascriptを外部ファイル化する方法を紹介してくれました。
FC2変数を利用しているスクリプトの外部ファイル化
外部化したい場合はhatenaさんの記事か、この記事文末にある追記を参考にしてください。

<script type="text/javascript"><%nextpage_url>';
add = -1;
if (url == '') {
url = '<%prevpage_url>';
add = 1;
}
ext = '.html';
if ((i = url.indexOf('/page-')) != -1) {
c = url.substring(i + 6, url.length - 5);
base = url.substring(0, i + 6);
} else if (url.indexOf('/category') != -1
|| url.indexOf('/blog-date-') != -1) {
i = url.lastIndexOf('-');
c = url.substring(i + 1, url.length - 5);
base = url.substring(0, i + 1);
} else if ((i = url.indexOf('page=')) != -1) {
c = url.substring(i + 5);
base = url.substring(0, i + 5);
ext = '';
} else {
c = 0;
add = 0;
base = '';
ext = '';
}
n = Number(n);
if (n < 1) n = 1;
c = Number(c) + add + 1;
if (c < 1) c = 1;
if (c > n) c = n;
if (w < 0) w = 0;
ww = 2 * w + 1;
for (i = 1; i <= n; i++) {
dot = '<a href=\"' + base + (i - 1) + ext + '\" title=\"' + i + '\">.</a>'
if ((c - w <= i && i <= c + w) || i == 1 || i == n
|| (i == 2 && c - w - 1 == i) || (i == n - 1 && c + w + 1 == i)) {
if (i == c) {
document.write(' <b>' + i + '</b> ');
} else {
document.write(' <a href=\"' + base + (i - 1) + ext + '\">' + i + '</a> ');
}
} else if (i < c - w) {
if (i - 1 <= (c - w - 2) % ww) {
if (i - 1 == Math.floor(((c - w - 2) % ww + 1) / 2))
document.write(dot);
} else if ((c - i) % ww == 0)
document.write(dot);
} else if (i > c + w) {
if (n - i <= (n - c + w) % ww) {
if (n - i == Math.floor(((n - c + w) % ww + 1) / 2))
document.write(dot);
} else if ((i - c) % ww == 0)
document.write(dot);
}
}
}
//--></script>

次にページ送りを表示したい箇所に以下を挿入してください。

<script type="text/javascript"></script>

数値は現在ページの前後にいくつページ送りを表示するか設定するものです。お好みにあわせて数値を変えてください。

挿入するべき箇所はテンプレートによって変わってくると思いますが、当サイトが提供している共有テンプレートであれば、次のような箇所に挿入するのがお勧めです。

【便利ナビに表示したい場合】

～

<a href="<%prevpage_url>">≪前ページ</a>


<script type="text/javascript"></script>


<a href="<%nextpage_url>">次ページ≫</a>

～



～
<a href="<%prev_month_link>">≪前月</a>
|  <%now_year>年<%now_month>月 

<script type="text/javascript"></script>

|
<a href="<%next_month_link>">翌月≫</a>
～



～

<a href="<%prevpage_url>">≪前ページ</a>


<script type="text/javascript"></script>


<a href="<%nextpage_url>">次ページ≫</a>

～

【ページ末尾に表示したい場合】

<p class="page_navi">
<a href="<%preventry_url>" title="前ページへ戻る">≪<%preventry_title></a> 
| <a href="<%url>" title="<%blog_name>">HOME</a> |
<a href="<%nextentry_url>" title="次ページへ進む"><%nextentry_title>≫</a>
</p>





<p class="page_navi">
<a href="<%prevpage_url>" title="前ページへ戻る">≪前ページ</a> 
| ~~<a href="<%url>" title="<%blog_name>">HOME</a>~~

<script type="text/javascript"></script>

|
<a href="<%nextpage_url>" title="次ページへ進む">次ページ≫</a>
</p>

これでGoogleのようなページ送りナビゲーションが表示できます。

ただし環境設定の変更→ブログの設定→拡張表示設定の
表示単位が「日付単位」だと機能しません。「記事単位」である必要があります。
日付単位で記事を表示するカスタマイズとは重複できませんのでご了承ください。

【2009/09/10 追記】このjavascriptを外部ファイル化したい場合は、スクリプトを一部変更する必要があります。

【変更前】

if ((n = '<%total_pages>') == '')
return;
url = '<%nextpage_url>';
add = -1;
if (url == '') {
url = '<%prevpage_url>';
add = 1;
}

↓
【変更後】

if (n == '')
return;
url = nextpageurl;
add = -1;
if (url == '') {
url = prevpageurl;
add = 1;
}

変更したスクリプトの行頭( <script type="text/javascript"></script> ) を除いたものを外部ファイルに加え、HTMLの<head>～</head>内に、次の記述を加えてください。

<script type="text/javascript"><%prevpage_url>';
nextpageurl = '<%nextpage_url>';
n = '<%total_pages>';
//--></script>

これで外部ファイル化することが出来ます。
hatenaさん、ありがとうございました。 m(__)m

関連記事

[ 2009/07/09 01:08 ] カスタマイズ共通カスタマイズ | TB(3) | CM(18)