書きたい記事を書きたいように書くFreeブログ

かきてぃーのプロフィールはこちらをクリック!

【AFFINGER4-カスタマイズ】ページネーションをレスポンシブかつオシャレに変更する

 
  2018/06/24
 
スポンサーリンク
スポンサーリンク
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら

本日の記事は今までで最も短い記事になると思われます。。

カスタマイズするのは、1ページ…2ページ…と画面遷移などで使うページネーション。

デフォルトは何とも地味な作りになっているので、サイトデザインに合わせてオシャレにしたいと思います。

かきてぃー
こんな感じ。

更に、タブレットやスマホ、画面を小さくした際に動的に対応する様レスポンシブにしていきます。

それでは開始!

カスタマイズするのは2ファイルのみ

  • 「functions.php」
  • 「st-pagenavi.php」

の2ファイルのみカスタマイズしていきます。

基本的には全てコピペでOKです。

デザインはCSSで自分好みにカスタマイズして頂ければOK!

※全て子テーマにファイルを作成し、カスタマイズして下さい。

「functions.php」にページネーションを追加

子テーマ下にあるfunctions.phpに追加して下さい。

ページネーション用のfunctionを作成します。

かきてぃー
そのままコピペでOKです。

これで、ページネーションの前準備は完了しました。後は出力だけですね!

「st-pagenavi.php」は丸ごと削除…コピペ

トップページの「home.php」を確認すると、

とページネーション用のテンプレートを取得しているのが確認できます。

よって修正対象は「st-pagenavi.php」となりますね。

「st-pagenavi.php」には30行ぐらいのロジックが書いてありますが、全て削除してOKです。

削除出来たら、

上記をそのままコピペして下さい。

これでページネーションが表示されたはず。

このままだと、デザインがかなり壊れているのでCSSで整えます。

CSSでデザインをカスタマイズ

デザインもコピペでOKです。

このCSSはレスポンシブにも対応しております。

  • 24、129行目…文字色の設定(デフォルト白)
  • 25行目…各ページの背景色(デフォルトは紺)
  • 28行目…マウスオンした時の背景色(デフォルトは薄青緑)
  • 66行目…現在のページを示す背景色(デフォルトは薄青緑)
  • 130行目…現在のページを示す囲いの背景色(デフォルトは紺)

となっているので、自分のホームページに合わせて変更して下さい。

http://www5.plala.or.jp/vaio0630/hp/c_code.htm

レスポンシブの動作

それぞれ以下のように表示されます。

PC

横幅のサイズによって表示されるページ数が異なります。

タブレット

「1ページ目or最終ページ」のリンクがなくなります。

スマホ

基本は「次のページor前ページ」「1ページ目or最終ページ」の表示となります。

レスポンシブの設定はCSSの81~126行目で設定出来るので、縮小する際の基準を変更したい場合は併せてカスタマイズしてみて下さい。

スポンサーリンク

完成系

functions.php

st-pagenavi.php
CSS
かきてぃー
今回は、詳細な説明をちょっと省きました。ページネーションは多く記事がありますし、そこまで応用は利かないような気もしたので…。要望があれば解説致しますのでコメントやメールにてご連絡下さい^^
かきてぃー
それでは、本日もお疲れ様でした!
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら
スポンサーリンク











コメントはこちらです

Copyright© 書きタレ , 2013 ~ 2017 All Rights Reserved.