WordPress:ページ送り(ページネーション)をプラグイン無しで設置【スマホも1行表示】

   

eye_20160810

ページ送り(ページネーション)は記事一覧などを複数のページに分割して、情報を見やすくするためのものですね。
WordPressではページネーションを実装するプラグインもたくさんありますし、プラグインを使わない方法も色々と紹介されています。

当ブログで使用しているテーマ「STINGER7」でもページネーションは表示されるんですけど、デフォルトだとデザインは少し物足りない感じ・・・

ということで自分好みのページネーションを設置してみたので、やり方をご紹介します。
スマホでも改行しないで1行で表示するようにしてみました。

「STINGER7」以外でもそのまま使えますので参考になれば幸いです。

それじゃあいってみよ!

スポンサーリンク

functions.phpに追加

まずは以下のコードを「functions.php」に追加してください↓

こちらで紹介されていたコードをカスタマイズしました↓

How to Add WordPress Pagination without a Plugin [Enhanced]
The default WordPress pagination only comes with the “Older posts” and “Newer posts” links at the bottom of the page when you want to navigate to the older entries. This […]

ページネーションを表示する

次にページネーションを表示したい場所に下記コードを挿入します↓

STINGER7をお使いの方は、home.php、archive.php、category.php、search.phpにある以下のコードを先ほどのコードに置き換えてください。

CSSで装飾する

仕上げにCSSで見た目を調整します。

四角タイプ

まずは通常の四角タイプです↓

スマホでも1行で収まるように、PrevとかNextみたいな文字は無くしてシンプルにしています。
あとスマホサイズでは文字も少し小さめです。

上記CSSだとこんな感じ↓

20160810a

STINGER7のデフォルトのやつに比べたらだいぶ良い感じ♪

丸型タイプ

続きまして丸型にしてみたのがこちら↓

こんな感じになります↓

20160810b

ちょっとオシャレな感じになったと思いません?笑

背景や文字の色など、サイトに合わせてお好みで変更してみてください。

まとめ

ということで今回はページ送り(ページネーション)の設置方法をご紹介しました!
細かい部分ですが、こういうところで他のブログと差が付きますからね。
編集するファイルはちょっと多いですが挑戦してみてください。

ではまた〜♪

スポンサーリンク

この記事をシェアする!

 - WordPress