「WordPress用ページャージェネレーター」は、見栄えの良いページャーのコードを生成してくれるジェネレーターです。
*WordPress用ページャージェネレーター|ちょっと便利なツール・ジェネレーター置き場
「ページャー」とは何ぞや?
「ページネーション」とも言いますが、要はこのパーツのことです↓
![](https://souken-blog.com/wp-content/uploads/2018/03/sblog20180327n.png)
ページャーが思うようなデザインにならずに四苦八苦しているWEB制作者にとっては、重宝すると思います。
ちなみに、公式最新テーマ「Twenty Seventeen」のページャーは、
![](https://souken-blog.com/wp-content/uploads/2018/03/sblog20180327m.png)
ちょっとシンプルというか、素っ気ないですね。
もっとデザイン性のあるものに取り替えたくなります。
今回は、この「ページャージェネレーター」のご紹介です。
ページャーの作成
まず、「WordPress用ページャージェネレーター」のページを開きます。
パッと見で、どの設定がどこにあるのか一目瞭然ですが、
![](https://souken-blog.com/wp-content/uploads/2018/03/sblog20180327g-775x1024.png)
上半分の緑枠の設定をいじってページャーを作成します。
形状・文字色・背景色・余白・間隔、
見たままで直感的に操作できるので楽ちんです。
それが中段のプレビュー欄にリアルタイムで反映されます。
そして下段に
「PHPのコード」
「CSSのコード」
この2つが表示されます。
PHPのコードは、
上が「ページャーを配置する場所に貼り付けるコード」
下が「functions.phpに貼り付けるコード」
となります。
![](https://souken-blog.com/wp-content/uploads/2018/03/sblog20180327h.png)
ちなみに、これらのコードを見やすくしたければ、コード欄上の
![](https://souken-blog.com/wp-content/uploads/2018/03/sblog20180327i.png)
「PHPを整形する」「CSSを整形する」にチェックをいれてください。
実際に貼ってみます
では、実際にカスタマイズしたコードをWordPressに貼ってみましょう。
まず、青系・四角形状・中央寄せのページャーを作ってみました。
![](https://souken-blog.com/wp-content/uploads/2018/03/sblog20180327k.png)
そして吐き出されたコードを、WordPressのページ用ファイル、functions.php、style.cssにそれぞれ貼り付けます。
で、こんな感じで表示されました。
![](https://souken-blog.com/wp-content/uploads/2018/03/sblog20180327l.png)
![](https://souken-blog.com/wp-content/uploads/2016/07/sblog-prf004.png)