WordPressのスマホ用ページネーションを作成。>WordPressのスマホ用ページネーションを作成。WordPressこんにちは。記事一覧の下にある次のページや前のページに移動するリンク(ページネーション、ページャー、ページングなどと呼ばれます)が、PCだと横1列で表示できているのですが、スマホだと複数列になってしまってカッコ悪くなっていました。そこで、WordPressをカスタマイズして、スマホで(iPhone5などの横幅が320pxの機種でも)ちゃんと見られるようなページネーションを作ってみましたよ。スマホ用のページネーションWordPressのSTINGER3テーマを使っている当ブログで確認しました。カスタマイズをしているので素の状態とは全然異なっていますが、ページネーションの改造については、テーマに依存せずにできるかと思います。functions.phpをいじるので、不安な方はバックアップを取ってくださいね。修正するファイルは以下になります。functions.php下記の関数pagination_spを追加します。"</div>n";}}cssファイルページネーション用のスタイルを修正します。色などはお好みでいいと思います。クラス名(pagination)を変える場合は、functions.phpのdivタグのクラス名も合わせて修正してください。素のSTINGER3であればsmart.cssです。私の場合はレスポンシブに改造してしまっているので、style.cssを修正しています。both;}テンプレートファイル(archive.php,home.php,index.php)ページネーションを配置したいところ(元々あったところ)を以下のように修正します。ここで、is_mobile()はStinger3の関数で、スマホの時はpagination_spを呼び、PCとタブレットの時はpaginationを呼ぶように分岐させています。※pagination関数は元々STINGER3のfuncitons.phpに定義されている関数です。Stinger以外の場合はWordPress標準でwp_is_mobile()という関数があるので、そちらを使うのが良いかと思います。wp_is_mobile()の場合はタブレットもモバイルに判定されます。Chromeの開発者ツールで見たところですが、こんな感じに表示されました。一列に表示されたほうがいい感じかと思います。できるだけコピペで済むようにしたつもりですが、既存部分との兼ね合いもあると思うので、バックアップを取ってから試してみると良いと思います。この記事をSNSでシェアするツイートシェアLINEカテゴリWordpressタグWordPress前の記事ブログ引越時に記事データも移すべきか?記事データ移動2週間後に思ったこと次の記事まだ共用レンタルサーバで消耗してるの?VPSにしてブログを高速化したいtakkaaaaaの日記トップページへ関連コンテンツこの記事を書いた人いつも読んで頂いてありがとうございます。管理人のtakkaaaaaです。北海道の十勝出身で、今は横浜に住んでいます。職業はシステムエンジニア・プログラマー(大手SIer→自社サービス開発)を10年以上やってます。投資や税金や節約にも関心があり、FP3級と日商簿記3級を取得しました。趣味は音楽鑑賞でaikoのファンクラブにも入ってます。園芸・ガーデニングも好きで、観葉植物やイチゴやバジルなどを育てたりしてます。このブログは2013年から書き始めました。読んでくれた方に少しでもお役に立てればいいなと思って発信しています。2019.11.29~誕生日や紅白出演決定後のライブでお祝いしました投資・株JTから株主優待の品物(サンジェルマンのジャム詰め合わせ)が届きました(2019年6月権利獲得分)。ジャム美味しい!aiko立川談春とaikoのライブ「玉響(たまゆら)」に行ってきました~落語と音楽のコラボに感動!投資・株すかいらーくからも株主優待が来た~!3000円分のカードが嬉しい。~サーモスの保温弁当箱は神!お昼ご飯が楽しみになりますよ。aikoaikoの「湿った夏の始まり」感想~新しさと懐かしさを感じるアルバムで私も湿ってますWordpressカテゴリの他の記事WordPressをバージョン5にアップデートしました。投稿エディタ以外は影響少ない?wordpress4.7.9、PHP7.2の環境でcount関数のエラーが発生。descriptionがない記事が原因か。takkaaaaaの日記このブログについてサイトマップ全記事一覧プライバシーポリシーお問い合わせ。