プレイ無料!ブラウザで遊べるHTML5ゲームサイト!

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

2017/04/19

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

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

このエントリーをはてなブックマークに追加

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

今日は記事一覧ページ表示数を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文などを使ったほうがスマートですが、
まだ当サイトの記事数が少ないのと、説明しづらい点から全部記述してます(言い訳)


感想

結構良い感じに動作しているように思えます。というかあって当たり前・動作して当たり前の機能と言われればその通りなのですが、、、
前向きに考えればGoogleアドセンスの承認も降りたので、この辺の機能が充実するのは良いことだと言い聞かせてます!

次は記事ページに「次の記事」「前の記事」ボタンを追加します(笑)
こちらも何故無いレベルの機能だと思います。ハイ。


感想・リクエストなどは公式Twitterアカウント(@santmove_com)まで是非ご連絡よろしくお願いいたします!
また、ゲームの感想なども励みとなりますのでよろしくお願いいたします!

ではまた!

santmove.

矢印Fever

矢印Fever

ノリノリでフリックしてフロアを沸かそう!手持ちの音楽を聴きながらのプレイがオススメ!


当サイトはブラウザで遊べるゲームサイトです。

最新のゲームです!
Rotate Number Panels

Rotate Number Panels

ロテパネって呼んでね!キレイなパネルをクルクル回して数字を並べよう!相当頭をつかうよ!

人気のゲームです!
避けて食べてペンギンタワー

避けて食べてペンギンタワー

ペンギンだって暖を取りたい!氷を避けて登って、アツアツ料理を食べよう!

よかったら遊んでいって頂けると幸いです!面白かったら是非シェアしてください!

また以下のリンクよりお買い物頂けるとサイト運営の助けとなりますので、もしよろしければ是非よろしくお願いいたします!

楽天市場

amazon

良ければ是非いいね・シェアしてください!

このエントリーをはてなブックマークに追加

この記事のコメント

この記事にはまだコメントがありません。
はじめてコメントしてみませんか?


ログインするとコメント出来ます!
ログイン
無料アカウント作成

ログインしていません!

アカウントを作るとスコアの保存・閲覧が可能です!(無料です)
アカウントを作る!

サイト運営者

運営:サントムーブ

案件の依頼や問い合わせなどはコチラ!

メンバー

santmove.

プログラマー(代表)

最近更新されたゲーム

夜景と炒飯

2019/10/15 更新

リーマン登山

2019/09/02 更新

うなかぞえ

2019/07/17 更新

新着公開ゲーム

Rotate Number Panels

2019/03/10 公開

記憶丼

2019/02/24 公開

スシバタケ

2019/02/17 公開