ページネーションとは
ページネーション (ページング、ページ分割、ページ移動リンク) は、分割した長いページを「1」「2」「3」...のページ番号で相互リンクするものです。
このページでは「すぐ使えるCMS」の全一覧に JavaScript を利用してページネーションを表示する方法をご紹介します。
このページで紹介する方法は jQuery は不要です。
ページネーション表示対応製品
Ver. 4.8 以上と、「大容量版」と表示のある全ての製品でページネーションの表示が可能です。
製品によっては初期設定で既にテンプレートに含まれている場合もあります。全一覧の上下のどちらかにありますので、編集を始める前に確認して下さい。
ページネーションの表示設定方法
準備：「すぐ使えるCMS」の設置
ダウンロードと設置
使いたい製品をダウンロードしてサーバに設置して下さい。
テスト登録
設置がうまくいったら10件以上テスト登録して下さい。「全一覧」が分割されて、初期設定の「前」「次」のリンクが表示されるようになります。
templates/article/article_list.html の編集
ページネーションの設定のために、全一覧 (目次) 用のテンプレート templates/article/article_list.html を編集します。編集のポイントは以下の2点です。
- ページネーション用の CSS スタイル設定
- ページネーション表示用の JavaScript 追加
1. ページネーション用の CSS スタイル設定
templates/article/article_list.html にCSS でスタイルを設定します。このファイルを直接編集する場合は、<head> と </head> の間に下記例の青字部分を追加して下さい。外部スタイルシートファイルを使用している場合はそちらにルールの定義だけ追加して下さい。
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>記事一覧</title>
<link rel="alternate" type="application/rss+xml" title="記事一覧" href="new.xml">
<style type="text/css">
/* ページネーションリンクをリストで構成。
リストのマークを消す設定、左の空間を消す設定。 */
.pagination ul {
list-style-type: none;
padding-left: 0;
}
/* 各ページリンクを横並べにし、間隔を開ける */
.pagination li {
float: left;
margin-right: 6px;
}
/* 「前へ」のリンクが「すぐ使えるCMS」の機能で削除された時に、幅を保つ */
.keepwidth {
width: 24px;
height: 24px;
}
/* 各ページへのリンクタグに幅と囲みを設定する。こうする事により、「前へ」「次へ」が
「すぐ使えるCMS」の機能で削除された時に、枠も消える。 (li に付けると残ってしまう。) */
.pagination a {
display: block;
width: 24px;
height: 24px;
border: 1px gray solid;
text-decoration: none;
}
/* ページへのリンクにマウスオーバーした時に色を変える。
フォントの変更等を足したいときはここに足して下さい。 */
.pagination a:hover {
background-color: #efefef;
}
/* 現在いるページ番号の表示設定 */
.pagination .active {
font-weight: bold;
}
/* 枠内でスペースを取るためのラッパー。
フォントの指定などもここに設定。 */
.pagination a span {
font-size: 18px;
display: block;
width: 1.3em;
height: 1em;
margin: 3px 6px;
}
</style>
</head>2. ページネーション表示用の JavaScript 追加
次に、ページネーション表示用の JavaScript を追加します。<body> と </body> の間でページネーションのリンクを表示したい位置に下記のコード全てを追加して下さい。
<div class="pagination">
<ul>
<li class="keepwidth"><a href="%_page_prev_%"><span>«</span></a></li>
<script type="text/javascript">
/* ページごとの件数：環境変数 $conf{index_list_no} で設定した値を設定して下さい。 */
var index_list_no = 10;
/* 書き出すコード；CSSの設定と組み合わせて変更して下さい。 */
/* 他のページへのリンク */
/* リンク先のページ名は1ページ目ファイル名を指定、ページ番号の部分は NU と記載して下さい。 */
var pagelink = '<li><a href="index.html"><span>NU</span></a></li>';
/* 現在のページの表示 */
var pagelink_active = '<li class="active"><a href="javascript:void(0);"><span>NU</span></a></li>';
var total = %_total_%;
var thispage = %_min_%;
for (i=0; i<total/index_list_no; i++){
var first = i*index_list_no+1;
if (first == thispage){
document.write(pagelink_active.replace(/NU/g, i+1));
} else {
var link = pagelink.replace(/NU/g, i+1);
if (i!=0){
document.write(link.replace(/\.html/g, '_'+i+'.html'));
} else {
document.write(link);
}
}
}
</script>
<li><a href="%_page_next_%"><span>»</span></a></li>
</ul>
</div>
<div style="clear: both"></div>アップロード
変更した以下のファイルをサーバに上書きアップロードして下さい。
- templates/article/article_list.html
再構築
管理画面の一覧から「再構築 (テンプレート変更反映) 」ボタンを押して下さい。
確認
全一覧を表示すると、ページ番号のリンクが表示されているはずです。
これで、基本的な設定は完了です。
デザインの変更や件数の変更をしたい場合は、引き続き以下の設定を行って下さい。
ページネーションの件数の変更
ページネーションの件数を変更する場合は、以下の2点をそれぞれ下記例のように変更して下さい。
- admin/admin.cgi 中の環境変数 $conf{index_list_no}
- templates/article/article_list.html の JavaScript 内の設定
I. admin/admin.cgi 中のページネーションの件数設定
admin/admin.cgi を開いて下記例の青字部分を1ページに表示したい件数に設定して下さい。
#--------------------------------------------------------[line 170]--
# 一覧に表示する件数
#--------------------------------------------------------------------
# 全一覧および管理画面の記事一覧に表示する記事件数を設定して下さい。
# これより多い登録があるとページ分割されます。
# 0を指定すると1ページに全件を表示します。
$conf{index_list_no} = 10;II. templates/article/article_list.html 中のページネーションの件数設定
同じ希望件数を、先ほど templates/article/article_list.html 追加した JavaScript 中の下記の部分にも設定して下さい (青字部分)。
/* ページごとの件数：環境変数 $conf{index_list_no} で設定した値を設定して下さい。 */
var index_list_no = 10;変更の反映
変更した下記のファイルをサーバに上書きアップロードの上、「再構築」を行って下さい。
- admin/admin.cgi
- templates/article/article_list.html
ページネーションのデザイン変更
CSSスタイル調整
ページネーションの表示デザイン (フォントサイズ、色 等々) を変更するには、最初に追加した CSS スタイルシートの設定を変更して下さい。
ページネーションのタグ変更
CSSの変更だけではデザイン変更に対応できない場合は、HTMLタグを書き換えることができます。
ページネーション部分の HTML タグ自体を変更したい場合は、先ほど templates/article/article_list.html に追加した JavaScript 中の下記の青字の部分を変更して下さい。「NU」となっている所には、ページ番号の数字が入ります。
/* 書き出すコード；CSSの設定と組み合わせて変更して下さい。 */
/* 他のページへのリンク */
/* リンク先のページ名は1ページ目ファイル名を指定、
ページ番号の部分は NU と記載して下さい。 */
var pagelink = '<li><a href="index.html"><span>NU</span></a></li>';
/* 現在のページの表示 */
var pagelink_active = '<li class="active"><a href="javascript:void(0);"><span>NU</span></a></li>';参考情報：ページネーションタグとの対応
上記の設定だと、以下のように HTMLタグに反映されます (2ページ目を表示した場合)。
<li><a href="index.html"><span>1</span></a></li>
<li class="active"><a href="javascript:void(0);"><span>2</span></a></li>
<li><a href="index_2.html"><span>3</span></a></li>
変更の反映
設定を変更したらサーバに上書きアップロードの上、「再構築」を行って下さい。
全一覧のファイル名を変更した場合
全一覧のファイル名を変更した場合は、このままではうまく動作しません。templates/article/article_list.html に追加した JavaScript 中の下記の青字の部分を変更後のファイル名に変更して下さい。
/* 他のページへのリンク */
/* リンク先のページ名は1ページ目ファイル名を指定、
ページ番号の部分は NU と記載して下さい。 */
var pagelink = '<li><a href="index.html"><span>NU</span></a></li>';変更の反映
設定を変更したらサーバに上書きアップロードの上、「再構築」を行って下さい。