記事一覧ページにページ送り機能を追加！【サイト改修】

タグ：技術サイト改修ブログサイト作成

最近さわレシピの記事ばかりでしたが、こっそりサイト改修もしているんです！
ゲームはどうした？と言われそうですが、ちゃんと作っていますよ～！

今日は記事一覧ページの表示数を10件ずつにする改修を行いました。
というより今までは更新したら更新しただけ重くなる仕様でした。。これで安心して徒然な更新が出来ます！

出来ること

タグ検索後も含め、記事数が10件以上の時にページ送りをすることが出来るようになりました。

実装手順

0.ページ送りボタン部分の仕組み

動的にボタンを出し分ける・要素の色をサイトに合わせ変更した以外、
html,cssはid,class名を含め以下のサイトの物をそのまま使用させていただいております。

参考及び引用元リンク

ページ送りのサンプル4種+2(CSS HappyLife様)

1.記事一覧ページにページIDを受け渡す

今回もタグ検索の際と同様URLパラメータとしてリンクの後ろに付与する形にします。
何も付与されていない場合は1ページ目(値は0)を表示するように処理します。

2.SQL文に条件を追加する

現在の条件で記事が何件存在するかを確認します。
一回SQL文を実行した結果を取得するのがシンプルかとは思います(記事数が非常に多い場合は例外処理をするのが良いかと思います)

LIMIT 【開始位置】,【行数】;
を追加すると取得したテーブルの【開始位置】から【行数】個のデータを取得できます。
この構文を用いて、既存のSQL文に以下のように条件を追加します。


//1ページに表示する件数
$page_amount = 10;
//表示するページID(1ページ目は0とする)
$pageindex = $_GET["page"] - 0;

//$sqlには「検索条件を満たした記事を全て取得」するSQL文が入っているとする
$sql = $sql . " LIMIT " . ($page_amount * $pageindex) . ", " . $page_amount;

これでページIDに応じた記事数のみ取得することが出来ます。

参考にしたサイト：

取得するデータの数と開始位置を指定(DBOnline様)

3.記事の総数とページIDに応じたボタンを動的に出力する

上の図の通り、大きく3段階にわけてボタンを追加していきます。
1.現在より前にページがある場合のボタン
2.現在のページを表すボタン(機能なし)
3.現在より後ろにページがある場合のボタン


//どのボタンを表示するか
$info_page_button = "";//この変数にボタン部分のhtmlを格納する
$pageurl = $baseurl . "page=";//リンク先用【例】
$lastindex = ceil(($total_info_amount / $page_amount) - 1);//現在の検索条件での最終ページのページID
//前ページがある時
if($pageindex > 0) {
	////前ボタンと1ボタンは確定で配置
	//前ボタン
	$info_page_button = $info_page_button . "<li><a href=\"" . $pageurl . ($pageindex - 1) ."\">前</a></li>";
	//1ボタン
	$info_page_button = $info_page_button . "<li><a href=\"" . $pageurl . "0\">1</a></li>";
	
	//3つ前のページが最初のページではない場合は…で表示し以前は省略する
	if($pageindex - 3 > 0) {
		$info_page_button = $info_page_button . "<li><a href=\"" . $pageurl . ($pageindex - 3) . "\">…</a></li>";
	}
	//2つ前のページが最初のページではない場合
	if($pageindex - 2 > 0) {
		$info_page_button = $info_page_button . "<li><a href=\"" . $pageurl . ($pageindex - 2) . "\">" . ($pageindex - 1) . "</a></li>";
	}
	//1つ前のページが最初のページではない場合
	if($pageindex - 1 > 0) {
		$info_page_button = $info_page_button . "<li><a href=\"" . $pageurl . ($pageindex - 1) . "\">" . ($pageindex) . "</a></li>";
	}
}

//現在のページ
$info_page_button = $info_page_button . "<li><span><b>" . ($pageindex + 1) . "</b></span></li>";

//次ページがある時
if($pageindex < $lastindex) {
	//1つ次のページが最後のページではない場合
	if($pageindex + 1 < $lastindex) {
		$info_page_button = $info_page_button . "<li><a href=\"" . $pageurl . ($pageindex + 1) . "\">" . ($pageindex + 2) . "</a></li>";
	}
	//2つ次のページが最後のページではない場合
	if($pageindex + 2 < $lastindex) {
		$info_page_button = $info_page_button . "<li><a href=\"" . $pageurl . ($pageindex + 2) . "\">" . ($pageindex + 3) . "</a></li>";
	}
	//3つ次のページが最後のページではない場合は…で表示し以降は省略する
	if($pageindex + 3 < $lastindex) {
		$info_page_button = $info_page_button . "<li><a href=\"" . $pageurl . ($pageindex + 3) . "\">…</a></li>";
	}
	
	////最終ページボタンと次ボタンは確定で配置
	//最終ページボタン
	$info_page_button = $info_page_button . "<li><a href=\"" . $pageurl . $lastindex . "\">" . ($lastindex + 1) . "</a></li>";
	//次ボタン
	$info_page_button = $info_page_button . "<li><a href=\"" . $pageurl . ($pageindex + 1) ."\">次</a></li>";
}

//実際のページの該当箇所を$info_page_buttonに差し替える
$tmpl = str_replace("{info_page_button}",$info_page_button,$tmpl);

もう前後のボタンの数などを増やしたい時はfor文などを使ったほうがスマートですが、
まだ当サイトの記事数が少ないのと、説明しづらい点から全部記述してます(言い訳)