これ簡単!プラグインを使わずページネーションを実装するコード
  • これ簡単!プラグインを使わずページネーションを実装するコード
  • 記事公開:2015/10/20
  • 最終更新:2015/10/21

これ簡単!プラグインを使わずページネーションを実装するコード

WordPressサイトにプラグインを使わずページネーションを実装するコードをご紹介します。プラグインを使わずにページネーションを設置したい方は参考にしてください。1分でページネーションを設置できます。

この記事は約 5 分で読めます。

Wordpressのカスタマイズなら全てお任せ!

http://takayakondo.com/

WordpressのカスタマイズならWordpressカスタマイザーにお任せください!
毎月5件の限定受注。お見積もりはいつでも無料です。

このサイトで使用しているページネーションのコードを公開します。

WordPressで構築したサイトにページネーションを設置しようとすると、ほとんどの方がプラグインの【WP-PageNavi】などに行き着くかと思います。

プラグインを使っても構わないのですが、個人的にプラグインの数は減らしたほうが良いと言う考え方なので、私の構築するサイトではプラグインを使わずにページネーションを設置しています。

基本的なページネーションでよければ、プラグインを使わないでもカコイイものを実装することが可能ですよ。

このサイトで使用しているページネーションのコードはコレだ!

まず、ページネーションを設置したい箇所に設置するコードをご紹介します。
以下がそのコード。

<div id="pagination">
<?php global $wp_rewrite;
$paginate_base = get_pagenum_link(1);
if (strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()) {
$paginate_format = '';
$paginate_base = add_query_arg('paged', '%#%');
} else {
$paginate_format = (substr($paginate_base, -1 ,1) == '/' ? '' : '/') .
user_trailingslashit('page/%#%/', 'paged');;
$paginate_base .= '%_%';
}
echo paginate_links( array(
'base' => $paginate_base,
'format' => $paginate_format,
'total' => $wp_query->max_num_pages,
'mid_size' => 5,
'current' => ($paged ? $paged : 1),
)); ?>
</div>

次に上記のコードを装飾しているのが以下のコード。
CSSファイルに記述しています。

#pagination {
color: #2583ad;
margin: 30px auto;
line-height:2em;
}

a.page-numbers, #pagination .current {
color: #00019b;
padding: 10px;
border:solid 1px #ccc;
text-decoration:none;
font-size:smaller;
background:white;
}

a.page-numbers:hover {
color:white;
background: #328ab2;
}

#pagination .current {
color: white;
background: #328ab2;
border: #328ab2;
font-weight:bold:
}

.next,
.prev {
border:0 none;
background:transparent;
font-weight:bold;
}

以上のコードをコピペするだけで、あなたのサイトにもプラグインを使わずにページネーションを設置することができます。

もしよろしければ、参考にしてください。

まとめ

プラグインを使わずページネーションを実装するコードをご紹介しました。

ページネーションはブログ形式のサイトには必須の機能です。
プラグインを使わないでも実装可能ですのでぜひ試してみてください。

私のサイトで利用しているコードは、大分以前にどこかのサイトにあったコードを参考にさせていただいております。参考記事としてご紹介したかったのですが、参考元の記事が分かりませんでした。

もしも、このコンテンツでご紹介しているコードの参照元が分かりましたらご一報ください。参照元として紹介させていただきます。

シェアしていただきありがとうございます。

この記事が気に入ったら【いいね】しよう!

Wordpressサイトのカスタマイズで
お困りではありませんか?

あなたのWordpressサイトを、ご希望に沿ってカスタマイズいたします。
次に該当する方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしたいが、自分でカスタマイズする暇がない。カスタマイズが得意な人に丸投げしたい。
  • Wordpressサイトをカスタマイズしてみたが、上手くカスタマイズできなかった。カスタマイズ経験が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしてみたら、バグが発生して困っている。正常に動作するように正しくカスタマイズしてほしい。

一つでも該当する方は、以下のリンクからチェックしてみてください。

詳細を確認する

著者:とあるWEBディレクター

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に7年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • WordPressの投稿や固定ページにYOUTUBE動画を設置する方法

    WordPressの記事にYOUTUBE動画を設置する最も簡単な方法をご紹介します。コピペだけで設置できる方法なので簡単ですよ!参考にしてください。 記事を読む

  • WordPressで予約投稿を設定する方法

    WordPress には、作成した記事を、あらかじめ予約した日時に自動で投稿できる機能が標準で装備されています。暇なときなどに記事を書き溜めておき、毎日1記事ずつ公開するなど、運営方法の幅が広がりますね。今回は、WordPress の記事を予約した日時に自動投稿する方法をご紹介します。 記事を読む

  • 「Contact Form 7」の入力欄に入力例を表示させる方法

    【Contact Form 7】の入力欄に入力例を表示させる方法をご紹介します。メールフォームの入力欄に薄く入力例が表示されるのがありますが、Contact Form 7でも同じことができます。手順を知りたい方は続きをお読みください。 記事を読む

  • WordPressのfunctions.phpがある場所

    WordPressのfunctions.phpがある場所をご存知ですか?WordPressに触れたばかりで知らなという方は、絶対に覚えておいた方が良い知識です。3分間だけ時間を確保して、このコンテンツに目を通してください。functions.phpの場所を理解することが出来ます。 記事を読む

  • 特定記事のアイキャッチを表示する方法

    特定記事のアイキャッチを取得する方法をご紹介します。とある仕事で特定記事のアイキャッチを表示させる必要があり、調べてみたのでやりかたをまとめてみました。誰かの参考になるとうれしいです。 記事を読む

コメントを残す


(必須)

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)