TOP> 記事一覧> 記事一覧ページにページ送り機能を追加!【サイト改修】
最近さわレシピの記事ばかりでしたが、こっそりサイト改修もしているんです!
ゲームはどうした?と言われそうですが、ちゃんと作っていますよ~!
今日は記事一覧ページの表示数を10件ずつにする改修を行いました。
というより今までは更新したら更新しただけ重くなる仕様でした。。これで安心して徒然な更新が出来ます!
タグ検索後も含め、記事数が10件以上の時にページ送りをすることが出来るようになりました。
動的にボタンを出し分ける・要素の色をサイトに合わせ変更した以外、
html,cssはid,class名を含め以下のサイトの物をそのまま使用させていただいております。
ページ送りのサンプル4種+2(CSS HappyLife様)
今回もタグ検索の際と同様URLパラメータとしてリンクの後ろに付与する形にします。
何も付与されていない場合は1ページ目(値は0)を表示するように処理します。
現在の条件で記事が何件存在するかを確認します。
一回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に応じた記事数のみ取得することが出来ます。
参考にしたサイト:
上の図の通り、大きく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 . "
もう前後のボタンの数などを増やしたい時はfor文などを使ったほうがスマートですが、
まだ当サイトの記事数が少ないのと、説明しづらい点から全部記述してます(言い訳)
結構良い感じに動作しているように思えます。というかあって当たり前・動作して当たり前の機能と言われればその通りなのですが、、、
前向きに考えればGoogleアドセンスの承認も降りたので、この辺の機能が充実するのは良いことだと言い聞かせてます!
次は記事ページに「次の記事」「前の記事」ボタンを追加します(笑)
こちらも何故無いレベルの機能だと思います。ハイ。
感想・リクエストなどは公式Twitterアカウント(@santmove_com)まで是非ご連絡よろしくお願いいたします!
また、ゲームの感想なども励みとなりますのでよろしくお願いいたします!
ではまた!
santmove.
当サイトはブラウザで遊べるゲームサイトです。
最新のゲームです!春夏秋冬のパネルを1列に揃えて連鎖を狙おう!
ペンギンだって暖を取りたい!氷を避けて登って、アツアツ料理を食べよう!
よかったら遊んでいって頂けると幸いです!面白かったら是非シェアしてください!
また以下のリンクよりお買い物頂けるとサイト運営の助けとなりますので、もしよろしければ是非よろしくお願いいたします!
楽天市場
amazon
この記事にはまだコメントがありません。
はじめてコメントしてみませんか?
ログインするとコメント出来ます!
ログイン
無料アカウント作成