2012
12
04
WordPressのページナビゲーションをPC版とスマホ版で最適化したい

昨日、WordPressプラグインWP-PageNaviをスマホで押しやすいレイアウトにという記事を書いたばかりなのですが、良いカタチを目指してもうちょっとテコ入れ…。


前後ページへのリンクを分かりやすく

前のページ・次のページへのリンク、当初は「«」「»」で表していたんですが、これって、どうなの…?という気持ちがむくむくと…。やっぱりちゃんと文字で書いたほうがいいんじゃないのかな、と感じました。

WP-PageNaviだと一番外に実装できない

「前のページ」「…」「3」「4」「5」「6」「7」「…」「次のページ」みたいな形の方が分かりやすいんじゃないかなと思うんですが、今のままだと実装できないので、プラグインなしでやってみることにしました。

スマホ版は、そんなにたくさんいらないんじゃ…?

「最初」「前のページ」「現在」「次のページ」「最後」くらいが好き、というお話をtwitterで伺って、なるほどなぁと思いました。確かにスマホで2段になるほどのページネーション、必要かな?ただでさえ押しやすいようにボタン大きいし。

単純な私なので、これを目指して実装してみることにしましたw この場合は前後ページのリンクが一番外側じゃないので、今のままのWP-PageNaviでいけそうです。

PC版

121204-1

このような形にしてみました。

functions.php

index.phpの該当部分

style.css

角丸・シャドウはモダンブラウザのみの実装です!

モバイル版

こちらは今まで通りWP-PageNaviを使います。

121204-2

プラグイン設定はこんな感じ。

121204-3

表示ページ数はひとつだけ。

121204-4

最終的にはこのような形に。

index.phpの該当部分

style.css

いかがでしょうか。こういうのも好みがあるので正解はないと思うのですが…しばらくはこんな感じにしてみたいと思います!ご意見ありましたらお願いしますー!

追記:プラグイン無しでモバイル版

こちらをベースに見た目が上記画像と同じになるようにカスタマイズさせてもらって、現在はプラグイン無しで運用しています。2014/7/14追記です。

functions.php

index.phpの該当部分

PC版と同じ関数名にしてみました。

style.css

CSSはほとんど一緒ですが、一応。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2012/12/04
更新日:2014/07/14


コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top